From 93ff3001c6aac460a4146ceb24041932ba0e58b7 Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Sun, 5 Feb 2023 19:45:03 +0100
Subject: [PATCH] Hopefull improved styling for Firefox mobile fixes
---
dev/Styles/@Admin.less | 1 -
dev/Styles/@Boot.css | 1 +
dev/Styles/@Main.less | 1 -
dev/Styles/Admin/Layout.less | 8 +---
dev/Styles/Main.less | 12 ++---
dev/Styles/Ui.less | 44 +++++++++++++++++++
dev/Styles/User/Compose.less | 3 +-
dev/Styles/User/Contacts.less | 5 ++-
dev/Styles/User/FolderList.less | 28 +++++-------
dev/Styles/User/Layout.less | 5 ---
dev/Styles/User/MessageList.less | 2 +-
dev/Styles/User/MessageView.less | 2 +-
dev/Styles/User/Settings.less | 2 +-
dev/Styles/_BootstrapFix.less | 42 ------------------
dev/Styles/_Values.less | 13 ++++--
.../templates/Views/User/MailFolderList.html | 1 -
snappymail/v/0.0.0/themes/example.css | 5 +++
17 files changed, 88 insertions(+), 87 deletions(-)
delete mode 100644 dev/Styles/_BootstrapFix.less
diff --git a/dev/Styles/@Admin.less b/dev/Styles/@Admin.less
index 85ebb53dc..48281cf62 100644
--- a/dev/Styles/@Admin.less
+++ b/dev/Styles/@Admin.less
@@ -14,7 +14,6 @@
@import "../../vendors/bootstrap/less/alerts.less";
@import "_FontasticToBoot.less";
-@import "_BootstrapFix.less";
@import "Ui.less";
@import "Main.less";
diff --git a/dev/Styles/@Boot.css b/dev/Styles/@Boot.css
index d6c192184..5e77307b0 100644
--- a/dev/Styles/@Boot.css
+++ b/dev/Styles/@Boot.css
@@ -57,6 +57,7 @@ html, body {
}
body#rl-app {
height: 100vh;
+ height: 100dvh;
overflow: hidden;
width: 100vw;
}
diff --git a/dev/Styles/@Main.less b/dev/Styles/@Main.less
index 994c9d501..899ec0892 100644
--- a/dev/Styles/@Main.less
+++ b/dev/Styles/@Main.less
@@ -17,7 +17,6 @@
@import "../../vendors/bootstrap/less/utilities.less";
@import "_FontasticToBoot.less";
-@import "_BootstrapFix.less";
@import "Ui.less";
@import "Main.less";
diff --git a/dev/Styles/Admin/Layout.less b/dev/Styles/Admin/Layout.less
index c4fb0155d..5419fe812 100644
--- a/dev/Styles/Admin/Layout.less
+++ b/dev/Styles/Admin/Layout.less
@@ -1,9 +1,4 @@
-#rl-content {
- display:flex;
- height: 100%;
-}
-
#rl-left {
flex-grow: 0;
flex-shrink: 0;
@@ -70,7 +65,7 @@
background-color: var(--settings-bg-clr, #fff);
border: 1px solid var(--border-color, #aaa);
border-radius: var(--border-radius, 5px);
- box-shadow: @rlMainShadow;
+ box-shadow: var(--smMainShadow);
height: calc(100% - @rlLowMargin - @rlLowMargin);
margin: 0 @rlLowMargin @rlLowMargin 0;
overflow-y: auto;
@@ -96,7 +91,6 @@
@media screen and (max-width: 999px) {
#rl-settings-subscreen {
padding: 10px;
- margin-right: 0;
}
#rl-right {
diff --git a/dev/Styles/Main.less b/dev/Styles/Main.less
index 80416ef5a..c6e0a1a1d 100644
--- a/dev/Styles/Main.less
+++ b/dev/Styles/Main.less
@@ -1,7 +1,3 @@
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
html.list-loading body {
/* cursor: wait;*/
@@ -26,6 +22,10 @@ option:disabled {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
+#rl-content {
+ display:flex;
+ height: 100%;
+}
dialog::backdrop {
background: rgba(0,0,0,0.5);
@@ -49,7 +49,8 @@ dialog {
display: flex;
flex-direction: column;
margin: 10px auto;
- max-height: calc(100vh - 20px);
+ max-height: calc(100vh - var(--smDialogShrink));
+ max-height: calc(100dvh - var(--smDialogShrink));
max-width: 560px;
overflow: auto;
padding: 0;
@@ -77,6 +78,7 @@ dialog:not(.animate) {
.rl-mobile dialog {
margin: 0 auto;
/* max-height: calc(100vh - 86px);*/
+/* max-height: 100dvh;*/
width: 100%;
}
diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less
index 0c50878a2..29cae25ed 100644
--- a/dev/Styles/Ui.less
+++ b/dev/Styles/Ui.less
@@ -142,3 +142,47 @@ tr:hover .drag-handle {
.tabs > [id^="tab"]:checked + label + .tab-content {
visibility: visible;
}
+
+// OTHER
+
+.legend {
+ border-bottom: 1px solid var(--border-color, #ddd);
+ font-size: 150%;
+ line-height: 2.1;
+ margin-bottom: 1.43em;
+}
+summary.legend {
+ cursor: pointer;
+}
+
+.btn.btn-thin {
+ padding: 0 9px;
+}
+
+.alert a:not(.close) {
+ text-decoration: underline;
+}
+
+.alert.alert-info a:not(.close) {
+ color: var(--info-clr, #3a87ad);
+}
+
+.alert.alert-error a:not(.close) {
+ color: var(--error-clr, #b94a48);
+}
+
+/* mobile and tablet */
+@media screen and (max-width: 999px) {
+ .form-horizontal {
+ .control-group {
+ > label {
+ text-align: left;
+ }
+
+ // Move over all input controls and content
+ > *:not(label) {
+ margin-left: 20px;
+ }
+ }
+ }
+}
diff --git a/dev/Styles/User/Compose.less b/dev/Styles/User/Compose.less
index 2964b2784..5ce9ce2a1 100644
--- a/dev/Styles/User/Compose.less
+++ b/dev/Styles/User/Compose.less
@@ -7,7 +7,8 @@
}
#V-PopupsCompose {
- height: calc(100vh - 52px);
+ height: 100vh;
+ height: 100dvh;
max-width: 1000px;
width: 99%;
diff --git a/dev/Styles/User/Contacts.less b/dev/Styles/User/Contacts.less
index 4b0eb97b7..d070e72e9 100644
--- a/dev/Styles/User/Contacts.less
+++ b/dev/Styles/User/Contacts.less
@@ -1,6 +1,7 @@
#V-PopupsContacts {
-
+ height: 100vh;
+ height: 100dvh;
max-width: 900px;
min-height: 300px;
@@ -13,7 +14,7 @@
.modal-body {
display: flex;
- height: calc(100vh - 49px);
+ height: 100%;
padding: 0;
}
diff --git a/dev/Styles/User/FolderList.less b/dev/Styles/User/FolderList.less
index b6e1f554c..6e5ef1b3f 100644
--- a/dev/Styles/User/FolderList.less
+++ b/dev/Styles/User/FolderList.less
@@ -2,21 +2,24 @@
@folderItemPadding: 7px;
@subPadding: 15px;
-.b-folders {
+#V-MailFolderList,
+#V-MailFolderList .b-content {
+ height: 100%;
+}
- > * {
- position: absolute;
- right: 2px;
- left: 0;
- }
+.b-folders {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ padding-right: 2px;
ul {
margin: 0;
}
input {
- width: calc(100% - 8px);
margin-left: 4px;
+ width: calc(100% - 8px);
}
.move-action-content-wrapper {
@@ -35,24 +38,17 @@
}
.b-toolbar {
- top: 0;
- padding: 10px 0 0 @rlLowMargin;
+ padding: 10px 0 10px @rlLowMargin;
color: #fff;
- z-index: 101;
}
.b-footer {
- bottom: 10px;
- padding: 0 10px 0 5px;
- z-index: 101;
-
+ padding: 10px @rlLowMargin;
overflow: hidden;
white-space: nowrap;
}
.b-content {
- bottom: 32px + @rlLowMargin + @rlBottomMargin;
- top: 50px + @rlLowMargin;
overflow: hidden;
overflow-y: auto;
min-width: 100px;
diff --git a/dev/Styles/User/Layout.less b/dev/Styles/User/Layout.less
index be2659059..cb1f6d162 100644
--- a/dev/Styles/User/Layout.less
+++ b/dev/Styles/User/Layout.less
@@ -5,11 +5,6 @@
background-position: center;
}
-#rl-content {
- display:flex;
- height: 100%;
-}
-
#rl-left {
flex-grow: 0;
flex-shrink: 0;
diff --git a/dev/Styles/User/MessageList.less b/dev/Styles/User/MessageList.less
index 95be8874e..ed5bfde7b 100644
--- a/dev/Styles/User/MessageList.less
+++ b/dev/Styles/User/MessageList.less
@@ -7,7 +7,7 @@ html.rl-mobile, html.rl-no-preview-pane {
#V-MailMessageList.focused .messageList {
border-color: #9d9d9d;
- box-shadow: @rlMainShadow;
+ box-shadow: var(--smMainShadow);
}
#sort-list-dropdown-id {
diff --git a/dev/Styles/User/MessageView.less b/dev/Styles/User/MessageView.less
index 8584b2c9b..2ce4c0854 100644
--- a/dev/Styles/User/MessageView.less
+++ b/dev/Styles/User/MessageView.less
@@ -454,7 +454,7 @@ html.rl-no-preview-pane .messageView {
bottom: @rlBottomMargin;
right: @rlBottomMargin;
border: 1px solid var(--border-color, #aaa);
- box-shadow: @rlMainShadow;
+ box-shadow: var(--smMainShadow);
}
}
diff --git a/dev/Styles/User/Settings.less b/dev/Styles/User/Settings.less
index 632c42255..a0d4e0b1a 100644
--- a/dev/Styles/User/Settings.less
+++ b/dev/Styles/User/Settings.less
@@ -70,7 +70,7 @@
background-color: var(--settings-bg-clr, #fff);
border: 1px solid var(--border-color, #aaa);
border-radius: var(--border-radius, 5px);
- box-shadow: @rlMainShadow;
+ box-shadow: var(--smMainShadow);
height: calc(100% - 50px - @rlLowMargin - @rlLowMargin);
margin: 50px @rlLowMargin @rlLowMargin 0;
overflow-y: auto;
diff --git a/dev/Styles/_BootstrapFix.less b/dev/Styles/_BootstrapFix.less
deleted file mode 100644
index 618e81b2e..000000000
--- a/dev/Styles/_BootstrapFix.less
+++ /dev/null
@@ -1,42 +0,0 @@
-
-.legend {
- border-bottom: 1px solid var(--border-color, #ddd);
- font-size: 150%;
- line-height: 2.1;
- margin-bottom: 1.43em;
-}
-summary.legend {
- cursor: pointer;
-}
-
-.btn.btn-thin {
- padding: 0 9px;
-}
-
-.alert a:not(.close) {
- text-decoration: underline;
-}
-
-.alert.alert-info a:not(.close) {
- color: var(--info-clr, #3a87ad);
-}
-
-.alert.alert-error a:not(.close) {
- color: var(--error-clr, #b94a48);
-}
-
-/* mobile and tablet */
-@media screen and (max-width: 999px) {
- .form-horizontal {
- .control-group {
- > label {
- text-align: left;
- }
-
- // Move over all input controls and content
- > *:not(label) {
- margin-left: 20px;
- }
- }
- }
-}
diff --git a/dev/Styles/_Values.less b/dev/Styles/_Values.less
index 916b00b93..11f7ec9f9 100644
--- a/dev/Styles/_Values.less
+++ b/dev/Styles/_Values.less
@@ -1,7 +1,14 @@
@rlLeftWidth: 200px;
-
-@rlMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-
@rlLowMargin: 8px;
@rlBottomMargin: 5px;
+
+:root {
+ --rlLeftWidth: 200px;
+ --smDialogShrink: 20px;
+ --smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+.rl-mobile {
+ /* For Firefox */
+ --smDialogShrink: 50px;
+}
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html b/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
index adfbeb6f6..f0badedfa 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
@@ -27,7 +27,6 @@
-