changed nav bar to flex box

This commit is contained in:
bill bittner 2017-10-24 16:09:04 -07:00
parent 4d1e0a4a66
commit 0664e73745
3 changed files with 24 additions and 51 deletions

View file

@ -39,6 +39,10 @@ body, .flex-container--column {
justify-content: space-between;
}
.flex-container--align-center {
align-items: center;
}
.flex-container--wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
@ -348,19 +352,14 @@ option {
cursor: pointer;
}
/* modifiers */
.select--no-arrow {
-moz-appearance:none;
-webkit-appearance: none;
cursor: pointer;
}
.select--arrow {
-moz-appearance:none;
-webkit-appearance: none;
background: url('../icon/Shape.svg') no-repeat right;
cursor: pointer;
padding-right: 1.5em;
margin-right: 2em;
}
.input-text--primary, .select--primary {
border-bottom: 1px solid #9b9b9b;
}
@ -433,30 +432,8 @@ table {
/* NAV BAR */
.nav-bar-link-section {
padding: 0px;
}
.nav-bar-title-section {
overflow: hidden;
.nav-bar {
border-bottom: 0.5px solid #cacaca;
position: relative;
}
.nav-bar-link-section {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1;
}
.nav-bar-title {
padding: 2rem 0px 2rem 0px;
}
.nav-bar-link {
padding: 2rem 1.5rem 2rem 1.5rem;
display: inline-block;
color: black;
}
.nav-bar-logo {
@ -464,24 +441,23 @@ table {
height: 2rem;
}
.nav-bar-title--superscript {
.nav-bar-tagline {
font-size: small;
vertical-align: top;
}
.nav-bar-title--tagline {
font-size: small;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.nav-bar-link {
padding: 1.5rem;
display: inline-block;
color: black;
font-weight: normal;
color: black;
border-bottom: 2px solid white;
}
.nav-bar-link--last {
padding-right: 0px;
}
.nav-bar-link:hover {
color: dodgerblue;
}
@ -491,11 +467,6 @@ table {
border-bottom: 2px solid dodgerblue;
}
.nav-bar-link-icon {
vertical-align: text-bottom;
padding-bottom: 0.25em;
}
/* PUBLISH FORM */
.dropzone {

View file

@ -1,10 +1,12 @@
<div class="row row--wide nav-bar">
<div class="nav-bar-title-section row row--padded row--short">
<div class="nav-bar-title">
<div class="row row--padded row--short flex-container flex-container--row flex-container--align-center">
<div class="nav-bar--left">
<a href="/"><img class="nav-bar-logo" src="/assets/icon/logo.svg" alt="spee.ch"/></a>
<span class="nav-bar-title nav-bar-title--tagline">Open-source, decentralized image and video sharing.</span>
</div>
<div class="nav-bar-link-section">
<div class="nav-bar--center">
<span class="nav-bar-tagline">Open-source, decentralized image and video sharing.</span>
</div>
<div class="nav-bar--right">
<a class="nav-bar-link" href="/">Upload</a>
<a class="nav-bar-link" href="/popular">Popular</a>
<a class="nav-bar-link" href="/about">About</a>
@ -13,7 +15,7 @@
<option value="VIEW">View</option>
<option value="LOGOUT">Logout</option>
</select>
<a id="nav-bar-login-link" class="nav-bar-link" href="/login" {{#if user}}style="display:none"{{/if}}>Channel</a>
<a id="nav-bar-login-link" class="nav-bar-link--last" href="/login" {{#if user}}style="display:none"{{/if}}>Channel</a>
</div>
</div>
</div>

View file

@ -23,7 +23,7 @@
<div class="column column--3">
<label class="label" for="channel-name-select">Channel:</label>
</div><div class="column column--7">
<select type="text" id="channel-name-select" class="select select--primary select--arrow" onchange="toggleSelectedChannel(event.target.selectedOptions[0].value)">
<select type="text" id="channel-name-select" class="select select--arrow" onchange="toggleSelectedChannel(event.target.selectedOptions[0].value)">
{{#if user}}
<option value="{{user.channelName}}" id="publish-channel-select-channel-option">{{user.channelName}}</option>
{{/if}}