ProjectSegfault/invidious-experimenting
4
0
Fork 0
forked from midou/invidious
Code Pull Requests Activity

Clean up navigation bar code

Browse Source 
And update README so that arch users don't have to update their entire
system to install the required packages.
This commit is contained in:
Fredrik August Madsen-Malmo 2018-07-26 16:46:43 +02:00
parent 59aad6a273
commit 24538b7296
4 changed files with 144 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -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:

5
assets/css/darktheme.css
View File

@ -28,3 +28,8 @@ body {
.pure-form > fieldset > select, .pure-control-group > select {
color: #101010;
}
.navbar>.searchbar input {
background-color: inherit;
color: inherit;
}

108
assets/css/default.css
View File

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

60
src/invidious/views/layout.ecr
View File

@ -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>