Skip to content

Commit 9049089

Browse files
fhennigfhennig
authored
Merge pull request #41 from stackabletech/feat/new-version-selector-location
Move version selector to menu bar
2 parents 56da6c7 + f0a1669 commit 9049089

File tree

7 files changed

+73
-41
lines changed

7 files changed

+73
-41
lines changed

‎src/css/base.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,3 +125,21 @@ body ::-webkit-scrollbar-thumb {
125125
max-width: 1280px;
126126
margin: 0 auto;
127127
}
128+
129+
/** pseudo-tailwind classes */
130+
131+
.flex {
132+
display: flex;
133+
}
134+
135+
.flex-col {
136+
flex-direction: column;
137+
}
138+
139+
.m-0 {
140+
margin: 0;
141+
}
142+
143+
.justify-between {
144+
justify-content: space-between;
145+
}

‎src/css/header.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ body {
283283
transition: max-height 0.2s ease, padding 0.2s ease;
284284
}
285285

286-
.navbar-sub .container {
286+
.navbar-sub .navlinks {
287287
flex-direction: column;
288288
}
289289

‎src/css/page-versions.css

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,23 @@
1111
}
1212

1313
.page-versions .version-menu-toggle {
14-
color: inherit;
14+
color: var(--color-white);
1515
background: url(../img/chevron.svg) no-repeat;
1616
background-position: right 0.5rem top 50%;
1717
background-size: auto 0.75em;
1818
border: none;
1919
outline: none;
2020
line-height: inherit;
21-
padding: 0.5rem 1.5rem 0.5rem 0.5rem;
21+
padding: 7px 1.5rem 7px 30px;
2222
position: relative;
23-
z-index: var(--z-index-page-version-menu);
23+
z-index: var(--z-index-page-version-menu-button);
24+
font-size: 16px;
25+
opacity: 0.8;
26+
}
27+
28+
.page-versions .version-menu-toggle:hover {
29+
opacity: 1;
30+
text-decoration: none;
2431
}
2532

2633
.page-versions .version-menu {
@@ -34,18 +41,23 @@
3441
top: 0;
3542
right: 0;
3643
white-space: nowrap;
44+
z-index: var(--z-index-page-version-menu);
45+
color: var(--color-white);
46+
font-size: 16px;
3747
}
3848

3949
.page-versions:not(.is-active) .version-menu {
4050
display: none;
4151
}
4252

4353
.page-versions .version {
54+
color: var(--color-white);
4455
display: block;
4556
padding-top: 0.5rem;
4657
}
4758

4859
.page-versions .version.is-current {
60+
color: var(--color-white);
4961
display: none;
5062
}
5163

‎src/css/vars.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
--toolbar-border-color: var(--panel-border-color);
5959
--toolbar-font-color: var(--color-jet-30);
6060
--toolbar-muted-color: var(--color-gray-30);
61-
--page-version-menu-background: var(--color-smoke-70);
61+
--page-version-menu-background: var(--color-jet-70);
6262
--page-version-missing-font-color: var(--color-gray-30);
6363
/* admonitions */
6464
--caution-color: #a0439c;
@@ -140,5 +140,6 @@
140140
--z-index-nav: 1;
141141
--z-index-toolbar: 2;
142142
--z-index-page-version-menu: 3;
143-
--z-index-navbar: 4;
143+
--z-index-page-version-menu-button: 4;
144+
--z-index-navbar: 5;
144145
}

‎src/img/chevron.svg

Lines changed: 1 addition & 1 deletion
Loading

‎src/partials/header-content.hbs

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
<header class="header">
22
<nav class="navbar">
33
<div class="container">
4-
<div class="navbar-brand">
5-
<a class="navbar-item" href="https://stackable.tech/en/">{{!--site.title--}}<img src="{{{uiRootPath}}}/img/stackable-logo.png"></a>
6-
<a class="navbar-item documentation-link" href="{{{or site.homeUrl site.url}}}">Documentation</a>
7-
{{#if env.SITE_SEARCH_PROVIDER}}
8-
<div class="navbar-item search hide-for-print">
9-
<div id="search-field" class="field">
10-
<input id="search-input" type="text" placeholder="Search..."{{#if page.home}} autofocus{{/if}}>
4+
<div class="navbar-brand">
5+
<a class="navbar-item" href="https://stackable.tech/en/">{{!--site.title--}}<img src="{{{uiRootPath}}}/img/stackable-logo.png"></a>
6+
<a class="navbar-item documentation-link" href="{{{or site.homeUrl site.url}}}">Documentation</a>
7+
{{#if env.SITE_SEARCH_PROVIDER}}
8+
<div class="navbar-item search hide-for-print">
9+
<div id="search-field" class="field">
10+
<input id="search-input" type="text" placeholder="Search..."{{#if page.home}} autofocus{{/if}}>
11+
</div>
1112
</div>
13+
{{/if}}
14+
<button class="navbar-burger" data-target="navbar-sub">
15+
<span></span>
16+
<span></span>
17+
<span></span>
18+
</button>
19+
<a href="https://www.stackable.tech/en/contact/" class="button pull-right">Contact Us</a>
1220
</div>
13-
{{/if}}
14-
<button class="navbar-burger" data-target="navbar-sub">
15-
<span></span>
16-
<span></span>
17-
<span></span>
18-
</button>
19-
<a href="https://www.stackable.tech/en/contact/" class="button pull-right">Contact Us</a>
20-
</div>
2121
<div id="topbar-nav" class="navbar-menu">
2222
</div>
23-
</div>
24-
</nav>
25-
<nav id="navbar-sub" class="navbar-sub">
26-
<div class="container">
23+
</div>
24+
</nav>
25+
<nav id="navbar-sub" class="navbar-sub">
26+
<div class="container justify-between">
27+
<div class="navlinks flex m-0">
2728
{{#> navbar }}
2829
navbar.hbs partial not found - you're seeing failover content
2930
<a class="navbar-sub-item" href="#">Home</a>
@@ -35,10 +36,22 @@
3536
</div>
3637
</div>
3738
{{/navbar}}
38-
3939
<a class="arrow" href="javascript:document.querySelector('.navbar-sub').classList.toggle('open')">
4040
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
4141
</a>
4242
</div>
43-
</nav>
44-
</header>
43+
{{#with @root.page.versions}}
44+
<div class="page-versions">
45+
<button class="version-menu-toggle" title="Show other versions of page">{{@root.page.componentVersion.displayVersion}}</button>
46+
<div class="version-menu">
47+
{{#each this}}
48+
<a class="version
49+
{{~#if (eq ./version @root.page.version)}} is-current{{/if~}}
50+
{{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
51+
{{/each}}
52+
</div>
53+
</div>
54+
{{/with}}
55+
</div>
56+
</nav>
57+
</header>

‎src/partials/nav-menu.hbs

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,6 @@
55
{{#with @root.page.componentVersion}}
66
<h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
77
{{/with}}
8-
{{#with @root.page.versions}}
9-
<div class="page-versions">
10-
<button class="version-menu-toggle" title="Show other versions of page">{{@root.page.componentVersion.displayVersion}}</button>
11-
<div class="version-menu">
12-
{{#each this}}
13-
<a class="version
14-
{{~#if (eq ./version @root.page.version)}} is-current{{/if~}}
15-
{{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
16-
{{/each}}
17-
</div>
18-
</div>
19-
{{/with}}
208
</div>
219
{{> nav-tree navigation=this}}
2210
</nav>

0 commit comments

Comments
 (0)