holm/the-glorious-startpage
1
0
Fork 0
forked from extern/the-glorious-startpage
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix dashboard responsiveness and add more cleanups

Browse Source
This commit is contained in:
Gerome Matilla 2020-06-04 12:44:21 +08:00
parent 69e33bc433
commit 3ed199f8fa
5 changed files with 193 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/dashboard.css
View File

@ -21,6 +21,7 @@
#rightDashboard {
width: 0;
top: 0;
right: 0;
position: absolute;
overflow-x: hidden;
@ -64,3 +65,10 @@
visibility: visible !important;
z-index: 6 !important;
}
@media screen and (max-width: 580px) {
.showRightDashboard {
width: 100vw !important;
margin-right: 0 !important;
}
}

154
css/dock.css
View File

@ -29,3 +29,157 @@
transition: transform var(--transition-speed);
z-index: 1 !important;
}
/*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);
}
}

7
css/search-box.css
View File

@ -33,3 +33,10 @@
top: 100% !important;
pointer-events: initial !important;
}
@media screen and (max-width: 580px) {
#searchBox {
width: 50vw;
}
}

14
css/theme-engine.css
View File

@ -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;
}
@ -158,3 +151,10 @@ select::-ms-expand {
color: var(--base-color);
background: var(--panel-bg);
}
@media screen and (max-width: 580px) {
.themeEngine {
width: 96vw;
box-sizing: border-box;
}
}

30
css/weather-screen.css
View File

@ -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 {