From 24538b729602cf994d69af62ae4284dc7c2cc6a4 Mon Sep 17 00:00:00 2001
From: Fredrik August Madsen-Malmo <mail.fredrikaugust@gmail.com>
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 @@
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-5"></div>
<div class="pure-u-1 pure-u-md-3-5">
- <div class="pure-g" style="padding:1em;">
+ <div class="pure-g navbar">
<div class="pure-u-1 pure-u-md-4-24">
- <center><a href="/" class="pure-menu-heading">Invidious</a></center>
+ <a href="/" class="index-link pure-menu-heading">Invidious</a>
</div>
- <div class="pure-u-1 pure-u-md-12-24">
+ <div class="pure-u-1 pure-u-md-12-24 searchbar">
<form class="pure-form" action="/search" method="get">
<fieldset>
<input type="search" style="width:100%;" name="q" placeholder="search" value="<%= env.params.query["q"]? %>">
</fieldset>
</form>
</div>
- <div class="pure-u-1 pure-u-md-8-24">
+ <div class="pure-u-1 pure-u-md-8-24 user-field">
<% if env.get? "user" %>
- <div class="pure-g">
- <div class="pure-u-1-3">
- <a href="/feed/subscriptions" class="pure-menu-heading">
- <% notification_count = env.get("user").as(User).notifications.size %>
- <% if notification_count > 0 %>
- <center><%= notification_count %> <i class="fas fa-bell"></i></center>
- <% else %>
- <center><i class="far fa-bell"></i></center>
- <% end %>
- </a>
- </div>
- <div class="pure-u-1-3">
- <a href="/preferences" class="pure-menu-heading">
- <center><i class="fas fa-cog"></i></center>
- </a>
- </div>
- <div class="pure-u-1-3">
- <a href="/signout" class="pure-menu-heading">
- <center>Sign out</center>
- </a>
- </div>
- </div>
+ <div class="pure-u-1-3">
+ <a href="/feed/subscriptions" class="pure-menu-heading">
+ <% notification_count = env.get("user").as(User).notifications.size %>
+ <% if notification_count > 0 %>
+ <%= notification_count %> <i class="fas fa-bell"></i>
+ <% else %>
+ <i class="far fa-bell"></i>
+ <% end %>
+ </a>
+ </div>
+ <div class="pure-u-1-3">
+ <a href="/preferences" class="pure-menu-heading">
+ <i class="fas fa-cog"></i>
+ </a>
+ </div>
+ <div class="pure-u-1-3">
+ <a href="/signout" class="pure-menu-heading">Sign out</a>
+ </div>
<% else %>
- <center><a href="/login" class="pure-menu-heading">Login</a></center>
+ <a href="/login" class="pure-menu-heading">Login</a>
<% end %>
</div>
</div>
<%= content %>
- <center class="h-box">
- Released under AGPLv3 by <a href="https://github.com/omarroth">Omar Roth</a> -
- source available <a href="https://github.com/omarroth/invidious">here</a>
- </center>
+ <div class="footer">
+ Released under AGPLv3 by <a href="https://github.com/omarroth">Omar
+ Roth</a>.
+ Source available <a
+ href="https://github.com/omarroth/invidious">here</a>.
+ </div>
</div>
<div class="pure-u-1 pure-u-md-1-5"></div>
</div>