WIP Mobile template: get nm header fields sorted and get the searchbox to have the rest of available space

This commit is contained in:
Hadi Nategh 2022-08-22 16:41:33 +02:00
parent 082d6aa791
commit 68f50ee89b
2 changed files with 16 additions and 50 deletions

View File

@ -8629,6 +8629,7 @@ table.egwGridView_grid img.et2_appicon {
position: relative; position: relative;
height: 50px; height: 50px;
z-index: 1; z-index: 1;
display: flex;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
} }
body .et2_nextmatch .nm-mob-header button { body .et2_nextmatch .nm-mob-header button {
@ -8661,6 +8662,7 @@ table.egwGridView_grid img.et2_appicon {
background-color: transparent !important; background-color: transparent !important;
background-size: 24px 24px !important; background-size: 24px 24px !important;
border: none; border: none;
order: 9;
} }
body .et2_nextmatch .nm-mob-header button.nm_toggle_header:focus { body .et2_nextmatch .nm-mob-header button.nm_toggle_header:focus {
outline: none; outline: none;
@ -8681,6 +8683,7 @@ table.egwGridView_grid img.et2_appicon {
background-color: transparent !important; background-color: transparent !important;
background-size: 24px 24px !important; background-size: 24px 24px !important;
border: none; border: none;
order: 10;
} }
body .et2_nextmatch .nm-mob-header button.nm_action_header:focus { body .et2_nextmatch .nm-mob-header button.nm_action_header:focus {
outline: none; outline: none;
@ -8708,8 +8711,10 @@ table.egwGridView_grid img.et2_appicon {
float: right; float: right;
text-align: center; text-align: center;
display: none; display: none;
order: 7;
} }
body .et2_nextmatch .nm-mob-header div.nm_favorites_div { body .et2_nextmatch .nm-mob-header div.nm_favorites_div {
order: 8;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
border-left: 1px solid silver; border-left: 1px solid silver;
@ -8788,31 +8793,9 @@ table.egwGridView_grid img.et2_appicon {
-webkit-filter: none!important; -webkit-filter: none!important;
background-color: white !important; background-color: white !important;
} }
body .et2_nextmatch .nm-mob-header input[type="search"] { body .et2_nextmatch .nm-mob-header et2-searchbox {
width: 50px; order: -1;
height: 50px; width: -webkit-fill-available;
font-size: large;
margin: 0;
border: 0;
opacity: 0;
background-color: #0c5da5;
color: black;
position: absolute;
}
body .et2_nextmatch .nm-mob-header input[type="search"]:active {
border: none;
background: #0c5da5;
}
body .et2_nextmatch .nm-mob-header input[type="search"]:focus {
border: none;
background: white;
outline: none;
opacity: 1;
left: 110px;
position: absolute;
width: 100%;
height: 50px;
z-index: 2;
} }
body .et2_nextmatch .nm-mob-header div.nm_appname_header { body .et2_nextmatch .nm-mob-header div.nm_appname_header {
width: 100%; width: 100%;

View File

@ -799,6 +799,7 @@
position: relative; position: relative;
height: 50px; height: 50px;
z-index: 1; z-index: 1;
display: flex;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
button { button {
height: @mobile-elem-height; height: @mobile-elem-height;
@ -829,6 +830,7 @@
&:focus{ &:focus{
outline:none; outline:none;
} }
order: 9;
} }
button.nm_action_header { button.nm_action_header {
background-image: url(../../api/templates/default/images/dots.svg); background-image: url(../../api/templates/default/images/dots.svg);
@ -845,6 +847,7 @@
&:focus{ &:focus{
outline:none; outline:none;
} }
order: 10;
} }
button.nm_action_header.back { button.nm_action_header.back {
background-image: url(../../api/templates/default/images/cancelled.svg); background-image: url(../../api/templates/default/images/cancelled.svg);
@ -865,8 +868,10 @@
float: right; float: right;
text-align: center; text-align: center;
display:none; display:none;
order:7;
} }
div.nm_favorites_div { div.nm_favorites_div {
order:8;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
border-left:1px solid silver; border-left:1px solid silver;
@ -958,31 +963,9 @@
-webkit-filter: none!important; -webkit-filter: none!important;
background-color: white !important; background-color: white !important;
} }
input[type="search"] { et2-searchbox {
width: 50px; order: -1;
height: @mobile-elem-height; width: -webkit-fill-available;
font-size: large;
margin:0;
border:0;
opacity: 0;
background-color:@mobile-nm-search-bg;
color: black;
position: absolute;
&:active{
border:none;
background: @mobile-nm-search-bg;
}
&:focus {
border:none;
background:white;
outline: none;
opacity: 1;
left:110px;
position: absolute;
width:100%;
height:@mobile-elem-height;
z-index: 2;
}
} }
div.nm_appname_header { div.nm_appname_header {
width: 100%; width: 100%;