holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile dialog style changes

Browse Source 
- dialog takes full width x height
- footer on top with large, white icon-only buttons
- header has no close button
This commit is contained in:
nathan 2023-02-22 11:27:55 -07:00
parent 24570cd438
commit 7c2266b27b
2 changed files with 138 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
pixelegg/mobile/fw_mobile.css
View File

@ -8324,64 +8324,48 @@ table.egwGridView_grid img.et2_appicon {
}
body et2-dialog::part(panel) {
max-width: 100%;
max-height: 100%;
height: 100%;
}
body div.ui-dialog {
width: 100% !important;
height: 100% !important;
left: 0 !important;
top: 0 !important;
body et2-dialog::part(header) {
color: white;
background: #0c5da5;
height: 35px;
padding: 0;
padding-left: 5px;
padding-top: 15px;
border-radius: 0;
}
body div.ui-dialog-content {
height: 87% !important;
margin-top: 60px !important;
padding: 0 !important;
font-size: 12pt;
body et2-dialog::part(close-button) {
display: none;
}
body .ui-dialog .ui-dialog-buttonpane {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
height: 50px;
body et2-dialog::part(footer) {
order: -1;
box-shadow: 0px 4px 5px 2px silver;
width: 100%;
z-index: 1;
margin-top: 0px;
background: #0c5da5;
}
body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
body et2-dialog et2-button[slot="footer"] {
padding-left: 500px;
width: 50px;
height: 50px;
}
body .ui-dialog .ui-dialog-buttonpane button {
height: 35px;
body et2-dialog et2-button[slot="footer"] et2-image {
height: 24px;
width: 24px;
max-width: initial;
position: absolute;
left: 0;
-webkit-filter: brightness(0) invert(1) !important;
filter: brightness(0) invert(1) !important;
background-color: transparent !important;
background-size: 24px 24px !important;
border: none;
float: right !important;
}
body .ui-dialog .ui-dialog-buttonpane button span {
body et2-dialog et2-button[slot="footer"] et2-image span {
padding-left: 20px;
}
body .ui-dialog .ui-dialog-titlebar {
position: fixed;
color: white;
z-index: 100;
background: #0c5da5;
width: 100%;
height: 35px;
padding: 0;
padding-left: 5px;
margin: -3px;
padding-top: 15px;
border-radius: 0;
}
body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
display: none;
}
body et2-button.plus_button {
position: fixed !important;
right: 15px;

105
pixelegg/mobile/fw_mobile.less
View File

@ -591,56 +591,53 @@
et2-dialog::part(panel) {
max-width: 100%;
}
div.ui-dialog {
width: 100% !important;
height: 100% !important;
left: 0 !important;
top: 0 !important;
max-height: 100%;
height: 100%;
}
div.ui-dialog-content {
height: 87% !important;
margin-top: 60px !important;
padding: 0 !important;
.mob-fontsize-l;
}
.ui-dialog .ui-dialog-buttonpane {
position: fixed !important;
bottom:0 !important;
left:0 !important;
display:block !important;
padding:0 !important;
margin: 0 !important;
height: 50px;
box-shadow: 0px 4px 5px 2px silver;
width: 100%;
z-index:1;
.ui-dialog-buttonset {float:right;height:50px;}
button {
height:35px;
.white-svg;
float: right !important;
span {padding-left: 20px;}
}
background: #0c5da5;
}
.ui-dialog .ui-dialog-titlebar {
position: fixed;
et2-dialog::part(header) {
color: white;
z-index: 100;
background: #0c5da5;
width: 100%;
height: 35px;
padding: 0;
padding-left: 5px;
margin: -3px;
padding-top: 15px;
border-radius: 0;
.ui-dialog-titlebar-close {
}
et2-dialog::part(close-button) {
display: none;
}
et2-dialog::part(footer) {
order: -1;
box-shadow: 0px 4px 5px 2px silver;
width: 100%;
margin-top: 0px;
background: #0c5da5;
}
et2-dialog et2-button[slot="footer"] {
padding-left: 500px;
width: 50px;
height: 50px;
et2-image {
height: 24px;
width: 24px;
max-width: initial;
position: absolute;
left: 0;
.white-svg;
span {
padding-left: 20px;
}
}
}
et2-button.plus_button {
position: fixed !important;
right: 15px;
@ -657,31 +654,42 @@
background-size: 24px 24px;
margin: 0;
padding: 0;
&:hover, &:active {
background-color: #0c5da5;
}
}
et2-button.plus_button::part(base) {display: none;}
et2-button.plus_button::part(base) {
display: none;
}
.et2_nextmatch {
.nextmatch_sortheader {
padding-right: 0px;
margin-right: 0px;
}
.nextmatch_header_row, .nextmatch_header
{
.nextmatch_header_row, .nextmatch_header {
flex-direction: column;
div.header_row_right {
position: absolute;
display: block;
top:0;
top: 0;
flex-direction: column;
}
.filtersContainer {
width:100%;
margin-top:50px;
width: 100%;
margin-top: 50px;
flex-direction: column;
et2-select, et2-select-cat {max-width: 100%}
et2-select, et2-select-cat {
max-width: 100%
}
}
background-color: background-color-egw-dark;
et2-select, et2-select-cat {
@ -694,12 +702,13 @@
border-right: none;
border-radius: 0;
border-bottom: none;
padding-left:10px;
max-width:none;
padding-left: 10px;
max-width: none;
background-color: transparent;
}
label {
display:block;
display: block;
width: 100%;
float: left;
.mob-fontsize-l;