From 3ed199f8fa07a07e9afbfe53577007ffee5b010f Mon Sep 17 00:00:00 2001 From: Gerome Matilla Date: Thu, 4 Jun 2020 12:44:21 +0800 Subject: [PATCH] fix dashboard responsiveness and add more cleanups --- css/dashboard.css | 8 +++ css/dock.css | 156 ++++++++++++++++++++++++++++++++++++++++- css/search-box.css | 7 ++ css/theme-engine.css | 14 ++-- css/weather-screen.css | 32 ++++----- 5 files changed, 193 insertions(+), 24 deletions(-) diff --git a/css/dashboard.css b/css/dashboard.css index ff7176e..a5e8b6d 100644 --- a/css/dashboard.css +++ b/css/dashboard.css @@ -21,6 +21,7 @@ #rightDashboard { width: 0; + top: 0; right: 0; position: absolute; overflow-x: hidden; @@ -63,4 +64,11 @@ .showDashboardOverlay { visibility: visible !important; z-index: 6 !important; +} + +@media screen and (max-width: 580px) { + .showRightDashboard { + width: 100vw !important; + margin-right: 0 !important; + } } \ No newline at end of file diff --git a/css/dock.css b/css/dock.css index 496e475..6a82599 100644 --- a/css/dock.css +++ b/css/dock.css @@ -28,4 +28,158 @@ transition: transform var(--transition-speed); z-index: 1 !important; -} \ No newline at end of file +} + + + +/*Translate dock to left side if width <= 580 and height >= 540*/ +@media screen and (max-width: 580px) and (min-height: 540px) { + + .dockContainer { + display: inline-block; + opacity: 1; + + position: relative; + margin:0 auto; + + top: 50%; + left: 0; + bottom: 0; + right: 0; + + -webkit-transform: translateY(-50%); + transition: opacity var(--transition-speed); + } + + #dock { + display: inline-block; + width: auto; + height: auto; + margin: 5px; + transform: scale(0.85); + transition: transform var(--transition-speed); + } +} + +/*If there's no enough height, move dock to bottom then scale up to 320px*/ + +/*Decrease scale to 0.85 if width is less than 580px*/ +@media screen and (max-width: 579px) and (max-height: 539px) { + + .dockContainer { + position: absolute; + background: transparent; + z-index: 5; + margin: 0 auto; + bottom: 0; + + /*On bottom, center horizontally*/ + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); + + /*Add transition*/ + transition: opacity var(--transition-speed); + } + + #dock { + display: flex; + width: auto; + height: auto; + margin: 5px; + transform: scale(0.85); + transition: transform var(--transition-speed); + } + +} + +/*Decrease scale to 0.65 if width is less than 490px*/ +@media screen and (max-width: 490px) and (max-height: 539px) { + + .dockContainer { + position: absolute; + background: transparent; + z-index: 5; + margin: 0 auto; + bottom: 0; + + /*On bottom, center horizontally*/ + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); + + /*Add transition*/ + transition: opacity var(--transition-speed); + } + + #dock { + display: flex; + width: auto; + height: auto; + margin: 5px; + transform: scale(0.65); + transition: transform var(--transition-speed); + } + +} + +/*Decrease scale to 0.55 if width is less than or equal to 374px and greater than or equal to 320px*/ +@media screen and (max-width: 375px) and (min-width: 320px) and (max-height: 539px) { + + .dockContainer { + position: absolute; + background: transparent; + z-index: 5; + margin: 0 auto; + bottom: 0; + + /*On bottom, center horizontally*/ + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); + + /*Add transition*/ + transition: opacity var(--transition-speed); + } + + #dock { + display: flex; + width: auto; + height: auto; + margin: 5px; + transform: scale(0.55); + transition: transform var(--transition-speed); + } + +} + +/*Scale to 0 if less than 320px*/ +@media screen and (max-width: 319px) and (max-height: 539px) { + + .dockContainer { + position: absolute; + background: transparent; + z-index: 5; + margin: 0 auto; + bottom: 0; + + /*On bottom, center horizontally*/ + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); + + /*Add transition*/ + transition: opacity var(--transition-speed); + } + + #dock { + display: flex; + width: auto; + height: auto; + opacity: 0; + margin: 5px; + transform: scale(0.0); + transition: transform var(--transition-speed), opacity var(--transition-speed); + } + +} diff --git a/css/search-box.css b/css/search-box.css index 54f3ed5..a9c18f3 100644 --- a/css/search-box.css +++ b/css/search-box.css @@ -33,3 +33,10 @@ top: 100% !important; pointer-events: initial !important; } + +@media screen and (max-width: 580px) { + #searchBox { + width: 50vw; + } +} + diff --git a/css/theme-engine.css b/css/theme-engine.css index bad0b4c..9560fb5 100644 --- a/css/theme-engine.css +++ b/css/theme-engine.css @@ -99,13 +99,6 @@ select::-ms-expand { background: var(--base-active-bg); } -@media screen and (max-width: 580px) { - .themeEngine { - width: 96vw; - box-sizing: border-box; - } -} - .themeEngineGroups { margin-top: 5px; } @@ -157,4 +150,11 @@ select::-ms-expand { border-radius: 6px; color: var(--base-color); background: var(--panel-bg); +} + +@media screen and (max-width: 580px) { + .themeEngine { + width: 96vw; + box-sizing: border-box; + } } \ No newline at end of file diff --git a/css/weather-screen.css b/css/weather-screen.css index 17c826e..f18db0e 100644 --- a/css/weather-screen.css +++ b/css/weather-screen.css @@ -40,21 +40,6 @@ z-index var(--transition-speed); } -@media screen and (max-width: 580px) { - #weatherScreen { - padding-top: 6vh; - padding-bottom: 0vh; - padding-left: 18vw; - padding-right: 18vw; - } -} - -@media screen and (max-height: 799px) { - #weatherScreen { - padding-top: 40px; - } -} - .showWeatherScreen{ transform: scale(1) !important; opacity: 1 !important; @@ -202,6 +187,21 @@ clear:both; } +@media screen and (max-width: 580px) { + #weatherScreen { + padding-top: 6vh; + padding-bottom: 0vh; + padding-left: 18vw; + padding-right: 18vw; + } +} + +@media screen and (max-height: 799px) { + #weatherScreen { + padding-top: 40px; + } +} + @media screen and (max-width: 580px) { .weatherForecast { @@ -244,4 +244,4 @@ clear: none; } -} +} \ No newline at end of file