broke top bar into two sections

This commit is contained in:
bill bittner 2017-09-29 12:40:02 -07:00
parent 3d4e31f2e1
commit 08e3680969
2 changed files with 47 additions and 16 deletions

View file

@ -157,8 +157,31 @@ footer {
/* TOP BAR */
/* blocks */
.nav-bar {
}
.nav-bar-title-section, .nav-bar-link-section {
padding: 0px 1em 0px 1em;
}
.nav-bar-title-section {
overflow: hidden;
border-bottom: 2px solid #eaeaea;
position: relative;
z-index: 2;
}
.nav-bar-link-section {
position: absolute;
bottom: 0px;
right: 0px;
}
/* elements */
.nav-bar-title, .nav-bar-link {
padding: 1.5rem 0.5rem 1.5rem 0.5rem;
}
.nav-bar-logo, .nav-bar-title, .nav-bar-link {
@ -176,8 +199,14 @@ footer {
}
.nav-bar-link {
padding: 1em 0.5em 1em 0.5em;
border-bottom: 1px solid #eaeaea;
}
.nav-bar-link:hover {
background-color: yellow;
border-bottom: 1px solid blue;
}
/* LINKS */

View file

@ -1,20 +1,22 @@
<div class="row nav-bar">
<div class="column column--3 align-content-left">
<div class="row-wide nav-bar">
<div class="nav-bar-title-section">
<a href="/"><span class="nav-bar-title">Spee.ch</span></a><span class="nav-bar-title nav-bar-title--superscript">(beta)</span>
</div><div class="column column--7 align-content-right">
<a class="nav-bar-link" href="/popular">popular</a>
<a class="nav-bar-link" href="https://github.com/lbryio/spee.ch" target="_blank">source</a>
<a class="nav-bar-link" href="/about">about</a>
{{#if user}}
<select type="text" class="select nav-bar-link" onchange="toggleLogin(event)">
<option value="none">@{{user.userName}}</option>
<option value="view">view</option>
<option value="logout">logout</option>
</select>
{{else}}
<a class="nav-bar-link" href="/login">login</a>
{{/if}}
<div class="nav-bar-link-section">
<a class="nav-bar-link" href="https://github.com/lbryio/spee.ch" target="_blank">source</a>
<a class="nav-bar-link" href="/about">about</a>
{{#if user}}
<select type="text" class="select nav-bar-link" onchange="toggleLogin(event)">
<option value="none">@{{user.userName}}</option>
<option value="view">view</option>
<option value="logout">logout</option>
</select>
{{else}}
<a class="nav-bar-link" href="/login">login</a>
{{/if}}
</div>
</div>
</div>
<script type="text/javascript">