the-djmaze/snappymail
1
1
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2025-01-07 15:27:43 +08:00
Code Issues Projects Releases Packages Wiki Activity

Improve SquireUI on mobile by placing toolbar fixed at bottom of screen (and top of touch keyboard)

Browse source
This commit is contained in:
djmaze 2020-09-15 23:36:42 +02:00
parent 385cd9588c
commit d33f9710c2
4 changed files with 24 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
dev/Styles/Compose.less
View file

@ -5,7 +5,7 @@
width: 98%;
max-width: 1000px;
margin: 10px auto;
min-height: calc(100% - 30px);
min-height: calc(100% - 44px);
.modal-body {
padding: 0;
@ -87,7 +87,7 @@
color: #333;
html.rl-mobile &{
overflow: scroll;
overflow: auto;
}
.e-identity {

2
dev/Styles/Identity.less
View file

@ -2,7 +2,7 @@
.b-identity-content {
&.modal {
width: 750px;
width: 800px;
}
.modal-header {

23
dev/Styles/SquireUI.less
View file

@ -1,5 +1,6 @@
.squire-toolbar {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
@ -18,7 +19,7 @@
cursor: pointer;
font-size: 14px;
height: 1.5em;
line-height: 1.7em;
line-height: 1.7;
margin: 0;
padding: 0;
vertical-align: bottom;
@ -30,10 +31,10 @@
}
.squire-toolgroup select {
width: 7em;
width: 7em !important;
}
.squire-toolgroup select[data-action="fontSize"] {
width: 4em;
width: 4em !important;
}
.squire-toolgroup select[data-action="bold"] {
font-weight: bold;
@ -76,3 +77,19 @@
.squire-mode-plain .squire-toolgroup:not(#squire-toolgroup-mode) {
display: none;
}
/* @media (hover: none) */
.rl-mobile .squire-toolbar {
padding: 1px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.rl-mobile .squire-toolgroup > button,
.rl-mobile .squire-toolgroup > select,
.rl-mobile .squire-toolgroup > input[type="color"] {
height: 2.5em;
line-height: 2.8;
width: 3em;
}

2
dev/Styles/_CkeFix.less
View file

@ -16,7 +16,7 @@
}
.cke_top {
padding: 6px 4px 1px 6px !important;
padding: 6px 4px 1px 6px;
box-shadow: none !important;
border-bottom: 1px solid #b6b6b6 !important;
background: #F0F0F0 !important;