From 734d92eb8ffcf4d71b5914309146dfea6fa56b35 Mon Sep 17 00:00:00 2001 From: anmoltripathi Date: Fri, 6 Dec 2019 18:24:05 +0530 Subject: [PATCH 01/19] change header and sidebar nav --- src/css/base.css | 8 +- src/css/common.css | 66 +++++ src/css/component-frame.css | 36 +++ src/css/header.css | 417 +++++---------------------- src/css/nav.css | 2 +- src/css/site.css | 3 + src/css/vars.css | 20 +- src/img/logo.png | Bin 0 -> 3170 bytes src/img/server-icon.png | Bin 0 -> 1343 bytes src/partials/body-home.hbs | 14 +- src/partials/body.hbs | 2 +- src/partials/header-content.hbs | 162 ++++------- src/partials/nav-menu.hbs | 3 +- src/partials/nav-version-control.hbs | 37 +++ 14 files changed, 306 insertions(+), 464 deletions(-) create mode 100644 src/css/common.css create mode 100644 src/css/component-frame.css create mode 100644 src/img/logo.png create mode 100644 src/img/server-icon.png create mode 100644 src/partials/nav-version-control.hbs diff --git a/src/css/base.css b/src/css/base.css index e18589b..d491004 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -16,7 +16,8 @@ body { body { color: var(--color-text); - font-family: "Gotham", sans-serif; + font-family: "Source Sans Pro", sans-serif; + /* font-family: "Gotham", sans-serif; */ line-height: 1.5; margin: 0; } @@ -79,3 +80,8 @@ small { max-width: var(--width-container); padding: 0 var(--width-container-gutter); } +.container-fluid { + max-width: var(--width-container-fluid); + padding: 0; + margin: 0 auto; +} diff --git a/src/css/common.css b/src/css/common.css new file mode 100644 index 0000000..aa4e630 --- /dev/null +++ b/src/css/common.css @@ -0,0 +1,66 @@ +.row { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + /* margin-right: -1.25rem; + margin-left: -1.25rem; */ +} + +.justify-content-start { + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; +} + +.justify-content-end { + -webkit-box-pack: end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; +} + +.justify-content-center { + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; +} + +.justify-content-between { + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; +} +.align-items-center { + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; +} +.col-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; +} + +.mr-auto, +.mx-auto { + margin-right: auto !important; +} +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} +.btn { + border-radius: 3px; + font-family: "Source Sans Pro", sans-serif; + font-size: 1.125rem; +} +.btn-primary { + padding: 8px 25px; + border: 1px solid var(--color-brand-blue); + background: var(--color-brand-blue); + color: var(--color-brand-white); +} diff --git a/src/css/component-frame.css b/src/css/component-frame.css new file mode 100644 index 0000000..b93fc66 --- /dev/null +++ b/src/css/component-frame.css @@ -0,0 +1,36 @@ +.component-frame { + /* rgba(87, 160, 255, 1) */ + background: rgba(var(--color-blue-rgb), 0.07); + padding: 12px 30px; + font-family: Source Sans Pro; + display: flex; + align-items: center; +} +.frame-body { + margin-left: 10px; +} +.frame-body .title { + margin: 0; + font-size: 1.25rem; + font-weight: var(--weight-semibold); + color: var(--color-brand-gray1); +} +.frame-dropdown { + position: absolute; + display: none; +} +.frame-dropdown .frame-dropdown-list { + margin: 0; + padding: 0; + list-style: none; +} +.frame-link, +.frame-item { + font-size: 1rem; + color: var(--color-brand-gray4); + text-decoration: none; +} +.frame-link:hover, +.frame-item:hover { + text-decoration: none; +} diff --git a/src/css/header.css b/src/css/header.css index 7f165eb..10f1d55 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -1,378 +1,99 @@ -.navbar { - background-color: var(--color-navbar-bg); - height: var(--height-navbar); - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: var(--z-index-navbar); - line-height: 1; -} - -.navbar .container { - display: flex; - align-items: center; - height: inherit; -} - -.navbar, -.navbar a { - color: var(--color-navbar-text); +.navbar-new-top { + background: var(--color-brand-white); } - -.navbar a:focus, -.navbar a:hover { - text-decoration: none; -} - -.navbar-brand { - display: flex; - align-items: center; - flex: 1; /* FIXME this works without this property in antora-ui-default */ -} - -.navbar-brand .navbar-item { - display: flex; - height: 42px; +.navbar-brand img { + height: 32px; transition: height 0.5s ease; } -.navbar-brand img { - height: 100%; +.navbar-new-bottom { + background: var(--color-brand-blue); } -.navbar-burger { - width: 30px; - height: 19px; - background: none; - border: 0; +.navbar { position: relative; - margin-left: auto; - padding: 0; -} - -.navbar-burger span { - display: block; - width: inherit; - height: 4px; - background: var(--color-navbar-text); - margin-bottom: 3px; - transition: all 0.3s ease-in-out; - transform: translate3d(0, 0, 0); -} - -.navbar-burger.is-active span { - position: absolute; -} - -.navbar-burger.is-active span:nth-child(1) { - top: 8px; - transform: rotate(135deg); -} - -.navbar-burger.is-active span:nth-child(2) { - opacity: 0; -} - -.navbar-burger.is-active span:nth-child(3) { - top: 8px; - transform: rotate(-135deg); -} - -.navbar-menu { - display: none; - flex-grow: 1; -} - -.navbar-start { - flex-grow: 1; + display: -webkit-box; + display: -ms-flexbox; display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; - font-size: 1.0625rem; -} - -.navbar-start > a.navbar-item, -.navbar-start > .navbar-item > .navbar-link { - display: block; - padding: 0.75rem 1.25rem; - text-transform: uppercase; - letter-spacing: -0.025em; - position: relative; -} - -a.navbar-item.has-dropdown::after, -.navbar-item.has-dropdown > .navbar-link::after { - content: ""; - position: absolute; - background: url(../img/caret-down.svg) no-repeat 50% 50%; - width: 0.875rem; - height: 0.625rem; - height: 1rem; - margin-left: 0.25rem; -} - -.navbar-dropdown { - margin: 0 1.25rem; -} - -.navbar-dropdown a { - position: relative; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0.75rem 1.875rem; +} +.navbar-toggler { + padding: 0.25rem 0.75rem; + font-size: 1.25rem; + line-height: 1; + background-color: transparent; + border: 1px solid transparent; + border-radius: 0.25rem; } -.navbar-dropdown a::after { - content: ""; - position: absolute; - bottom: -3px; - left: 0; - right: 0; - height: 1px; - background-color: var(--color-navbar-text); - transform: scale3d(0, 0.9999, 0.9999); - transition: transform 0.3s; +.navbar-toggler:hover, +.navbar-toggler:focus { + text-decoration: none; } -.navbar-dropdown a:focus::after, -.navbar-dropdown a:hover::after { - transform: scale3d(1, 0.9999, 0.9999); - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +.navbar-toggler:not(:disabled):not(.disabled) { + cursor: pointer; } - -.navbar-dropdown.explore .title { +.navbar-toggler { display: none; } - -.navbar-dropdown ul { - list-style: none; - padding: 0.5rem 0; +.navbar-nav { margin: 0; -} - -.navbar-dropdown ul.two-cols { - display: grid; - grid-template-columns: repeat(2, auto); - align-content: flex-start; -} - -.navbar-dropdown li { - padding: 0.75rem 1rem 0.75rem 1.25rem; -} - -.navbar-link .version { - text-transform: none; -} - -.navbar-dropdown li:hover { - background-color: rgba(0, 0, 0, 0.3); -} - -.navbar-dropdown li.heading { - font-weight: var(--weight-bold); -} - -.navbar-dropdown ul.two-cols li.heading { - grid-column: 1 / 3; -} - -@media screen and (min-width: 1024px) { - .navbar-start > a.navbar-item:hover, - .navbar-start > .navbar-item:hover > .navbar-link { - color: var(--color-brand-red); - } - - .navbar-dropdown { - visibility: hidden; - position: absolute; - margin-left: 1.25rem; /* FIXME can we get rid of this? */ - box-shadow: -5px 6px 10px rgba(25, 24, 24, 0.6); - opacity: 0; - } - - .navbar-dropdown.explore .title { - display: block; - font-weight: var(--weight-bold); - padding: 1rem 1.25rem 0.75rem; - background-color: #151514; - } - - .navbar-dropdown .cols { - display: flex; - background: #333 linear-gradient(#333 0%, #201a19 100%); - } - - .navbar-dropdown .cols ul + ul { - border-left: 3px solid #151514; - } - - .navbar-dropdown.versions li { - padding-right: 1.25rem; /* FIXME make this stretch to size of parent */ - } -} - -.navbar-start .navbar-item.search { - flex-grow: 1; - justify-content: flex-end; + list-style: none; + padding: 0; display: flex; - padding-right: 1.25rem; } - -.navbar-menu:not(.is-active) .reveal-search-input > .navbar-item:not(.search) { - display: none; -} - -.navbar-start input.query { - flex-grow: 1; - background-color: var(--color-navbar-bg); - color: inherit; - padding: 0.5rem 0.25rem; - font-size: 1rem; - font-weight: var(--weight-light); - border: 0; +.navbar-new-bottom .nav-item { + margin: 0 15px; } - -.navbar-start input.query::placeholder { - color: inherit; - padding-left: 0.125rem; +.nav-item:first-child { + margin-left: 0; } - -.reveal-search-input .algolia-autocomplete { - flex-grow: 1; - display: flex !important; - align-items: center; - border-bottom: 1px solid var(--color-navbar-text); -} - -.reveal-search-input .algolia-autocomplete::before { - content: ""; - background: url(../img/search.svg) 50% 50% no-repeat; - background-size: cover; - border: 0; - height: 1rem; - width: 1rem; -} - -.navbar-start:not(.reveal-search-input) input.query { - display: none; -} - -.navbar-start button.search { - align-items: center; - background: none; - border: 0; - display: flex; - font-size: 1.125rem; - padding: 0 0.5rem; +.navbar-nav .nav-link { + color: var(--color-brand-white); + text-transform: uppercase; + opacity: 0.8; + font-size: 18px; + line-height: 23px; + font-family: "Source Sans Pro", sans-serif; } - -.navbar-start button.search::before { - content: ""; - background: url(../img/search.svg) 50% 50% no-repeat; - background-size: cover; - border: 0; - height: 1.25rem; - width: 1.25rem; +.active .nav-link { + font-weight: var(--weight-semibold); + text-decoration: none; + opacity: 1; } - -.navbar-start button.search span { - color: var(--color-navbar-text); - padding-left: 0.5rem; +.nav-link:focus, +.nav-link:hover { + text-decoration: none; } - -.reveal-search-input button.search::before { - background: url(../img/search-close.svg) 50% 50% no-repeat; +.primary-action > * { + display: inline-block; } - -.navbar .red-btn { - border: 2px solid var(--color-brand-red); - background-color: var(--color-brand-red); - color: inherit; +.try-btn { font-weight: var(--weight-bold); - font-size: 1.125rem; - height: 3.25rem; - width: 9.75rem; /* equal to 1.875rem padding on sides */ - display: inline-flex; - align-items: center; - justify-content: center; - letter-spacing: -0.025em; - transition: background-color 0.3s; -} - -.navbar .red-btn:focus, -.navbar .red-btn:hover { - background-color: var(--color-navbar-bg); - color: var(--color-navbar-text); -} - -/* mobile menu */ - -html.is-clipped--navbar { - overflow-y: hidden; } - -.navbar-menu.is-active { - display: block; - background-color: var(--color-navbar-bg); - position: absolute; - top: var(--height-navbar); - left: 0; - right: 0; - padding: 1.25rem 0; - height: calc(100vh - var(--height-navbar)); - overflow-y: auto; -} - -.navbar-menu.is-active .navbar-start { - display: block; -} - -.navbar-menu.is-active .navbar-item.search { /* FIXME quick hacks to get something working */ - justify-content: center; - padding-left: 1.25rem; - height: 2.5rem; +.parent-site { + margin: 0 20px; + padding: 0 25px; + border-right: 1px solid var(--color-brand-gray5); + border-left: 1px solid var(--color-brand-gray5); } - -.navbar-menu.is-active .navbar-end { - text-align: center; - margin: 1rem 0; +.parent-site a { + color: var(--color-brand-gray4); + font-size: 1rem; } - -@media screen and (min-width: 1024px) { - .navbar-brand { - flex: none; - margin-right: 1.25rem; - } - - .navbar-brand .navbar-item { - height: 47px; - width: 165px; - justify-content: center; - } - - .navbar-burger { - display: none; - } - - .navbar-menu { - display: flex; - } - - .navbar-item.has-dropdown:hover .navbar-dropdown { - visibility: visible; - opacity: 1; - transition: opacity 0.3s 0.25s; - } - - .navbar-item.has-dropdown:hover .navbar-dropdown::before { - content: ""; - display: block; - position: absolute; - top: -2.5rem; - right: 0; - left: 0; - height: 2.5rem; - z-index: var(--z-index-navbar-dropdown); - } - - .navbar-item.has-dropdown:hover > .navbar-link { - z-index: var(--z-index-navbar-dropdown-link); - } +.search .query { + border: none; + width: 283px; + border-bottom: 1px solid var(--color-brand-gray5); + color: var(--color-brand-gray4); + font-size: 1rem; } diff --git a/src/css/nav.css b/src/css/nav.css index ce54be0..c220da7 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -57,7 +57,7 @@ } .nav-menu > .nav-list { - margin: 1rem 0.5rem 1rem 0.75rem; + margin: 1rem 1.875rem; } .nav-menu .nav-item .nav-list { diff --git a/src/css/site.css b/src/css/site.css index 1df4b82..f0f93e3 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap"); +@import "common.css"; @import "typeface-gotham.css"; @import "typeface-roboto-mono.css"; @import "vars.css"; @@ -17,3 +19,4 @@ @import "optanon.css"; @import "highlight.css"; @import "feedback.css"; +@import "component-frame.css"; diff --git a/src/css/vars.css b/src/css/vars.css index 9582a44..f4649ae 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -6,6 +6,8 @@ --color-brand-red-tint: #fcdedf; --color-brand-white: #fff; /* secondary */ + --color-brand-blue: #57a0ff; + --color-blue-rgb: 87, 160, 255; --color-brand-light-blue: #00ace0; --color-brand-light-blue-tint: #d9f3fb; --color-brand-pink: #eb4971; @@ -13,10 +15,16 @@ --color-brand-purple: #b36cdb; --color-brand-purple-tint: #f4e9fa; /* tertiary */ - --color-brand-gray: #666; + --color-brand-gray1: #292b36; + --color-brand-gray2: #3d4151; + --color-brand-gray3: #52566c; + --color-brand-gray4: #73768a; + --color-brand-gray5: #c8cbdf; + --color-brand-gray6: #eaebf1; + --color-brand-gray7: #f9f9f9; /* --color-brand-silver: #ccc; */ --color-brand-silver: #c1c1c1; - --color-brand-blue: #0074e0; + /* --color-brand-blue: #0074e0; */ --color-brand-blue-tint: #d9eafb; --color-brand-orange: #fc9c0c; --color-brand-orange-tint: #fff0da; @@ -32,9 +40,9 @@ --color-navbar-text: var(--color-brand-white); --color-footer-bg: var(--color-brand-black); --color-footer-text: var(--color-brand-white); - --height-spacer: 1.5rem; + --height-spacer: 1.3rem; /* --height-navbar: 4rem; */ - --height-navbar: 4.875rem; + --height-navbar: 6.09rem; --height-to-body: calc(var(--height-navbar) + var(--height-spacer)); --height-min-body: calc(100vh - var(--height-to-body)); --height-nav: calc(var(--height-min-body) - var(--height-spacer)); @@ -43,12 +51,14 @@ /* --width-main-gutter: 1.5rem; */ --width-main-gutter: 2.5rem; --width-container: 90rem; + --width-container-fluid: 100%; --width-container-gutter: 1.25rem; - --width-nav: 16rem; + --width-nav: 20rem; --width-toc: 12rem; --weight-light: 300; --weight-normal: 400; --weight-medium: 500; + --weight-semibold: 600; --weight-bold: 700; --z-index-feedback: 7; --z-index-nav-mobile: 6; diff --git a/src/img/logo.png b/src/img/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..c2f7ebed221e799b7443facf8712327c29659325 GIT binary patch literal 3170 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 -
-

{{{page.title}}}

-{{{page.contents}}} -
- +
+
+

+ {{{page.title}}} +

+ {{{page.contents}}} +
+
\ No newline at end of file diff --git a/src/partials/body.hbs b/src/partials/body.hbs index 8cb08ae..6f4b9d4 100644 --- a/src/partials/body.hbs +++ b/src/partials/body.hbs @@ -1,4 +1,4 @@ -
+
{{> nav}} {{> toc}} {{> main}} diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs index 6d5160a..e53ac03 100644 --- a/src/partials/header-content.hbs +++ b/src/partials/header-content.hbs @@ -1,105 +1,65 @@ -
- + {{! End primary header }} + {{! Start secondary header }} + -
+ \ No newline at end of file diff --git a/src/partials/nav-menu.hbs b/src/partials/nav-menu.hbs index 102eb31..69925d4 100644 --- a/src/partials/nav-menu.hbs +++ b/src/partials/nav-menu.hbs @@ -1,3 +1,4 @@
-{{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}} + {{> nav-version-control}} + {{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}}
diff --git a/src/partials/nav-version-control.hbs b/src/partials/nav-version-control.hbs new file mode 100644 index 0000000..abcd654 --- /dev/null +++ b/src/partials/nav-version-control.hbs @@ -0,0 +1,37 @@ +{{#if (and page.component (ne page.component.name 'home'))}} + {{#if (and page.component (ne page.component.name 'tutorials'))}} + {{#if (and page.component (ne page.component.name 'userprofile-couchbase-mobile'))}} + {{#if (or page.versions (ends-with page.component.name '-sdk'))}} +
+
+ +
+
+

{{{page.component.title}}}

+ Version {{page.componentVersion.displayVersion}} +
+ + {{#if (ends-with page.component.name '-sdk')}} +
    + {{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}} +
  • {{{./title}}}
    • + {{/each}} +
+ {{/if}} +
+
+
+ {{else}} + {{{page.component.title}}}{{#unless (eq page.componentVersion.displayVersion 'master')}} {{page.componentVersion.displayVersion}}{{/unless}} + {{/if}} + {{/if}} + {{/if}} +{{/if}} \ No newline at end of file From 4444e1273f8c431dd93c51b73b59e7a152b87fd9 Mon Sep 17 00:00:00 2001 From: anmoltripathi Date: Tue, 10 Dec 2019 10:04:00 +0530 Subject: [PATCH 02/19] fix responsive header layout till iPad --- src/css/base.css | 13 ++++- src/css/common.css | 7 ++- src/css/header.css | 90 +++++++++++++++++++++++++++++++-- src/partials/head-last.hbs | 2 + src/partials/header-content.hbs | 16 +++--- 5 files changed, 112 insertions(+), 16 deletions(-) diff --git a/src/css/base.css b/src/css/base.css index d491004..4f53222 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -75,13 +75,22 @@ small { font-size: 0.8em; } -.container { +.container, +.container-fluid { margin: 0 auto; max-width: var(--width-container); padding: 0 var(--width-container-gutter); } -.container-fluid { +/* .container-fluid { max-width: var(--width-container-fluid); padding: 0; margin: 0 auto; +} */ + +@media screen and (min-width: 1024px) { + .container-fluid { + max-width: var(--width-container-fluid); + padding: 0; + margin: 0 auto; + } } diff --git a/src/css/common.css b/src/css/common.css index aa4e630..0773524 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -59,8 +59,13 @@ font-size: 1.125rem; } .btn-primary { - padding: 8px 25px; + padding: 5px 15px; border: 1px solid var(--color-brand-blue); background: var(--color-brand-blue); color: var(--color-brand-white); } +@media screen and (min-width: 768px) { + .btn-primary { + padding: 8px 25px; + } +} diff --git a/src/css/header.css b/src/css/header.css index 10f1d55..5322db0 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -23,7 +23,7 @@ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; - padding: 0.75rem 1.875rem; + padding: 0.75rem var(--width-container-gutter); } .navbar-toggler { padding: 0.25rem 0.75rem; @@ -54,14 +54,14 @@ .navbar-new-bottom .nav-item { margin: 0 15px; } -.nav-item:first-child { +.navbar-new-bottom .nav-item:first-child { margin-left: 0; } .navbar-nav .nav-link { color: var(--color-brand-white); text-transform: uppercase; opacity: 0.8; - font-size: 18px; + font-size: 1.125rem; line-height: 23px; font-family: "Source Sans Pro", sans-serif; } @@ -74,6 +74,10 @@ .nav-link:hover { text-decoration: none; } +.primary-action { + display: flex; + align-items: center; +} .primary-action > * { display: inline-block; } @@ -81,8 +85,8 @@ font-weight: var(--weight-bold); } .parent-site { - margin: 0 20px; - padding: 0 25px; + margin: 0 10px; + padding: 0 10px; border-right: 1px solid var(--color-brand-gray5); border-left: 1px solid var(--color-brand-gray5); } @@ -96,4 +100,80 @@ border-bottom: 1px solid var(--color-brand-gray5); color: var(--color-brand-gray4); font-size: 1rem; + padding-right: 20px; +} +.search { + position: relative; +} +.search-btn { + position: absolute; + top: 0; + bottom: 0; + right: 0; + font-size: 1rem; + border: none; + background: none; + padding: 0; + width: 16px; + height: 16px; +} + +.navbar-burger { + width: 30px; + height: 19px; + background: none; + border: 0; + position: relative; + margin-left: 10px; + padding: 0; +} + +.navbar-burger span { + display: block; + width: inherit; + height: 4px; + background: var(--color-brand-blue); + margin-bottom: 3px; + transition: all 0.3s ease-in-out; + transform: translate3d(0, 0, 0); +} + +.navbar-burger.is-active span { + position: absolute; +} + +.navbar-burger.is-active span:nth-child(1) { + top: 8px; + transform: rotate(135deg); +} + +.navbar-burger.is-active span:nth-child(2) { + opacity: 0; +} + +.navbar-burger.is-active span:nth-child(3) { + top: 8px; + transform: rotate(-135deg); +} + +@media screen and (min-width: 768px) { + .search .query { + width: 235px; + } + .navbar-burger { + display: none; + } +} + +@media screen and (min-width: 1024px) { + .search .query { + width: 283px; + } + .parent-site { + margin: 0 20px; + padding: 0 25px; + } + .navbar { + padding: 0.75rem 1.875rem; + } } diff --git a/src/partials/head-last.hbs b/src/partials/head-last.hbs index dc7fb0d..d32d54a 100644 --- a/src/partials/head-last.hbs +++ b/src/partials/head-last.hbs @@ -1,4 +1,6 @@ + {{!-- include fontAwesome CDN --}} + {{#if env.OPTANON_SCRIPT_URL}} diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs index e53ac03..df35cc6 100644 --- a/src/partials/header-content.hbs +++ b/src/partials/header-content.hbs @@ -7,10 +7,8 @@
-
@@ -21,14 +19,16 @@ Try Free +
- {{! End primary header }} {{! Start secondary header }} -

{{{page.component.title}}}

- Version {{page.componentVersion.displayVersion}} -
- - {{#if (ends-with page.component.name '-sdk')}} -
    - {{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}} -
  • {{{./title}}}
    • - {{/each}} -
- {{/if}} +
+ Version {{page.componentVersion.displayVersion}} +
+ + {{#if (ends-with page.component.name '-sdk')}} +
    + {{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}} +
  • {{{./title}}}
    • + {{/each}} +
+ {{/if}} +
From 2f7b0044a5538a9a7d36d7a4d20c63caf18f4c82 Mon Sep 17 00:00:00 2001 From: anmoltripathi Date: Fri, 10 Jan 2020 16:18:18 +0530 Subject: [PATCH 11/19] style left navigation and breadcrumbs continue --- src/css/nav.css | 55 ++++++++++++++++++++++++++++++--------- src/css/vars.css | 3 ++- src/js/01-nav.js | 29 +++++++++++++++++---- src/partials/crumbs.hbs | 24 ++++++++--------- src/partials/nav-tree.hbs | 6 ++--- 5 files changed, 83 insertions(+), 34 deletions(-) diff --git a/src/css/nav.css b/src/css/nav.css index c220da7..f819005 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -1,9 +1,9 @@ .nav-menu { - background-color: var(--color-shade); + background-color: var(--color-brand-gray7); position: fixed; width: inherit; overflow-y: scroll; - font-size: 0.875rem; + font-size: 1rem; line-height: 1.35; } @@ -34,12 +34,20 @@ background-color: var(--color-border); } -.nav-menu .nav-line, .nav-menu .nav-link, .nav-menu .nav-text { display: block; } +.nav-menu .nav-line { + display: flex; + word-break: break-all; +} + +.nav-menu .nav-text { + margin-left: 0.75rem; +} + .nav-menu a.nav-link { color: var(--color-text); text-decoration: none; @@ -57,7 +65,8 @@ } .nav-menu > .nav-list { - margin: 1rem 1.875rem; + /* margin: 1rem 1.875rem; */ + margin: 1.5rem 0; } .nav-menu .nav-item .nav-list { @@ -66,33 +75,53 @@ margin-bottom: 0.625rem; */ margin-bottom: 0.75rem; + margin-left: 3.6875rem; + border-left: 1px solid var(--color-brand-gray5); } .nav-menu .nav-item:not(.is-active) > .nav-list { display: none; } -.nav-menu .nav-item { +/* .nav-menu .nav-item { margin-left: 0.75em; -} +} */ /* NOTE navigation list without a category */ .nav-item[data-depth="0"] > .nav-list:first-child { margin-left: -0.75em; } -.nav-menu .nav-item[data-depth="0"] + .nav-item { +/* .nav-menu .nav-item[data-depth="0"] + .nav-item { margin-top: 1.25em; -} +} */ -.nav-menu .nav-item .nav-item { +/* .nav-menu .nav-item .nav-item { margin-top: 0.5em; -} +} */ .nav-item[data-depth="0"] > .nav-line { text-transform: uppercase; } +.nav-line[data-depth="0"] { + padding: 0.625rem 1.875rem; + color: var(--brand-color-gray2); +} + +.nav-line[data-depth="1"] { + padding: 0.625rem 1.125rem; +} + +.nav-item.is-active .nav-line[data-depth="0"] { + background: rgba(var(--color-gray-rgb), 0.06); +} + +.nav-item.is-active .nav-line[data-depth="0"] .nav-text { + color: var(--color-brand-blue); + font-weight: var(--weight-semibold); +} + .nav-menu .nav-item.is-current-page > .nav-line > a.nav-link { color: var(--color-text); font-weight: var(--weight-medium); @@ -102,9 +131,9 @@ background: none; border: 0; padding: 0; - position: absolute; - margin-left: -1.25em; - width: 1.25em; + /* position: absolute; */ + /* margin-left: -1.25em; */ + width: 1rem; color: var(--color-border); transform: scale(1.25); } diff --git a/src/css/vars.css b/src/css/vars.css index 70ad8a6..748a273 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -6,7 +6,7 @@ --color-brand-red-tint: #fcdedf; --color-brand-white: #fff; /* secondary */ - --color-brand-blue: #57a0ff; + --color-brand-blue: #4287d6; --color-blue-rgb: 87, 160, 255; --color-brand-light-blue: #00ace0; --color-brand-light-blue-tint: #d9f3fb; @@ -20,6 +20,7 @@ --color-brand-warning: #ed2226; --color-brand-caution: #f57f17; /* tertiary */ + --color-gray-rgb: 115, 118, 138; --color-brand-gray1: #292b36; --color-brand-gray2: #3d4151; --color-brand-gray3: #52566c; diff --git a/src/js/01-nav.js b/src/js/01-nav.js index 1e17d70..a04b862 100644 --- a/src/js/01-nav.js +++ b/src/js/01-nav.js @@ -1,4 +1,4 @@ -;(function () { +; (function () { 'use strict' var nav = document.querySelector('nav.nav') @@ -14,11 +14,14 @@ find('.nav-toggle', navMenu.element).forEach(function (toggleBtn) { var navItem = findAncestorWithClass('nav-item', toggleBtn, navMenu.element) - toggleBtn.addEventListener('click', toggleActive.bind(navItem)) + // toggleBtn.addEventListener('click', toggleActive.bind(navItem)) + toggleBtn.addEventListener('click', addActive.bind(navItem)) + var navItemSpan = findNextElement(toggleBtn) if (navItemSpan.classList.contains('nav-text')) { navItemSpan.style.cursor = 'pointer' - navItemSpan.addEventListener('click', toggleActive.bind(navItem)) + // navItemSpan.addEventListener('click', toggleActive.bind(navItem)) + navItemSpan.addEventListener('click', addActive.bind(navItem)) } }) @@ -58,8 +61,24 @@ navMenu.element.style.height = reclaimedHeight > 0 ? Math.max(0, preferredHeight - reclaimedHeight) + 'px' : '' } - function toggleActive (e) { - this.classList.toggle('is-active') + // function toggleActive (e) { + // this.classList.toggle('is-active') + // } + + function addActive (e) { + console.log(this.classList, 12344) + // nav.querySelectorAll('.nav-item').classList.remove('is-active') + removeClasses(e) + this.classList.add('is-active') + concealEvent(e) + } + + var navItems = document.querySelectorAll('.nav .nav-item') + + function removeClasses (e) { + for (var i = 0; i < navItems.length; i++) { + navItems[i].classList.remove('is-active') + } concealEvent(e) } diff --git a/src/partials/crumbs.hbs b/src/partials/crumbs.hbs index 4be6843..2271a62 100644 --- a/src/partials/crumbs.hbs +++ b/src/partials/crumbs.hbs @@ -1,13 +1,13 @@ +
    +{{!-- NOTE add entry for current component, but not the home component or if the title matches the first breadcrumb --}} +{{#unless (eq page.component.name 'home')}} +{{#unless (eq page.breadcrumbs.0.content page.componentVersion.title)}} +
  • {{{page.componentVersion.title}}}
    • +{{/unless}} +{{/unless}} +{{#each page.breadcrumbs}} +
  • {{#if (eq ./urlType 'internal')}}{{{./content}}}{{else}}{{{./content}}}{{/if}}
    • +{{/each}} +
+ \ No newline at end of file diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs index 4ebedeb..a682b09 100644 --- a/src/partials/nav-tree.hbs +++ b/src/partials/nav-tree.hbs @@ -2,10 +2,10 @@
    {{#each navigation}}
  • + {{~#if (eq this (last @root.page.breadcrumbs))}} is-current-page{{~else}} is-current-path{{/if}}{{!-- is-active --}} + {{~else if (eq ../level 0)}}{{!--is-active --}}{{/if}}" data-depth="{{../level}}"> {{#if ./content}} - + {{#if ./items}} {{/if}} From d1f27370ab0ce2826b14cdb3bd078d8e8ad7eacd Mon Sep 17 00:00:00 2001 From: anmoltripathi Date: Wed, 5 Feb 2020 15:06:07 +0530 Subject: [PATCH 12/19] update sidebar navigation style --- preview-src/ui-model.yml | 6 ++ src/css/component-frame.css | 4 +- src/css/nav.css | 125 ++++++++++++++++++++++++++++++++++-- src/img/back-arrow.png | Bin 0 -> 441 bytes src/js/01-nav.js | 121 +++++++++++++++++++--------------- src/partials/nav-tree.hbs | 52 +++++++++------ 6 files changed, 231 insertions(+), 77 deletions(-) create mode 100644 src/img/back-arrow.png diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml index e355fe8..ddf16d2 100644 --- a/preview-src/ui-model.yml +++ b/preview-src/ui-model.yml @@ -77,6 +77,7 @@ page: latest: *latest_page navigation: - content: Introduction + icons: fas fa-database items: - content: Why Couchbase? url: '#' @@ -85,6 +86,7 @@ page: url: '#' urlType: fragment - content: Getting Started + icons: fas fa-database items: - content: Start Here! url: '#' @@ -93,6 +95,7 @@ page: url: '#' urlType: fragment - content: Developers + icons: fas fa-database items: - content: Hello World! url: '#' @@ -102,6 +105,7 @@ page: urlType: fragment - &crumb_0 content: Managing Clusters + icons: fas fa-database items: - &crumb_1 content: Monitoring @@ -144,6 +148,7 @@ page: url: '#' urlType: fragment - content: Installing & Upgrading + icons: fas fa-database items: - content: Couchbase Server Installation Home url: '#' @@ -163,6 +168,7 @@ page: url: '#' urlType: fragment - content: Understanding Couchbase + icons: fas fa-database items: - content: Overview url: '#' diff --git a/src/css/component-frame.css b/src/css/component-frame.css index ed04a92..2912be4 100644 --- a/src/css/component-frame.css +++ b/src/css/component-frame.css @@ -1,7 +1,7 @@ .component-frame { /* rgba(87, 160, 255, 1) */ - background: rgba(var(--color-blue-rgb), 0.07); - padding: 12px 30px; + /* background: rgba(var(--color-blue-rgb), 0.07); */ + padding: 12px 30px 12px 15px; display: flex; align-items: center; } diff --git a/src/css/nav.css b/src/css/nav.css index f819005..de47604 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -42,6 +42,15 @@ .nav-menu .nav-line { display: flex; word-break: break-all; + align-items: center; +} + +.nav-line .fas { + color: var(--color-brand-gray3); +} + +.nav-item.is-active .nav-line[data-depth="0"] .fas { + color: var(--color-brand-blue); } .nav-menu .nav-text { @@ -69,7 +78,7 @@ margin: 1.5rem 0; } -.nav-menu .nav-item .nav-list { +.nav-menu .nav-item[data-depth='0'] > .nav-list { /* margin-top: -0.0625rem; margin-bottom: 0.625rem; @@ -79,6 +88,15 @@ border-left: 1px solid var(--color-brand-gray5); } +.nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0'] > .nav-list { + margin-left: 1.875rem; + border-left: none; +} + +.nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0'] > .nav-line { + display: none; +} + .nav-menu .nav-item:not(.is-active) > .nav-list { display: none; } @@ -100,21 +118,18 @@ margin-top: 0.5em; } */ -.nav-item[data-depth="0"] > .nav-line { +/* .nav-item[data-depth="0"] > .nav-line { text-transform: uppercase; -} +} */ .nav-line[data-depth="0"] { padding: 0.625rem 1.875rem; color: var(--brand-color-gray2); } -.nav-line[data-depth="1"] { - padding: 0.625rem 1.125rem; -} - .nav-item.is-active .nav-line[data-depth="0"] { background: rgba(var(--color-gray-rgb), 0.06); + margin-bottom: 0.625rem; } .nav-item.is-active .nav-line[data-depth="0"] .nav-text { @@ -170,6 +185,102 @@ html.is-clipped--nav { background-size: 75%; } +.is-inactive { + display: none; +} + +.main-nav-parent { + font-size: 14px; + line-height: 18px; + color: var(--color-brand-gray2); + display: flex; + margin: 10px 0; + text-decoration: none; + align-items: center; + flex-wrap: wrap; + background: rgba(var(--color-blue-rgb), 0.06); + padding: 10px 0; + border-top: 1px solid var(--color-brand-gray5); + border-bottom: 2px solid var(--color-brand-gray5); +} + +.main-nav-parent .back-to-menu { + padding: 0 40px; + width: 100%; + background: url(../img/back-arrow.png) no-repeat 20px center; +} + +.main-nav-parent .nav-text { + width: 100%; + font-size: 18px; + line-height: 23px; + color: var(--color-brand-gray2); + padding: 0 40px; + margin-left: 0; +} + +.main-nav-parent:hover { + text-decoration: none; +} + +.in-toggle { + cursor: pointer; + /* margin-right: 10px; */ +} + +.nav-item .nav-line[data-depth="0"] .in-toggle { + display: none; +} + +.nav-line[data-depth="1"] { + display: flex; + justify-content: flex-end; + padding: 0.625rem 1rem; + flex-direction: row-reverse; +} + +.is-active[data-depth='0'] .is-active > .nav-line[data-depth="1"] { + /* padding-left: 0; */ + /* justify-content: start; */ + /* flex-direction: unset; */ + font-size: 1.125rem; + font-weight: 300; + color: var(--color-brand-gray1); +} + +/* .is-active[data-depth='1'] > .nav-line[data-depth="1"] .in-toggle { + transform: rotate(90deg); +} */ + +.nav-menu .nav-item.is-active[data-depth='1'] > .nav-list { + margin-left: 1.5rem; +} + +.nav-menu .nav-item[data-depth='2'] { + margin: 0 8px 8px 0; +} + +.nav-menu .nav-item.is-active[data-depth='1'] > .nav-line .nav-link { + color: var(--color-brand-blue); +} + +.nav-menu .nav-item.is-active.is-active-depth-2[data-depth='1'] > .nav-line .nav-link { + color: var(--color-brand-gray1); +} + +.nav-menu .nav-item.is-active[data-depth='2'] > .nav-line .nav-link { + color: var(--color-brand-blue); + font-weight: 900; +} + +.nav-item[data-depth='1'] .in-toggle { + background: url(../img/back-arrow.png) no-repeat center center; + transform: rotate(180deg); + width: 20px; + height: 20px; + margin-left: 5px; +} + @media screen and (min-width: 769px) { .nav-control { display: none; diff --git a/src/img/back-arrow.png b/src/img/back-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..6ce8ed91a395cf004459652a02bf39b2b8c322b5 GIT binary patch literal 441 zcmV;q0Y?6bP)6)<+jo>?;w@_dhQ$syGLlrb$8mmFD`}*(o~Ed!Cnql9@&{o& z8upsF$T0T;{!B|MPo#ISfxtbz*~OC2sS`$uEiEWY^ZR}JoqsE(2D$(`1y^@fnPQD3 jET+rrN^CldGa%C+%QTqTvFPp+00000NkvXXu0mjfRhP1D literal 0 HcmV?d00001 diff --git a/src/js/01-nav.js b/src/js/01-nav.js index a04b862..6c3b8e9 100644 --- a/src/js/01-nav.js +++ b/src/js/01-nav.js @@ -5,83 +5,104 @@ var navMenu = {} if (!(navMenu.element = nav && nav.querySelector('.nav-menu'))) return var navControl - var currentPageItem = navMenu.element.querySelector('.is-current-page') + //var currentPageItem = navMenu.element.querySelector('.is-current-page') // NOTE prevent text from being selected by double click navMenu.element.addEventListener('mousedown', function (e) { if (e.detail > 1) e.preventDefault() }) - find('.nav-toggle', navMenu.element).forEach(function (toggleBtn) { + find(/*'.nav-toggle',*/'.in-toggle', navMenu.element).forEach(function (toggleBtn) { var navItem = findAncestorWithClass('nav-item', toggleBtn, navMenu.element) - // toggleBtn.addEventListener('click', toggleActive.bind(navItem)) - toggleBtn.addEventListener('click', addActive.bind(navItem)) + toggleBtn.addEventListener('click', toggleActive.bind(navItem)) + // var dataDepth = toggleBtn.getAttribute('data-depth') + // if (dataDepth === 1) { + // toggleBtn.classList.add("mystyle") + // } + // toggleBtn.addEventListener('click', addActive.bind(navItem)) var navItemSpan = findNextElement(toggleBtn) if (navItemSpan.classList.contains('nav-text')) { navItemSpan.style.cursor = 'pointer' - // navItemSpan.addEventListener('click', toggleActive.bind(navItem)) - navItemSpan.addEventListener('click', addActive.bind(navItem)) + navItemSpan.addEventListener('click', toggleActive.bind(navItem)) + // navItemSpan.addEventListener('click', addActive.bind(navItem)) } }) - fitNavMenuInit({}) - window.addEventListener('load', fitNavMenuInit) - window.addEventListener('resize', fitNavMenuInit) + // fitNavMenuInit({}) + // window.addEventListener('load', fitNavMenuInit) + // window.addEventListener('resize', fitNavMenuInit) if ((navControl = document.querySelector('main .nav-control'))) navControl.addEventListener('click', revealNav) - function scrollItemToMiddle (el, parentEl) { - var adjustment = (el.getBoundingClientRect().height - parentEl.getBoundingClientRect().height) * 0.5 + el.offsetTop - if (adjustment > 0) parentEl.scrollTop = adjustment - } - - function fitNavMenuInit (e) { - window.removeEventListener('scroll', fitNavMenuOnScroll) - navMenu.element.style.height = '' - if ((navMenu.preferredHeight = navMenu.element.getBoundingClientRect().height) > 0) { - // QUESTION should we check if x value > 0 instead? - if (window.getComputedStyle(nav).visibility === 'visible') { - if (!navMenu.encroachingElement) navMenu.encroachingElement = document.querySelector('footer.footer') - fitNavMenu(navMenu.preferredHeight, (navMenu.viewHeight = window.innerHeight), navMenu.encroachingElement) - window.addEventListener('scroll', fitNavMenuOnScroll) - } - if (currentPageItem && e.type !== 'resize') { - scrollItemToMiddle(currentPageItem.querySelector('.nav-link'), navMenu.element) - } - } - } - - function fitNavMenuOnScroll () { - fitNavMenu(navMenu.preferredHeight, navMenu.viewHeight, navMenu.encroachingElement) - } - - function fitNavMenu (preferredHeight, availableHeight, encroachingElement) { - var reclaimedHeight = availableHeight - encroachingElement.getBoundingClientRect().top - navMenu.element.style.height = reclaimedHeight > 0 ? Math.max(0, preferredHeight - reclaimedHeight) + 'px' : '' - } + // function scrollItemToMiddle (el, parentEl) { + // var adjustment = (el.getBoundingClientRect().height - parentEl.getBoundingClientRect().height) * 0.5 + el.offsetTop + // if (adjustment > 0) parentEl.scrollTop = adjustment + // } - // function toggleActive (e) { - // this.classList.toggle('is-active') + // function fitNavMenuInit (e) { + // window.removeEventListener('scroll', fitNavMenuOnScroll) + // navMenu.element.style.height = '' + // if ((navMenu.preferredHeight = navMenu.element.getBoundingClientRect().height) > 0) { + // // QUESTION should we check if x value > 0 instead? + // if (window.getComputedStyle(nav).visibility === 'visible') { + // if (!navMenu.encroachingElement) navMenu.encroachingElement = document.querySelector('footer.footer') + // fitNavMenu(navMenu.preferredHeight, (navMenu.viewHeight = window.innerHeight), navMenu.encroachingElement) + // window.addEventListener('scroll', fitNavMenuOnScroll) + // } + // if (currentPageItem && e.type !== 'resize') { + // scrollItemToMiddle(currentPageItem.querySelector('.nav-link'), navMenu.element) + // } + // } // } - function addActive (e) { - console.log(this.classList, 12344) - // nav.querySelectorAll('.nav-item').classList.remove('is-active') - removeClasses(e) - this.classList.add('is-active') - concealEvent(e) - } + // function fitNavMenuOnScroll () { + // fitNavMenu(navMenu.preferredHeight, navMenu.viewHeight, navMenu.encroachingElement) + // } - var navItems = document.querySelectorAll('.nav .nav-item') + // function fitNavMenu (preferredHeight, availableHeight, encroachingElement) { + // var reclaimedHeight = availableHeight - encroachingElement.getBoundingClientRect().top + // navMenu.element.style.height = reclaimedHeight > 0 ? Math.max(0, preferredHeight - reclaimedHeight) + 'px' : '' + // } + var navMenuControl = document.querySelector('.main-nav-parent') + // var navWrap = document.querySelector('.currentNav-wrap') - function removeClasses (e) { + navMenuControl.addEventListener('click', function () { + // navWrap.style.display = 'none' for (var i = 0; i < navItems.length; i++) { navItems[i].classList.remove('is-active') + navItems[i].classList.remove('is-inactive') + } + this.style.display = 'none' + }) + + // Toggle class + function toggleActive (e) { + if (this.getAttribute('data-depth') === '1') { + var otherNavs = document.querySelectorAll('.nav-item[data-depth="0"]:not(.is-active)') + console.log(otherNavs) + for (var i = 0; i < otherNavs.length; i++) { + otherNavs[i].classList.add('is-inactive') + } } - concealEvent(e) + this.classList.toggle('is-active') } + // function addActive (e) { + // removeClasses(e) + // this.classList.add('is-active') + // concealEvent(e) + // } + + var navItems = document.querySelectorAll('.nav .nav-item') + + // function removeClasses (e) { + // for (var i = 0; i < navItems.length; i++) { + // navItems[i].classList.remove('is-active') + // } + // concealEvent(e) + // } + function revealNav (e) { if (nav.classList.contains('is-active')) return hideNav(e) document.documentElement.classList.add('is-clipped--nav') diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs index a682b09..cb6b4ef 100644 --- a/src/partials/nav-tree.hbs +++ b/src/partials/nav-tree.hbs @@ -1,23 +1,39 @@ {{#if navigation}} -
      {{#each navigation}} -
    • - {{#if ./content}} - - {{#if ./items}} - + {{#if (eq ../crumbAtLevel this)}} + {{#if ( eq ../crumbLevel 0)}} +
      + Main Menu + {{{./content}}} +
      + {{/if}} {{/if}} - {{#if ./url}} - {{{./content}}} - {{else}} - {{{./content}}} - {{/if}} -       - {{/if}} -{{> nav-tree navigation=./items level=(add ../level 1) crumbLevel=(add ../crumbLevel (and ./content 1)) crumbAtLevel=(lookup @root.page.breadcrumbs (add ../crumbLevel (and ./content 1)))}} -
      • {{/each}} -
    +
      + {{!-- {{log ../crumbAtLevel this 'log output'}} --}} + {{#each navigation}} +
    • + + {{#if ./content}} + + {{#if ./items}} + {{#if ./icons}} + + {{/if}} + + {{!-- --}} + {{/if}} + {{#if ./url}} + {{{./content}}} + {{else}} + {{{./content}}} + {{/if}} + + {{/if}} + {{> nav-tree navigation=./items level=(add ../level 1) crumbLevel=(add ../crumbLevel (and ./content 1)) crumbAtLevel=(lookup @root.page.breadcrumbs (add ../crumbLevel (and ./content 1)))}} +
      • + {{/each}} +
    {{/if}} From 9972786a9006929469ca816a81355b1876b494ea Mon Sep 17 00:00:00 2001 From: anmoltripathi Date: Wed, 26 Feb 2020 10:40:56 +0530 Subject: [PATCH 13/19] update left navigation --- src/css/nav.css | 12 ++++++++---- src/partials/nav-tree.hbs | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/css/nav.css b/src/css/nav.css index de47604..8582591 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -4,7 +4,7 @@ width: inherit; overflow-y: scroll; font-size: 1rem; - line-height: 1.35; + line-height: 24px; } @media screen and (max-width: 768px) { @@ -58,7 +58,7 @@ } .nav-menu a.nav-link { - color: var(--color-text); + color: var(--color-brand-gray3); text-decoration: none; } @@ -190,8 +190,8 @@ html.is-clipped--nav { } .main-nav-parent { - font-size: 14px; - line-height: 18px; + font-size: 16px; + line-height: 20px; color: var(--color-brand-gray2); display: flex; margin: 10px 0; @@ -239,6 +239,10 @@ html.is-clipped--nav { flex-direction: row-reverse; } +.nav-line[data-depth="1"] .nav-link{ + color: var(--color-brand-gray4); +} + .is-active[data-depth='0'] .is-active > .nav-line[data-depth="1"] { /* padding-left: 0; */ /* justify-content: start; */ diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs index cb6b4ef..6adeac4 100644 --- a/src/partials/nav-tree.hbs +++ b/src/partials/nav-tree.hbs @@ -4,7 +4,7 @@ {{#if ( eq ../crumbLevel 0)}}
    Main Menu - {{{./content}}} + {{!-- {{{./content}}} --}}
    {{/if}} {{/if}} From b50f9fba0babbc50b8644de63fed38005f5c7a10 Mon Sep 17 00:00:00 2001 From: anmoltripathi Date: Wed, 26 Feb 2020 10:48:25 +0530 Subject: [PATCH 14/19] update linting error --- src/css/nav.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/nav.css b/src/css/nav.css index 8582591..696cc81 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -239,7 +239,7 @@ html.is-clipped--nav { flex-direction: row-reverse; } -.nav-line[data-depth="1"] .nav-link{ +.nav-line[data-depth="1"] .nav-link { color: var(--color-brand-gray4); } From f200990574942f60861baa354895fe30b5f10b44 Mon Sep 17 00:00:00 2001 From: anmoltripathi Date: Wed, 26 Feb 2020 12:07:26 +0530 Subject: [PATCH 15/19] resolve lint error --- src/css/nav.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/css/nav.css b/src/css/nav.css index 696cc81..452aeed 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -88,14 +88,14 @@ border-left: 1px solid var(--color-brand-gray5); } -.nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0'] > .nav-list { +/* .nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0'] > .nav-list { margin-left: 1.875rem; border-left: none; -} +} */ -.nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0'] > .nav-line { +/* .nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0'] > .nav-line { display: none; -} +} */ .nav-menu .nav-item:not(.is-active) > .nav-list { display: none; From 819d08e46b8f66a1d96fa8b92a730fc078629729 Mon Sep 17 00:00:00 2001 From: anmoltripathi Date: Wed, 11 Mar 2020 16:06:59 +0530 Subject: [PATCH 16/19] update zindex for left navigation --- src/css/common.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/common.css b/src/css/common.css index c4c8b96..69eff6d 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -3,7 +3,7 @@ top: 0; right: 0; left: 0; - z-index: 1030; + z-index: var(--z-index-nav-mobile); } .btn { From d1d449ea01daa570dacf4d350a9526f9637ca217 Mon Sep 17 00:00:00 2001 From: anmoltripathi Date: Thu, 12 Mar 2020 18:21:30 +0530 Subject: [PATCH 17/19] update left nav version on responsive design --- src/partials/nav-version-control.hbs | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/partials/nav-version-control.hbs b/src/partials/nav-version-control.hbs index 4c56300..fe56a37 100644 --- a/src/partials/nav-version-control.hbs +++ b/src/partials/nav-version-control.hbs @@ -32,7 +32,15 @@
{{else}} - {{{page.component.title}}}{{#unless (eq page.componentVersion.displayVersion 'master')}} {{page.componentVersion.displayVersion}}{{/unless}} +
+
+ +
+
+

{{{page.component.title}}}

+ {{#unless (eq page.componentVersion.displayVersion 'master')}} Version {{page.componentVersion.displayVersion}}{{/unless}} +
+
{{/if}} {{/if}} {{/if}} From b3243f56af552c9fc08e0f0f1b00f9c5e24468de Mon Sep 17 00:00:00 2001 From: anmoltripathi Date: Fri, 13 Mar 2020 18:21:09 +0530 Subject: [PATCH 18/19] update left navigation up to level 2 and 3 --- src/css/nav.css | 5 +++-- src/partials/nav-tree.hbs | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/css/nav.css b/src/css/nav.css index 452aeed..4d8e9c6 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -232,7 +232,8 @@ html.is-clipped--nav { display: none; } -.nav-line[data-depth="1"] { +.nav-line[data-depth="1"], +.nav-line[data-depth="2"] { display: flex; justify-content: flex-end; padding: 0.625rem 1rem; @@ -256,7 +257,7 @@ html.is-clipped--nav { transform: rotate(90deg); } */ -.nav-menu .nav-item.is-active[data-depth='1'] > .nav-list { +.nav-menu .nav-item.is-active[data-depth='1'] .nav-list { margin-left: 1.5rem; } diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs index 6adeac4..a4d178a 100644 --- a/src/partials/nav-tree.hbs +++ b/src/partials/nav-tree.hbs @@ -1,8 +1,8 @@ {{#if navigation}} {{#each navigation}} {{#if (eq ../crumbAtLevel this)}} - {{#if ( eq ../crumbLevel 0)}} -
+ {{#if ( eq ../crumbLevel 0 or eq ../crumbLevel 1 or eq ../crumbLevel 2)}} +
Main Menu {{!-- {{{./content}}} --}}
From 8c80db02b418537ffa1ec7f3459289c8bcc2e92d Mon Sep 17 00:00:00 2001 From: anmoltripathi Date: Wed, 18 Mar 2020 10:56:03 +0530 Subject: [PATCH 19/19] hide dummy icons --- src/css/nav.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/css/nav.css b/src/css/nav.css index 4d8e9c6..95b0945 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -224,6 +224,7 @@ html.is-clipped--nav { } .in-toggle { + display: none; cursor: pointer; /* margin-right: 10px; */ }