From 73407fa904bf1939ba3bf62c65db3355b3563e7c Mon Sep 17 00:00:00 2001 From: joker-x Date: Tue, 21 Jul 2020 08:23:27 +0200 Subject: [PATCH 1/2] Responsive improvements --- app/index.html | 1 + themes/MetroMumbleLight/main.scss | 46 +++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+) diff --git a/app/index.html b/app/index.html index 349addf..b87bea1 100644 --- a/app/index.html +++ b/app/index.html @@ -2,6 +2,7 @@ + diff --git a/themes/MetroMumbleLight/main.scss b/themes/MetroMumbleLight/main.scss index fbdc413..aeca56a 100644 --- a/themes/MetroMumbleLight/main.scss +++ b/themes/MetroMumbleLight/main.scss @@ -537,3 +537,49 @@ form { .minimal .user-status { height: 19px; } + +/* Mobile view */ + +@media only screen and (max-width: 600px) { + + .toolbar-horizontal ~ .channel-root-container, .toolbar-vertical ~ .channel-root-container { + height:calc(100% - 440px); + position:static; + width:100%; + } + + .toolbar-horizontal ~ .chat, .toolbar-vertical ~ .chat { + position:fixed; + bottom: 60px; + left:0; + width:100%; + height:330px; + y-overflow:auto; + font-size:0.8em; + z-index:10; + } + + .toolbar-vertical { + flex-direction: row; + height: 36px; + margin-top: 4px; + margin-left: 1%; + padding-left: 5px; + } + + #message-box { + margin: 10px 5px 10px 5px; + padding: 10px; + height: 2em; + font-size: 1.2em; + font-weight: bold; + } + + .handle-vertical, .handle-horizontal { + display: none; + } + + .dialog { + min-width: 350px; + } +} From 53992a1f59ba22f29e0b4ab2a275c9e5ffe341b7 Mon Sep 17 00:00:00 2001 From: joker-x Date: Tue, 21 Jul 2020 09:58:54 +0200 Subject: [PATCH 2/2] Apply mobile view if height >= 600px and width >= 320px only --- themes/MetroMumbleLight/main.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/MetroMumbleLight/main.scss b/themes/MetroMumbleLight/main.scss index aeca56a..84dd800 100644 --- a/themes/MetroMumbleLight/main.scss +++ b/themes/MetroMumbleLight/main.scss @@ -540,7 +540,7 @@ form { /* Mobile view */ -@media only screen and (max-width: 600px) { +@media only screen and (max-width: 600px) and (min-width: 320px) and (min-height: 600px) { .toolbar-horizontal ~ .channel-root-container, .toolbar-vertical ~ .channel-root-container { height:calc(100% - 440px);