From 049e3fc08c6bf55789151658b54d70ecf42f9d94 Mon Sep 17 00:00:00 2001 From: Dale Harvey 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 120da4c4f1b..a19dddf43ff 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 b3d07b19257..0527f65beb1 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 091fb0197bd..4ef7f95fff5 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 8ef48b6265c..e58095c70ca 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 40a80f17bbc..0e0552e3c8a 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 80f6c40f396..265e39624ee 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 Date: Wed, 27 May 2020 19:33:55 +0200 Subject: [PATCH 2/2] fix requested changes from #3991 Signed-off-by: Jovan Gerodetti --- 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 a19dddf43ff..b8bb1b04c2a 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 0527f65beb1..b1372affee5 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 4ef7f95fff5..917dcabf674 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 e58095c70ca..e3409792f03 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 0e0552e3c8a..2b204955d8f 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 265e39624ee..a047a6f9b4c 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; + } }