Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-30 20:49:20 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make layout fully responsive using matchMedia('(max-width: 799px)')

Browse source
This commit is contained in:
the-djmaze 2023-02-23 13:54:32 +01:00
parent 1dbd9bda0c
commit e1833ae032
64 changed files with 239 additions and 434 deletions
Download patch file Download diff file Expand all files Collapse all files

79
dev/Styles/User/MessageList.less
View file

@ -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 */