mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-07-09 22:48:28 +03:00
Mobile view based on window width, drop terrible user agent detection
And improved responsive CSS
This commit is contained in:
parent
33214c1a33
commit
292f3289ac
28 changed files with 49 additions and 336 deletions
|
|
@ -33,12 +33,14 @@
|
|||
@import "Ask.less";
|
||||
@import "Shortcuts.less";
|
||||
@import "FolderList.less";
|
||||
/*
|
||||
@import "FolderClear.less";
|
||||
@import "FolderCreate.less";
|
||||
@import "FolderSystem.less";
|
||||
@import "Account.less";
|
||||
*/
|
||||
@import "Filter.less";
|
||||
@import "Languages.less";
|
||||
@import "Account.less";
|
||||
@import "Template.less";
|
||||
@import "OpenPgpKey.less";
|
||||
@import "TwoFactor.less";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
#rl-popups {
|
||||
.b-account-add-content {
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,6 @@
|
|||
&.modal {
|
||||
width: 330px;
|
||||
}
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
color: red;
|
||||
|
|
@ -17,10 +14,6 @@
|
|||
width: 810px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -67,4 +60,4 @@
|
|||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,10 +8,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.information {
|
||||
display: inline-block;
|
||||
background-color: #ddd;
|
||||
|
|
@ -27,4 +23,4 @@
|
|||
width: 400px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,5 @@
|
|||
margin-left: 110px;
|
||||
}
|
||||
}
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
#rl-popups {
|
||||
.b-ask-content {
|
||||
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,9 @@
|
|||
&.modal {
|
||||
width: 98%;
|
||||
max-width: 1000px;
|
||||
/* height: calc(100% - 52px);*/
|
||||
min-height: calc(100% - 52px);
|
||||
|
||||
.modal-body {
|
||||
/* height: calc(100% - 60px);*/
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -34,7 +32,6 @@
|
|||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -47,11 +44,7 @@
|
|||
.b-header-toolbar {
|
||||
|
||||
height: 40px;
|
||||
|
||||
color: #fff;
|
||||
background-color: @rlMainDarkColor;
|
||||
|
||||
background-color: #333;
|
||||
background-color: rgba(0,0,0,0.8) !important;
|
||||
|
||||
.close, .minimize-custom {
|
||||
|
|
@ -147,12 +140,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.cke_chrome {
|
||||
border-left-width: 0 !important;
|
||||
border-right-width: 0 !important;
|
||||
border-bottom-width: 0 !important;
|
||||
}
|
||||
|
||||
.b-attachment-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,10 +34,8 @@
|
|||
|
||||
height: 40px;
|
||||
|
||||
background-color: @rlMainDarkColor;
|
||||
color: #fff;
|
||||
|
||||
background-color: #333;
|
||||
background-color: rgba(0,0,0,0.8) !important;
|
||||
|
||||
.close {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,6 @@
|
|||
|
||||
width: 750px;
|
||||
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.button-delete {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
#rl-popups {
|
||||
.b-folder-clear-content {
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
#rl-popups {
|
||||
.b-folder-create-content {
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
#rl-popups {
|
||||
.b-folder-system-content {
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,6 @@
|
|||
width: 800px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,6 @@
|
|||
width: 700px;
|
||||
}
|
||||
|
||||
&.exp {
|
||||
width: 701px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.lang-item {
|
||||
display: inline-block;
|
||||
padding: 5px 15px;
|
||||
|
|
|
|||
|
|
@ -149,25 +149,20 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
|
|||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
|
||||
.backdrop-message-wrp {
|
||||
|
||||
position: absolute;
|
||||
top: calc(~'50% - 50px');
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
|
||||
.backdrop-message {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
}
|
||||
.backdrop-message {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
padding-right: 35px;
|
||||
}
|
||||
|
||||
input {
|
||||
input, .btn {
|
||||
border: 1px solid none !important;
|
||||
background: none !important;
|
||||
outline: none !important;
|
||||
|
|
@ -74,6 +74,9 @@
|
|||
|
||||
color: @glass-color;
|
||||
border-color: @glass-m-color;
|
||||
}
|
||||
|
||||
input {
|
||||
|
||||
&:placeholder {
|
||||
color: @glass-color;
|
||||
|
|
@ -86,19 +89,11 @@
|
|||
}
|
||||
|
||||
.btn {
|
||||
border: 1px solid none !important;
|
||||
background: none !important;
|
||||
outline: none !important;
|
||||
text-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
color: @glass-color;
|
||||
border-color: @glass-m-color;
|
||||
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
|
||||
&:hover, &:active{
|
||||
&:hover, &:active {
|
||||
border-color: @glass-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -222,7 +217,6 @@
|
|||
margin-left: -30px;
|
||||
|
||||
border: 8px solid transparent;
|
||||
border-color: transparent;
|
||||
border-top-color: var(--spinner-color, #fff);
|
||||
animation: loginRotation 1s infinite ease-in-out;
|
||||
|
||||
|
|
|
|||
|
|
@ -502,7 +502,7 @@ html .messageList .line-loading {
|
|||
}
|
||||
|
||||
.senderParent {
|
||||
flex: 1 0 auto;
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
|
|
|
|||
|
|
@ -577,17 +577,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
html.rl-resizer .b-message-view-iframe-backdrop {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
html.rl-mobile .messageView,
|
||||
html.rl-no-preview-pane .messageView {
|
||||
|
||||
display: none;
|
||||
|
||||
&.message-selected {
|
||||
display: block;
|
||||
&:not(.message-selected) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
|
|
@ -628,7 +622,10 @@ html.rl-message-fullscreen {
|
|||
}
|
||||
|
||||
#rl-right {
|
||||
.RL-MailMessageList, .RL-SettingsPane, .RL-SystemDropDown, .RL-MailMessageView .messageView .toolbar {
|
||||
.RL-MailMessageList,
|
||||
.RL-SettingsPane,
|
||||
.RL-SystemDropDown,
|
||||
.RL-MailMessageView .messageView .toolbar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
#rl-popups {
|
||||
.b-open-pgp-key-view-content, .b-open-pgp-key-generate-content, .b-open-pgp-key-add-content, .b-compose-open-pgp-content, .b-message-open-pgp-content {
|
||||
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&.modal {
|
||||
width: 570px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,5 @@
|
|||
&.modal {
|
||||
width: 700px;
|
||||
}
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,6 @@
|
|||
width: 750px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.e-template-place {
|
||||
height: 300px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,15 +7,6 @@
|
|||
.modal-body {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.b-two-factor-test-content {
|
||||
.modal-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
11
dev/boot.js
11
dev/boot.js
|
|
@ -7,6 +7,11 @@ const
|
|||
app = eId('rl-app'),
|
||||
options = app && app.dataset.boot && JSON.parse(app.dataset.boot) || {},
|
||||
|
||||
getCookie = name => {
|
||||
let data = doc.cookie.match('(^|;) ?'+name+'=([^;]*)(;|$)');
|
||||
return data ? decodeURIComponent(data[2]) : null;
|
||||
},
|
||||
|
||||
Storage = type => {
|
||||
let name = type+'Storage';
|
||||
try {
|
||||
|
|
@ -18,8 +23,7 @@ const
|
|||
const cookieName = encodeURIComponent(name+('session' === type ? win.name || (win.name = Date.now()) : ''));
|
||||
|
||||
// initialise if there's already data
|
||||
let data = doc.cookie.match('(^|;) ?'+cookieName+'=([^;]*)(;|$)');
|
||||
data = data ? decodeURIComponent(data[2]) : null;
|
||||
let data = getCookie(cookieName);
|
||||
data = data ? JSON.parse(data) : {};
|
||||
|
||||
win[name] = {
|
||||
|
|
@ -82,6 +86,9 @@ if (!navigator || !navigator.cookieEnabled) {
|
|||
doc.location.href = './?/NoCookie';
|
||||
}
|
||||
|
||||
const layout = getCookie('rllayout');
|
||||
doc.documentElement.classList.toggle('rl-mobile', 'mobile' === layout || (!layout && 1000 > innerWidth));
|
||||
|
||||
let pStep = 0,
|
||||
container = eId('progressjs'),
|
||||
progress = container.querySelector('.progressjs-inner'),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue