Skip to content

Commit 99265f2

Browse files
author
rakeshAlgo
committed
left sidebar height fix with version dropdown
1 parent f50aa27 commit 99265f2

File tree

5 files changed

+112
-106
lines changed

5 files changed

+112
-106
lines changed

‎src/css/nav.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
height: var(--height-nav);
2323
}
2424

25+
.version-control-box + .nav-menu {
26+
height: var(--height-nav-with-version);
27+
}
28+
2529
@media screen and (max-width: 768px) {
2630
.left-sidebar-menu {
2731
top: 0;

‎src/css/vars.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,8 @@
7070
--height-to-body: calc(var(--height-navbar) + var(--height-spacer));
7171
--height-min-body: calc(100vh - var(--height-to-body));
7272
--height-toc-sidebar: calc(var(--height-min-body));
73-
--height-nav: calc(100vh - var(--height-to-body) - var(--height-version-control));
73+
--height-nav: calc(var(--height-min-body) + var(--height-spacer));
74+
--height-nav-with-version: calc(100vh - var(--height-to-body) - var(--height-version-control));
7475
--nav-menu-top-space: calc(var(--height-to-body) + var(--height-version-control));
7576
/* --width-main-gutter: 1.5rem; */
7677
--width-main-gutter: 2.5rem;

‎src/partials/nav-menu.hbs‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<div class="left-sidebar-menu">
2-
<div class="version-control-box">
3-
{{> nav-version-control}}
4-
</div>
5-
<div class="nav-menu">
6-
{{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}}
7-
</div>
2+
{{> nav-version-control}}
3+
<div class="nav-menu">
4+
{{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}}
5+
</div>
86
</div>

‎src/partials/nav-version-control.hbs‎

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,51 @@
11
{{#if (and page.component (ne page.component.name 'home'))}}
22
{{#if (and page.component (ne page.component.name 'tutorials'))}}
33
{{#if (and page.component (ne page.component.name 'userprofile-couchbase-mobile'))}}
4-
{{#if (or page.versions (ends-with page.component.name '-sdk'))}}
5-
<div class="component-frame has-dropdown">
6-
<div class="frame-icon">
7-
<img src="{{{uiRootPath}}}/img/server-icon.png" alt="">
8-
</div>
9-
<div class="frame-body">
10-
<h4 class="title"><span class="title">{{{page.component.title}}}</span></h4>
11-
<div class="frame-link-dropdowns">
12-
<a class="frame-link component" href="{{relativize page.componentVersion.url}}"><span class="version">{{page.componentVersion.displayVersion}}</span></a>
13-
<div class="frame-dropdown versions">
14-
<div class="column">
15-
<ul class="frame-dropdown-list">
16-
{{#each page.versions}}
17-
{{#unless (eq ./version @root.page.version)}}
18-
<li><a class="frame-item" href="{{relativize ./url}}">
19-
{{!-- {{{@root.page.component.title}}} --}}
20-
{{./displayVersion}}</a></li>
21-
{{/unless}}
22-
{{/each}}
23-
</ul>
24-
{{#if (ends-with page.component.name '-sdk')}}
25-
<ul class="related">
26-
{{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}}
27-
<li><a class="navbar-item" href="{{relativize ./url}}">{{{./title}}}</a></li>
4+
<div class="version-control-box">
5+
{{#if (or page.versions (ends-with page.component.name '-sdk'))}}
6+
<div class="component-frame has-dropdown">
7+
<div class="frame-icon">
8+
<img src="{{{uiRootPath}}}/img/server-icon.png" alt="">
9+
</div>
10+
<div class="frame-body">
11+
<h4 class="title"><span class="title">{{{page.component.title}}}</span></h4>
12+
<div class="frame-link-dropdowns">
13+
<a class="frame-link component" href="{{relativize page.componentVersion.url}}"><span class="version">{{page.componentVersion.displayVersion}}</span></a>
14+
<div class="frame-dropdown versions">
15+
<div class="column">
16+
<ul class="frame-dropdown-list">
17+
{{#each page.versions}}
18+
{{#unless (eq ./version @root.page.version)}}
19+
<li><a class="frame-item" href="{{relativize ./url}}">
20+
{{!-- {{{@root.page.component.title}}} --}}
21+
{{./displayVersion}}</a></li>
22+
{{/unless}}
2823
{{/each}}
2924
</ul>
30-
{{/if}}
31-
</div>
32-
</div>
25+
{{#if (ends-with page.component.name '-sdk')}}
26+
<ul class="related">
27+
{{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}}
28+
<li><a class="navbar-item" href="{{relativize ./url}}">{{{./title}}}</a></li>
29+
{{/each}}
30+
</ul>
31+
{{/if}}
32+
</div>
33+
</div>
34+
</div>
3335
</div>
3436
</div>
37+
{{else}}
38+
<div class="component-frame">
39+
<div class="frame-icon">
40+
<img src="{{{uiRootPath}}}/img/server-icon.png" alt="">
41+
</div>
42+
<div class="frame-body">
43+
<h4 class="title"><span class="title">{{{page.component.title}}}</span></h4>
44+
<a class="navbar-item component" href="{{relativize page.componentVersion.url}}">{{#unless (eq page.componentVersion.displayVersion 'master')}} <span class="version">{{page.componentVersion.displayVersion}}</span>{{/unless}}</a>
45+
</div>
3546
</div>
36-
{{else}}
37-
<div class="component-frame">
38-
<div class="frame-icon">
39-
<img src="{{{uiRootPath}}}/img/server-icon.png" alt="">
40-
</div>
41-
<div class="frame-body">
42-
<h4 class="title"><span class="title">{{{page.component.title}}}</span></h4>
43-
<a class="navbar-item component" href="{{relativize page.componentVersion.url}}">{{#unless (eq page.componentVersion.displayVersion 'master')}} <span class="version">{{page.componentVersion.displayVersion}}</span>{{/unless}}</a>
44-
</div>
45-
</div>
46-
{{/if}}
47+
{{/if}}
48+
</div>
4749
{{/if}}
4850
{{/if}}
4951
{{/if}}

‎src/partials/tutorials-filter.hbs‎

Lines changed: 62 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,75 @@
11
<nav class="nav tutorials-filter">
2-
<div class="nav-menu filter">
3-
<div class="heading">
4-
<h3>Filter by</h3>
5-
<a href="#" id="clearALLBtn" data-filter="all">Clear all <img src="_/img/landing-page-icon/clear-icon.svg"
6-
alt="" /> </a>
7-
</div>
8-
<ul class="nav-list">
9-
<li>
10-
<a href="#" class="nav-link"> <span class="arrow-right arrow"></span> Roles</a>
11-
<ul class="sub-menu ">
12-
<li>
13-
<input type="checkbox" id="developer" class="check-mark" name="role" value="developer" />
14-
<label for="developer">Developer</label>
2+
<div class="left-sidebar-menu">
3+
<div class="nav-menu filter">
4+
<div class="heading">
5+
<h3>Filter by</h3>
6+
<a href="#" id="clearALLBtn" data-filter="all">Clear all <img src="_/img/landing-page-icon/clear-icon.svg"
7+
alt="" /> </a>
8+
</div>
9+
<ul class="nav-list">
10+
<li>
11+
<a href="#" class="nav-link"> <span class="arrow-right arrow"></span> Roles</a>
12+
<ul class="sub-menu ">
13+
<li>
14+
<input type="checkbox" id="developer" class="check-mark" name="role" value="developer" />
15+
<label for="developer">Developer</label>
1516

16-
</li>
17-
<li>
18-
<input type="checkbox" id="devOps" class="check-mark" name="role" value="devOps" />
19-
<label for="devOps">DevOps</label>
20-
</li>
17+
</li>
18+
<li>
19+
<input type="checkbox" id="devOps" class="check-mark" name="role" value="devOps" />
20+
<label for="devOps">DevOps</label>
21+
</li>
2122

22-
<li>
23-
<input type="checkbox" id="architect" class="check-mark" name="role" value="architect" />
24-
<label for="architect">Architect</label>
23+
<li>
24+
<input type="checkbox" id="architect" class="check-mark" name="role" value="architect" />
25+
<label for="architect">Architect</label>
2526

26-
</li>
27-
</ul>
28-
</li>
29-
<li><a href="#" class="nav-link"> <span class="arrow-right arrow"></span> Products</a></li>
30-
<li>
31-
<a href="#" class="nav-link"> <span class="arrow-right arrow"></span> Languages</a>
32-
<ul class="sub-menu ">
33-
<li>
34-
<input type="checkbox" id="java" class="check-mark" name="language" value="java" />
35-
<label for="java">Java</label>
27+
</li>
28+
</ul>
29+
</li>
30+
<li><a href="#" class="nav-link"> <span class="arrow-right arrow"></span> Products</a></li>
31+
<li>
32+
<a href="#" class="nav-link"> <span class="arrow-right arrow"></span> Languages</a>
33+
<ul class="sub-menu ">
34+
<li>
35+
<input type="checkbox" id="java" class="check-mark" name="language" value="java" />
36+
<label for="java">Java</label>
3637

37-
</li>
38-
<li>
39-
<input type="checkbox" id="C#" class="check-mark" name="language" value="C#" />
40-
<label for="C#">C#</label>
41-
</li>
38+
</li>
39+
<li>
40+
<input type="checkbox" id="C#" class="check-mark" name="language" value="C#" />
41+
<label for="C#">C#</label>
42+
</li>
4243

43-
<li>
44-
<input type="checkbox" id="Node" class="check-mark" name="language" value="Node" />
45-
<label for="Node">Node</label>
44+
<li>
45+
<input type="checkbox" id="Node" class="check-mark" name="language" value="Node" />
46+
<label for="Node">Node</label>
4647

47-
</li>
48-
</ul>
49-
</li>
50-
<li><a href="#" class="nav-link"> <span class="arrow-right arrow"></span> Frameworks</a></li>
51-
<li><a href="#" class="nav-link"> <span class="arrow-right arrow"></span> Levels</a>
52-
<ul class="sub-menu ">
53-
<li>
54-
<input type="checkbox" id="Beginner" class="check-mark" name="level" value="beginner" />
55-
<label for="Beginner">Beginner</label>
48+
</li>
49+
</ul>
50+
</li>
51+
<li><a href="#" class="nav-link"> <span class="arrow-right arrow"></span> Frameworks</a></li>
52+
<li><a href="#" class="nav-link"> <span class="arrow-right arrow"></span> Levels</a>
53+
<ul class="sub-menu ">
54+
<li>
55+
<input type="checkbox" id="Beginner" class="check-mark" name="level" value="beginner" />
56+
<label for="Beginner">Beginner</label>
5657

57-
</li>
58-
<li>
59-
<input type="checkbox" id="Intermediate" class="check-mark" name="level" value="intermediate" />
60-
<label for="Intermediate">Intermediate</label>
61-
</li>
58+
</li>
59+
<li>
60+
<input type="checkbox" id="Intermediate" class="check-mark" name="level" value="intermediate" />
61+
<label for="Intermediate">Intermediate</label>
62+
</li>
6263

63-
<li>
64-
<input type="checkbox" id="Advanced" class="check-mark" name="level" value="advanced" />
65-
<label for="Advanced">Advanced</label>
64+
<li>
65+
<input type="checkbox" id="Advanced" class="check-mark" name="level" value="advanced" />
66+
<label for="Advanced">Advanced</label>
6667

67-
</li>
68-
</ul>
69-
</li>
68+
</li>
69+
</ul>
70+
</li>
7071

71-
</ul>
72+
</ul>
73+
</div>
7274
</div>
73-
7475
</nav>

0 commit comments

Comments
 (0)