From d8e22f91671ccb0445cbd499b2474504629489b8 Mon Sep 17 00:00:00 2001 From: Ayush Kumar <2580ayush2580@gmail.com> Date: Tue, 19 Jan 2021 19:41:18 +0530 Subject: [PATCH 1/6] Improve room directory UX for mobile devices --- res/css/structures/_RoomDirectory.scss | 37 ++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index 29e6fecd34..a683c1d8f7 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -161,3 +161,40 @@ limitations under the License. padding: 0; } } + +@media screen and (max-width: 600px) { + .mx_RoomDirectory_table tr { + margin-bottom: 15px !important; + } + + .mx_RoomDirectory_roomMemberCount { + padding: 0px; + } + + .mx_AccessibleButton_kind_secondary { + padding: 0px !important; + } + + .mx_RoomDirectory_join { + margin-left: 0px; + } + + .mx_RoomDirectory_alias { + margin-top: 10px; + margin-bottom: 10px; + } + + .mx_RoomDirectory_roomDescription { + padding-bottom: 0px; + } + + .mx_RoomDirectory_name { + margin-bottom: 5px; + } + + .mx_RoomDirectory_table tr td { + margin-top: 5px !important; + display: block; + text-align: left; + } +} \ No newline at end of file From 498bcafd88344389e46927318ff17d263072e716 Mon Sep 17 00:00:00 2001 From: Ayush Kumar <2580ayush2580@gmail.com> Date: Tue, 19 Jan 2021 20:45:25 +0530 Subject: [PATCH 2/6] removed style-link error --- res/css/structures/_RoomDirectory.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index a683c1d8f7..c7a660da43 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -197,4 +197,4 @@ limitations under the License. display: block; text-align: left; } -} \ No newline at end of file +} From fec375a40e5a245f56a74f229ed00dbe0fbe1e14 Mon Sep 17 00:00:00 2001 From: Ayush Kumar <2580ayush2580@gmail.com> Date: Sun, 28 Feb 2021 11:28:16 +0530 Subject: [PATCH 3/6] fix width of grid --- res/css/structures/_RoomDirectory.scss | 38 +------------------------- 1 file changed, 1 insertion(+), 37 deletions(-) diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index 48c03a5f96..59383605aa 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -71,6 +71,7 @@ limitations under the License. row-gap: 24px; text-align: left; width: 100%; + min-width: 400px; } .mx_RoomDirectory_roomAvatar { @@ -155,40 +156,3 @@ limitations under the License. padding: 0; } } - -@media screen and (max-width: 600px) { - .mx_RoomDirectory_table tr { - margin-bottom: 15px !important; - } - - .mx_RoomDirectory_roomMemberCount { - padding: 0px; - } - - .mx_AccessibleButton_kind_secondary { - padding: 0px !important; - } - - .mx_RoomDirectory_join { - margin-left: 0px; - } - - .mx_RoomDirectory_alias { - margin-top: 10px; - margin-bottom: 10px; - } - - .mx_RoomDirectory_roomDescription { - padding-bottom: 0px; - } - - .mx_RoomDirectory_name { - margin-bottom: 5px; - } - - .mx_RoomDirectory_table tr td { - margin-top: 5px !important; - display: block; - text-align: left; - } -} From c883bd0cbf57c4a0bb8812e0303edb0ef54c2aaf Mon Sep 17 00:00:00 2001 From: Ayush Kumar <2580ayush2580@gmail.com> Date: Wed, 10 Mar 2021 15:00:53 +0530 Subject: [PATCH 4/6] Fix _RoomDirectory.scss for mobile screen --- res/css/structures/_RoomDirectory.scss | 38 +++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index 59383605aa..8c5c343a20 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -71,7 +71,6 @@ limitations under the License. row-gap: 24px; text-align: left; width: 100%; - min-width: 400px; } .mx_RoomDirectory_roomAvatar { @@ -156,3 +155,40 @@ limitations under the License. padding: 0; } } + +@media screen and (max-width: 700px) { + .mx_RoomDirectory_roomMemberCount { + padding: 0px; + } + + .mx_AccessibleButton_kind_secondary { + padding: 0px !important; + } + + .mx_RoomDirectory_join { + margin-left: 0px; + } + + .mx_RoomDirectory_alias { + margin-top: 10px; + margin-bottom: 10px; + } + + .mx_RoomDirectory_roomDescription { + padding-bottom: 0px; + } + + .mx_RoomDirectory_name { + margin-bottom: 5px; + } + + .mx_RoomDirectory_roomAvatar{ + margin-top: 10px; + } + + .mx_RoomDirectory_table { + grid-template-columns: auto; + row-gap: 14px; + margin-top: 5px; + } +} \ No newline at end of file From 35e04645364d3e68dde4ebb0e93120e3cdda6977 Mon Sep 17 00:00:00 2001 From: Ayush Kumar <2580ayush2580@gmail.com> Date: Wed, 10 Mar 2021 15:12:00 +0530 Subject: [PATCH 5/6] Fix Style-lint error --- res/css/structures/_RoomDirectory.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index 8c5c343a20..09e978b9e1 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -191,4 +191,4 @@ limitations under the License. row-gap: 14px; margin-top: 5px; } -} \ No newline at end of file +} From 54bbc2c2b1309a869d94ea661c6fb4e7149dbcc6 Mon Sep 17 00:00:00 2001 From: Ayush Kumar <2580ayush2580@gmail.com> Date: Wed, 10 Mar 2021 15:23:29 +0530 Subject: [PATCH 6/6] Fix Style-lint error --- res/css/structures/_RoomDirectory.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index 09e978b9e1..15b5297d62 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -182,7 +182,7 @@ limitations under the License. margin-bottom: 5px; } - .mx_RoomDirectory_roomAvatar{ + .mx_RoomDirectory_roomAvatar { margin-top: 10px; }