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

dashboard add weather settings gui

Browse Source
This commit is contained in:
Gerome Matilla 2020-06-04 11:49:17 +08:00
parent 824bf84b8a
commit 8f6b31a47a
3 changed files with 169 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/style.css
View File

@ -14,6 +14,7 @@
@import url('search-engine-settings.css'); @import url('search-engine-settings.css');
@import url('theme-engine.css'); @import url('theme-engine.css');
@import url('weather-screen.css'); @import url('weather-screen.css');
@import url('weather-settings.css');
:root { :root {
/* Colors */ /* Colors */

126
css/weather-settings.css Normal file
View File

@ -0,0 +1,126 @@
.weatherSettings {
font-family: roboto;
width: 100%;
height: auto;
position: relative;;
border-radius: 6px;
color: var(--base-color);
background: var(--base-container);
margin-top: 10px;
}
#weatherSettingsPadding {
padding: 5px;
height: auto;
}
#weatherSettingsHeader {
height: 32px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: left;
}
#weatherSettingsHeaderIcon {
background: url('../assets/ui-icons/weather.svg');
background-size: cover;
margin-right: 10px;
width: 28px;
height: 28px;
}
#weatherSettingsHeaderLabel {
text-align: left;
font-weight: bold;
font-size: 14pt;
margin-top: auto;
margin-bottom: auto;
}
/*Main settings*/
.weatherSettingsGroups {
height: auto;
width: 100%;
margin-top: 5px;
}
.weatherSettingsLabels {
font-size: 12pt;
text-align: left;
}
.weatherSettingsInputs {
height: 32px;
width: 100%;
box-sizing: border-box;
margin-top: 5px;
border: none;
text-align: center;
border-radius: 6px;
color: var(--base-color);
background: var(--panel-bg);
/*Center vertically*/
display: flex;
justify-content: center;
align-items: center;
}
#weatherSelectUnits {
background: var(--base-container);
color: var(--base-color);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#weatherSelectUnits:hover {
cursor: pointer;
}
#weatherSelectUnits option {
color: initial;
border: none;
}
#weatherSettingsApply, #weatherSettingsReset {
margin-top: 0;
background: var(--base-container) !important;
}
#weatherSettingsApply {
margin-left: 2.5px;
}
#weatherSettingsReset {
margin-right: 2.5px;
}
#weatherSettingsApply:hover, #weatherSettingsReset:hover {
background: var(--base-hover-bg) !important;
cursor: pointer;
}
#weatherSettingsApply:active, #weatherSettingsReset:active {
background: var(--base-active-bg) !important;
}
#weatherSettingsButtons {
display: flex;
flex-direction: row;
justify-content: left;
}
#weatherSettingsContainer {
height: auto;
}
@media screen and (max-width: 580px) {
.weatherSettings {
width: 96vw;
box-sizing: border-box;
}
}

42
index.html
View File

@ -61,6 +61,48 @@
<div id="dateMessage"></div> <div id="dateMessage"></div>
<!-- Weather Settings -->
<div class="weatherSettings">
<div id="weatherSettingsPadding">
<div class="header" id="weatherSettingsHeader">
<div class="headerIcon" id="weatherSettingsHeaderIcon"></div>
<div class="headerLabel" id="weatherSettingsHeaderLabel">Weather Settings</div>
</div>
<div id="weatherSettingsContainer">
<div class="weatherSettingsGroups">
<div class="weatherSettingsLabels">
API Key
</div>
<input type="text" class="weatherSettingsInputs" id="apiBox" autocomplete="off" placeholder="API KEY"/>
</div>
<div class="weatherSettingsGroups">
<div class="weatherSettingsLabels">
City ID
</div>
<input type="text" class="weatherSettingsInputs" id="cityBox" autocomplete="off" placeholder="City ID"/>
</div>
<div class="weatherSettingsGroups">
<div class="weatherSettingsLabels">
Units
</div>
<select class="weatherSettingsInputs" id="weatherSelectUnits">
<option value="metric">Metric</option>
<option value="imperial">Imperial</option>
</select>
</div>
<div class="weatherSettingsGroups" id="weatherSettingsButtons">
<div class="weatherSettingsInputs" id="weatherSettingsReset">Clear Credentials</div>
<div class="weatherSettingsInputs" id="weatherSettingsApply">Apply</div>
</div>
</div>
</div>
</div>
<!-- Select search engine --> <!-- Select search engine -->
<div class="searchEngine"> <div class="searchEngine">
<div id="searchEnginePadding"> <div id="searchEnginePadding">