forked from extern/the-glorious-startpage
Quality control (#27)
* fix paddings on screen * fix test Variable Assigned to Object Injection Sink * fix parse int missing base * fix security issues(regex not included) * fix missing base * fixes padding * minor fixes * regex * cleanup * minor cleanup in webmenu * cleanups * cleanups spaces to tab * cleanups * spacing tabs fixes test * cleanup * cleanup * multitransition new line * cleanup * cleanup * cleanup * cleanup * readme * comments * cleanup * Avoid assignments in operands * cleanup
This commit is contained in:
Gerome Matilla
GitHub
parent
f484e86e09
commit
ae6e1254ea
@ -1,6 +1,6 @@
|
||||
## A bloated and modern-looking startpage
|
||||
|
||||
[](https://github.com/manilarome/the-glorious-startpage/commits/master) [](https://github.com/manilarome/the-glorious-startpage/pulls) [](http://hits.dwyl.com/manilarome/the-glorious-startpage)
|
||||
[](https://github.com/manilarome/the-glorious-startpage/commits/master) [](https://github.com/manilarome/the-glorious-startpage/pulls) [](http://hits.dwyl.com/manilarome/the-glorious-startpage) [](https://www.codacy.com/manual/manilarome/the-glorious-startpage?utm_source=github.com&utm_medium=referral&utm_content=manilarome/the-glorious-startpage&utm_campaign=Badge_Grade)
|
||||
|
||||
## [Live Preview](https://manilarome.github.io/the-glorious-startpage/)
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
backdrop-filter: blur(var(--blur-strength));
|
||||
z-index: 5;
|
||||
|
||||
/*Make clock unselectable*/
|
||||
/* Make clock unselectable */
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
font-family: roboto-bold, sans-serif;
|
||||
font-weight: 700;
|
||||
|
||||
/*Center lock*/
|
||||
/* Center lock */
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*Dock buttons*/
|
||||
/* Dock buttons */
|
||||
.dockButton {
|
||||
background: var(--base-container);
|
||||
width: 36px;
|
||||
@ -9,23 +9,22 @@
|
||||
padding: 5px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform .2s;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
/*The a href container/main dock button container*/
|
||||
/* The a href container/main dock button container */
|
||||
.dockLink {
|
||||
/*Act as div*/
|
||||
/* Act as div */
|
||||
display: block;
|
||||
|
||||
/*Remove outlines*/
|
||||
/* Remove outlines */
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
border: none;
|
||||
-moz-outline-style: none;
|
||||
|
||||
/*Disable dragging*/
|
||||
/* Disable dragging */
|
||||
user-select: none;
|
||||
user-drag: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
@ -41,12 +40,12 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Dock button hover */
|
||||
.dockButton:hover {
|
||||
background: var(--base-hover-bg);
|
||||
|
||||
@ -55,6 +54,7 @@
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
/* Dock button active */
|
||||
.dockButton:active {
|
||||
background: var(--base-active-bg);
|
||||
|
||||
@ -63,6 +63,7 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Dock button image */
|
||||
.dockButtonImage {
|
||||
background-size: cover;
|
||||
}
|
||||
@ -5,12 +5,12 @@
|
||||
margin: 0 auto;
|
||||
bottom: 0;
|
||||
|
||||
/*On bottom, center horizontally*/
|
||||
/* On bottom, center horizontally */
|
||||
left: 50%;
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
|
||||
/*Add transition*/
|
||||
/* Add transition */
|
||||
transition: opacity var(--transition-speed);
|
||||
}
|
||||
|
||||
@ -30,15 +30,14 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/*Translate dock to left side if width <= 470 and height >= 540*/
|
||||
/* Translate dock to left side if width <= 470 and height >= 540 */
|
||||
@media screen and (max-width: 470px) and (min-height: 490px) {
|
||||
|
||||
.dockContainer {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
|
||||
position: relative;
|
||||
margin:0 auto;
|
||||
margin: 0 auto;
|
||||
|
||||
top: 50%;
|
||||
left: 0;
|
||||
@ -54,15 +53,13 @@
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 5px;
|
||||
transform: scale(0.90);
|
||||
transform: scale(0.9);
|
||||
transition: transform var(--transition-speed);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*Decrease scale to 0.85 if width is less than 470px*/
|
||||
/* Decrease scale to 0.85 if width is less than 470px */
|
||||
@media screen and (max-width: 469px) and (max-height: 489px) {
|
||||
|
||||
.dockContainer {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
@ -70,12 +67,12 @@
|
||||
margin: 0 auto;
|
||||
bottom: 0;
|
||||
|
||||
/*On bottom, center horizontally*/
|
||||
/* On bottom, center horizontally */
|
||||
left: 50%;
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
|
||||
/*Add transition*/
|
||||
/* Add transition */
|
||||
transition: opacity var(--transition-speed);
|
||||
}
|
||||
|
||||
@ -87,13 +84,10 @@
|
||||
transform: scale(0.85);
|
||||
transition: transform var(--transition-speed);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*Decrease scale to 0.75 if width is less than 380px*/
|
||||
/* Decrease scale to 0.75 if width is less than 380px */
|
||||
@media screen and (max-width: 380px) and (max-height: 489px) {
|
||||
|
||||
.dockContainer {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
@ -101,12 +95,12 @@
|
||||
margin: 0 auto;
|
||||
bottom: 0;
|
||||
|
||||
/*On bottom, center horizontally*/
|
||||
/* On bottom, center horizontally */
|
||||
left: 50%;
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
|
||||
/*Add transition*/
|
||||
/* Add transition */
|
||||
transition: opacity var(--transition-speed);
|
||||
}
|
||||
|
||||
@ -118,12 +112,10 @@
|
||||
transform: scale(0.75);
|
||||
transition: transform var(--transition-speed);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*Decrease scale to 0.70 if width is less than or equal to 374px and greater than or equal to 320px*/
|
||||
/* Decrease scale to 0.70 if width is less than or equal to 374px and greater than or equal to 320px */
|
||||
@media screen and (max-width: 350px) and (min-width: 320px) and (max-height: 489px) {
|
||||
|
||||
.dockContainer {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
@ -131,12 +123,12 @@
|
||||
margin: 0 auto;
|
||||
bottom: 0;
|
||||
|
||||
/*On bottom, center horizontally*/
|
||||
/* On bottom, center horizontally */
|
||||
left: 50%;
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
|
||||
/*Add transition*/
|
||||
/* Add transition */
|
||||
transition: opacity var(--transition-speed);
|
||||
}
|
||||
|
||||
@ -145,15 +137,13 @@
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 5px;
|
||||
transform: scale(0.70);
|
||||
transform: scale(0.7);
|
||||
transition: transform var(--transition-speed);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*Scale to 0 if less than 320px*/
|
||||
/* Scale to 0 if less than 320px */
|
||||
@media screen and (max-width: 319px) and (max-height: 489px) {
|
||||
|
||||
.dockContainer {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
@ -161,12 +151,12 @@
|
||||
margin: 0 auto;
|
||||
bottom: 0;
|
||||
|
||||
/*On bottom, center horizontally*/
|
||||
/* On bottom, center horizontally */
|
||||
left: 50%;
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
|
||||
/*Add transition*/
|
||||
/* Add transition */
|
||||
transition: opacity var(--transition-speed);
|
||||
}
|
||||
|
||||
@ -176,9 +166,9 @@
|
||||
height: auto;
|
||||
opacity: 0;
|
||||
margin: 5px;
|
||||
transform: scale(0.0);
|
||||
transition: transform var(--transition-speed),
|
||||
transform: scale(0);
|
||||
transition:
|
||||
transform var(--transition-speed),
|
||||
opacity var(--transition-speed);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,65 +1,5 @@
|
||||
:root {
|
||||
/* Colors */
|
||||
--base-body-bg: #1A1A1AFF;
|
||||
|
||||
--base-bg: #00000060;
|
||||
--base-color: #FEFEFEFF;
|
||||
--base-container: #F2F2F220;
|
||||
|
||||
--base-hover-bg: #F2F2F230;
|
||||
--base-focus-bg: #F2F2F245;
|
||||
--base-active-bg: #FEFEFE60;
|
||||
|
||||
--blur-strength: 6px;
|
||||
|
||||
--panel-bg: var(--base-bg);
|
||||
--panel-color: var(--base-color);
|
||||
|
||||
--transition-speed: 300ms;
|
||||
|
||||
--rounded-radius: 12px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
/*Font rendering*/
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-variant-ligatures: none;
|
||||
|
||||
/*Disable tap hightlight color on mobile devices*/
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: var(--base-body-bg);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: roboto, sans-serif;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/*Placeholder*/
|
||||
::placeholder {
|
||||
color: var(--base-color);
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/*Scrollbar*/
|
||||
/* width */
|
||||
/* Scrollbar */
|
||||
/* Width */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
@ -74,15 +14,75 @@ html, body {
|
||||
background: var(--base-active-bg);
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--base-body-bg: #1a1a1aff;
|
||||
--base-bg: #00000060;
|
||||
--base-color: #fefefeff;
|
||||
--base-container: #f2f2f220;
|
||||
--base-hover-bg: #f2f2f230;
|
||||
--base-focus-bg: #f2f2f245;
|
||||
--base-active-bg: #fefefe60;
|
||||
--blur-strength: 6px;
|
||||
--panel-bg: var(--base-bg);
|
||||
--panel-color: var(--base-color);
|
||||
--transition-speed: 300ms;
|
||||
--rounded-radius: 12px;
|
||||
}
|
||||
|
||||
/* Placeholder */
|
||||
::placeholder {
|
||||
color: var(--base-color);
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--base-hover-bg);
|
||||
}
|
||||
|
||||
/*Hide focus elements outline*/
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Font rendering */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-variant-ligatures: none;
|
||||
|
||||
/* Disable tap hightlight color on mobile devices */
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
body {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: var(--base-body-bg);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: roboto, sans-serif;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/* Select */
|
||||
select {
|
||||
text-align: center;
|
||||
text-align-last: center;
|
||||
}
|
||||
|
||||
/* Hide focus elements outline */
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus{
|
||||
select:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -90,12 +90,6 @@ select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*Select*/
|
||||
select {
|
||||
text-align: center;
|
||||
text-align-last: center;
|
||||
}
|
||||
|
||||
option {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -1,16 +1,19 @@
|
||||
/* Fantasque Sans */
|
||||
@font-face {
|
||||
font-family: 'fantasque-sans-mono';
|
||||
font-style: normal;
|
||||
src: url('../../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf');
|
||||
}
|
||||
|
||||
/*Roboto light*/
|
||||
/* Roboto light */
|
||||
@font-face {
|
||||
font-family: 'roboto-light';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url('../../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
|
||||
src: local('Roboto Light'), local('Roboto-Light'),
|
||||
src:
|
||||
local('Roboto Light'),
|
||||
local('Roboto-Light'),
|
||||
url('../../fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
|
||||
@ -18,13 +21,15 @@
|
||||
url('../../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/*Roboto normal*/
|
||||
/* Roboto normal */
|
||||
@font-face {
|
||||
font-family: 'roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
src:
|
||||
local('Roboto'),
|
||||
local('Roboto-Regular'),
|
||||
url('../../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||
@ -32,13 +37,15 @@
|
||||
url('../../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/*Roboto bold*/
|
||||
/* Roboto bold */
|
||||
@font-face {
|
||||
font-family: 'roboto-bold';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'),
|
||||
src:
|
||||
local('Roboto Bold'),
|
||||
local('Roboto-Bold'),
|
||||
url('../../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
|
||||
|
||||
4
css/base/normalize.css
vendored
4
css/base/normalize.css
vendored
@ -62,7 +62,7 @@ hr {
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-family: monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
@ -105,7 +105,7 @@ strong {
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-family: monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*Container*/
|
||||
/* Container */
|
||||
.phrasesContainer {
|
||||
position: absolute;
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-speed);
|
||||
|
||||
/*Disable user touch/select on text elements*/
|
||||
/* Disable user touch/select on text elements */
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
@ -20,49 +20,49 @@
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*Show suggestion*/
|
||||
/* Show suggestion */
|
||||
#suggestionsContainer.suggestionsShow {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*ul*/
|
||||
/* UL */
|
||||
#suggestions {
|
||||
|
||||
height: auto;
|
||||
width: 50vw;
|
||||
|
||||
/*Center ul horizontally*/
|
||||
/* Center ul horizontally */
|
||||
margin: 0 auto;
|
||||
list-style: none;
|
||||
|
||||
/*Remove the fucking padding*/
|
||||
/*It took me an hour to fix this piece of shit*/
|
||||
/* Remove the fucking padding */
|
||||
/* It took me an hour to fix this piece of shit */
|
||||
padding: 0;
|
||||
|
||||
/*Allow centering of children*/
|
||||
/* Allow centering of children */
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
/*li*/
|
||||
/* LI */
|
||||
#phrase {
|
||||
/*Align list horizontally*/
|
||||
/* Align list horizontally */
|
||||
justify-content: center;
|
||||
|
||||
height: auto;
|
||||
|
||||
/*Always stack and center horizontally*/
|
||||
/*display: table-cell;*/
|
||||
/*width: auto;*/
|
||||
/*text-align: center;*/
|
||||
/* Always stack and center horizontally */
|
||||
/* display: table-cell; */
|
||||
/* width: auto; */
|
||||
/* text-align: center; */
|
||||
|
||||
/*Always stack and center vertically*/
|
||||
/* Always stack and center vertically */
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*The li's child*/
|
||||
/* LI's Child */
|
||||
.phraseButton {
|
||||
|
||||
background: transparent;
|
||||
@ -71,35 +71,35 @@
|
||||
|
||||
color: var(--base-color);
|
||||
font-size: 12pt;
|
||||
font-family: roboto-bold;
|
||||
font-family: roboto-bold, sans-serif;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
|
||||
border-radius: 6px;
|
||||
vertical-align: middle;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.phraseButton:focus {
|
||||
background: var(--base-bg);
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.phraseButton:active {
|
||||
background: var(--base-active-bg);
|
||||
}
|
||||
|
||||
@media screen and (max-height: 539px) and (min-height: 341px) {
|
||||
|
||||
#suggestions {
|
||||
height: auto;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/*The Li*/
|
||||
/* The Li */
|
||||
#phrase {
|
||||
/*Always stack and center horizontally*/
|
||||
/* Always stack and center horizontally */
|
||||
display: table-cell;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
|
||||
justify-content: space-between;
|
||||
@ -110,9 +110,8 @@
|
||||
}
|
||||
|
||||
@media screen and (max-height: 340px) {
|
||||
|
||||
/* Hide */
|
||||
#suggestionsContainer.phrasesContainer {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
}
|
||||
@ -12,7 +12,8 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: -1;
|
||||
transition: opacity var(--transition-speed),
|
||||
transition:
|
||||
opacity var(--transition-speed),
|
||||
z-index var(--transition-speed),
|
||||
backdrop-filter var(--transition-speed);
|
||||
}
|
||||
|
||||
@ -16,7 +16,8 @@
|
||||
#centeredBox {
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
transition: opacity var(--transition-speed),
|
||||
transition:
|
||||
opacity var(--transition-speed),
|
||||
z-index var(--transition-speed);
|
||||
}
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
#profileImage {
|
||||
background-image: url('../../assets/user.png') ;
|
||||
background-image: url('../../assets/user.png');
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
border-radius: 50%;
|
||||
@ -37,6 +37,11 @@
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { -webkit-transform: rotate(0deg) }
|
||||
to { -webkit-transform: rotate(360deg) }
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -8,7 +8,8 @@
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
transition: opacity var(--transition-speed),
|
||||
transition:
|
||||
opacity var(--transition-speed),
|
||||
top var(--transition-speed),
|
||||
pointer-events var(--transition-speed);
|
||||
}
|
||||
@ -22,7 +23,7 @@
|
||||
|
||||
margin-bottom: 10px;
|
||||
|
||||
/*Center horizontally*/
|
||||
/* Center horizontally */
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@ -63,4 +64,3 @@
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
background: var(--panel-bg);
|
||||
height: 100%;
|
||||
z-index: 7;
|
||||
/*border-radius: var(--rounded-radius);*/
|
||||
/* border-radius: var(--rounded-radius); */
|
||||
backdrop-filter: blur(var(--blur-strength));
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
@ -31,19 +31,19 @@
|
||||
transition: width var(--transition-speed);
|
||||
}
|
||||
|
||||
/*Hide scrollbar*/
|
||||
/* Hide scrollbar */
|
||||
#rightDashboard::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*Show dashboard*/
|
||||
/* Show dashboard */
|
||||
.dashboard#rightDashboard.showRightDashboard {
|
||||
width: 350px;
|
||||
z-index: 7;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/*Overlay*/
|
||||
/* Overlay */
|
||||
.dashboardOverlay {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
@ -58,7 +58,8 @@
|
||||
|
||||
z-index: -2;
|
||||
filter: blur(var(--blur-strength)) brightness(70%);
|
||||
transition: visibility var(--transition-speed),
|
||||
transition:
|
||||
visibility var(--transition-speed),
|
||||
z-index var(--transition-speed);
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
color: var(--base-color);
|
||||
background: var(--base-container);
|
||||
@ -94,7 +94,7 @@ select::-ms-expand {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
/*Center vertically*/
|
||||
/* Center vertically */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
.themeEngine {
|
||||
font-family: roboto, sans-serif;
|
||||
font-weight: 400;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
color: var(--base-color);
|
||||
background: var(--base-container);
|
||||
@ -48,7 +49,7 @@
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
/*Center vertically*/
|
||||
/* Center vertically */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -85,7 +86,7 @@
|
||||
.foregroundColorSetter,
|
||||
.blurSetter,
|
||||
.animSpeedSetter {
|
||||
/*Align div inside horizontally*/
|
||||
/* Align div inside horizontally */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
color: var(--base-color);
|
||||
background: var(--base-container);
|
||||
@ -28,7 +28,7 @@
|
||||
background-image: url('../../assets/ui-icons/weather.svg');
|
||||
}
|
||||
|
||||
/*Main settings*/
|
||||
/* Main settings */
|
||||
.weatherSettingsGroups {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
@ -48,7 +48,8 @@
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: height var(--transition-speed),
|
||||
transition:
|
||||
height var(--transition-speed),
|
||||
opacity var(--transition-speed);
|
||||
}
|
||||
|
||||
@ -67,7 +68,7 @@
|
||||
font-weight: 400;
|
||||
color: var(--base-color);
|
||||
|
||||
/*Center vertically*/
|
||||
/* Center vertically */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -123,23 +124,25 @@
|
||||
margin-right: 2.5px;
|
||||
}
|
||||
|
||||
#weatherSettingsApply:hover, #weatherSettingsReset:hover {
|
||||
#weatherSettingsApply:hover,
|
||||
#weatherSettingsReset:hover {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: var(--base-hover-bg);
|
||||
}
|
||||
|
||||
#weatherSettingsApply:active, #weatherSettingsReset:active {
|
||||
#weatherSettingsApply:active,
|
||||
#weatherSettingsReset:active {
|
||||
outline: none;
|
||||
background: var(--base-active-bg);
|
||||
}
|
||||
|
||||
#weatherSettingsApply:focus, #weatherSettingsReset:focus {
|
||||
#weatherSettingsApply:focus,
|
||||
#weatherSettingsReset:focus {
|
||||
outline: none;
|
||||
background: var(--base-focus-bg);
|
||||
}
|
||||
|
||||
|
||||
#weatherSettingsButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(var(--blur-strength));
|
||||
|
||||
/*Disable user touch/select on text elements*/
|
||||
/* Disable user touch/select on text elements */
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
@ -18,7 +18,7 @@
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
/*Dont increase the geometry by using padding*/
|
||||
/* Dont increase the geometry by using padding */
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -1,17 +1,14 @@
|
||||
#weatherScreen {
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
|
||||
padding-top: 6vh;
|
||||
padding-bottom: 6vh;
|
||||
padding-left: 12vw;
|
||||
padding-right: 12vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 6vh 12vw;
|
||||
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
transition: transform var(--transition-speed),
|
||||
transition:
|
||||
transform var(--transition-speed),
|
||||
opacity var(--transition-speed),
|
||||
z-index var(--transition-speed);
|
||||
}
|
||||
@ -24,9 +21,8 @@
|
||||
|
||||
#weatherScreenContainer {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
/*Align vertically center*/
|
||||
/* Align vertically center */
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -89,32 +85,29 @@
|
||||
}
|
||||
|
||||
#sunriseHourDataIcon {
|
||||
background: url("../../assets/weather-icons/sunrise.svg");
|
||||
background-image: url("../../assets/weather-icons/sunrise.svg");
|
||||
background-size: cover;
|
||||
|
||||
}
|
||||
|
||||
#sunsetHourDataIcon {
|
||||
background: url("../../assets/weather-icons/sunset.svg");
|
||||
background-image: url("../../assets/weather-icons/sunset.svg");
|
||||
background-size: cover;
|
||||
margin-left: 5px
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#updateHourDataIcon {
|
||||
background: url("../../assets/weather-icons/refresh.svg");
|
||||
background-image: url("../../assets/weather-icons/refresh.svg");
|
||||
background-size: cover;
|
||||
margin-left: 5px
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
.weatherForecast {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
/*Forecast Container*/
|
||||
/* Forecast Container */
|
||||
.weatherForecastDay {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
@ -124,14 +117,14 @@
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/*Add fixed geometry to weatherForecastDay children*/
|
||||
/* Add fixed geometry to weatherForecastDay children */
|
||||
.weatherForecastDay > div {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.weatherForecastDayIconContainer {
|
||||
clear:both;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.weatherForecastDayIcon {
|
||||
@ -146,10 +139,9 @@
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/*Center*/
|
||||
/* Center */
|
||||
.weatherForecastDayDetails {
|
||||
|
||||
clear:both;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.weatherForecastDayDetailsTemperature,
|
||||
@ -167,17 +159,14 @@
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
/*Right side*/
|
||||
/* Right side */
|
||||
.weatherForecastDayDate {
|
||||
clear:both;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 470px) {
|
||||
#weatherScreen {
|
||||
padding-top: 6vh;
|
||||
padding-bottom: 0vh;
|
||||
padding-left: 18vw;
|
||||
padding-right: 18vw;
|
||||
padding: 6vh 18vw 0 18vw;
|
||||
}
|
||||
}
|
||||
|
||||
@ -188,24 +177,23 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 470px) {
|
||||
|
||||
.weatherForecast {
|
||||
display: inline-block;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/*Forecast Container*/
|
||||
/* Forecast Container */
|
||||
.weatherForecastDay {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
|
||||
float: none;
|
||||
clear: none;
|
||||
margin-left : 0px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/*Add fixed geometry to weatherForecastDay children*/
|
||||
/* Add fixed geometry to weatherForecastDay children */
|
||||
.weatherForecastDay > div {
|
||||
width: 75px;
|
||||
height: 50px;
|
||||
@ -221,17 +209,16 @@
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
/*Center*/
|
||||
/* Center */
|
||||
.weatherForecastDayDetails {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
/*Right side*/
|
||||
/* Right side */
|
||||
.weatherForecastDayDate {
|
||||
float: right;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,29 +1,22 @@
|
||||
#webMenuScreen {
|
||||
z-index: 0;
|
||||
padding: 40px 12vw 6vh 12vw;
|
||||
|
||||
padding-top: 40px;
|
||||
padding-bottom: 6vh;
|
||||
padding-left: 12vw;
|
||||
padding-right: 12vw;
|
||||
|
||||
/*Transitions*/
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: transform var(--transition-speed),
|
||||
transition:
|
||||
transform var(--transition-speed),
|
||||
opacity var(--transition-speed),
|
||||
z-index var(--transition-speed);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 470px) {
|
||||
#webMenuScreen {
|
||||
padding-top: 6vh;
|
||||
padding-bottom: 0vh;
|
||||
padding-left: 18vw;
|
||||
padding-right: 18vw;
|
||||
padding: 6vh 18vw 0 18vw;
|
||||
}
|
||||
}
|
||||
|
||||
/*Show web menu*/
|
||||
/* Show web menu */
|
||||
.screen#webMenuScreen.showWebMenu {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
@ -67,7 +60,7 @@
|
||||
}
|
||||
|
||||
#webMenuSearchBoxContainer {
|
||||
/*Center horizontally*/
|
||||
/* Center horizontally */
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
@ -76,9 +69,9 @@
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/*Web menu list*/
|
||||
/* Web menu list */
|
||||
|
||||
/*UL*/
|
||||
/* UL */
|
||||
#webMenuList {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
@ -89,9 +82,9 @@
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/*List*/
|
||||
/* List */
|
||||
#webMenuList li {
|
||||
/*Align list horizontally*/
|
||||
/* Align list horizontally */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -107,7 +100,7 @@
|
||||
transition: transform var(--transition-speed);
|
||||
}
|
||||
|
||||
/*Child of li*/
|
||||
/* Child of li */
|
||||
.webItem {
|
||||
background: transparent;
|
||||
width: 128px;
|
||||
@ -143,15 +136,15 @@
|
||||
background: var(--base-active-bg);
|
||||
}
|
||||
|
||||
/*Contains web icon and label*/
|
||||
/* Contains web icon and label */
|
||||
.webItemContainer {
|
||||
/*Align vertically*/
|
||||
margin:0 auto;
|
||||
/* Align vertically */
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
|
||||
/*Align horizontally*/
|
||||
/* Align horizontally */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
@ -159,7 +152,7 @@
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/*Web icon container*/
|
||||
/* Web icon container */
|
||||
.webItemIconContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -171,9 +164,10 @@
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
margin-bottom: 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/*Web label/name*/
|
||||
/* Web label/name */
|
||||
.webItemName {
|
||||
text-align: center;
|
||||
font-size: 11pt;
|
||||
@ -181,7 +175,6 @@
|
||||
font-weight: 400;
|
||||
word-wrap: break-word;
|
||||
color: var(--base-color);
|
||||
|
||||
}
|
||||
|
||||
#webMenuListContainer {
|
||||
@ -191,9 +184,9 @@
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
|
||||
/*Fade transparency*/
|
||||
/*-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);*/
|
||||
/*mask-image: linear-gradient(to bottom, black 85%, transparent 100%);*/
|
||||
/* Fade transparency */
|
||||
/* -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%); */
|
||||
/* mask-image: linear-gradient(to bottom, black 85%, transparent 100%); */
|
||||
}
|
||||
|
||||
/*Stretch list item if screen width < 470px*/
|
||||
@ -241,6 +234,5 @@
|
||||
|
||||
/*Disable dragging*/
|
||||
user-select: none;
|
||||
user-drag: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
@ -1,29 +1,29 @@
|
||||
/*Load all CSS*/
|
||||
/* Load all CSS */
|
||||
@import url('base/normalize.css');
|
||||
@import url('base/font-face.css');
|
||||
@import url('base/base.css');
|
||||
@import url('base/dummy-body-background.css');
|
||||
|
||||
/*Bars and Panels*/
|
||||
/* Bars and Panels */
|
||||
@import url('bars/bar.css');
|
||||
@import url('bars/top-panel.css');
|
||||
@import url('bars/clock.css');
|
||||
@import url('bars/dock.css');
|
||||
@import url('bars/dock-buttons.css');
|
||||
|
||||
/*Centered box and Contents*/
|
||||
/* Centered box and Contents */
|
||||
@import url('centeredbox/centered-box.css');
|
||||
@import url('centeredbox/centered-box-overlay.css');
|
||||
@import url('centeredbox/profile-image.css');
|
||||
@import url('centeredbox/search-box.css');
|
||||
@import url('centeredbox/auto-suggestion.css');
|
||||
|
||||
/*Screens*/
|
||||
/* Screens */
|
||||
@import url('screens/screens.css');
|
||||
@import url('screens/weather-screen.css');
|
||||
@import url('screens/web-menu.css');
|
||||
|
||||
/*Dashboard and Settings*/
|
||||
/* Dashboard and Settings */
|
||||
@import url('dashboard/dashboard.css');
|
||||
@import url('dashboard/greeter-date-message.css');
|
||||
@import url('dashboard/search-engine-settings.css');
|
||||
|
||||
@ -40,7 +40,7 @@ class AutoSuggestion {
|
||||
|
||||
const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button'));
|
||||
const phraseIndex = (phraseButtons.indexOf(document.activeElement) + 1) % phraseButtons.length;
|
||||
const phraseButton = phraseButtons[phraseIndex];
|
||||
const phraseButton = phraseButtons[parseInt(phraseIndex, 10)];
|
||||
phraseButton.focus();
|
||||
|
||||
} else if ((e.key === 'ArrowUp') || e.key === 'ArrowLeft') {
|
||||
@ -48,23 +48,23 @@ class AutoSuggestion {
|
||||
e.preventDefault();
|
||||
|
||||
const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button'));
|
||||
const phraseIndex = (phraseButtons.indexOf(document.activeElement) - 1) % phraseButtons.length;
|
||||
let phraseIndex = (phraseButtons.indexOf(document.activeElement) - 1) % phraseButtons.length;
|
||||
|
||||
if (phraseIndex < 0) {
|
||||
phraseIndex = phraseButtons.length - 1;
|
||||
};
|
||||
}
|
||||
|
||||
const phraseButton = phraseButtons[phraseIndex];
|
||||
const phraseButton = phraseButtons[parseInt(phraseIndex, 10)];
|
||||
phraseButton.focus();
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// Onmouseup event
|
||||
button.onmouseup = e => {
|
||||
this._searchBox.value = button.innerText;
|
||||
this._searchBox.focus();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Generate and parse suggestions
|
||||
@ -105,12 +105,12 @@ class AutoSuggestion {
|
||||
_fetchSuggestion = () => {
|
||||
|
||||
const endpoint = 'https://duckduckgo.com/ac/';
|
||||
const callback = 'autocompleteCallback'
|
||||
const callback = 'autocompleteCallback';
|
||||
const searchQuery = String(this._searchBox.value);
|
||||
window[callback] = res => {
|
||||
window[String(callback)] = res => {
|
||||
// Passed the suggestion object to process it
|
||||
this._autocompleteCallback(res);
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch from duckduckgo
|
||||
const script = document.createElement('script');
|
||||
|
||||
@ -46,8 +46,8 @@ class DummyBodyBackground {
|
||||
|
||||
},
|
||||
3000
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// Add a delay when to fetch the hq background
|
||||
setTimeout (
|
||||
|
||||
@ -29,7 +29,7 @@ class Config {
|
||||
name: 'Bing',
|
||||
prefix: 'https://www.bing.com/search?q='
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return searchEngines;
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ class Dashboard {
|
||||
const len = elems.length;
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
elems[i].disabled = status;
|
||||
elems[parseInt(i, 10)].disabled = status;
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,7 +61,7 @@ class Dashboard {
|
||||
|
||||
toggleDashboard = () => {
|
||||
|
||||
console.log('toggle dashboard');
|
||||
// console.log('toggle dashboard');
|
||||
|
||||
if (this._rightDashboardVisibility) {
|
||||
|
||||
@ -76,7 +76,7 @@ class Dashboard {
|
||||
// If centered box is hidden, open it
|
||||
if (this._centeredBox.classList.contains('hiddenBox')) {
|
||||
|
||||
console.log('centered box is hidden, reopening...');
|
||||
// console.log('centered box is hidden, reopening...');
|
||||
|
||||
// Rotate profile container
|
||||
profileImage.rotateProfile();
|
||||
@ -88,16 +88,16 @@ class Dashboard {
|
||||
|
||||
// Check if any of these are open, if yes, close it
|
||||
if (this._searchBoxContainer.classList.contains('showSearchBox')) {
|
||||
console.log('searchbox is open, closing...');
|
||||
// console.log('searchbox is open, closing...');
|
||||
searchBoxShow.hideSearchBox();
|
||||
|
||||
} else if (this._webMenu.classList.contains('showWebMenu')) {
|
||||
console.log('web menu is open, closing...');
|
||||
// console.log('web menu is open, closing...');
|
||||
webMenu.hideWebMenu();
|
||||
return;
|
||||
|
||||
} else if (this._weatherScreen.classList.contains('showWeatherScreen')) {
|
||||
console.log('weather screen is open, closing...');
|
||||
// console.log('weather screen is open, closing...');
|
||||
weatherScreen.hideWeatherScreen();
|
||||
return;
|
||||
|
||||
@ -109,7 +109,7 @@ class Dashboard {
|
||||
if (this._rightDashboardVisibility) {
|
||||
this.toggleDashboard();
|
||||
}
|
||||
console.log('dashboard overlay clicked...');
|
||||
// console.log('dashboard overlay clicked...');
|
||||
}
|
||||
|
||||
_registerOverlayMouseUpEvent = () => {
|
||||
|
||||
@ -53,9 +53,9 @@ class DockButtons {
|
||||
|
||||
for (let i = 0; i < (this.dockSites.length); i++) {
|
||||
|
||||
const site = this.dockSites[i].site;
|
||||
const icon = this.dockSites[i].icon;
|
||||
const url = this.dockSites[i].url;
|
||||
const site = this.dockSites[parseInt(i, 10)].site;
|
||||
const icon = this.dockSites[parseInt(i, 10)].icon;
|
||||
const url = this.dockSites[parseInt(i, 10)].url;
|
||||
|
||||
// Create a href
|
||||
const aDock = document.createElement('a');
|
||||
@ -81,7 +81,7 @@ class DockButtons {
|
||||
aDock.appendChild(dockButton);
|
||||
|
||||
this._dock.appendChild(aDock);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
_populateDock = () => {
|
||||
|
||||
@ -53,8 +53,8 @@ class GreeterDateMessage {
|
||||
greeterSuffix = 'Evening';
|
||||
}
|
||||
|
||||
this._greeterMessage.innerHTML = `Good<br>${greeterSuffix}!`;
|
||||
this._dateMessage.innerHTML = `Today's the ${this._getDayOrdinal(date.getDate())} of ` +
|
||||
this._greeterMessage.innerText = `Good\n${greeterSuffix}!`;
|
||||
this._dateMessage.innerText = `Today's the ${this._getDayOrdinal(date.getDate())} of ` +
|
||||
`${this._monthsArr[date.getMonth()]}, and it's ${this._daysArr[date.getDay()]}.`;
|
||||
}
|
||||
|
||||
|
||||
@ -94,7 +94,7 @@ class KeyBinding {
|
||||
// Backspacing while there's no search query will hide searhbox
|
||||
// Will also hide if you hit enter
|
||||
if ((e.key === 'Backspace' || e.key === 'Enter') &&
|
||||
this._searchBox.value < 1) { searchBoxShow.toggleSearchBox(); return; };
|
||||
this._searchBox.value < 1) { searchBoxShow.toggleSearchBox(); return; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@ class SwipeEventManager {
|
||||
|
||||
el.addEventListener(
|
||||
'touchstart',
|
||||
(event) => {
|
||||
event => {
|
||||
// event.preventDefault();
|
||||
this._xDown = event.touches[0].clientX;
|
||||
this._yDown = event.touches[0].clientY;
|
||||
@ -24,7 +24,7 @@ class SwipeEventManager {
|
||||
|
||||
el.addEventListener(
|
||||
'touchmove',
|
||||
(event) => {
|
||||
event => {
|
||||
// event.preventDefault();
|
||||
if ( ! this._xDown || ! this._yDown ) {
|
||||
return;
|
||||
@ -38,7 +38,7 @@ class SwipeEventManager {
|
||||
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
|
||||
if ( xDiff > 0 ) {
|
||||
// Left Swipe
|
||||
dir = 'left'
|
||||
dir = 'left';
|
||||
} else {
|
||||
// Right Swipe
|
||||
dir = 'right';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
class ProfileImage {
|
||||
|
||||
constructor() {
|
||||
this._profileContainer = document.querySelector('#profileImageContainer')
|
||||
this._profileContainer = document.querySelector('#profileImageContainer');
|
||||
|
||||
this._profileAnimRunning = false;
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ class SearchEngineSettings {
|
||||
Object.keys(this._searchEngines)
|
||||
.forEach(key => {
|
||||
const seValue = key;
|
||||
const seData = this._searchEngines[key];
|
||||
const seData = this._searchEngines[String(key)];
|
||||
const seOption = document.createElement('option');
|
||||
|
||||
// Generate search engine suggestions
|
||||
@ -51,8 +51,8 @@ class SearchEngineSettings {
|
||||
`
|
||||
<option value='${seValue}'>${seData.name}</option>
|
||||
`
|
||||
)
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Call to update query string and placeholder
|
||||
this._updateSearchEngineElements();
|
||||
|
||||
@ -48,8 +48,8 @@ class SearchQuerySend {
|
||||
}
|
||||
|
||||
// Search the web
|
||||
this._sendQuery()
|
||||
};
|
||||
this._sendQuery();
|
||||
}
|
||||
}
|
||||
|
||||
_registerKeyUpEvent = () => {
|
||||
|
||||
@ -61,7 +61,7 @@ class SearchBoxShow {
|
||||
this.showSearchBox();
|
||||
}
|
||||
|
||||
console.log('toggle searchbox');
|
||||
// console.log('toggle searchbox');
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -53,13 +53,13 @@ class ThemeEngine {
|
||||
if (!colorRGBA) {
|
||||
|
||||
// If RGB - (#RRGGBB)
|
||||
if (/^#([0-9A-F]{3}){1,2}$/i.test(colorStr)) {
|
||||
if (/^#[0-9A-F]{3}$/i.test(colorStr)) {
|
||||
|
||||
// Add completely opaque alpha
|
||||
return colorStr + 'FF';
|
||||
|
||||
// If three-charactered HEX color - (#RGB)
|
||||
} else if (/^#([0-9A-F]{3}){1,2}$/i.test(colorStr)) {
|
||||
} else if (/^#[0-9A-F]{3}$/i.test(colorStr)) {
|
||||
|
||||
// Convert it to RRGGBB
|
||||
return colorStr.replace(/^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/, '#$1$1$2$2$3$3');
|
||||
@ -74,6 +74,7 @@ class ThemeEngine {
|
||||
|
||||
} else {
|
||||
alert('Invalid color');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -158,7 +159,7 @@ class ThemeEngine {
|
||||
foregroundOpacity,
|
||||
blurStrength,
|
||||
animSpeed
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
_updateCSSconstiables = () => {
|
||||
|
||||
@ -42,7 +42,7 @@ class WeatherScreen {
|
||||
}
|
||||
|
||||
_getWeatherIcon = code => {
|
||||
const icon_tbl = {
|
||||
const iconTbl = {
|
||||
'01d': 'sun_icon.svg',
|
||||
'01n': 'moon_icon.svg',
|
||||
'02d': 'dfew_clouds.svg',
|
||||
@ -63,7 +63,7 @@ class WeatherScreen {
|
||||
'50n': 'nmist.svg'
|
||||
};
|
||||
|
||||
return icon_tbl[code];
|
||||
return iconTbl[String(code)];
|
||||
}
|
||||
|
||||
_updateWeatherDockButton = icon => {
|
||||
@ -73,15 +73,15 @@ class WeatherScreen {
|
||||
|
||||
_setWeatherValue = (loc, desc, icon, sunr, suns, updt) => {
|
||||
|
||||
this._weatherLocation.innerHTML = loc;
|
||||
this._weatherDescription.innerHTML = desc + this._tempSymbol;
|
||||
this._weatherLocation.innerText = loc;
|
||||
this._weatherDescription.innerText = desc + this._tempSymbol;
|
||||
|
||||
this._weatherIcon.style.background = `url('assets/weather-icons/${icon}')`;
|
||||
this._weatherIcon.style.backgroundSize = 'cover';
|
||||
|
||||
this._sunriseHour.innerHTML = sunr;
|
||||
this._sunsetHour.innerHTML = suns;
|
||||
this._updateHour.innerHTML = updt;
|
||||
this._sunriseHour.innerText = sunr;
|
||||
this._sunsetHour.innerText = suns;
|
||||
this._updateHour.innerText = updt;
|
||||
|
||||
// Update weather button on dock
|
||||
this._updateWeatherDockButton(icon);
|
||||
@ -107,7 +107,7 @@ class WeatherScreen {
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -136,7 +136,7 @@ class WeatherScreen {
|
||||
const wLoc = cityName + ', ' + countryName;
|
||||
|
||||
let wDesc = weatherDescription + ', ' + weatherTemp;
|
||||
wDesc = wDesc && wDesc[0].toUpperCase() + wDesc.slice(1)
|
||||
wDesc = wDesc && wDesc[0].toUpperCase() + wDesc.slice(1);
|
||||
|
||||
const wIcon = this._getWeatherIcon(weatherIcon);
|
||||
const rise = this._formatUnixTime(sunRise);
|
||||
@ -158,7 +158,7 @@ class WeatherScreen {
|
||||
callback(JSON.parse(request.response));
|
||||
} else {
|
||||
this._setErrValue();
|
||||
};
|
||||
}
|
||||
};
|
||||
request.send();
|
||||
}
|
||||
@ -204,17 +204,17 @@ class WeatherScreen {
|
||||
_processForecastData = data => {
|
||||
|
||||
// Empty forecast container to avoid duplication
|
||||
this._forecastContainer.innerHTML = '';
|
||||
this._forecastContainer.innerText = '';
|
||||
|
||||
const forecast = data.list;
|
||||
|
||||
for (let i = 8; i < forecast.length; i+=8) {
|
||||
|
||||
const foreIcon = forecast[i].weather[0].icon;
|
||||
const minimumTemp = forecast[i].main.temp_min;
|
||||
const maximumTemp = forecast[i].main.temp_max;
|
||||
const foreDescription = forecast[i].weather[0].description;
|
||||
const dateTime = forecast[i].dt_txt;
|
||||
const foreIcon = forecast[parseInt(i, 10)].weather[0].icon;
|
||||
const minimumTemp = forecast[parseInt(i, 10)].main.temp_min;
|
||||
const maximumTemp = forecast[parseInt(i, 10)].main.temp_max;
|
||||
const foreDescription = forecast[parseInt(i, 10)].weather[0].description;
|
||||
const dateTime = forecast[parseInt(i, 10)].dt_txt;
|
||||
|
||||
const fIcon = this._getWeatherIcon(foreIcon);
|
||||
const minTemp = Math.floor(minimumTemp);
|
||||
@ -243,7 +243,7 @@ class WeatherScreen {
|
||||
|
||||
toggleWeatherScreen = () => {
|
||||
|
||||
console.log('toggle weather screen');
|
||||
// console.log('toggle weather screen');
|
||||
|
||||
// If profile anim is still running,
|
||||
// Return to avoid spam
|
||||
@ -263,16 +263,16 @@ class WeatherScreen {
|
||||
|
||||
// Check if any of these are open, if yes, close it
|
||||
if (this._webMenu.classList.contains('showWebMenu')) {
|
||||
console.log('web menu is open, closing...');
|
||||
// console.log('web menu is open, closing...');
|
||||
webMenu.hideWebMenu();
|
||||
return;
|
||||
|
||||
} else if (this._searchBoxContainer.classList.contains('showSearchBox')) {
|
||||
console.log('searchbox is open, closing...');
|
||||
// console.log('searchbox is open, closing...');
|
||||
searchBoxShow.hideSearchBox();
|
||||
|
||||
} else if (this._dashboard.classList.contains('showRightDashboard')) {
|
||||
console.log('dashboard is open, closing...');
|
||||
// console.log('dashboard is open, closing...');
|
||||
dashboard.hideDashboard();
|
||||
}
|
||||
|
||||
|
||||
@ -105,7 +105,7 @@ class WeatherSettings {
|
||||
_deniedGeolocation = () => {
|
||||
|
||||
alert(`Location access denied! If you're on mobile, make sure to`+
|
||||
` enable your GPS and allow the location permission on your browser's settings.`)
|
||||
` enable your GPS and allow the location permission on your browser's settings.`);
|
||||
|
||||
}
|
||||
|
||||
@ -116,7 +116,7 @@ class WeatherSettings {
|
||||
|
||||
if ((this._origLongitude !== currentCoord.longitude) || (this._origLatitude !== currentCoord.latitude)) {
|
||||
|
||||
console.log('update current position');
|
||||
// console.log('update current position');
|
||||
|
||||
// Update origPositions
|
||||
this._origLongitude = currentCoord.longitude;
|
||||
@ -131,9 +131,9 @@ class WeatherSettings {
|
||||
// Error
|
||||
_watchGeoError = err => {
|
||||
|
||||
console.warn('ERROR(' + err.code + '): ' + err.message);
|
||||
// console.warn('ERROR(' + err.code + '): ' + err.message);
|
||||
|
||||
if (err.code == err.PERMISSION_DENIED) {
|
||||
if (err.code === err.PERMISSION_DENIED) {
|
||||
|
||||
this._deniedGeolocation();
|
||||
|
||||
@ -150,7 +150,7 @@ class WeatherSettings {
|
||||
|
||||
navigator.permissions.query({name:'geolocation'}).then(result => {
|
||||
|
||||
if ((result.state === 'prompt') || (result.state == 'granted')) {
|
||||
if ((result.state === 'prompt') || (result.state === 'granted')) {
|
||||
|
||||
this._watchGeoPosition();
|
||||
|
||||
@ -170,13 +170,13 @@ class WeatherSettings {
|
||||
|
||||
if (this._locatorMode === 'geolocation') {
|
||||
|
||||
console.log('geolocation');
|
||||
// console.log('geolocation');
|
||||
|
||||
this._weatherSettingsCityIDGroup.classList.add('hideWeatherSettings');
|
||||
|
||||
} else if (this._locatorMode === 'city') {
|
||||
|
||||
console.log('city');
|
||||
// console.log('city');
|
||||
|
||||
this._weatherSettingsCityIDGroup.classList.remove('hideWeatherSettings');
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@ class WebMenu {
|
||||
const len = elems.length;
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
elems[i].disabled = status;
|
||||
elems[parseInt(i, 10)].disabled = status;
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@ class WebMenu {
|
||||
// Create a callback property for the passed li
|
||||
li.callback = () => {
|
||||
window.location.href = encodeURI(url);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Sort list alphabetically
|
||||
@ -81,7 +81,7 @@ class WebMenu {
|
||||
<div class='webItemContainer'>
|
||||
<div class='webItemBody'>
|
||||
<div class='webItemIconContainer'>
|
||||
<div class='webItemIcon' style='background: url("assets/webcons/${icon}.svg"); background-size: cover;'></div>
|
||||
<div class='webItemIcon' style='background-image: url("assets/webcons/${icon}.svg");'></div>
|
||||
</div>
|
||||
<div class='webItemName'>${site}</div>
|
||||
</div>
|
||||
@ -89,7 +89,7 @@ class WebMenu {
|
||||
</div>
|
||||
</a>
|
||||
`
|
||||
)
|
||||
);
|
||||
|
||||
// Create callback property
|
||||
this._createWebItemCallback(li, url);
|
||||
@ -103,6 +103,8 @@ class WebMenu {
|
||||
|
||||
// Allow fuzzy searching in web menu
|
||||
_fuzzySearch = () => {
|
||||
|
||||
// eslint-disable-next-line no-extend-native
|
||||
String.prototype.fuzzy = function(term, ratio) {
|
||||
const string = this.toLowerCase();
|
||||
const compare = term.toLowerCase();
|
||||
@ -112,7 +114,12 @@ class WebMenu {
|
||||
if (string.indexOf(compare) > -1) return true;
|
||||
|
||||
for (let i = 0; i < compare.length; i++) {
|
||||
string.indexOf(compare[i]) > -1 ? matches += 1 : matches -=1;
|
||||
const ind = string.indexOf(compare[parseInt(i, 10)]);
|
||||
if (ind > -1) {
|
||||
matches += 1;
|
||||
} else {
|
||||
matches -=1;
|
||||
}
|
||||
}
|
||||
return ((matches / this.length) >= ratio || term === '');
|
||||
};
|
||||
@ -131,7 +138,7 @@ class WebMenu {
|
||||
// Loop through all list items, and focus if matches the search query
|
||||
for (let i = 0; i < li.length; i++) {
|
||||
|
||||
a = li[i].getElementsByClassName('webItemName')[0];
|
||||
a = li[parseInt(i, 10)].getElementsByClassName('webItemName')[0];
|
||||
txtValue = a.innerHTML || a.textContent || a.innerText;
|
||||
|
||||
// If an item match, hightlight it and focus
|
||||
@ -144,7 +151,7 @@ class WebMenu {
|
||||
oldWebItemFocusChild.classList.remove('webItemFocus');
|
||||
|
||||
// Update webItemFocus
|
||||
this._webItemFocus = li[i];
|
||||
this._webItemFocus = li[parseInt(i, 10)];
|
||||
|
||||
// Update weblistindex
|
||||
this._webListIndex = i;
|
||||
@ -229,7 +236,7 @@ class WebMenu {
|
||||
// Toggle web menu screen
|
||||
toggleWebMenu = () => {
|
||||
|
||||
console.log('toggle web menu');
|
||||
// console.log('toggle web menu');
|
||||
|
||||
// If profile anim is still running,
|
||||
// Return to avoid spam
|
||||
@ -249,15 +256,15 @@ class WebMenu {
|
||||
|
||||
// Check if any of these are open, if yes, close it
|
||||
if (searchBoxContainer.classList.contains('showSearchBox')) {
|
||||
console.log('searchbox is open, closing...');
|
||||
// console.log('searchbox is open, closing...');
|
||||
searchBoxShow.hideSearchBox();
|
||||
|
||||
} else if (this._dashboard.classList.contains('showRightDashboard')) {
|
||||
console.log('dashboard is open, closing...');
|
||||
// console.log('dashboard is open, closing...');
|
||||
dashboard.hideDashboard();
|
||||
|
||||
} else if (this._weatherScreen.classList.contains('showWeatherScreen')) {
|
||||
console.log('weather screen is open, closing...');
|
||||
// console.log('weather screen is open, closing...');
|
||||
weatherScreen.hideWeatherScreen();
|
||||
return;
|
||||
|
||||
@ -304,7 +311,7 @@ class WebMenu {
|
||||
const containerWindow = ((window.innerWidth - (menuItemWidth / 2) - scrollBarWidth - vw(24)) / menuItemWidth);
|
||||
// Get rounded result
|
||||
return Math.round(containerWindow);
|
||||
}
|
||||
};
|
||||
|
||||
// Determine the index position by key
|
||||
const changeWebListIndex = () => {
|
||||
@ -330,24 +337,24 @@ class WebMenu {
|
||||
this._webMenuSearchBox.value = '';
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const changeItemFocus = (condition, overFlowIndex) => {
|
||||
const next = this._webMenuList.getElementsByTagName('li')[this._webListIndex];
|
||||
if(typeof next !== undefined && condition) {
|
||||
if(typeof next !== 'undefined' && condition) {
|
||||
this._webItemFocus = next;
|
||||
} else {
|
||||
this._webListIndex = overFlowIndex;
|
||||
this._webItemFocus = this._webMenuList.getElementsByTagName('li')[overFlowIndex];
|
||||
}
|
||||
this._webItemFocus = this._webMenuList.getElementsByTagName('li')[parseInt(overFlowIndex, 10)];
|
||||
}
|
||||
};
|
||||
|
||||
const changeItemFocusByKey = () => {
|
||||
if (key === right) { return changeItemFocus((this._webListIndex <= len), 0) }
|
||||
if (key === left) { return changeItemFocus((this._webListIndex >= 0), len) }
|
||||
if (key === up) { return changeItemFocus((this._webListIndex >= 0), len) }
|
||||
if (key === down) { return changeItemFocus((this._webListIndex <= len), 0) }
|
||||
}
|
||||
if (key === right) { return changeItemFocus((this._webListIndex <= len), 0); }
|
||||
if (key === left) { return changeItemFocus((this._webListIndex >= 0), len); }
|
||||
if (key === up) { return changeItemFocus((this._webListIndex >= 0), len); }
|
||||
if (key === down) { return changeItemFocus((this._webListIndex <= len), 0); }
|
||||
};
|
||||
|
||||
changeWebListIndex();
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user