mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-31 21:19:21 +03:00
Make layout fully responsive using matchMedia('(max-width: 799px)')
This commit is contained in:
the-djmaze
parent
1dbd9bda0c
commit
e1833ae032
64 changed files with 239 additions and 434 deletions
|
|
@ -73,7 +73,7 @@
|
|||
}
|
||||
|
||||
/* desktop */
|
||||
@media screen and (min-width: 1000px) {
|
||||
@media screen and (min-width: @maxMobileWidth + 1px) {
|
||||
.toggleLeft {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -86,8 +86,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* mobile and tablet */
|
||||
@media screen and (max-width: 999px) {
|
||||
@media screen and (max-width: @maxMobileWidth) {
|
||||
#rl-right {
|
||||
min-width: calc(100% - @rlLowMargin);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ html.list-loading body {
|
|||
cursor: progress;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
@media screen and (min-width: @maxMobileWidth + 1px) {
|
||||
#rl-app {
|
||||
background-image: var(--main-bg-image);
|
||||
background-size: var(--main-bg-size);
|
||||
|
|
@ -73,13 +73,14 @@ dialog:not(.animate) {
|
|||
|
||||
/**
|
||||
* https://github.com/the-djmaze/snappymail/issues/686
|
||||
@media screen and (max-width: 999px) {
|
||||
*/
|
||||
.rl-mobile dialog {
|
||||
margin: 0 auto;
|
||||
/* max-height: calc(100vh - 86px);*/
|
||||
/* max-height: 100dvh;*/
|
||||
width: 100%;
|
||||
@media screen and (max-width: @maxMobileWidth) {
|
||||
dialog {
|
||||
margin: 0 auto;
|
||||
/* max-height: calc(100vh - 86px);*/
|
||||
/* max-height: 100dvh;*/
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
dialog > header {
|
||||
|
|
|
|||
|
|
@ -171,8 +171,7 @@ summary.legend {
|
|||
color: var(--error-clr, #b94a48);
|
||||
}
|
||||
|
||||
/* mobile and tablet */
|
||||
@media screen and (max-width: 999px) {
|
||||
@media screen and (max-width: @maxMobileWidth) {
|
||||
.form-horizontal {
|
||||
.control-group {
|
||||
> label {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
100% {background-position: 60px 0;}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
@media screen and (min-width: @maxMobileWidth + 1px) {
|
||||
|
||||
.b-folders li .anim-action-class {
|
||||
animation: highlight-folder-row 0.5s linear;
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
html:not(.rl-mobile) {
|
||||
@media screen and (min-width: @maxMobileWidth + 1px) {
|
||||
.hideContactListCheckbox {
|
||||
.checkboxItem {
|
||||
visibility: hidden;
|
||||
|
|
|
|||
|
|
@ -44,7 +44,6 @@
|
|||
}
|
||||
|
||||
.b-toolbar {
|
||||
padding: 10px 0 10px @rlLowMargin;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@
|
|||
/* transition: width 0.3s ease-out;*/
|
||||
width: @rlLeftWidth;
|
||||
z-index: 0;
|
||||
|
||||
.b-toolbar {
|
||||
padding: 10px 0 10px @rlLowMargin;
|
||||
}
|
||||
}
|
||||
|
||||
#rl-right:not([hidden]) {
|
||||
|
|
@ -19,9 +23,6 @@
|
|||
flex-grow: 1;
|
||||
width: 20%;
|
||||
}
|
||||
.rl-bottom-preview-pane #rl-right {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/*
|
||||
.resizable::after {
|
||||
|
|
@ -41,47 +42,12 @@
|
|||
}
|
||||
*/
|
||||
|
||||
.resizer {
|
||||
background: #aaa;
|
||||
background: rgba(255,255,255,0.5);
|
||||
display: none;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 102;
|
||||
}
|
||||
.resizer:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html:not(.rl-left-panel-disabled) #rl-left {
|
||||
resize: horizontal; overflow: auto;
|
||||
min-width: 155px;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
#rl-left > .resizer,
|
||||
.rl-side-preview-pane #V-MailMessageList .resizer {
|
||||
cursor: ew-resize;
|
||||
cursor: col-resize;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 5px;
|
||||
}
|
||||
.rl-bottom-preview-pane #V-MailMessageList .resizer {
|
||||
cursor: ns-resize;
|
||||
cursor: row-resize;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
html:not(.rl-left-panel-disabled) #rl-left > .resizer,
|
||||
#V-MailMessageList .resizer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#top-system-dropdown-id::after,
|
||||
#button-add-prop-dropdown-id::after {
|
||||
content: '▼';
|
||||
|
|
@ -140,38 +106,6 @@ html:not(.rl-left-panel-disabled) #rl-left > .resizer,
|
|||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* desktop */
|
||||
@media screen and (min-width: 1000px) {
|
||||
}
|
||||
|
||||
/* desktop-large */
|
||||
@media screen and (min-width: 1401px) {
|
||||
#rl-left {
|
||||
width: @rlLeftWidth + 20;
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile and tablet */
|
||||
@media screen and (max-width: 999px) {
|
||||
#rl-left {
|
||||
width: 155px;
|
||||
}
|
||||
|
||||
#rl-app {
|
||||
#V-SettingsPane {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#rl-settings-subscreen {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
line-height: 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.rl-ctrl-key-pressed) .visible-on-ctrl-btn,
|
||||
html.rl-ctrl-key-pressed .hidden-on-ctrl-btn,
|
||||
.show-on-panel-disabled {
|
||||
|
|
@ -197,32 +131,6 @@ html.rl-left-panel-disabled {
|
|||
}
|
||||
}
|
||||
|
||||
html.rl-mobile #rl-left > .resizer,
|
||||
html.rl-no-preview-pane #rl-right .resizer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html.rl-mobile {
|
||||
#rl-left {
|
||||
background: var(--main-bg-color, #aaa);
|
||||
border-right: 1px solid var(--border-color, #ddd);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 50vw;
|
||||
z-index: 3;
|
||||
}
|
||||
&.rl-left-panel-disabled #rl-left {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-mobile .hide-mobile,
|
||||
html:not(.rl-mobile) .show-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.e-paginator {
|
||||
|
||||
a {
|
||||
|
|
@ -243,3 +151,94 @@ html:not(.rl-mobile) .show-mobile {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @maxMobileWidth) {
|
||||
#rl-app {
|
||||
#V-SettingsPane {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#rl-settings-subscreen {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#rl-left {
|
||||
background: var(--main-bg-color, #aaa);
|
||||
border-right: 1px solid var(--border-color, #ddd);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 155px;
|
||||
z-index: 3;
|
||||
}
|
||||
.rl-left-panel-disabled #rl-left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.hide-mobile,
|
||||
#rl-left .resizer,
|
||||
#rl-right .resizer {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* desktop */
|
||||
@media screen and (min-width: @maxMobileWidth + 1px) {
|
||||
.toggleLeft,
|
||||
#V-MailMessageList .buttonCompose {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.rl-bottom-preview-pane #rl-right {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.resizer {
|
||||
background: #aaa;
|
||||
background: rgba(255,255,255,0.5);
|
||||
display: none;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 102;
|
||||
}
|
||||
.resizer:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#rl-left > .resizer,
|
||||
.rl-side-preview-pane #V-MailMessageList .resizer {
|
||||
cursor: ew-resize;
|
||||
cursor: col-resize;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 5px;
|
||||
}
|
||||
.rl-bottom-preview-pane #V-MailMessageList .resizer {
|
||||
cursor: ns-resize;
|
||||
cursor: row-resize;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 5px;
|
||||
}
|
||||
html:not(.rl-left-panel-disabled) #rl-left > .resizer,
|
||||
#V-MailMessageList .resizer {
|
||||
display: block;
|
||||
}
|
||||
html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) #rl-right .resizer {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* desktop-large */
|
||||
@media screen and (min-width: 1401px) {
|
||||
#rl-left {
|
||||
width: @rlLeftWidth + 20;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,7 @@
|
|||
|
||||
html.rl-mobile, html.rl-no-preview-pane {
|
||||
.message-selected #V-MailMessageList {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#V-MailMessageList {
|
||||
position: relative;
|
||||
}
|
||||
.rl-side-preview-pane #V-MailMessageList {
|
||||
height: 100%;
|
||||
}
|
||||
.rl-no-preview-pane #V-MailMessageList {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.rl-side-preview-pane #V-MailMessageList .messageList {
|
||||
max-width: 50vw;
|
||||
min-width: 320px;
|
||||
overflow: auto;
|
||||
resize: horizontal;
|
||||
width: 35vw;
|
||||
}
|
||||
.rl-bottom-preview-pane #V-MailMessageList .messageList {
|
||||
height: 35vh;
|
||||
max-height: 50vh;
|
||||
min-height: 200px;
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
#V-MailMessageList.focused .messageList {
|
||||
border-color: #9d9d9d;
|
||||
|
|
@ -196,18 +169,6 @@ html.rl-mobile, html.rl-no-preview-pane {
|
|||
}
|
||||
}
|
||||
|
||||
html:not(.rl-mobile) {
|
||||
.hideMessageListCheckbox {
|
||||
.checkboxCheckAll {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.messageCheckbox {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messageListItem > div + div {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
|
@ -396,12 +357,50 @@ html:not(.rl-mobile) {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
|
||||
.message-selected #V-MailMessageList {
|
||||
display: none;
|
||||
}
|
||||
#V-MailMessageList {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @maxMobileWidth + 1px) {
|
||||
.messageList {
|
||||
.listDragOver {
|
||||
transition: all 400ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
.hideMessageListCheckbox {
|
||||
.checkboxCheckAll {
|
||||
visibility: hidden;
|
||||
}
|
||||
.checkboxMessage {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-side-preview-pane #V-MailMessageList {
|
||||
height: 100%;
|
||||
}
|
||||
.rl-side-preview-pane #V-MailMessageList .messageList {
|
||||
max-width: 50vw;
|
||||
min-width: 320px;
|
||||
overflow: auto;
|
||||
resize: horizontal;
|
||||
width: 35vw;
|
||||
}
|
||||
|
||||
.rl-bottom-preview-pane #V-MailMessageList .messageList {
|
||||
height: 35vh;
|
||||
max-height: 50vh;
|
||||
min-height: 200px;
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
/* desktop-large */
|
||||
|
|
|
|||
|
|
@ -30,25 +30,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
html.rl-no-preview-pane {
|
||||
#rl-right:not(.message-selected) #V-MailMessageView {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#V-MailMessageView .top-toolbar {
|
||||
color: #fff;
|
||||
padding: 10px 0;
|
||||
}
|
||||
html.rl-no-preview-pane #V-MailMessageView .top-toolbar {
|
||||
padding-left: 1px;
|
||||
}
|
||||
html:not(.rl-no-preview-pane) #V-MailMessageView .top-toolbar {
|
||||
visibility: hidden;
|
||||
}
|
||||
html.rl-bottom-preview-pane #V-MailMessageView .top-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.messageView {
|
||||
background-color: #fff;
|
||||
|
|
@ -475,13 +461,27 @@ html.rl-bottom-preview-pane #V-MailMessageView .top-toolbar {
|
|||
}
|
||||
}
|
||||
|
||||
html.rl-no-preview-pane .messageView {
|
||||
border: 1px solid var(--border-color, #aaa);
|
||||
box-shadow: var(--smMainShadow);
|
||||
html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
|
||||
#rl-right:not(.message-selected) #V-MailMessageView {
|
||||
display: none;
|
||||
}
|
||||
#V-MailMessageView .top-toolbar {
|
||||
padding-left: 1px;
|
||||
visibility: visible;
|
||||
}
|
||||
.messageView {
|
||||
border: 1px solid var(--border-color, #aaa);
|
||||
box-shadow: var(--smMainShadow);
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-bottom-preview-pane .messageView {
|
||||
height: 100%;
|
||||
html.rl-bottom-preview-pane {
|
||||
#V-MailMessageView .top-toolbar {
|
||||
display: none;
|
||||
}
|
||||
.messageView {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-fullscreen {
|
||||
|
|
|
|||
|
|
@ -1,24 +1,5 @@
|
|||
|
||||
#V-SettingsMenu {
|
||||
|
||||
.b-footer {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 0 10px 0 5px;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.b-content {
|
||||
position: absolute;
|
||||
top: 50px + @rlLowMargin + 10px;
|
||||
bottom: @rlLowMargin;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
|
|
@ -55,11 +36,8 @@
|
|||
|
||||
.btn-toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 8px 0;
|
||||
color: #fff;
|
||||
top: 8px;
|
||||
left: @rlLowMargin;
|
||||
}
|
||||
|
||||
td {
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@
|
|||
font-size: 16px;
|
||||
line-height: 29px;
|
||||
max-width: 25vw;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 1px 8px;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,16 @@
|
|||
@rlLeftWidth: 200px;
|
||||
@rlLowMargin: 8px;
|
||||
|
||||
/* mobile and tablet */
|
||||
@maxMobileWidth: 799px;
|
||||
|
||||
:root {
|
||||
--smDialogShrink: 20px;
|
||||
--smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.rl-mobile {
|
||||
/* For Firefox */
|
||||
--smDialogShrink: 25px;
|
||||
/* For Firefox */
|
||||
@media screen and (max-width: @maxMobileWidth) {
|
||||
:root {
|
||||
--smDialogShrink: 25px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue