Merge pull request #38 from FredrikAugust/rework-navbar

Rework navbar and update README

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:

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;
+}

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);

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>