Skip to content

Commit fde27c2

Browse files
amarantha-kamarantha-k
authored
Merge pull request #43 from couchbase/container-layout-ui
change fluid layout into box layout container
2 parents 3aab414 + 4c5d321 commit fde27c2

File tree

10 files changed

+118
-76
lines changed

10 files changed

+118
-76
lines changed

‎src/css/header.css‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
flex-wrap: wrap;
1414
align-items: center;
1515
justify-content: space-between;
16-
padding: 0.5rem var(--width-container-gutter);
16+
padding: 0.5rem 0;
1717
}
1818

1919
.navbar-toggler {
@@ -44,6 +44,10 @@
4444

4545
.navbar.navbar-new-bottom {
4646
background: var(--color-brand-blue-secondary);
47+
}
48+
49+
.header-bottom-row {
50+
background: var(--color-brand-blue-secondary);
4751
display: none;
4852
}
4953

@@ -203,7 +207,7 @@
203207

204208
.primary-action {
205209
position: absolute;
206-
right: 1.25rem;
210+
right: 0;
207211
top: -137%;
208212
}
209213

@@ -213,6 +217,10 @@
213217
line-height: 1;
214218
}
215219

220+
.header-bottom-row {
221+
display: block;
222+
}
223+
216224
.navbar-new-bottom .nav-item:first-child {
217225
margin-left: 0;
218226
}
@@ -229,7 +237,7 @@
229237
}
230238

231239
.navbar.navbar-new-top {
232-
padding: 1.25rem;
240+
padding: 1.25rem 0;
233241
line-height: 1;
234242
}
235243
}

‎src/css/nav.css‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,34 @@
4545
height: 100%;
4646
/* height: var(--height-nav); */
4747
z-index: var(--z-index-nav);
48-
border-left: 2px solid #eee;
48+
/* border-left: 2px solid #eee; */
4949
}
50+
51+
.left-sidebar-menu:before {
52+
position: absolute;
53+
content: '';
54+
display: inline-block;
55+
width: 1000%;
56+
height: 100%;
57+
background: var(--color-brand-gray7);
58+
top: 0;
59+
z-index: 1;
60+
left: -1000%;
61+
}
62+
/* open this if you need version dropdown with continuous background */
63+
64+
/* .version-control-box:before {
65+
position: absolute;
66+
content: '';
67+
display: inline-block;
68+
width: 1000%;
69+
height: 100%;
70+
background: var(--color-brand-gray6);
71+
top: 0;
72+
z-index: 11;
73+
left: -1000%;
74+
} */
75+
5076
}
5177

5278
.nav-menu .nav-link,
@@ -481,8 +507,6 @@ a.menu-expand-toggle {
481507
top: var(--height-to-body);
482508
margin-bottom: 1.5rem;
483509
/* height: var(--height-nav); */
484-
border-left: 2px solid #eee;
485-
border-right: 2px solid #eee;
486510
}
487511

