From 7fea18006c7da6436e5b28a998d573d7bd0a8c28 Mon Sep 17 00:00:00 2001 From: rakeshAlgo Date: Sat, 20 Jun 2020 10:34:50 +0530 Subject: [PATCH 1/2] Implement dropdown SDK language on left menu --- src/css/component-frame.css | 43 ++++++++++++++++++++++------ src/css/nav.css | 38 ++++++++++++++++++++++++ src/js/01-nav.js | 2 ++ src/partials/nav-menu.hbs | 25 ++++++++++++++++ src/partials/nav-version-control.hbs | 4 +-- 5 files changed, 102 insertions(+), 10 deletions(-) diff --git a/src/css/component-frame.css b/src/css/component-frame.css index f85852e8..f8c01716 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: var(--color-brand-gray6); - padding: 12px 30px 12px 15px; + padding: 12px 15px 12px 15px; display: flex; align-items: center; justify-content: center; @@ -46,12 +46,10 @@ .frame-dropdown { position: absolute; display: none; - background: var(--color-brand-white); - padding: 5px 15px; - left: -15px; - top: 50px; - border-radius: 4px; + left: 0; + top: 45px; z-index: 1; + padding: 17px 0 0; } .frame-dropdown .frame-dropdown-list { @@ -60,14 +58,43 @@ list-style: none; } +.frame-dropdown ul { + background: var(--color-brand-white); + min-width: 125px; + border-radius: 4px; + box-shadow: 0 3px 10px -4px var(--color-brand-gray8); +} + +.frame-dropdown ul li a { + padding: 4px 0.625rem; + display: inline-block; + width: 100%; +} + +ul.frame-dropdown-list li { + border-bottom: 1px solid var(--color-brand-gray8); + padding-bottom: 5px; + margin-bottom: 5px; +} + +ul.frame-dropdown-list li:last-child { + border-bottom: 0; + margin-bottom: 0; + padding-bottom: 0; +} + .frame-link, .frame-item { - font-size: 1rem; + font-size: var(--font-small); color: var(--color-brand-gray4); text-decoration: none; } .frame-link:hover, -.frame-item:hover { +.frame-item:hover, +.frame-link:active, +.frame-item:active, +.frame-link:visited, +.frame-item:visited { text-decoration: none; } diff --git a/src/css/nav.css b/src/css/nav.css index f59ea613..b2d57885 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -374,6 +374,44 @@ html.is-clipped--nav { margin: auto; } */ +.nav-menu ul.version-related-list.nav-list { + margin: -1.5rem 0 1.5rem; +} + +.nav-menu ul.version-related-list.nav-list ul { + padding: 5px 0 0; + list-style: none; +} + +.nav-menu ul.version-related-list.nav-list li a { + color: var(--color-brand-gray1); + padding: 0; + text-transform: capitalize; +} + +.nav-menu ul.version-related-list.nav-list li a:focus, +.nav-menu ul.version-related-list.nav-list li a:hover { + color: var(--color-brand-blue-secondary); +} + +/* .nav-menu ul.version-related-list.nav-list .nav-line { + padding-left: 1.65rem; +} */ +.nav-menu ul.version-related-list.nav-list .nav-line .in-toggle { + display: block; + position: relative; + width: 0; + height: 0; + margin-right: 10px; + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-left: 10px solid var(--color-brand-gray5); +} + +.nav-menu ul.version-related-list.nav-list .nav-line[data-depth='1'] { + padding-left: 1.85rem; +} + @media screen and (min-width: 769px) { .nav-control { display: none; diff --git a/src/js/01-nav.js b/src/js/01-nav.js index 126f220f..48401077 100644 --- a/src/js/01-nav.js +++ b/src/js/01-nav.js @@ -82,8 +82,10 @@ navMenuControl.addEventListener('click', function () { // navWrap.style.display = 'none' for (var i = 0; i < navItems.length; i++) { + console.log(navItems[i], 85) navItems[i].classList.remove('is-active') navItems[i].classList.remove('is-inactive') + navItems[i].classList.remove('open') } this.style.display = 'none' }) diff --git a/src/partials/nav-menu.hbs b/src/partials/nav-menu.hbs index 69925d44..92d23f9b 100644 --- a/src/partials/nav-menu.hbs +++ b/src/partials/nav-menu.hbs @@ -1,4 +1,29 @@
{{> nav-version-control}} {{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}} + {{!-- append version info for SDK --}} + {{#if (ends-with page.component.name '-sdk')}} + + + {{/if}}
diff --git a/src/partials/nav-version-control.hbs b/src/partials/nav-version-control.hbs index fe56a373..6b656dd2 100644 --- a/src/partials/nav-version-control.hbs +++ b/src/partials/nav-version-control.hbs @@ -20,13 +20,13 @@ {{/unless}} {{/each}} - {{#if (ends-with page.component.name '-sdk')}} + {{!-- {{#if (ends-with page.component.name '-sdk')}} - {{/if}} + {{/if}} --}} From 732e05571bfe842cc806ab91a58656872ef85c06 Mon Sep 17 00:00:00 2001 From: rakeshAlgo Date: Tue, 23 Jun 2020 16:09:41 +0530 Subject: [PATCH 2/2] make version dropdown in two column --- src/css/component-frame.css | 43 ++++++++++++++++++++------- src/css/nav.css | 23 +++++++++------ src/css/vars.css | 4 ++- src/js/01-nav.js | 44 ---------------------------- src/partials/nav-menu.hbs | 37 +++++------------------ src/partials/nav-version-control.hbs | 34 +++++++++++---------- 6 files changed, 75 insertions(+), 110 deletions(-) diff --git a/src/css/component-frame.css b/src/css/component-frame.css index f8c01716..8760c723 100644 --- a/src/css/component-frame.css +++ b/src/css/component-frame.css @@ -52,7 +52,8 @@ padding: 17px 0 0; } -.frame-dropdown .frame-dropdown-list { +.frame-dropdown .frame-dropdown-list, +.frame-dropdown .related { margin: 0; padding: 0; list-style: none; @@ -61,30 +62,39 @@ .frame-dropdown ul { background: var(--color-brand-white); min-width: 125px; - border-radius: 4px; - box-shadow: 0 3px 10px -4px var(--color-brand-gray8); + border-radius: 0; + /* box-shadow: 0 3px 10px -4px var(--color-brand-gray8); */ + margin: 0; } -.frame-dropdown ul li a { - padding: 4px 0.625rem; +.frame-dropdown ul li a, +.frame-dropdown .related li a { + padding: 8px 0.625rem; display: inline-block; width: 100%; } -ul.frame-dropdown-list li { +.frame-dropdown .related { + border-left: 3px solid var(--color-brand-gray8); +} + +.frame-dropdown ul.frame-dropdown-list li, +.frame-dropdown ul.related li { border-bottom: 1px solid var(--color-brand-gray8); - padding-bottom: 5px; - margin-bottom: 5px; + /* padding-bottom: 5px; */ + /* margin-bottom: 5px; */ } -ul.frame-dropdown-list li:last-child { +ul.frame-dropdown-list li:last-child, +.frame-dropdown ul.related li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .frame-link, -.frame-item { +.frame-item, +.navbar-item { font-size: var(--font-small); color: var(--color-brand-gray4); text-decoration: none; @@ -95,6 +105,17 @@ ul.frame-dropdown-list li:last-child { .frame-link:active, .frame-item:active, .frame-link:visited, -.frame-item:visited { +.frame-item:visited, +.navbar-item:hover { text-decoration: none; } + +.version-control-box { + position: relative; + z-index: 9; +} + +.frame-dropdown .column { + display: flex; + box-shadow: 0 3px 10px 0 #e5e5e5; +} diff --git a/src/css/nav.css b/src/css/nav.css index b2d57885..6dc09c09 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -1,14 +1,19 @@ -.nav-menu { +.left-sidebar-menu { background-color: var(--color-brand-gray7); position: fixed; width: inherit; - overflow-y: auto; font-size: 1rem; line-height: 24px; } +.nav-menu { + overflow-y: auto; + background-color: var(--color-brand-gray7); + height: var(--height-nav); +} + @media screen and (max-width: 768px) { - .nav-menu { + .left-sidebar-menu { top: 0; bottom: 0; left: 0; @@ -18,10 +23,11 @@ } @media screen and (min-width: 769px) { - .nav-menu { + .left-sidebar-menu { top: var(--height-to-body); margin-bottom: 1.5rem; - height: var(--height-nav); + height: 100%; + /* height: var(--height-nav); */ z-index: var(--z-index-nav); border-left: 2px solid #eee; border-right: 2px solid #eee; @@ -374,7 +380,7 @@ html.is-clipped--nav { margin: auto; } */ -.nav-menu ul.version-related-list.nav-list { +/* .nav-menu ul.version-related-list.nav-list { margin: -1.5rem 0 1.5rem; } @@ -394,9 +400,6 @@ html.is-clipped--nav { color: var(--color-brand-blue-secondary); } -/* .nav-menu ul.version-related-list.nav-list .nav-line { - padding-left: 1.65rem; -} */ .nav-menu ul.version-related-list.nav-list .nav-line .in-toggle { display: block; position: relative; @@ -412,6 +415,8 @@ html.is-clipped--nav { padding-left: 1.85rem; } + */ + @media screen and (min-width: 769px) { .nav-control { display: none; diff --git a/src/css/vars.css b/src/css/vars.css index 5aa0e40c..10e9beef 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -66,9 +66,11 @@ /* --height-navbar: 4rem; */ --height-spacer: 1rem; --height-navbar: 6rem; + --height-version-control: 4.5rem; --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)); + --height-nav: calc(var(--height-min-body) + var(--height-spacer) + var(--height-version-control)); + --nav-menu-top-space: calc(var(--height-to-body) + var(--height-version-control)); /* --width-main-gutter: 1.5rem; */ --width-main-gutter: 2.5rem; --width-container: 90rem; diff --git a/src/js/01-nav.js b/src/js/01-nav.js index 48401077..49ee32f8 100644 --- a/src/js/01-nav.js +++ b/src/js/01-nav.js @@ -34,55 +34,12 @@ // 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' : '' - // } - // var navMenuControl = document.querySelector('.main-nav-parent') - // // var navWrap = document.querySelector('.currentNav-wrap') - - // 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' - // }) - var navMenuControl if (document.querySelector('.main-nav-parent')) { navMenuControl = document.querySelector('.main-nav-parent') navMenuControl.addEventListener('click', function () { // navWrap.style.display = 'none' for (var i = 0; i < navItems.length; i++) { - console.log(navItems[i], 85) navItems[i].classList.remove('is-active') navItems[i].classList.remove('is-inactive') navItems[i].classList.remove('open') @@ -94,7 +51,6 @@ 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') } diff --git a/src/partials/nav-menu.hbs b/src/partials/nav-menu.hbs index 92d23f9b..c8f438e6 100644 --- a/src/partials/nav-menu.hbs +++ b/src/partials/nav-menu.hbs @@ -1,29 +1,8 @@ -
- {{> nav-version-control}} - {{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}} - {{!-- append version info for SDK --}} - {{#if (ends-with page.component.name '-sdk')}} -
    -
  • - - - - SDK - - -
      - {{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}} -
    • - - {{!-- --}} - {{{./title}}} - -
      • - {{/each}} -
    -
    • - -
- - {{/if}} -
+
+
+ {{> nav-version-control}} +
+
+ {{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}} +
+
\ No newline at end of file diff --git a/src/partials/nav-version-control.hbs b/src/partials/nav-version-control.hbs index 6b656dd2..d8676af1 100644 --- a/src/partials/nav-version-control.hbs +++ b/src/partials/nav-version-control.hbs @@ -11,22 +11,24 @@
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}} --}} +
+ + {{#if (ends-with page.component.name '-sdk')}} +
    + {{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}} +
  • {{{./title}}}
    • + {{/each}} +
+ {{/if}} +