Mobil verbessert

This commit is contained in:
Christine Slotty 2020-06-22 13:51:14 +02:00
parent 80b368fe3b
commit 53c865e474
9 changed files with 106 additions and 4 deletions

View File

@ -12,7 +12,10 @@ $this->loadHelper('Form', [
'templates' => 'horizontal_form',
]);
?>
<?= $this->Html->css(['loginServer/style.css']) ?>
<?= $this->Html->css([
'loginServer/style.css',
'rippleUI/style.css'
]) ?>
<style type="text/css">
td.actions {
padding: 10px 30px;
@ -56,3 +59,6 @@ $this->loadHelper('Form', [
</script>
<?= $this->Html->script('userSearch') ?>
<!-- npm run build im mithril client! -->
<!-- keybase://team/gradido/gradido_mithril_user_search -->

View File

@ -50,6 +50,9 @@
top: -300px;
right: 0px;
}
.header-notify {
grid-area: header;
}
}
.content {
grid-area: center;
@ -353,6 +356,14 @@ and open the template in the editor.
color: #047006;
}
}
@media screen and (max-width:767px) {
.flash-messages {
width: 90%;
top: 0;
left: 0;
text-align: center;
}
}
/* ============================================================
Navigation
@ -837,6 +848,12 @@ and open the template in the editor.
}
*/
}
@media screen and (max-width:767px) {
.header-notify {
justify-content: flex-end;
margin-right: 70px;
}
}
/* ============================================================
Screen styles for center part.
@ -985,7 +1002,7 @@ and open the template in the editor.
}
@media screen and (max-width:767px) {
.main-container {
max-width: 100%;
max-width: 97%;
}
}
@media screen and (max-width:767px) {
@ -1320,6 +1337,16 @@ and open the template in the editor.
margin-bottom: 1em;
}
}
@media screen and (max-width:767px) {
.form-body form {
grid-template-columns: 1fr;
margin: 20px;
grid-gap: 0.25em;
}
.form-label {
text-align: left;
}
}
/*
Button
.grd-form-bn:hover,

File diff suppressed because one or more lines are too long

View File

@ -50,6 +50,9 @@
top: -300px;
right: 0px;
}
.header-notify {
grid-area: header;
}
}
.content {
grid-area: center;
@ -353,6 +356,14 @@ and open the template in the editor.
color: #047006;
}
}
@media screen and (max-width:767px) {
.flash-messages {
width: 90%;
top: 0;
left: 0;
text-align: center;
}
}
/* ============================================================
Navigation
@ -837,6 +848,12 @@ and open the template in the editor.
}
*/
}
@media screen and (max-width:767px) {
.header-notify {
justify-content: flex-end;
margin-right: 70px;
}
}
/* ============================================================
Screen styles for center part.
@ -985,7 +1002,7 @@ and open the template in the editor.
}
@media screen and (max-width:767px) {
.main-container {
max-width: 100%;
max-width: 97%;
}
}
@media screen and (max-width:767px) {
@ -1320,6 +1337,16 @@ and open the template in the editor.
margin-bottom: 1em;
}
}
@media screen and (max-width:767px) {
.form-body form {
grid-template-columns: 1fr;
margin: 20px;
grid-gap: 0.25em;
}
.form-label {
text-align: left;
}
}
/*
Button
.grd-form-bn:hover,

View File

@ -70,6 +70,10 @@
right: 0px;
}
.header-notify {
grid-area: header;
}
}
.content {

View File

@ -34,6 +34,7 @@ and open the template in the editor.
background-color: @success;
border: 1px solid @success-border;
}
.alert-error {
color: @alert-color !important;
background-color: @error;
@ -58,6 +59,16 @@ and open the template in the editor.
display: none;
}
@media @tablet-down {
.flash-messages {
width: 90%;
top: 0;
left: 0;
text-align: center;
}
}
/* messages, update flash */
.grd-error {
color: @error;

View File

@ -18,6 +18,14 @@
z-index: 10;
}
@media @tablet-down {
.header-notify {
justify-content: flex-end;
margin-right: 70px;
}
}
.notify {
display: block;
padding: .5rem .3rem;

View File

@ -106,7 +106,7 @@
@media @tablet-down {
.main-container {
max-width: 100%;
max-width: 97%;
}
}

View File

@ -151,6 +151,19 @@ and open the template in the editor.
margin-bottom: 1em;
}
@media @tablet-down {
.form-body form {
grid-template-columns: 1fr;
margin: 20px;
grid-gap: .25em;
}
.form-label {
text-align: left;
}
}
}
/*