From 24538b729602cf994d69af62ae4284dc7c2cc6a4 Mon Sep 17 00:00:00 2001 From: Fredrik August Madsen-Malmo Date: Thu, 26 Jul 2018 16:46:43 +0200 Subject: [PATCH] Clean up navigation bar code And update README so that arch users don't have to update their entire system to install the required packages. --- README.md | 4 +- assets/css/darktheme.css | 5 ++ assets/css/default.css | 108 +++++++++++++++++++++++++++++++++ src/invidious/views/layout.ecr | 60 +++++++++--------- 4 files changed, 144 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 16cd310b..a47b3c93 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ #### On Arch: ```bash -$ sudo pacman -Syu shards crystal +$ sudo pacman -S shards crystal $ shards ``` @@ -44,7 +44,7 @@ $ ./setup.sh #### On Arch: ```bash -$ sudo pacman -Syu imagemagick librsvg +$ sudo pacman -S imagemagick librsvg ``` ## Usage: diff --git a/assets/css/darktheme.css b/assets/css/darktheme.css index 8ecf2ea3..1af246df 100644 --- a/assets/css/darktheme.css +++ b/assets/css/darktheme.css @@ -28,3 +28,8 @@ body { .pure-form > fieldset > select, .pure-control-group > select { color: #101010; } + +.navbar>.searchbar input { + background-color: inherit; + color: inherit; +} diff --git a/assets/css/default.css b/assets/css/default.css index 7908025a..39558b37 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -17,6 +17,114 @@ div { animation: spin 2s linear infinite; } +/* + * Navbar + */ + +.navbar { + margin: 1em 0; + display: flex; /* this is also defined in framework, but in case of future changes */ + align-items: center; + justify-content: space-between; +} + +.navbar>div { + flex: 1; +} + +.navbar>.searchbar { + flex-grow: 2; /* take double the space of the other items */ +} + +.navbar a { + padding: 0; /* this way it will stay aligned with content under */ +} + +.navbar .index-link { + font-weight: bold; +} + +.navbar>.searchbar .pure-form input[type="search"] { + border-top: 0; + border-left: 0; + border-right: 0; + border-bottom: 1px solid #ccc; + border-radius: 0; + + padding: initial 0; + + box-shadow: none; + + transition: 0.1s border-bottom; +} + +.navbar>.searchbar .pure-form fieldset { + padding: 0; +} + +/* attract focus to the searchbar by adding a subtle transition */ +.navbar>.searchbar .pure-form input[type="search"]:focus { + border-bottom: 2px solid #aaa; +} + +.user-field { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; +} + +.user-field div { + width: initial; +} + +.user-field div:not(:last-child) { + margin-right: 1em; +} + +@media screen and (max-width: 767px) { + .navbar { + flex-direction: column; + } + + .navbar>div { + display: flex; + justify-content: center; + } + + .navbar>div:not(:last-child) { + margin-bottom: 1em; + } + + .navbar>.searchbar>form { + width: 60%; + } +} + +@media screen and (max-width: 320px) { + .navbar>.searchbar>form { + width: 100%; + margin: 0 1em; + } +} + +/* + * Footer + */ + +.footer { + color: #666666; + margin: 2em 0; + text-align: center; +} + +.footer a { + color: inherit; + text-decoration: underline; +} + +/* keyframes */ + @keyframes spin { 0% { transform: rotate(0deg); diff --git a/src/invidious/views/layout.ecr b/src/invidious/views/layout.ecr index 8df75e3f..67b9ba5d 100644 --- a/src/invidious/views/layout.ecr +++ b/src/invidious/views/layout.ecr @@ -20,51 +20,49 @@