diff --git a/source/_static/img/icons/play-dark.svg b/source/_static/img/icons/play-dark.svg new file mode 100644 index 00000000..06e6da5c --- /dev/null +++ b/source/_static/img/icons/play-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/play.svg b/source/_static/img/icons/play.svg new file mode 100644 index 00000000..cf9b7861 --- /dev/null +++ b/source/_static/img/icons/play.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/_static/js/main.js b/source/_static/js/main.js index a126b1fe..4dca31df 100644 --- a/source/_static/js/main.js +++ b/source/_static/js/main.js @@ -181,19 +181,15 @@ window.addEventListener("DOMContentLoaded", (event) => { } if (extVideoLinks) { // Minor cleanups to the CSS classes - extVideoLinks.classList.remove("docutils", "container") - extVideoLinks.classList.add("topic") + extVideoLinks.classList.remove("docutils", "container"); // Inject the header text - - const extVideoLinkHeader = document.createElement("div"); - extVideoLinkHeader.classList.add("extVideoLink-header"); - extVideoLinkHeader.innerHTML += "

Recommended Videos

"; + const extVideoLinkHeader = document.createElement("p"); + extVideoLinkHeader.classList.add("topic-title"); + extVideoLinkHeader.innerText = "Recommended Videos"; extVideoLinks.prepend(extVideoLinkHeader); - asideElements.push(extVideoLinks) - // Need to force-add extlinks, they don't seem to get added as-is for some reason const extVideoItems = document.querySelectorAll(".extlinks-video a"); @@ -241,29 +237,6 @@ window.addEventListener("DOMContentLoaded", (event) => { }); })(); - - // -------------------------------------------------- - // Content Nav - // -------------------------------------------------- - (function () { - const contentNav = document.querySelectorAll("[data-content-nav]"); - contentNav.forEach((nav) => { - nav.addEventListener("click", (event) => { - event.preventDefault(); - var target = nav.getAttribute("data-content-nav"); - - document - .querySelector(".platform-nav__inner a.active") - .classList.remove("active"); - document - .querySelector(".platform-nav__dropdown nav.active") - .classList.remove("active"); - document.getElementById(target).classList.add("active"); - nav.classList.add("active"); - }); - }); - })(); - // -------------------------------------------------- // Asides: Sidebar and Nav @@ -428,23 +401,17 @@ window.addEventListener("DOMContentLoaded", (event) => { })(); // -------------------------------------------------- - // Carousel + // Arrows for cards and platforms navs // -------------------------------------------------- (function () { - const carousels = document.querySelectorAll(".sd-cards-carousel"); - var scrollLength = 1000; - - const arrowIcon = ` - - `; - - function toggleArrows(elem, arrowLeft, arrowRight) { + function toggleArrows(elem, arrowLeft, arrowRight, callback) { var scrollWidth = elem.scrollWidth; var scrollLeft = elem.scrollLeft + elem.clientWidth; - - // Set the scroll length based on the window width - window.innerWidth < 1400 ? scrollLength = 500 : scrollLength = 1000; - + + if (callback) { + callback(); + } + scrollWidth - scrollLeft <= 1 ? arrowRight.classList.add("inactive") : arrowRight.classList.remove("inactive"); @@ -453,8 +420,22 @@ window.addEventListener("DOMContentLoaded", (event) => { : arrowLeft.classList.remove("inactive"); } - if(carousels.length > 0) { - carousels.forEach((item) => { + // -------------------------------------------------- + // Cards + // -------------------------------------------------- + const cards = document.querySelectorAll(".sd-cards-carousel"); + var scrollLength = 1000; + const cardsArrowIcon = ` + + `; + + // Set the scroll length based on the window width + function setScrollLength() { + window.innerWidth < 1400 ? scrollLength = 500 : scrollLength = 1000; + } + + if(cards.length > 0) { + cards.forEach((item) => { // Get the amount of columns const colsAmount = item.className.match(/(^|\s)sd-card-cols-(\w+)/g).pop().split('-').pop(); @@ -466,14 +447,14 @@ window.addEventListener("DOMContentLoaded", (event) => { // Create the arrows const arrowLeft = document.createElement("button"); arrowLeft.classList.add("carousel-arrow", "carousel-arrow--left"); - arrowLeft.innerHTML = arrowIcon; + arrowLeft.innerHTML = cardsArrowIcon; arrowLeft.onclick = function() { item.scrollLeft -= scrollLength/colsAmount; } const arrowRight = document.createElement("button"); arrowRight.classList.add("carousel-arrow", "carousel-arrow--right"); - arrowRight.innerHTML = arrowIcon; + arrowRight.innerHTML = cardsArrowIcon; arrowRight.onclick = function() { item.scrollLeft += scrollLength/colsAmount; } @@ -486,9 +467,58 @@ window.addEventListener("DOMContentLoaded", (event) => { // Toggle arrows on manual scroll item.addEventListener("scroll", () => { - toggleArrows(item, arrowLeft, arrowRight); + toggleArrows(item, arrowLeft, arrowRight, setScrollLength); }); - toggleArrows(item, arrowLeft, arrowRight); + toggleArrows(item, arrowLeft, arrowRight, setScrollLength); + }); + } + + // -------------------------------------------------- + // Platform navs + // -------------------------------------------------- + const platformNavs = document.querySelectorAll(".platform-nav nav"); + const platformNavArrowIcon = ` + + `; + function sc(el) { + if (el.scrollWidth > el.clientWidth) { + el.parentNode.classList.add("scrollable"); + } + else { + el.parentNode.classList.remove("scrollable"); + } + } + + if(platformNavs.length > 0) { + platformNavs.forEach((item) => { + const arrowLeft = document.createElement("button"); + arrowLeft.type = "button"; + arrowLeft.innerHTML = platformNavArrowIcon; + arrowLeft.setAttribute("data-nav-dir", "left"); + arrowLeft.onclick = function() { + item.scrollLeft -= 200; + } + + const arrowRight = document.createElement("button"); + arrowRight.type = "button"; + arrowRight.innerHTML = platformNavArrowIcon; + arrowRight.setAttribute("data-nav-dir", "right"); + arrowRight.onclick = function() { + item.scrollLeft += 200; + } + + item.insertAdjacentElement("beforebegin", arrowLeft); + item.insertAdjacentElement("afterend", arrowRight); + + item.addEventListener("scroll", () => { + toggleArrows(item, arrowLeft, arrowRight, sc(item)); + }); + + window.addEventListener("resize", () => { + toggleArrows(item, arrowLeft, arrowRight, sc(item)); + }); + + toggleArrows(item, arrowLeft, arrowRight, sc(item)); }); } })(); diff --git a/source/_static/scss/includes/_nav.scss b/source/_static/scss/includes/_nav.scss index 01b2d241..e8563d61 100644 --- a/source/_static/scss/includes/_nav.scss +++ b/source/_static/scss/includes/_nav.scss @@ -373,24 +373,6 @@ // ---------------------- // Platform nav // ---------------------- -.platform-nav { - background-color: var(--content-nav-bg); - font-size: $font-size-md; - position: relative; - box-shadow: 0 0.1875rem 0.375rem rgba($black, 0.15); - - & > .container { - white-space: nowrap; - overflow-x: auto; - display: flex; - @include hide-scrollbars(); - - &:after { - background-image: linear-gradient(270deg, var(--content-nav-bg) 0%, var(--content-nav-bg) 10%, transparent 100%); - } - } -} - :root { &:not(.dark-mode):not(.read-mode) { .platform-nav__inner { @@ -409,59 +391,15 @@ } } -.platform-nav__inner { - margin: 0; - padding: 0; - display: flex; - list-style: none; - gap: 2.5rem; - align-items: center; - flex: 1; +.platform-nav { + background-color: var(--content-nav-bg); + font-size: $font-size-md; + position: relative; + box-shadow: 0 0.1875rem 0.375rem rgba($black, 0.15); - @include breakpoint-max(breakpoints(lg)) { - gap: 1.75rem; - } - - & > a { - color: var(--text-muted-color); - font-weight: $font-weight-medium; - display: flex; - align-items: center; - padding: 0.75rem 0 0.7rem; - border-bottom: 2px solid transparent; - transition: color 300ms; - - & > img { - margin-right: 0.75rem; - opacity: 0.65; - transition: opacity 300ms; - filter: var(--content-nav-icon-filter); - - &:first-child { - display: none; - } - } - - &.active { - border-bottom-color: var(--content-nav-active-border-color); - color: var(--text-muted-hover-color); - } - - &:hover, - &.active { - & > img { - opacity: 1; - } - } - - &:hover { - color: var(--text-muted-hover-color); - } - } - - .search-toggle { + .search-toggle { margin-left: auto; - margin-right: -0.5rem; + margin-right: 1rem; position: relative; z-index: 2; @@ -469,31 +407,116 @@ display: none !important; } } + + .container { + display: flex; + align-items: center; + overflow: hidden; + padding: 0; + height: 2.8rem; + } + + nav { + white-space: nowrap; + overflow-x: auto; + flex: 1 1 auto; + scroll-behavior: smooth; + padding: 0 var(--content-padding); + scroll-snap-type: x mandatory; + + @include hide-scrollbars(); + } +} + +.platform-nav__main, +.platform-nav__sub { + position: relative; + overflow: hidden; + + nav { + & > a { + border-bottom: 2px solid transparent; + height: 2.8rem; + transition: color 300ms; + white-space: nowrap; + display: flex; + align-items: center; + scroll-snap-align: center; + } + } +} + +.platform-nav__main { + display: flex; + align-items: center; + + nav { + margin: 0; + display: flex; + list-style: none; + gap: 1.5rem; + align-items: center; + + & > a { + color: var(--text-muted-color); + font-weight: $font-weight-medium; + + & > img { + margin-right: 0.5rem; + opacity: 0.65; + transition: opacity 300ms; + filter: var(--content-nav-icon-filter); + + &:first-child { + display: none; + } + } + + &.active { + border-bottom-color: var(--content-nav-active-border-color); + color: var(--text-muted-hover-color); + } + + &:hover, + &.active { + & > img { + opacity: 1; + } + } + + &:hover { + color: var(--text-muted-hover-color); + } + } + } + + [data-nav-dir] { + svg { + fill: var(--content-nav-arrow-color); + } + } + + [data-nav-dir="right"] { + background: linear-gradient(270deg, var(--content-nav-bg) 65%, var(--content-nav-bg) 0%, transparent 100%); + } + + [data-nav-dir="left"] { + background: linear-gradient(90deg, var(--content-nav-bg) 0%, var(--content-nav-bg) 65%, transparent 100%); + } }; -.platform-nav__dropdown { +.platform-nav__sub { background-color: var(--content-nav-sub-bg); font-size: $font-size-sm; - - &:after { - background-image: linear-gradient(270deg, var(--content-nav-sub-bg) 0%, var(--content-nav-sub-bg) 10%, transparent 100%); - } nav { display: flex; align-items: center; gap: 1.5rem; - &:not(.active) { - display: none; - } - & > a { font-weight: $font-weight-medium; color: var(--content-nav-sub-color); - border-bottom: 2px solid transparent; - padding: 0.7rem 0; - transition: color 300ms; &.active { border-bottom-color: var(--content-nav-sub-active-border-color); @@ -508,25 +531,68 @@ } } } + + [data-nav-dir] { + svg { + fill: var(--content-nav-sub-color); + } + } + + [data-nav-dir="right"] { + background: linear-gradient(270deg, var(--content-nav-sub-bg) 65%, var(--content-nav-sub-bg) 0%, transparent 100%); + } + + [data-nav-dir="left"] { + background: linear-gradient(90deg, var(--content-nav-sub-bg) 0%, var(--content-nav-sub-bg) 65%, transparent 100%); + } } -.platform-nav > .container, -.platform-nav__dropdown { - position: relative; +[data-nav-dir] { + flex-shrink: 0; + opacity: 1; + width: 2.75rem; + height: 100%; + appearance: none; + padding: 0; + border: 0; + padding-top: 0.15rem; + position: absolute; + top: 0; + cursor: pointer; - &:after { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 3rem; - height: 100%; - z-index: 1; - height: 100%; + &.inactive { + opacity: 0; pointer-events: none; } } +.scrollable { + [data-nav-dir] { + transition: transform 300ms, opacity 300ms; + } +} + +[data-nav-dir="right"] { + right: 0; + padding-left: 0.5rem; + + &.inactive { + transform: translateX(30%); + } +} + +[data-nav-dir="left"] { + left: 0; + padding-right: 0.5rem; + &.inactive { + transform: translateX(-30%); + } + + svg { + transform: rotate(180deg); + } +} + .search-toggle--keyboard { height: 2.5rem; width: 2.5rem; diff --git a/source/_static/scss/includes/_search.scss b/source/_static/scss/includes/_search.scss index b294deb9..67f60bab 100644 --- a/source/_static/scss/includes/_search.scss +++ b/source/_static/scss/includes/_search.scss @@ -36,7 +36,7 @@ height: 100%; background-color: var(--is-container-background); display: none; - padding: 3rem; + padding: 2.8rem; @include breakpoint-max(breakpoints(sm)) { padding: 1rem; diff --git a/source/_static/scss/includes/_theme.scss b/source/_static/scss/includes/_theme.scss index f808db25..d71d134a 100644 --- a/source/_static/scss/includes/_theme.scss +++ b/source/_static/scss/includes/_theme.scss @@ -40,6 +40,7 @@ $theme-properties: ( --content-nav-sub-hover-color: $theme-red $dark-300, --content-nav-sub-active-color: $theme-red $dark-0, --content-nav-icon-filter: none (invert(100%) sepia(12%) saturate(777%) hue-rotate(181deg) brightness(100%) contrast(85%)), + --content-nav-arrow-color: $black #697995, // Sidebar --sidebar-bg: $light-100 $dark-100, @@ -111,6 +112,9 @@ $theme-properties: ( --alert-warning-code-bg: #f3dfe1 #3d1014, --alert-warning-link-decoration-color: #e3c3c6 #54141a, + // Recommended videos + --recommended-videos-marker: url("../img/icons/play.svg") url("../img/icons/play-dark.svg"), + // Search --is-dropdown-bg: #edf1f3 #1c232d, --is-container-background: rgba($black, 0.25) rgba(16, 21, 28, 0.851), diff --git a/source/_static/scss/includes/_toc.scss b/source/_static/scss/includes/_toc.scss index f4a76b91..a354bb6e 100644 --- a/source/_static/scss/includes/_toc.scss +++ b/source/_static/scss/includes/_toc.scss @@ -28,37 +28,6 @@ div.topic { z-index: $z-index-header - 2; } - @include breakpoint-max(breakpoints(sm)) { - .extlinks-video { - display: none; - } - } - - .extlinks-video { - ul { - padding: 0; - margin: .25rem 0 0 1rem; - font-size: $font-size-sm; - color: var(--text-muted-color); - - ul { - margin-left: 0.75rem; - } - } - border-bottom: 1px $dark-500 solid; - padding: .5rem 0 .5rem 0; - } - - .extVideoLink-header { - & > p { - color: var(--headings-color); - margin: 0; - line-height: 1; - font-size: $font-size-md; - font-weight: bold; - } - } - .icon { height: 2.5rem; width: 2.5rem; @@ -69,8 +38,15 @@ div.topic { &:last-child { margin-left: auto; } + + &.search-toggle { + order: 3; + margin-left: auto; + } } + + &.active { #table-of-contents { & > ul { @@ -97,15 +73,8 @@ div.topic { #table-of-contents { flex: 1; position: relative; - border-bottom: 1px $dark-500 solid; - padding: .5rem 0 .5rem 0; .topic-title { - color: var(--headings-color); - margin: 0; - line-height: 1; - font-size: $font-size-md; - @include breakpoint-max(breakpoints(lg)) { padding: 0.85rem 1rem; background-color: var(--theme-light-bg); @@ -146,6 +115,7 @@ div.topic { position: relative; padding-left: 1rem; margin-top: 1rem; + margin-bottom: 1.75rem; &:before { content: ""; @@ -182,4 +152,59 @@ div.topic { } } } +} + +p.topic-title { + color: var(--headings-color); + line-height: 1; + font-size: $font-size-md; + margin: 0; +} + +.extlinks-video { + p.topic-title { + margin-bottom: 0.75rem; + } + + ul { + padding: 0; + margin: 0; + + & > li { + display: flex; + align-items: start; + + a { + font-size: $font-size-sm; + color: var(--text-muted-color); + padding: 0.25rem 0; + display: block; + + &:hover { + color: var(--text-color); + } + } + + &::marker { + display: none; + } + + &:before { + content: ""; + height: 1rem; + width: 1rem; + display: grid; + place-content: center; + margin-right: 0.75rem; + background: var(--recommended-videos-marker) no-repeat center; + flex-shrink: 0; + background-size: 100%; + margin-top: 0.425rem; + } + } + } + + @include breakpoint-max(breakpoints(lg)) { + display: none; + } } \ No newline at end of file diff --git a/source/_templates/platform-navigation.html b/source/_templates/platform-navigation.html index 736a466e..4a81a0ed 100644 --- a/source/_templates/platform-navigation.html +++ b/source/_templates/platform-navigation.html @@ -1,54 +1,57 @@
-
- +
+ {%- if pagename != "search" %} + + {%- endif %}
-
-
- -
-
+ {%- if doc_platform == 'k8s' or doc_platform == 'openshift' or doc_platform == 'eks' or doc_platform == 'gke' or doc_platform == 'aks' -%} +
+
+ +
+
+ {%- endif -%}