Mobile view based on window width, drop terrible user agent detection

And improved responsive CSS
This commit is contained in:
djmaze 2021-02-16 14:40:11 +01:00
parent 33214c1a33
commit 292f3289ac
28 changed files with 49 additions and 336 deletions

View file

@ -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";

View file

@ -1,7 +1,6 @@
#rl-popups {
.b-account-add-content {
.modal-header {
background-color: #fff;
}
}
}

View file

@ -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;
}
}
}
}

View file

@ -8,10 +8,6 @@
}
}
.modal-header {
background-color: #fff;
}
.information {
display: inline-block;
background-color: #ddd;
@ -27,4 +23,4 @@
width: 400px;
height: 70px;
}
}
}

View file

@ -9,8 +9,5 @@
margin-left: 110px;
}
}
.modal-header {
background-color: #fff;
}
}
}

View file

@ -1,10 +1,6 @@
#rl-popups {
.b-ask-content {
.modal-header {
background-color: #fff;
}
.modal-body {
text-align: center;
}

View file

@ -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;
}

View file

@ -34,10 +34,8 @@
height: 40px;
background-color: @rlMainDarkColor;
color: #fff;
background-color: #333;
background-color: rgba(0,0,0,0.8) !important;
.close {

View file

@ -3,10 +3,6 @@
width: 750px;
.modal-header {
background-color: #fff;
}
.button-delete {
cursor: pointer;
}

View file

@ -1,7 +1,6 @@
#rl-popups {
.b-folder-clear-content {
.modal-header {
background-color: #fff;
}
}
}

View file

@ -1,7 +1,6 @@
#rl-popups {
.b-folder-create-content {
.modal-header {
background-color: #fff;
}
}
}

View file

@ -1,7 +1,6 @@
#rl-popups {
.b-folder-system-content {
.modal-header {
background-color: #fff;
}
}
}

View file

@ -5,10 +5,6 @@
width: 800px;
}
.modal-header {
background-color: #fff;
}
.modal-body {
overflow: hidden;
}

View file

@ -5,14 +5,6 @@
width: 700px;
}
&.exp {
width: 701px;
}
.modal-header {
background-color: #fff;
}
.lang-item {
display: inline-block;
padding: 5px 15px;

View file

@ -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%;
}
}
}

View file

@ -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;

View file

@ -502,7 +502,7 @@ html .messageList .line-loading {
}
.senderParent {
flex: 1 0 auto;
flex: 1 0 50%;
}
.flagParent {

View file

@ -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;
}
}

View file

@ -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;
}

View file

@ -3,8 +3,5 @@
&.modal {
width: 700px;
}
.modal-header {
background-color: #fff;
}
}
}

View file

@ -5,10 +5,6 @@
width: 750px;
}
.modal-header {
background-color: #fff;
}
.e-template-place {
height: 300px;
}

View file

@ -7,15 +7,6 @@
.modal-body {
min-height: 100px;
}
.modal-header {
background-color: #fff;
}
}
.b-two-factor-test-content {
.modal-header {
background-color: #fff;
}
}
}

View file

@ -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'),