From 84727755dbbb82f0b0c5cf0f0ea433bc0b545a8b Mon Sep 17 00:00:00 2001 From: Gerome Matilla Date: Wed, 10 Jun 2020 14:47:04 +0800 Subject: [PATCH] Cleanups (#20) * centedbox css * add font-weight to the css * some cleanup --- css/centered-box-overlay.css | 5 ++--- css/clock.css | 1 + css/font-face.css | 20 ++++++++++---------- css/greeter-date-message.css | 2 ++ css/search-box.css | 2 ++ css/search-engine-settings.css | 1 + css/style.css | 2 +- css/theme-engine.css | 1 + css/weather-screen.css | 4 ++++ css/weather-settings.css | 1 + css/web-menu.css | 3 +++ js/body-background-set.js | 6 +++--- js/keybindings.js | 4 ++-- js/web-menu.js | 6 +++--- 14 files changed, 36 insertions(+), 22 deletions(-) diff --git a/css/centered-box-overlay.css b/css/centered-box-overlay.css index 25e082e..6a77452 100644 --- a/css/centered-box-overlay.css +++ b/css/centered-box-overlay.css @@ -1,8 +1,7 @@ #centeredBoxOverlay { background: transparent; opacity: 0; - backdrop-filter: blur(0); - filter: brightness(70%); + backdrop-filter: blur(0) brightness(100%); position: absolute; top: 0; @@ -21,5 +20,5 @@ #centeredBoxOverlay.showOverlay { opacity: 1; z-index: 0; - backdrop-filter: blur(var(--blur-strength)) + backdrop-filter: blur(var(--blur-strength)) brightness(70%); } \ No newline at end of file diff --git a/css/clock.css b/css/clock.css index ca705cd..19dd104 100644 --- a/css/clock.css +++ b/css/clock.css @@ -2,6 +2,7 @@ color: var(--base-color); font-size: 11pt; font-family: roboto-bold, sans-serif; + font-weight: 700; /*Center lock*/ text-align: center; diff --git a/css/font-face.css b/css/font-face.css index b618150..7f7a971 100644 --- a/css/font-face.css +++ b/css/font-face.css @@ -1,5 +1,10 @@ +@font-face { + font-family: 'fantasque-sans-mono'; + font-style: normal; + src: url('../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf'); +} -/* roboto-300 - latin */ +/*Roboto light*/ @font-face { font-family: 'roboto-light'; font-style: normal; @@ -12,7 +17,8 @@ url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */ } -/* roboto-regular - latin */ + +/*Roboto normal*/ @font-face { font-family: 'roboto'; font-style: normal; @@ -26,7 +32,7 @@ url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ } -/* roboto-700 - latin */ +/*Roboto bold*/ @font-face { font-family: 'roboto-bold'; font-style: normal; @@ -38,10 +44,4 @@ 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 */ -} - -@font-face { - font-family: 'fantasque-sans-mono'; - font-style: normal; - src: url('../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf'); -} +} \ No newline at end of file diff --git a/css/greeter-date-message.css b/css/greeter-date-message.css index 5db3563..964f2dc 100644 --- a/css/greeter-date-message.css +++ b/css/greeter-date-message.css @@ -2,6 +2,7 @@ color: var(--base-color); font-size: 32pt; font-family: roboto-light, sans-serif; + font-weight: 300; margin: 5px; } @@ -9,5 +10,6 @@ color: #f2f2f2; font-size: 12pt; font-family: roboto, sans-serif; + font-weight: 400; margin: 5px; } \ No newline at end of file diff --git a/css/search-box.css b/css/search-box.css index 391c755..208e3f5 100644 --- a/css/search-box.css +++ b/css/search-box.css @@ -32,6 +32,7 @@ color: var(--base-color); text-align: center; font-family: roboto-bold, sans-serif; + font-weight: 700; border: none; border-radius: 24px; @@ -41,6 +42,7 @@ #searchBox::placeholder { font-family: roboto-bold, fantasque-sans-mono, sans-serif; + font-weight: 700; } .showSearchBox { diff --git a/css/search-engine-settings.css b/css/search-engine-settings.css index 9f9b772..a6c880f 100644 --- a/css/search-engine-settings.css +++ b/css/search-engine-settings.css @@ -1,5 +1,6 @@ .searchEngine { font-family: roboto, sans-serif; + font-weight: 400; width: 100%; height: auto; position: relative;; diff --git a/css/style.css b/css/style.css index dd82a9b..5e3b484 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,7 @@ /*Load all CSS*/ +@import url('normalize.css'); @import url('base.css'); @import url('font-face.css'); -@import url('normalize.css'); @import url('body-background.css'); @import url('bar.css'); @import url('top-panel.css'); diff --git a/css/theme-engine.css b/css/theme-engine.css index 7478f61..69ed14d 100644 --- a/css/theme-engine.css +++ b/css/theme-engine.css @@ -1,5 +1,6 @@ .themeEngine { font-family: roboto, sans-serif; + font-weight: 400; width: 100%; height: auto; position: relative;; diff --git a/css/weather-screen.css b/css/weather-screen.css index c49458e..d885344 100644 --- a/css/weather-screen.css +++ b/css/weather-screen.css @@ -73,6 +73,7 @@ #weatherTodayLocation { color: var(--base-color); font-family: roboto, sans-serif; + font-weight: 400; font-size: 16pt; text-align: center; position: relative; @@ -81,6 +82,7 @@ #weatherTodayDescription { color: var(--base-color); font-family: roboto-bold, sans-serif; + font-weight: 700; font-size: 20pt; text-align: center; position: relative; @@ -105,6 +107,7 @@ .hourDataLabel { color: var(--base-color); font-family: roboto, sans-serif; + font-weight: 400; font-size: 14pt; text-align: center; } @@ -178,6 +181,7 @@ .weatherForecastDayDate { color: var(--base-color); font-family: roboto, sans-serif; + font-weight: 400; font-size: 11pt; text-align: center; } diff --git a/css/weather-settings.css b/css/weather-settings.css index d5ca756..2e880f7 100644 --- a/css/weather-settings.css +++ b/css/weather-settings.css @@ -1,5 +1,6 @@ .weatherSettings { font-family: roboto, sans-serif; + font-weight: 400; width: 100%; height: auto; position: relative;; diff --git a/css/web-menu.css b/css/web-menu.css index 092995e..9d61d46 100644 --- a/css/web-menu.css +++ b/css/web-menu.css @@ -70,6 +70,7 @@ text-align: center; font-family: roboto-bold, sans-serif; + font-weight: 700; color: var(--panel-color); border: none; @@ -82,6 +83,7 @@ #webMenuSearchBox::placeholder { font-family: roboto-bold, fantasque-sans-mono, sans-serif; + font-weight: 700; } @media screen and (max-width: 580px) { @@ -201,6 +203,7 @@ text-align: center; font-size: 11pt; font-family: roboto, sans-serif; + font-weight: 400; word-wrap: break-word; color: var(--base-color); diff --git a/js/body-background-set.js b/js/body-background-set.js index 01e15f9..5f447f1 100644 --- a/js/body-background-set.js +++ b/js/body-background-set.js @@ -17,12 +17,12 @@ class BodyBackground { _lazyLoadBackground = fileName => { - // Set a low quality background image - this._setBodyBackgrond(`url('assets/backgrounds/${fileName}-low.webp')`); - // Add a class to blur it this._bodyBackground.classList.add('blurFiltered'); + // Set a low quality background image + this._setBodyBackgrond(`url('assets/backgrounds/${fileName}-low.webp')`); + this._hqBackground.onload = () => { // After downloading the HQ image, set it as bg diff --git a/js/keybindings.js b/js/keybindings.js index a06dbb1..d3a6197 100644 --- a/js/keybindings.js +++ b/js/keybindings.js @@ -75,9 +75,9 @@ class KeyBinding { return; } - if (searchBoxVisibility === false) { + if (!searchBoxVisibility) { - // Don't show searchbox when web menu, dashboard + // Don't show searchbox if web menu, dashboard // and weather screen is open if (dashboard.getRightDashboardVisibility() || webMenu.getwebMenuVisibility() || diff --git a/js/web-menu.js b/js/web-menu.js index 13b0dfb..06bef01 100644 --- a/js/web-menu.js +++ b/js/web-menu.js @@ -317,6 +317,7 @@ class WebMenu { const getIndexByWindowWidth = () => { if (window.innerWidth <= 580) { return 1; } + // width of elements in pixels const menuItemWidth = 138; const scrollBarWidth = 10; @@ -372,19 +373,19 @@ class WebMenu { if (key === up) { return changeItemFocus((this._webListIndex >= 0), len) } if (key === down) { return changeItemFocus((this._webListIndex <= len), 0) } } - changeWebListIndex(); + if (this._webItemFocus) { this._removeClass(this._webItemFocus, 'webItemFocus'); changeItemFocusByKey(); this._addClass(this._webItemFocus, 'webItemFocus'); - // console.log(webListIndex); } else { this._webListIndex = 0; this._webItemFocus = this._webMenuList.getElementsByTagName('li')[0]; this._addClass(this._webItemFocus, 'webItemFocus'); } + } _webMenuKeyDownEvent = e => { @@ -396,7 +397,6 @@ class WebMenu { this._webMenu.addEventListener('keydown', this._webMenuKeyDownEvent, false); } - _webMenuSearchBoxKeyDownEvent = e => { // Don't hijack keyboard navigation buttons (up, down, left, right)