From 049e3fc08c6bf55789151658b54d70ecf42f9d94 Mon Sep 17 00:00:00 2001
From: Dale Harvey <dale@arandomurl.com>
Date: Thu, 30 Jan 2020 11:18:14 +0100
Subject: [PATCH 1/2] Add some media queries to improve UI on mobile
---
res/css/views/auth/_AuthBody.scss | 8 +++++++-
res/css/views/auth/_AuthHeader.scss | 6 ++++++
res/css/views/auth/_AuthHeaderLogo.scss | 6 ++++++
res/css/views/auth/_AuthPage.scss | 6 ++++++
res/css/views/rooms/_EventTile.scss | 11 +++++++++++
res/css/views/rooms/_RoomHeader.scss | 9 +++++++++
6 files changed, 45 insertions(+), 1 deletion(-)
diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index 120da4c4f1..a19dddf43f 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -16,7 +16,7 @@ limitations under the License.
*/
.mx_AuthBody {
- width: 500px;
+ max-width: 500px;
font-size: $font-12px;
color: $authpage-secondary-color;
background-color: $authpage-body-bg-color;
@@ -146,3 +146,9 @@ limitations under the License.
.mx_AuthBody_spinner {
margin: 1em 0;
}
+
+@media only screen and (max-width : 480px) {
+ .mx_AuthBody {
+ padding: 10px;
+ }
+}
diff --git a/res/css/views/auth/_AuthHeader.scss b/res/css/views/auth/_AuthHeader.scss
index b3d07b1925..0527f65beb 100644
--- a/res/css/views/auth/_AuthHeader.scss
+++ b/res/css/views/auth/_AuthHeader.scss
@@ -21,3 +21,9 @@ limitations under the License.
padding: 25px 40px;
box-sizing: border-box;
}
+
+@media only screen and (max-width : 480px) {
+ .mx_AuthHeader {
+ display: none;
+ }
+}
diff --git a/res/css/views/auth/_AuthHeaderLogo.scss b/res/css/views/auth/_AuthHeaderLogo.scss
index 091fb0197b..4ef7f95fff 100644
--- a/res/css/views/auth/_AuthHeaderLogo.scss
+++ b/res/css/views/auth/_AuthHeaderLogo.scss
@@ -23,3 +23,9 @@ limitations under the License.
.mx_AuthHeaderLogo img {
width: 100%;
}
+
+@media only screen and (max-width : 480px) {
+ .mx_AuthHeaderLogo {
+ display: none;
+ }
+}
diff --git a/res/css/views/auth/_AuthPage.scss b/res/css/views/auth/_AuthPage.scss
index 8ef48b6265..e58095c70c 100644
--- a/res/css/views/auth/_AuthPage.scss
+++ b/res/css/views/auth/_AuthPage.scss
@@ -29,3 +29,9 @@ limitations under the License.
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: $authpage-modal-bg-color;
}
+
+@media only screen and (max-width : 480px) {
+ .mx_AuthPage_modal {
+ margin-top: 0;
+ }
+}
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 40a80f17bb..0e0552e3c8 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -572,3 +572,14 @@ limitations under the License.
margin-left: 1em;
}
}
+
+@media only screen and (max-width : 480px) {
+ .mx_EventTile_line, .mx_EventTile_reply {
+ padding-left: 0;
+ margin-right: 0;
+ }
+ .mx_EventTile_content {
+ margin-top: 10px;
+ margin-right: 0;
+ }
+}
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 80f6c40f39..265e39624e 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -267,3 +267,12 @@ limitations under the License.
.mx_RoomHeader_pinsIndicatorUnread {
background-color: $pinned-unread-color;
}
+
+@media only screen and (max-width : 480px) {
+ .mx_RoomHeader_wrapper {
+ padding: 0;
+ }
+ .mx_RoomHeader {
+ overflow: hidden;
+ }
+}
From af1c2f9b2902780f5b300a0cebe15ce85842f6b8 Mon Sep 17 00:00:00 2001
From: Jovan Gerodetti <jovan.gerodetti@titannano.de>
Date: Wed, 27 May 2020 19:33:55 +0200
Subject: [PATCH 2/2] fix requested changes from #3991
Signed-off-by: Jovan Gerodetti <jovan.gerodetti@titannano.de>
---
res/css/views/auth/_AuthBody.scss | 13 ++++++++-----
res/css/views/auth/_AuthHeader.scss | 8 ++++----
res/css/views/auth/_AuthHeaderLogo.scss | 8 ++++----
res/css/views/auth/_AuthPage.scss | 8 ++++----
res/css/views/rooms/_EventTile.scss | 18 +++++++++---------
res/css/views/rooms/_RoomHeader.scss | 14 +++++++-------
6 files changed, 36 insertions(+), 33 deletions(-)
diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index a19dddf43f..b8bb1b04c2 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -16,7 +16,7 @@ limitations under the License.
*/
.mx_AuthBody {
- max-width: 500px;
+ width: 500px;
font-size: $font-12px;
color: $authpage-secondary-color;
background-color: $authpage-body-bg-color;
@@ -147,8 +147,11 @@ limitations under the License.
margin: 1em 0;
}
-@media only screen and (max-width : 480px) {
- .mx_AuthBody {
- padding: 10px;
- }
+@media only screen and (max-width: 480px) {
+ .mx_AuthBody {
+ border-radius: 4px;
+ width: auto;
+ max-width: 500px;
+ padding: 10px;
+ }
}
diff --git a/res/css/views/auth/_AuthHeader.scss b/res/css/views/auth/_AuthHeader.scss
index 0527f65beb..b1372affee 100644
--- a/res/css/views/auth/_AuthHeader.scss
+++ b/res/css/views/auth/_AuthHeader.scss
@@ -22,8 +22,8 @@ limitations under the License.
box-sizing: border-box;
}
-@media only screen and (max-width : 480px) {
- .mx_AuthHeader {
- display: none;
- }
+@media only screen and (max-width: 480px) {
+ .mx_AuthHeader {
+ display: none;
+ }
}
diff --git a/res/css/views/auth/_AuthHeaderLogo.scss b/res/css/views/auth/_AuthHeaderLogo.scss
index 4ef7f95fff..917dcabf67 100644
--- a/res/css/views/auth/_AuthHeaderLogo.scss
+++ b/res/css/views/auth/_AuthHeaderLogo.scss
@@ -24,8 +24,8 @@ limitations under the License.
width: 100%;
}
-@media only screen and (max-width : 480px) {
- .mx_AuthHeaderLogo {
- display: none;
- }
+@media only screen and (max-width: 480px) {
+ .mx_AuthHeaderLogo {
+ display: none;
+ }
}
diff --git a/res/css/views/auth/_AuthPage.scss b/res/css/views/auth/_AuthPage.scss
index e58095c70c..e3409792f0 100644
--- a/res/css/views/auth/_AuthPage.scss
+++ b/res/css/views/auth/_AuthPage.scss
@@ -30,8 +30,8 @@ limitations under the License.
background-color: $authpage-modal-bg-color;
}
-@media only screen and (max-width : 480px) {
- .mx_AuthPage_modal {
- margin-top: 0;
- }
+@media only screen and (max-width: 480px) {
+ .mx_AuthPage_modal {
+ margin-top: 0;
+ }
}
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 0e0552e3c8..2b204955d8 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -573,13 +573,13 @@ limitations under the License.
}
}
-@media only screen and (max-width : 480px) {
- .mx_EventTile_line, .mx_EventTile_reply {
- padding-left: 0;
- margin-right: 0;
- }
- .mx_EventTile_content {
- margin-top: 10px;
- margin-right: 0;
- }
+@media only screen and (max-width: 480px) {
+ .mx_EventTile_line, .mx_EventTile_reply {
+ padding-left: 0;
+ margin-right: 0;
+ }
+ .mx_EventTile_content {
+ margin-top: 10px;
+ margin-right: 0;
+ }
}
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 265e39624e..a047a6f9b4 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -268,11 +268,11 @@ limitations under the License.
background-color: $pinned-unread-color;
}
-@media only screen and (max-width : 480px) {
- .mx_RoomHeader_wrapper {
- padding: 0;
- }
- .mx_RoomHeader {
- overflow: hidden;
- }
+@media only screen and (max-width: 480px) {
+ .mx_RoomHeader_wrapper {
+ padding: 0;
+ }
+ .mx_RoomHeader {
+ overflow: hidden;
+ }
}