488512
.nav-control {

‎src/layouts/landing-page-tutorials.hbs‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@
77
</head>
88
<body class="landing-page">
99
{{> header}}
10-
<div class="body container-fluid ">
11-
{{> tutorials-filter}}
1210
{{> body-landing-tutorials}}
13-
</div>
1411
{{> footer}}
1512
</body>
1613
</html>

‎src/partials/body-home.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="body container-fluid">
1+
<div class="body container">
22
<main class="home" data-ceiling="topbar">
33
<article class="doc">
44
<h1 class="page">{{{page.title}}}</h1>

‎src/partials/body-landing-core-concept.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="body container-fluid">
1+
<div class="body container">
22
{{> nav}}
33
{{> toc}}
44
<main class="article" data-ceiling="topbar">

‎src/partials/body-landing-sdk.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="body container-fluid">
1+
<div class="body container">
22
{{> nav}}
33
{{> toc}}
44
<main class="article" data-ceiling="topbar">

‎src/partials/body-landing-top-level-sdk.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="body container-fluid">
1+
<div class="body container">
22
<main class="article" data-ceiling="topbar">
33
<article class="doc landing-page-doc">
44
{{{page.contents}}}

‎src/partials/body-landing-tutorials.hbs‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
1+
<div class="body container ">
2+
{{> tutorials-filter}}
23
<main class="article" data-ceiling="topbar">
34
<article class="doc landing-page-doc">
4-
55
{{{page.contents}}}
66

77
</article>
88
</main>
9+
</div>

‎src/partials/body.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="body container-fluid{{#with (or page.role page.attributes.role)}} {{{this}}}{{/with}}">
1+
<div class="body container{{#with (or page.role page.attributes.role)}} {{{this}}}{{/with}}">
22
{{> nav}}
33
{{> toc}}
44
{{> main}}

‎src/partials/header-content.hbs‎

Lines changed: 72 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,77 @@
11
<header class="header fixed-top">
2-
<nav class="navbar navbar-expand-md flex-nowrap justify-content-between navbar-new-top">
3-
<a class="navbar-brand" href="{{#with (and site.url site.homeUrl)}}{{@root.site.url}}{{this}}{{else}}{{siteRootPath}}{{/with}}">
4-
<img src="{{{uiRootPath}}}/img/couchbase-documentation-logo.svg" alt="Couchbase" />
5-
</a>
6-
{{! <ul class="nav navbar-nav mr-auto"></ul> }}
7-
<button class="navbar-burger" data-target="topbar-menu">
8-
<span></span>
9-
<span></span>
10-
<span></span>
11-
</button>
12-
</nav>
2+
<div class="header-top-row">
3+
<div class="container">
4+
<nav class="navbar navbar-expand-md flex-nowrap justify-content-between navbar-new-top">
5+
6+
<a class="navbar-brand" href="{{#with (and site.url site.homeUrl)}}{{@root.site.url}}{{this}}{{else}}{{siteRootPath}}{{/with}}">
7+
<img src="{{{uiRootPath}}}/img/couchbase-documentation-logo.svg" alt="Couchbase" />
8+
</a>
9+
{{! <ul class="nav navbar-nav mr-auto"></ul> }}
10+
<button class="navbar-burger" data-target="topbar-menu">
11+
<span></span>
12+
<span></span>
13+
<span></span>
14+
</button>
15+
16+
</nav>
17+
</div>
18+
</div>
1319
{{! End primary header }}
1420
{{! Start secondary header }}
15-
<nav id="topbar-menu" class="navbar navbar-new-bottom">
16-
<div class="navbar-collapse collapse" id="navbar2">
17-
<ul class="navbar-nav w-100 justify-content-start">
18-
<li class="nav-item">
19-
<a class="nav-link" href="{{relativize (resolvePageURL 'home::server.adoc')}}">
20-
Server
21-
</a>
22-
</li>
23-
<li class="nav-item">
24-
<a class="nav-link" href="{{relativize (resolvePageURL 'home::mobile.adoc')}}">
25-
Mobile
26-
</a>
27-
</li>
28-
<li class="nav-item">
29-
<a class="nav-link" href="{{relativize (resolvePageURL 'home::cloud.adoc')}}">
30-
Cloud
31-
</a>
32-
</li>
33-
<li class="nav-item">
34-
<a class="nav-link" href="{{relativize (resolvePageURL 'home::integrations.adoc')}}">
35-
Integration
36-
</a>
37-
</li>
38-
<li class="nav-item">
39-
<a class="nav-link" href="{{relativize site.components.tutorials.url}}">
40-
Tutorials
41-
<span class="arrow">
42-
<i class="fas fa-arrow-right"></i>
43-
</span>
44-
</a>
45-
</li>
46-
</ul>
47-
</div>
48-
<div class="primary-action">
49-
<form class="navbar-item search">
50-
<input type="text" placeholder="Search Docs" class="query" id="search-query" />
51-
<button type="button" class="search-btn">
52-
<i class="fas fa-search"></i>
53-
</button>
54-
</form>
55-
<div class="parent-site">
56-
<a href="couchbase.com">
57-
Couchbase.com
58-
</a>
59-
</div>
60-
<a class="btn btn-primary try-btn" href="https://www.couchbase.com/downloads">
61-
Try Free
62-
</a>
21+
<div class="header-bottom-row">
22+
<div class="container">
23+
<nav id="topbar-menu" class="navbar navbar-new-bottom">
24+
25+
<div class="navbar-collapse collapse" id="navbar2">
26+
<ul class="navbar-nav w-100 justify-content-start">
27+
<li class="nav-item">
28+
<a class="nav-link" href="{{relativize (resolvePageURL 'home::server.adoc')}}">
29+
Server
30+
</a>
31+
</li>
32+
<li class="nav-item">
33+
<a class="nav-link" href="{{relativize (resolvePageURL 'home::mobile.adoc')}}">
34+
Mobile
35+
</a>
36+
</li>
37+
<li class="nav-item">
38+
<a class="nav-link" href="{{relativize (resolvePageURL 'home::cloud.adoc')}}">
39+
Cloud
40+
</a>
41+
</li>
42+
<li class="nav-item">
43+
<a class="nav-link" href="{{relativize (resolvePageURL 'home::integrations.adoc')}}">
44+
Integration
45+
</a>
46+
</li>
47+
<li class="nav-item">
48+
<a class="nav-link" href="{{relativize site.components.tutorials.url}}">
49+
Tutorials
50+
<span class="arrow">
51+
<i class="fas fa-arrow-right"></i>
52+
</span>
53+
</a>
54+
</li>
55+
</ul>
56+
</div>
57+
<div class="primary-action">
58+
<form class="navbar-item search">
59+
<input type="text" placeholder="Search Docs" class="query" id="search-query" />
60+
<button type="button" class="search-btn">
61+
<i class="fas fa-search"></i>
62+
</button>
63+
</form>
64+
<div class="parent-site">
65+
<a href="couchbase.com">
66+
Couchbase.com
67+
</a>
68+
</div>
69+
<a class="btn btn-primary try-btn" href="https://www.couchbase.com/downloads">
70+
Try Free
71+
</a>
72+
</div>
73+
74+
</nav>
6375
</div>
64-
</nav>
76+
</div>
6577
</header>

0 commit comments

Comments
 (0)