diff --git a/README.md b/README.md
index d0af5eb..bcb3547 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,15 @@
## A bloated and modern-looking startpage
-[![maintained](https://img.shields.io/maintenance/yes/2020?label=maintained&style=flat-square)](https://github.com/manilarome/the-glorious-startpage/commits/master) [![contributions](https://img.shields.io/badge/contribution-welcome-brightgreen&?style=flat-square)](https://github.com/manilarome/the-glorious-startpage/pulls) [![HitCount](http://hits.dwyl.com/manilarome/the-glorious-startpage.svg)](http://hits.dwyl.com/manilarome/the-glorious-startpage)
+[![maintained](https://img.shields.io/maintenance/yes/2020?label=maintained&style=flat-square)](https://github.com/manilarome/the-glorious-startpage/commits/master) [![contributions](https://img.shields.io/badge/contribution-welcome-brightgreen&?style=flat-square)](https://github.com/manilarome/the-glorious-startpage/pulls) [![HitCount](http://hits.dwyl.com/manilarome/the-glorious-startpage.svg)](http://hits.dwyl.com/manilarome/the-glorious-startpage) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/d942895baf48442d8c9df54306887aa0)](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/)
## Gallery
-
-
-
+
+
+
diff --git a/css/bars/bar.css b/css/bars/bar.css
index 31ccfc5..78ff84a 100644
--- a/css/bars/bar.css
+++ b/css/bars/bar.css
@@ -3,11 +3,11 @@
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;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-}
\ No newline at end of file
+}
diff --git a/css/bars/clock.css b/css/bars/clock.css
index 02a970c..c3be63a 100644
--- a/css/bars/clock.css
+++ b/css/bars/clock.css
@@ -4,9 +4,9 @@
font-family: roboto-bold, sans-serif;
font-weight: 700;
- /*Center lock*/
+ /* Center lock */
text-align: center;
position: relative;
- top: 50%;
- transform: translateY(-50%);
-}
\ No newline at end of file
+ top: 50%;
+ transform: translateY(-50%);
+}
diff --git a/css/bars/dock-buttons.css b/css/bars/dock-buttons.css
index e76ef48..eb8a2d3 100644
--- a/css/bars/dock-buttons.css
+++ b/css/bars/dock-buttons.css
@@ -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,28 +40,30 @@
top: 0;
bottom: 0;
margin: auto;
-
max-width: 100%;
max-height: 100%;
overflow: auto;
}
+/* Dock button hover */
.dockButton:hover {
background: var(--base-hover-bg);
-ms-transform: scale(1.25);
-webkit-transform: scale(1.25);
- transform: scale(1.25);
+ transform: scale(1.25);
}
+/* Dock button active */
.dockButton:active {
background: var(--base-active-bg);
-ms-transform: scale(1);
-webkit-transform: scale(1);
- transform: scale(1);
+ transform: scale(1);
}
+/* Dock button image */
.dockButtonImage {
background-size: cover;
-}
\ No newline at end of file
+}
diff --git a/css/bars/dock.css b/css/bars/dock.css
index 6f24837..5986c82 100644
--- a/css/bars/dock.css
+++ b/css/bars/dock.css
@@ -2,22 +2,22 @@
background: transparent;
position: absolute;
z-index: 5;
- margin: 0 auto;
- bottom: 0;
+ 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);
}
#dock {
background: var(--panel-bg);
- border-radius: var(--rounded-radius);
-
+ border-radius: var(--rounded-radius);
+
display: flex;
position: relative;
height: auto;
@@ -26,159 +26,149 @@
padding: 5px;
margin: 10px;
- transition: transform var(--transition-speed);
+ transition: transform var(--transition-speed);
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;
+ position: relative;
+ margin: 0 auto;
- top: 50%;
- left: 0;
- bottom: 0;
- right: 0;
+ top: 50%;
+ left: 0;
+ bottom: 0;
+ right: 0;
- -webkit-transform: translateY(-50%);
- transition: opacity var(--transition-speed);
+ -webkit-transform: translateY(-50%);
+ transition: opacity var(--transition-speed);
}
#dock {
display: inline-block;
- width: auto;
- height: auto;
+ 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;
z-index: 5;
- margin: 0 auto;
- bottom: 0;
+ 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);
}
#dock {
display: flex;
- width: auto;
- height: auto;
+ width: auto;
+ height: auto;
margin: 5px;
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;
z-index: 5;
- margin: 0 auto;
- bottom: 0;
+ 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);
}
#dock {
display: flex;
- width: auto;
- height: auto;
+ width: auto;
+ height: auto;
margin: 5px;
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;
z-index: 5;
- margin: 0 auto;
- bottom: 0;
+ 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);
}
#dock {
display: flex;
- width: auto;
- height: auto;
+ 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;
z-index: 5;
- margin: 0 auto;
- bottom: 0;
+ 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);
}
#dock {
display: flex;
- width: auto;
- height: auto;
- opacity: 0;
+ width: auto;
+ 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);
}
-
-}
\ No newline at end of file
+}
diff --git a/css/bars/top-panel.css b/css/bars/top-panel.css
index a35531b..3617ae8 100644
--- a/css/bars/top-panel.css
+++ b/css/bars/top-panel.css
@@ -2,4 +2,4 @@
width: 100vw;
height: 32px;
position: absolute;
-}
\ No newline at end of file
+}
diff --git a/css/base/base.css b/css/base/base.css
index b5e1666..56619b2 100644
--- a/css/base/base.css
+++ b/css/base/base.css
@@ -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,28 +14,82 @@ 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*/
-input:focus,
-textarea:focus,
-select:focus{
- outline: none;
+* {
+ 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);
}
-select::-ms-expand {
- display: none;
+body {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: var(--base-body-bg);
+ color: var(--foreground);
}
-/*Select*/
+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 {
+ outline: none;
+}
+
+select::-ms-expand {
+ display: none;
+}
+
option {
text-align: left;
}
diff --git a/css/base/dummy-body-background.css b/css/base/dummy-body-background.css
index 3a32313..f62c00a 100644
--- a/css/base/dummy-body-background.css
+++ b/css/base/dummy-body-background.css
@@ -19,4 +19,4 @@
.dummyBackgroundHide {
opacity: 0;
-}
\ No newline at end of file
+}
diff --git a/css/base/font-face.css b/css/base/font-face.css
index 1614fce..805b5dc 100644
--- a/css/base/font-face.css
+++ b/css/base/font-face.css
@@ -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,16 +37,18 @@
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 */
url('../../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
-}
\ No newline at end of file
+}
diff --git a/css/base/normalize.css b/css/base/normalize.css
index b0c1902..3ee267c 100644
--- a/css/base/normalize.css
+++ b/css/base/normalize.css
@@ -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 */
}
@@ -234,7 +234,7 @@ fieldset {
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
- * `fieldset` elements in all browsers.
+ * `fieldset` elements in all browsers.
*/
legend {
@@ -346,4 +346,4 @@ template {
[hidden] {
display: none;
-}
\ No newline at end of file
+}
diff --git a/css/centeredbox/auto-suggestion.css b/css/centeredbox/auto-suggestion.css
index 567542a..249b680 100644
--- a/css/centeredbox/auto-suggestion.css
+++ b/css/centeredbox/auto-suggestion.css
@@ -1,7 +1,7 @@
-/*Container*/
+/* Container */
.phrasesContainer {
position: absolute;
-
+
width: 100vw;
height: auto;
@@ -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 {
+ #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) {
-
- #suggestionsContainer.phrasesContainer {
+ /* Hide */
+ #suggestionsContainer.phrasesContainer {
opacity: 0;
}
-
-}
\ No newline at end of file
+}
diff --git a/css/centeredbox/centered-box-overlay.css b/css/centeredbox/centered-box-overlay.css
index 6a77452..e1501a2 100644
--- a/css/centeredbox/centered-box-overlay.css
+++ b/css/centeredbox/centered-box-overlay.css
@@ -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);
}
@@ -21,4 +22,4 @@
opacity: 1;
z-index: 0;
backdrop-filter: blur(var(--blur-strength)) brightness(70%);
-}
\ No newline at end of file
+}
diff --git a/css/centeredbox/centered-box.css b/css/centeredbox/centered-box.css
index c890893..24c4946 100644
--- a/css/centeredbox/centered-box.css
+++ b/css/centeredbox/centered-box.css
@@ -1,12 +1,12 @@
.centeredBar {
width: 100%;
- height: auto;
-
- border: none;
- pointer-events: none;
-
- position: absolute;
+ height: auto;
+
+ border: none;
+ pointer-events: none;
+
+ position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
@@ -16,11 +16,12 @@
#centeredBox {
opacity: 1;
z-index: 2;
- transition: opacity var(--transition-speed),
- z-index var(--transition-speed);
+ transition:
+ opacity var(--transition-speed),
+ z-index var(--transition-speed);
}
.centeredBar#centeredBox.hiddenBox {
opacity: 0;
z-index: 0;
-}
\ No newline at end of file
+}
diff --git a/css/centeredbox/profile-image.css b/css/centeredbox/profile-image.css
index 5e12292..0e2fa62 100644
--- a/css/centeredbox/profile-image.css
+++ b/css/centeredbox/profile-image.css
@@ -6,10 +6,10 @@
width: 138px;
border-radius: 50%;
pointer-events: initial;
-
- margin: 0 auto;
- margin-bottom: 110px;
- position: relative;
+
+ margin: 0 auto;
+ margin-bottom: 110px;
+ position: relative;
flex-flow: column wrap;
display: flex;
@@ -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) }
-}
\ No newline at end of file
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/css/centeredbox/search-box.css b/css/centeredbox/search-box.css
index db14eed..9459478 100644
--- a/css/centeredbox/search-box.css
+++ b/css/centeredbox/search-box.css
@@ -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,8 +23,8 @@
margin-bottom: 10px;
- /*Center horizontally*/
- position: relative;
+ /* Center horizontally */
+ position: relative;
left: 50%;
transform: translateX(-50%);
@@ -54,7 +55,7 @@
@media screen and (max-width: 470px) {
#searchBox {
- width: 50vw;
+ width: 50vw;
}
#searchBoxContainer.showSearchBox {
@@ -63,4 +64,3 @@
pointer-events: initial;
}
}
-
diff --git a/css/dashboard/dashboard.css b/css/dashboard/dashboard.css
index 0476d19..583f435 100644
--- a/css/dashboard/dashboard.css
+++ b/css/dashboard/dashboard.css
@@ -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;
@@ -16,7 +16,7 @@
.rightDashboardBody {
margin: 10px;
height: auto;
- width: 330px;
+ width: 330px;
}
#rightDashboard {
@@ -28,22 +28,22 @@
overflow-y: auto;
box-sizing: border-box;
scrollbar-width: none;
- transition: width var(--transition-speed);
+ transition: width var(--transition-speed);
}
-/*Hide scrollbar*/
+/* Hide scrollbar */
#rightDashboard::-webkit-scrollbar {
- display: none;
+ 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);
}
diff --git a/css/dashboard/greeter-date-message.css b/css/dashboard/greeter-date-message.css
index fff28a5..fc67ecd 100644
--- a/css/dashboard/greeter-date-message.css
+++ b/css/dashboard/greeter-date-message.css
@@ -12,6 +12,6 @@
.dashboardMessage#dateMessage {
font-size: 12pt;
- font-family: roboto, sans-serif;
+ font-family: roboto, sans-serif;
font-weight: 400;
-}
\ No newline at end of file
+}
diff --git a/css/dashboard/search-engine-settings.css b/css/dashboard/search-engine-settings.css
index 9a59fe1..062e09a 100644
--- a/css/dashboard/search-engine-settings.css
+++ b/css/dashboard/search-engine-settings.css
@@ -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;
@@ -120,4 +120,4 @@ select::-ms-expand {
width: 96vw;
box-sizing: border-box;
}
-}
\ No newline at end of file
+}
diff --git a/css/dashboard/theme-engine.css b/css/dashboard/theme-engine.css
index 286f5d3..9205a49 100644
--- a/css/dashboard/theme-engine.css
+++ b/css/dashboard/theme-engine.css
@@ -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;
@@ -138,4 +139,4 @@
width: 96vw;
box-sizing: border-box;
}
-}
\ No newline at end of file
+}
diff --git a/css/dashboard/weather-settings.css b/css/dashboard/weather-settings.css
index 88a24ca..dd9d329 100644
--- a/css/dashboard/weather-settings.css
+++ b/css/dashboard/weather-settings.css
@@ -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;
@@ -155,4 +158,4 @@
width: 96vw;
box-sizing: border-box;
}
-}
\ No newline at end of file
+}
diff --git a/css/screens/screens.css b/css/screens/screens.css
index 75fadce..e052235 100644
--- a/css/screens/screens.css
+++ b/css/screens/screens.css
@@ -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,8 +18,8 @@
-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;
-}
\ No newline at end of file
+}
diff --git a/css/screens/weather-screen.css b/css/screens/weather-screen.css
index 992fb80..6b00200 100644
--- a/css/screens/weather-screen.css
+++ b/css/screens/weather-screen.css
@@ -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;
}
-
-}
\ No newline at end of file
+}
diff --git a/css/screens/web-menu.css b/css/screens/web-menu.css
index 9cf063f..e8e1a2b 100644
--- a/css/screens/web-menu.css
+++ b/css/screens/web-menu.css
@@ -1,29 +1,22 @@
#webMenuScreen {
z-index: 0;
-
- padding-top: 40px;
- padding-bottom: 6vh;
- padding-left: 12vw;
- padding-right: 12vw;
+ padding: 40px 12vw 6vh 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;
@@ -39,7 +32,7 @@
#webMenuSearchBox {
background: var(--base-bg);
-
+
text-align: center;
font-family: roboto-bold, sans-serif;
font-weight: 700;
@@ -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*/
@@ -209,13 +202,13 @@
.webItem:hover {
-ms-transform: scale(1);
-webkit-transform: scale(1);
- transform: scale(1);
+ transform: scale(1);
}
.webItemFocus {
-ms-transform: scale(1);
-webkit-transform: scale(1);
- transform: scale(1);
+ transform: scale(1);
}
#webMenuListContainer {
@@ -224,7 +217,7 @@
}
#webMenuListContainer::-webkit-scrollbar {
- display: none;
+ display: none;
}
}
@@ -241,6 +234,5 @@
/*Disable dragging*/
user-select: none;
- user-drag: none;
-webkit-user-drag: none;
-}
\ No newline at end of file
+}
diff --git a/css/style.css b/css/style.css
index 8082837..f7f6ea8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,31 +1,31 @@
-/*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');
@import url('dashboard/weather-settings.css');
-@import url('dashboard/theme-engine.css');
\ No newline at end of file
+@import url('dashboard/theme-engine.css');
diff --git a/js/auto-suggestion.js b/js/auto-suggestion.js
index 8907adf..10a0f64 100644
--- a/js/auto-suggestion.js
+++ b/js/auto-suggestion.js
@@ -40,31 +40,31 @@ class AutoSuggestion {
const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button'));
const phraseIndex = (phraseButtons.indexOf(document.activeElement) + 1) % phraseButtons.length;
- const phraseButton = phraseButtons[phraseIndex];
- phraseButton.focus();
+ const phraseButton = phraseButtons[parseInt(phraseIndex, 10)];
+ phraseButton.focus();
} else if ((e.key === 'ArrowUp') || e.key === 'ArrowLeft') {
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];
- phraseButton.focus();
+ 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');
diff --git a/js/background-set.js b/js/background-set.js
index 426f927..f62929d 100644
--- a/js/background-set.js
+++ b/js/background-set.js
@@ -46,8 +46,8 @@ class DummyBodyBackground {
},
3000
- )
- }
+ );
+ };
// Add a delay when to fetch the hq background
setTimeout (
diff --git a/js/centered-box.js b/js/centered-box.js
index fd94820..59d2064 100644
--- a/js/centered-box.js
+++ b/js/centered-box.js
@@ -1,34 +1,34 @@
class CenteredBox {
-
- constructor() {
- this._centeredBox = document.querySelector('#centeredBox');
+
+ constructor() {
+ this._centeredBox = document.querySelector('#centeredBox');
- this._centeredBoxVisibility = true;
+ this._centeredBoxVisibility = true;
- this.showCenteredBox = this.showCenteredBox.bind(this);
- this.hideCenteredBox = this.hideCenteredBox.bind(this);
- this.toggleCenteredBox = this.toggleCenteredBox.bind(this);
- }
+ this.showCenteredBox = this.showCenteredBox.bind(this);
+ this.hideCenteredBox = this.hideCenteredBox.bind(this);
+ this.toggleCenteredBox = this.toggleCenteredBox.bind(this);
+ }
- showCenteredBox = () => {
- this._centeredBox.classList.remove('hiddenBox');
- this._centeredBoxVisibility = !this._centeredBoxVisibility;
- }
+ showCenteredBox = () => {
+ this._centeredBox.classList.remove('hiddenBox');
+ this._centeredBoxVisibility = !this._centeredBoxVisibility;
+ }
- hideCenteredBox = () => {
- this._centeredBox.classList.add('hiddenBox');
- this._centeredBoxVisibility = !this._centeredBoxVisibility;
- }
+ hideCenteredBox = () => {
+ this._centeredBox.classList.add('hiddenBox');
+ this._centeredBoxVisibility = !this._centeredBoxVisibility;
+ }
- toggleCenteredBox = () => {
+ toggleCenteredBox = () => {
- if (this._centeredBoxVisibility) {
- // hide centered box
- this.hideCenteredBox();
+ if (this._centeredBoxVisibility) {
+ // hide centered box
+ this.hideCenteredBox();
- } else {
- // Show centered box
- this.showCenteredBox();
- }
- }
+ } else {
+ // Show centered box
+ this.showCenteredBox();
+ }
+ }
}
\ No newline at end of file
diff --git a/js/config.js b/js/config.js
index 6d070c6..899621a 100644
--- a/js/config.js
+++ b/js/config.js
@@ -29,7 +29,7 @@ class Config {
name: 'Bing',
prefix: 'https://www.bing.com/search?q='
}
- }
+ };
return searchEngines;
}
diff --git a/js/dashboard.js b/js/dashboard.js
index 82efe2e..178b29d 100644
--- a/js/dashboard.js
+++ b/js/dashboard.js
@@ -1,119 +1,119 @@
class Dashboard {
- constructor() {
- this._dashboard = document.querySelector('#rightDashboard');
- this._dashboardOverlay = document.querySelector('#dashboardOverlay');
+ constructor() {
+ this._dashboard = document.querySelector('#rightDashboard');
+ this._dashboardOverlay = document.querySelector('#dashboardOverlay');
- this._rightDashboardVisibility = false;
+ this._rightDashboardVisibility = false;
- this._dashboardOverlayMouseUpEvent = this._dashboardOverlayMouseUpEvent.bind(this);
+ this._dashboardOverlayMouseUpEvent = this._dashboardOverlayMouseUpEvent.bind(this);
- this._centeredBox = document.querySelector('#centeredBox');
- this._webMenu = document.querySelector('#webMenuScreen');
- this._searchBoxContainer = document.querySelector('#searchBoxContainer');
- this._weatherScreen = document.querySelector('#weatherScreen');
+ this._centeredBox = document.querySelector('#centeredBox');
+ this._webMenu = document.querySelector('#webMenuScreen');
+ this._searchBoxContainer = document.querySelector('#searchBoxContainer');
+ this._weatherScreen = document.querySelector('#weatherScreen');
- this._init();
- }
+ this._init();
+ }
- _init = () => {
- this._registerOverlayMouseUpEvent();
- this._disableDashboardInputs(true);
- }
+ _init = () => {
+ this._registerOverlayMouseUpEvent();
+ this._disableDashboardInputs(true);
+ }
- _disableDashboardInputs = status => {
- const elems = this._dashboard.getElementsByTagName('input');
- const len = elems.length;
+ _disableDashboardInputs = status => {
+ const elems = this._dashboard.getElementsByTagName('input');
+ const len = elems.length;
- for (let i = 0; i < len; i++) {
- elems[i].disabled = status;
- }
- }
+ for (let i = 0; i < len; i++) {
+ elems[parseInt(i, 10)].disabled = status;
+ }
+ }
- getRightDashboardVisibility = () => {
- return this._rightDashboardVisibility;
- }
+ getRightDashboardVisibility = () => {
+ return this._rightDashboardVisibility;
+ }
- showDashboard = () => {
- this._dashboard.classList.add('showRightDashboard');
+ showDashboard = () => {
+ this._dashboard.classList.add('showRightDashboard');
- // Show overlay
- this._dashboardOverlay.classList.add('showDashboardOverlay');
+ // Show overlay
+ this._dashboardOverlay.classList.add('showDashboardOverlay');
- // Enable Inputs
- this._disableDashboardInputs(false);
+ // Enable Inputs
+ this._disableDashboardInputs(false);
- this._rightDashboardVisibility = !this._rightDashboardVisibility;
- }
+ this._rightDashboardVisibility = !this._rightDashboardVisibility;
+ }
- hideDashboard = () => {
- this._dashboard.classList.remove('showRightDashboard');
- this._dashboard.scrollTop = 0;
+ hideDashboard = () => {
+ this._dashboard.classList.remove('showRightDashboard');
+ this._dashboard.scrollTop = 0;
- // Disable Inputs
- this._disableDashboardInputs(true);
+ // Disable Inputs
+ this._disableDashboardInputs(true);
- // Hide overlay
- this._dashboardOverlay.classList.remove('showDashboardOverlay');
+ // Hide overlay
+ this._dashboardOverlay.classList.remove('showDashboardOverlay');
- this._rightDashboardVisibility = !this._rightDashboardVisibility;
- }
+ this._rightDashboardVisibility = !this._rightDashboardVisibility;
+ }
- toggleDashboard = () => {
+ toggleDashboard = () => {
- console.log('toggle dashboard');
-
- if (this._rightDashboardVisibility) {
-
- // Hide dashboard
- this.hideDashboard();
-
- } else {
+ // console.log('toggle dashboard');
+
+ if (this._rightDashboardVisibility) {
+
+ // Hide dashboard
+ this.hideDashboard();
+
+ } else {
- // Show dashboard
- this.showDashboard();
+ // Show dashboard
+ this.showDashboard();
- // If centered box is hidden, open it
- if (this._centeredBox.classList.contains('hiddenBox')) {
-
- console.log('centered box is hidden, reopening...');
-
- // Rotate profile container
- profileImage.rotateProfile();
-
- // Toggle center box
- centeredBox.toggleCenteredBox();
- }
- }
+ // If centered box is hidden, open it
+ if (this._centeredBox.classList.contains('hiddenBox')) {
+
+ // console.log('centered box is hidden, reopening...');
+
+ // Rotate profile container
+ profileImage.rotateProfile();
+
+ // Toggle center box
+ centeredBox.toggleCenteredBox();
+ }
+ }
- // Check if any of these are open, if yes, close it
- if (this._searchBoxContainer.classList.contains('showSearchBox')) {
- console.log('searchbox is open, closing...');
- searchBoxShow.hideSearchBox();
+ // Check if any of these are open, if yes, close it
+ if (this._searchBoxContainer.classList.contains('showSearchBox')) {
+ // console.log('searchbox is open, closing...');
+ searchBoxShow.hideSearchBox();
- } else if (this._webMenu.classList.contains('showWebMenu')) {
- console.log('web menu is open, closing...');
- webMenu.hideWebMenu();
- return;
-
- } else if (this._weatherScreen.classList.contains('showWeatherScreen')) {
- console.log('weather screen is open, closing...');
- weatherScreen.hideWeatherScreen();
- return;
+ } else if (this._webMenu.classList.contains('showWebMenu')) {
+ // console.log('web menu is open, closing...');
+ webMenu.hideWebMenu();
+ return;
+
+ } else if (this._weatherScreen.classList.contains('showWeatherScreen')) {
+ // console.log('weather screen is open, closing...');
+ weatherScreen.hideWeatherScreen();
+ return;
- }
+ }
- }
+ }
- _dashboardOverlayMouseUpEvent = e => {
- if (this._rightDashboardVisibility) {
- this.toggleDashboard();
- }
- console.log('dashboard overlay clicked...');
- }
+ _dashboardOverlayMouseUpEvent = e => {
+ if (this._rightDashboardVisibility) {
+ this.toggleDashboard();
+ }
+ // console.log('dashboard overlay clicked...');
+ }
- _registerOverlayMouseUpEvent = () => {
- this._dashboardOverlay.addEventListener('mouseup', this._dashboardOverlayMouseUpEvent);
- }
-
+ _registerOverlayMouseUpEvent = () => {
+ this._dashboardOverlay.addEventListener('mouseup', this._dashboardOverlayMouseUpEvent);
+ }
+
}
\ No newline at end of file
diff --git a/js/dock-buttons.js b/js/dock-buttons.js
index e31a6ec..68fbc67 100644
--- a/js/dock-buttons.js
+++ b/js/dock-buttons.js
@@ -1,124 +1,124 @@
class DockButtons {
-
- constructor() {
- this._dock = document.querySelector('#dock');
-
- // Retrieve dockSites object from Config instance
- this.dockSites = config.getDockSites();
-
- // Populate dock
- this._populateDock();
- }
+
+ constructor() {
+ this._dock = document.querySelector('#dock');
+
+ // Retrieve dockSites object from Config instance
+ this.dockSites = config.getDockSites();
+
+ // Populate dock
+ this._populateDock();
+ }
- _buildDockButton = (id, className, callback = null) => {
+ _buildDockButton = (id, className, callback = null) => {
- const dockButton = document.createElement('div');
- dockButton.id = `button${id}`;
- dockButton.className = 'dockButton';
- dockButton.onmouseup = callback;
+ const dockButton = document.createElement('div');
+ dockButton.id = `button${id}`;
+ dockButton.className = 'dockButton';
+ dockButton.onmouseup = callback;
- return dockButton;
- }
+ return dockButton;
+ }
- _buildDockButtonImage = (id, className, background) => {
+ _buildDockButtonImage = (id, className, background) => {
- const buttonImage = document.createElement('div');
- buttonImage.id = id;
- buttonImage.className = className;
- buttonImage.style.backgroundImage = background;
-
- return buttonImage;
- }
+ const buttonImage = document.createElement('div');
+ buttonImage.id = id;
+ buttonImage.className = className;
+ buttonImage.style.backgroundImage = background;
+
+ return buttonImage;
+ }
- _generateFromManual = (id, icon, callback) => {
+ _generateFromManual = (id, icon, callback) => {
- const dockButton = this._buildDockButton(
- `button${id}`,
- 'dockButton',
- callback
- );
+ const dockButton = this._buildDockButton(
+ `button${id}`,
+ 'dockButton',
+ callback
+ );
- const buttonImage = this._buildDockButtonImage(
- `buttonImage${id}`,
- 'dockButtonImage',
- `url('assets/buttons/${icon}.svg')`
- );
-
- dockButton.appendChild(buttonImage);
+ const buttonImage = this._buildDockButtonImage(
+ `buttonImage${id}`,
+ 'dockButtonImage',
+ `url('assets/buttons/${icon}.svg')`
+ );
+
+ dockButton.appendChild(buttonImage);
- this._dock.appendChild(dockButton);
- }
-
- _generateFromList = () => {
+ this._dock.appendChild(dockButton);
+ }
+
+ _generateFromList = () => {
- 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;
-
- // Create a href
- const aDock = document.createElement('a');
- aDock.className = 'dockLink';
- aDock.href = url;
- aDock.tabIndex = '-1';
-
- // Create div container
- const dockButton = this._buildDockButton(
- site,
- 'dockButton'
- );
-
- // Create div container for button icon
- const buttonImage = this._buildDockButtonImage(
- `buttonImage${i}`,
- 'dockButtonImage',
- `url('assets/webcons/${icon}.svg')`
- );
-
- // Append divs
- dockButton.appendChild(buttonImage);
- aDock.appendChild(dockButton);
+ for (let i = 0; i < (this.dockSites.length); i++) {
+
+ 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');
+ aDock.className = 'dockLink';
+ aDock.href = url;
+ aDock.tabIndex = '-1';
+
+ // Create div container
+ const dockButton = this._buildDockButton(
+ site,
+ 'dockButton'
+ );
+
+ // Create div container for button icon
+ const buttonImage = this._buildDockButtonImage(
+ `buttonImage${i}`,
+ 'dockButtonImage',
+ `url('assets/webcons/${icon}.svg')`
+ );
+
+ // Append divs
+ dockButton.appendChild(buttonImage);
+ aDock.appendChild(dockButton);
- this._dock.appendChild(aDock);
- };
- }
+ this._dock.appendChild(aDock);
+ }
+ }
- _populateDock = () => {
-
- // Create launcher button
- this._generateFromManual(
- 'Launch',
- 'launch',
- () => {
- // Toggle web menu
- webMenu.toggleWebMenu();
- }
- );
-
- // Create dock buttons fetched from sites-list.js
- this._generateFromList();
-
- // Create weather button
- this._generateFromManual(
- 'Weather',
- 'weather',
- () => {
- // Toggle weather screen
- weatherScreen.toggleWeatherScreen();
- }
- );
-
- // Create menu button
- this._generateFromManual(
- 'Dashboard',
- 'dashboard',
- () => {
- // Toggle dashboard
- dashboard.toggleDashboard();
- }
- );
+ _populateDock = () => {
+
+ // Create launcher button
+ this._generateFromManual(
+ 'Launch',
+ 'launch',
+ () => {
+ // Toggle web menu
+ webMenu.toggleWebMenu();
+ }
+ );
+
+ // Create dock buttons fetched from sites-list.js
+ this._generateFromList();
+
+ // Create weather button
+ this._generateFromManual(
+ 'Weather',
+ 'weather',
+ () => {
+ // Toggle weather screen
+ weatherScreen.toggleWeatherScreen();
+ }
+ );
+
+ // Create menu button
+ this._generateFromManual(
+ 'Dashboard',
+ 'dashboard',
+ () => {
+ // Toggle dashboard
+ dashboard.toggleDashboard();
+ }
+ );
- }
+ }
}
diff --git a/js/greeter-date-message.js b/js/greeter-date-message.js
index 363cc3f..13b0171 100644
--- a/js/greeter-date-message.js
+++ b/js/greeter-date-message.js
@@ -53,8 +53,8 @@ class GreeterDateMessage {
greeterSuffix = 'Evening';
}
- this._greeterMessage.innerHTML = `Good
${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()]}.`;
}
diff --git a/js/keybindings.js b/js/keybindings.js
index d3a6197..805044e 100644
--- a/js/keybindings.js
+++ b/js/keybindings.js
@@ -1,113 +1,113 @@
class KeyBinding {
- constructor() {
+ constructor() {
- this._searchBox = document.querySelector('#searchBox');
+ this._searchBox = document.querySelector('#searchBox');
- this._keysPressed = {};
+ this._keysPressed = {};
- this._documentAddKeyDownEvent = this._documentAddKeyDownEvent.bind(this);
- this._documentAddKeyUpEvent = this._documentAddKeyUpEvent.bind(this);
+ this._documentAddKeyDownEvent = this._documentAddKeyDownEvent.bind(this);
+ this._documentAddKeyUpEvent = this._documentAddKeyUpEvent.bind(this);
- this._init();
- }
+ this._init();
+ }
- _init = () => {
- this._registerDocumentAddKeyDownEvent();
- this._registerDocumentAddKeyUpEvent();
- }
+ _init = () => {
+ this._registerDocumentAddKeyDownEvent();
+ this._registerDocumentAddKeyUpEvent();
+ }
- _documentAddKeyDownEvent = e => {
+ _documentAddKeyDownEvent = e => {
- const searchBoxVisibility = searchBoxShow.getSearchBoxVisibility();
+ const searchBoxVisibility = searchBoxShow.getSearchBoxVisibility();
- this._keysPressed[e.key] = true;
+ this._keysPressed[e.key] = true;
- if (this._keysPressed['Alt'] && e.key === 's') {
+ if (this._keysPressed['Alt'] && e.key === 's') {
- e.preventDefault();
- dashboard.toggleDashboard();
- return;
+ e.preventDefault();
+ dashboard.toggleDashboard();
+ return;
- } else if (this._keysPressed['Alt'] && e.key === 'e') {
+ } else if (this._keysPressed['Alt'] && e.key === 'e') {
- e.preventDefault();
- webMenu.toggleWebMenu();
- return;
+ e.preventDefault();
+ webMenu.toggleWebMenu();
+ return;
- } else if (this._keysPressed['Alt'] && e.key === 'x') {
+ } else if (this._keysPressed['Alt'] && e.key === 'x') {
- e.preventDefault();
- weatherScreen.toggleWeatherScreen();
- return;
+ e.preventDefault();
+ weatherScreen.toggleWeatherScreen();
+ return;
- }
+ }
- if (e.key === 'Escape') {
+ if (e.key === 'Escape') {
- e.preventDefault();
-
- // If any of this are open, close it
- if (searchBoxVisibility) {
-
- // Hide searchbox
- searchBoxShow.toggleSearchBox();
- this._searchBox.value = '';
- return;
+ e.preventDefault();
+
+ // If any of this are open, close it
+ if (searchBoxVisibility) {
+
+ // Hide searchbox
+ searchBoxShow.toggleSearchBox();
+ this._searchBox.value = '';
+ return;
- } else if (dashboard.getRightDashboardVisibility()) {
-
- // Hide dashboard
- dashboard.toggleDashboard();
- return;
-
- } else if (weatherScreen.getWeatherScreenVisiblity()) {
-
- // Hide weather
- weatherScreen.toggleWeatherScreen();
- return;
+ } else if (dashboard.getRightDashboardVisibility()) {
+
+ // Hide dashboard
+ dashboard.toggleDashboard();
+ return;
+
+ } else if (weatherScreen.getWeatherScreenVisiblity()) {
+
+ // Hide weather
+ weatherScreen.toggleWeatherScreen();
+ return;
- }
+ }
- // Show web menu
- webMenu.toggleWebMenu();
- return;
- }
+ // Show web menu
+ webMenu.toggleWebMenu();
+ return;
+ }
- if (!searchBoxVisibility) {
+ if (!searchBoxVisibility) {
- // Don't show searchbox if web menu, dashboard
- // and weather screen is open
- if (dashboard.getRightDashboardVisibility() ||
- webMenu.getwebMenuVisibility() ||
- weatherScreen.getWeatherScreenVisiblity()) return;
+ // Don't show searchbox if web menu, dashboard
+ // and weather screen is open
+ if (dashboard.getRightDashboardVisibility() ||
+ webMenu.getwebMenuVisibility() ||
+ weatherScreen.getWeatherScreenVisiblity()) return;
- // Only accept single charactered key and backspace to open search box
- if ((e.key.length > 1) && (e.key !== 'Backspace')) return;
+ // Only accept single charactered key and backspace to open search box
+ if ((e.key.length > 1) && (e.key !== 'Backspace')) return;
- // Open searchbox
- searchBoxShow.toggleSearchBox();
+ // Open searchbox
+ searchBoxShow.toggleSearchBox();
- } else {
-
- // 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; };
- }
+ } else {
+
+ // 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; }
+ }
- }
+ }
- _documentAddKeyUpEvent = e => {
- delete this._keysPressed[e.key];
- }
+ _documentAddKeyUpEvent = e => {
+ delete this._keysPressed[e.key];
+ }
- _registerDocumentAddKeyDownEvent = () => {
- document.addEventListener('keydown', this._documentAddKeyDownEvent);
- }
+ _registerDocumentAddKeyDownEvent = () => {
+ document.addEventListener('keydown', this._documentAddKeyDownEvent);
+ }
- _registerDocumentAddKeyUpEvent = () => {
- document.addEventListener('keyup', this._documentAddKeyUpEvent);
- }
+ _registerDocumentAddKeyUpEvent = () => {
+ document.addEventListener('keyup', this._documentAddKeyUpEvent);
+ }
}
diff --git a/js/mobile-swipe-event.js b/js/mobile-swipe-event.js
index 2b4734b..83651f7 100644
--- a/js/mobile-swipe-event.js
+++ b/js/mobile-swipe-event.js
@@ -14,55 +14,55 @@ class SwipeEventManager {
el.addEventListener(
'touchstart',
- (event) => {
+ event => {
// event.preventDefault();
this._xDown = event.touches[0].clientX;
- this._yDown = event.touches[0].clientY;
+ this._yDown = event.touches[0].clientY;
},
{ passive: true }
);
el.addEventListener(
'touchmove',
- (event) => {
+ event => {
// event.preventDefault();
- if ( ! this._xDown || ! this._yDown ) {
- return;
- }
+ if ( ! this._xDown || ! this._yDown ) {
+ return;
+ }
- const xUp = event.touches[0].clientX;
- const yUp = event.touches[0].clientY;
- const xDiff = this._xDown - xUp;
- const yDiff = this._yDown - yUp;
+ const xUp = event.touches[0].clientX;
+ const yUp = event.touches[0].clientY;
+ const xDiff = this._xDown - xUp;
+ const yDiff = this._yDown - yUp;
- if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
- if ( xDiff > 0 ) {
- // Left Swipe
- dir = 'left'
- } else {
- // Right Swipe
- dir = 'right';
- }
- } else {
+ if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
+ if ( xDiff > 0 ) {
+ // Left Swipe
+ dir = 'left';
+ } else {
+ // Right Swipe
+ dir = 'right';
+ }
+ } else {
- if ( yDiff > 0 ) {
- // Up Swipe
- dir = 'up';
- } else {
- // Down Swipe
- dir = 'down';
- }
- }
-
- /* Reset values */
- this._xDown = null;
- this._yDown = null;
+ if ( yDiff > 0 ) {
+ // Up Swipe
+ dir = 'up';
+ } else {
+ // Down Swipe
+ dir = 'down';
+ }
+ }
+
+ /* Reset values */
+ this._xDown = null;
+ this._yDown = null;
- if (dir !== ''){
- if (typeof callback === 'function') {
- callback(el, dir);
- }
- }
+ if (dir !== ''){
+ if (typeof callback === 'function') {
+ callback(el, dir);
+ }
+ }
},
{ passive: true }
diff --git a/js/profile-image.js b/js/profile-image.js
index 9521c26..8e76d8b 100644
--- a/js/profile-image.js
+++ b/js/profile-image.js
@@ -1,66 +1,66 @@
class ProfileImage {
- constructor() {
- this._profileContainer = document.querySelector('#profileImageContainer')
+ constructor() {
+ this._profileContainer = document.querySelector('#profileImageContainer');
- this._profileAnimRunning = false;
+ this._profileAnimRunning = false;
- // Don't run animation on startup
- this._profileContainer.style.webkitAnimationPlayState = 'paused';
+ // Don't run animation on startup
+ this._profileContainer.style.webkitAnimationPlayState = 'paused';
- this.rotateProfile = this.rotateProfile.bind(this);
+ this.rotateProfile = this.rotateProfile.bind(this);
- this._animationEndEvent = this._animationEndEvent.bind(this);
- this._onClickEvent = this._onClickEvent.bind(this);
+ this._animationEndEvent = this._animationEndEvent.bind(this);
+ this._onClickEvent = this._onClickEvent.bind(this);
- this.getProfileAnimationStatus = this.getProfileAnimationStatus.bind(this);
+ this.getProfileAnimationStatus = this.getProfileAnimationStatus.bind(this);
- this._init();
- }
+ this._init();
+ }
- _init = () => {
- this._registerAnimationEndEvent();
- this._registerOnClickEvent();
- }
+ _init = () => {
+ this._registerAnimationEndEvent();
+ this._registerOnClickEvent();
+ }
- rotateProfile = () => {
- event.preventDefault;
+ rotateProfile = () => {
+ event.preventDefault;
- // Remove anim class
- this._profileContainer.classList.remove('rotateProfileAnim');
+ // Remove anim class
+ this._profileContainer.classList.remove('rotateProfileAnim');
- // Triggering reflow
- void this._profileContainer.offsetWidth;
+ // Triggering reflow
+ void this._profileContainer.offsetWidth;
- // Re-add animation class
- this._profileContainer.classList.add('rotateProfileAnim');
+ // Re-add animation class
+ this._profileContainer.classList.add('rotateProfileAnim');
- // Start rotation animation
- this._profileContainer.style.webkitAnimationPlayState = 'running';
- this._profileAnimRunning = true;
- }
+ // Start rotation animation
+ this._profileContainer.style.webkitAnimationPlayState = 'running';
+ this._profileAnimRunning = true;
+ }
- _animationEndEvent = e => {
- this._profileAnimRunning = false;
- }
+ _animationEndEvent = e => {
+ this._profileAnimRunning = false;
+ }
- // Re-enable animation after death
- _registerAnimationEndEvent = () => {
- this._profileContainer.addEventListener('animationend', this._animationEndEvent);
- }
+ // Re-enable animation after death
+ _registerAnimationEndEvent = () => {
+ this._profileContainer.addEventListener('animationend', this._animationEndEvent);
+ }
- _onClickEvent = e => {
- if (this._profileAnimRunning) return;
- searchBoxShow.toggleSearchBox();
- }
+ _onClickEvent = e => {
+ if (this._profileAnimRunning) return;
+ searchBoxShow.toggleSearchBox();
+ }
- _registerOnClickEvent = () => {
- this._profileContainer.onclick = this._onClickEvent;
- }
+ _registerOnClickEvent = () => {
+ this._profileContainer.onclick = this._onClickEvent;
+ }
- getProfileAnimationStatus = () => {
- return this._profileAnimRunning;
- }
+ getProfileAnimationStatus = () => {
+ return this._profileAnimRunning;
+ }
}
diff --git a/js/search-engine-settings.js b/js/search-engine-settings.js
index b58bb4f..51d6b44 100644
--- a/js/search-engine-settings.js
+++ b/js/search-engine-settings.js
@@ -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 {
`
`
- )
- })
+ );
+ });
// Call to update query string and placeholder
this._updateSearchEngineElements();
@@ -69,8 +69,8 @@ class SearchEngineSettings {
// Use this to select the current/default search engine on startup
_selectTheEngine = () => {
- this._selectSearchEngine.value = this._currentSearchEngine;
- this._updateSearchEngineElements();
+ this._selectSearchEngine.value = this._currentSearchEngine;
+ this._updateSearchEngineElements();
}
// Execute this on change event of