changed nav bar to flex box
This commit is contained in:
parent
4d1e0a4a66
commit
0664e73745
3 changed files with 24 additions and 51 deletions
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}}
|
||||
|
|
Loading…
Reference in a new issue