reworked top nav structure and responsive styles
Scott Anderson
parent
5436afccf4
commit
9ea549537f
|
|
@ -2,6 +2,8 @@
|
|||
display: flex;
|
||||
padding: .75rem .75rem .65rem;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
.influx-home {
|
||||
font-family: 'icomoon';
|
||||
|
|
@ -35,12 +37,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
.selector-dropdowns {
|
||||
.topnav-left {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.topnav-right {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: .75rem;
|
||||
top: .75rem;
|
||||
}
|
||||
|
||||
.selector-dropdowns {
|
||||
display: flex;
|
||||
z-index: 100;
|
||||
right: 5.5rem;
|
||||
transition: right .2s;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
|
@ -110,6 +121,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.theme-switcher, #search-btn, .url-trigger {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -138,9 +154,12 @@
|
|||
font-size: 1.1rem;
|
||||
vertical-align: top;
|
||||
margin: .1rem 0 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#search-btn {
|
||||
.search-btn {
|
||||
margin-top: .15rem;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -149,6 +168,27 @@
|
|||
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
@include media(medium){
|
||||
.docs-home {
|
||||
.long { display: none; }
|
||||
.short:after { content: "s" }
|
||||
}
|
||||
}
|
||||
|
||||
@include media(small) {
|
||||
.icon-influx-logotype { display: none; }
|
||||
|
||||
.topnav { min-height: 5.5rem; }
|
||||
.topnav-right {
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-end;
|
||||
width: 94%;
|
||||
}
|
||||
.search-btn { display: none; }
|
||||
|
||||
.selector-dropdowns {
|
||||
width: 100%;
|
||||
margin-top: .35rem;
|
||||
.dropdown { flex-grow: 1; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,8 +23,10 @@
|
|||
}
|
||||
|
||||
.topnav {
|
||||
#search-btn {
|
||||
.search-btn {
|
||||
opacity: 1;
|
||||
width: 30px;
|
||||
transition: width .2s, opacity .2s .2s;
|
||||
}
|
||||
.selector-dropdowns {
|
||||
right: 7.5rem;
|
||||
|
|
@ -48,7 +50,7 @@
|
|||
white-space: normal;
|
||||
}
|
||||
.topnav {
|
||||
#search-btn {
|
||||
.search-btn {
|
||||
opacity: 0;
|
||||
}
|
||||
.selector-dropdowns {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
#search-btn {
|
||||
.search-btn {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
width: 0;
|
||||
overflow: visible;
|
||||
transition: opacity .2s, width .2s .2s !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<p>
|
||||
This page is never actually shown on the live docs since visiting the docs domain will redirect to the latest stable version.
|
||||
Select your desired version from the dropdown above or go straight to the
|
||||
<a href="/{{ $.Site.Data.versions.stable_version }}">latest stable version</a>.
|
||||
<a href="/influxdb/{{ $.Site.Data.products.influxdb.latest }}">latest stable version</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,29 @@
|
|||
{{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) .RelPermalink }}
|
||||
{{ $stableVersion := $.Site.Data.versions.stable_version }}
|
||||
{{ $stableVersionURL := replaceRE "[^/]+.*?[0]" $stableVersion .RelPermalink }}
|
||||
{{ $productPathData := findRE "[^/]+.*?" .RelPermalink }}
|
||||
{{ $product := index $productPathData 0 }}
|
||||
{{ $productName := (index .Site.Data.products $product).name }}
|
||||
{{ $currentVersion := index $productPathData 1 }}
|
||||
|
||||
{{ $stableVersion := (index .Site.Data.products $product).latest }}
|
||||
{{ $stableVersionURL := replaceRE `v[1-2]\.[0-9]{1,2}` $stableVersion .RelPermalink }}
|
||||
|
||||
{{ if lt $currentVersion $stableVersion }}
|
||||
<div class="warn block old-version">
|
||||
<p>
|
||||
This page documents an earlier version of InfluxDB. InfluxDB {{ $stableVersion }} is the latest stable version.<br/>
|
||||
<a href="{{ $stableVersionURL }}">View this page in the {{ $stableVersion }} documentation</a>.
|
||||
This page documents an earlier version of {{ $productName }}.
|
||||
<a href="/{{ $product }}/{{$stableVersion}}/">{{ $productName }} {{ $stableVersion }}</a> is the latest stable version.<br/>
|
||||
{{ if eq (findRE `v[1-2]` $currentVersion) (findRE `v[1-2]` $stableVersion) }}
|
||||
<a href="{{ $stableVersionURL }}">View this page in the {{ $stableVersion }} documentation</a>.
|
||||
{{ end }}
|
||||
</p>
|
||||
</div>
|
||||
{{ else if gt $currentVersion $stableVersion }}
|
||||
<div class="note block old-version">
|
||||
<p>
|
||||
This page documents a pre-release version of InfluxDB. InfluxDB {{ $stableVersion }} is the latest stable version.<br/>
|
||||
<a href="{{ $stableVersionURL }}">View this page in the {{ $stableVersion }} documentation</a>.
|
||||
This page documents a <strong>pre-release</strong> version of {{ $productName }}.
|
||||
<a href="/{{ $product }}/{{$stableVersion}}/">{{ $productName }} {{ $stableVersion }}</a> is the latest stable version.<br/>
|
||||
{{ if eq (findRE `v[1-2]` $currentVersion) (findRE `v[1-2]` $stableVersion) }}
|
||||
<a href="{{ $stableVersionURL }}">View this page in the {{ $stableVersion }} documentation</a>.
|
||||
{{ end }}
|
||||
</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,25 @@
|
|||
{{ $productPathData := findRE "[^/]+.*?" .RelPermalink }}
|
||||
{{ $product := index $productPathData 0 }}
|
||||
{{ $currentVersion := index $productPathData 1 }}
|
||||
|
||||
<div class="topnav">
|
||||
<div class="topnav--left">
|
||||
<div class="topnav-left">
|
||||
<a class="influx-home" href="https://www.influxdata.com" title="InfluxData"><span class="icon-influx-logo"></span><span class="icon-influx-logotype"></span></a>
|
||||
<span class="divider"></span>
|
||||
<a class="docs-home" href="/{{ $.Site.Data.versions.stable_version }}">InfluxDB Docs</a>
|
||||
<a class="docs-home" href="/"><span class=short>Doc</span><span class="long">umentation</span></a>
|
||||
</div>
|
||||
<div class="topnav--right">
|
||||
<div class="selector-dropdowns">
|
||||
<div class="topnav-right">
|
||||
<div class="selector-dropdowns">
|
||||
{{ partial "topnav/product-selector.html" . }}
|
||||
{{ partial "topnav/version-selector.html" . }}
|
||||
</div>
|
||||
<button id="search-btn" onclick="toggle_sidebar('sidebar-open');document.getElementById('algolia-search-input').focus();return false;"><span class="icon-search"></span></button>
|
||||
<button class="url-trigger" href="#"><span class="icon-ui-cog-thick"></span></button>
|
||||
<button class="theme-switcher" id="theme-switch-light" onclick="switch_style('light-theme');return false;"><span class="icon-sun1"></span></button>
|
||||
<button class="theme-switcher" id="theme-switch-dark" onclick="switch_style('dark-theme');return false;"><span class="icon-moon1"></span></button>
|
||||
<div class="buttons">
|
||||
<div class="search-btn">
|
||||
<button id="search-btn" onclick="toggle_sidebar('sidebar-open');document.getElementById('algolia-search-input').focus();return false;"><span class="icon-search"></span></button>
|
||||
</div>
|
||||
<button class="url-trigger" href="#"><span class="icon-ui-cog-thick"></span></button>
|
||||
<button class="theme-switcher" id="theme-switch-light" onclick="switch_style('light-theme');return false;"><span class="icon-sun1"></span></button>
|
||||
<button class="theme-switcher" id="theme-switch-dark" onclick="switch_style('dark-theme');return false;"><span class="icon-moon1"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue