From d8635699ef06953099a5524470f08480285473c7 Mon Sep 17 00:00:00 2001 From: Byron Motoche <116190812+byron-okta@users.noreply.github.com> Date: Thu, 22 Feb 2024 13:30:43 -0500 Subject: [PATCH 1/3] feature: tippy top banner code::identity --- .tool-versions | 1 + src/website/index.js | 4 +- src/website/top-banner.js | 11 +++++ stylus/website/index.styl | 93 ++++++++++++++++++++++++++++++++++++ views/website/navigation.pug | 13 ++++- 5 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 .tool-versions create mode 100644 src/website/top-banner.js diff --git a/.tool-versions b/.tool-versions new file mode 100644 index 00000000..826ccf4f --- /dev/null +++ b/.tool-versions @@ -0,0 +1 @@ +nodejs 16.15.0 diff --git a/src/website/index.js b/src/website/index.js index 1f2e33c3..d86eb9d2 100644 --- a/src/website/index.js +++ b/src/website/index.js @@ -11,6 +11,7 @@ import { shareJwtTextElement, } from "./dom-elements.js"; import { CCPAModal } from "./ccpa-modal.js"; +import { TopBanner } from "./top-banner.js"; import queryString from "querystring"; @@ -54,4 +55,5 @@ parseLocationQuery(); setupHighlighting(); setupJwtCounter(); setupShareJwtButton(shareJwtButton, shareJwtTextElement); -CCPAModal(); \ No newline at end of file +CCPAModal(); +TopBanner(); diff --git a/src/website/top-banner.js b/src/website/top-banner.js new file mode 100644 index 00000000..1cc65776 --- /dev/null +++ b/src/website/top-banner.js @@ -0,0 +1,11 @@ +export function TopBanner() { + document.addEventListener("DOMContentLoaded", function () { + document + .querySelector(".close-top-banner") + .addEventListener("click", () => { + document.querySelector(".top-banner").classList.add("closed"); + document.querySelector(".top-banner-spacer").classList.add("hide"); + document.querySelector(".navbar").classList.remove("top-banner-open"); + }); + }); +} diff --git a/stylus/website/index.styl b/stylus/website/index.styl index 5f70f938..50efd788 100644 --- a/stylus/website/index.styl +++ b/stylus/website/index.styl @@ -1849,3 +1849,96 @@ footer { height: 48px; z-index: 100; } + +.top-banner { + background: linear-gradient(90deg, #ff4f40 0%, #ff44dd 99.99%); + border-radius: 8px; + max-width: 1216px; + padding: 8px 16px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + visibility: visible; + opacity: 1; + box-sizing: border-box; + margin: 0 auto; + position: fixed; + top: 12px; + z-index: 1000; + width: 100%; + left: 0; + right: 0; + overflow: hidden; + + &.closed { + visibility: hidden; + height: 0; + opacity: 0; + padding: 0; + transition: all 0.2s linear; + } + + .top-banner-container { + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 30px; + max-width: 1200px; + align-items: center; + + div { + +breakpoint('tablet') { + display: flex; + align-items: center; + } + } + } + + p { + font-size: 14px; + color: #fff; + margin: 0 2rem 0 0; + display: inline; + } + + a { + font-weight: 600; + font-size: 14px; + color: #fff; + text-decoration: none; + display: block; + + span { + margin-left: 8px; + } + + &:hover { + text-decoration: underline; + } + + +breakpoint('tablet') { + display: inline; + } + } + + button { + font-weight: 600; + font-size: 20px; + color: #fff; + text-decoration: none; + background: none; + border: none; + justify-self: flex-end; + display: block; + cursor: pointer; + text-align: right; + transform: rotate(45deg); + } +} + +.top-banner-spacer { + background: black; + height: 50px; + + &.hide { + height: 0; + transition: all 0.2s linear; + } +} diff --git a/views/website/navigation.pug b/views/website/navigation.pug index 1388f24c..1044d9b9 100644 --- a/views/website/navigation.pug +++ b/views/website/navigation.pug @@ -1,4 +1,15 @@ -nav.navbar.closed +.top-banner-bg +.top-banner + .top-banner-container + div + p Build your login box in minutes with Auth0. + a(href="https://regionalevents.okta.com/soyouneedtobuildaloginbox/DeveloperCenter" target="_blank") Register for Code::Identity to learn how + span(aria-hiden="true") → + button.close-top-banner + + +.top-banner-spacer + +nav.navbar.closed.top-banner-open .container .top-mobile .menu-trigger From e6526743329f58dde2099d259584a9a727dd56bc Mon Sep 17 00:00:00 2001 From: Byron Motoche <116190812+byron-okta@users.noreply.github.com> Date: Thu, 22 Feb 2024 14:05:31 -0500 Subject: [PATCH 2/3] fix: mobile nav banner not visible due top-banner-bg --- src/website/top-banner.js | 1 + stylus/website/index.styl | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/src/website/top-banner.js b/src/website/top-banner.js index 1cc65776..e8910a9e 100644 --- a/src/website/top-banner.js +++ b/src/website/top-banner.js @@ -3,6 +3,7 @@ export function TopBanner() { document .querySelector(".close-top-banner") .addEventListener("click", () => { + document.querySelector(".top-banner-bg").classList.add("closed"); document.querySelector(".top-banner").classList.add("closed"); document.querySelector(".top-banner-spacer").classList.add("hide"); document.querySelector(".navbar").classList.remove("top-banner-open"); diff --git a/stylus/website/index.styl b/stylus/website/index.styl index 50efd788..8883933a 100644 --- a/stylus/website/index.styl +++ b/stylus/website/index.styl @@ -1848,6 +1848,14 @@ footer { width: 100%; height: 48px; z-index: 100; + + &.closed { + visibility: hidden; + height: 0; + opacity: 0; + padding: 0; + transition: all 0.1s linear; + } } .top-banner { From ad5d27cbb0f5a24bdbf6d695cdd0228cacee97e1 Mon Sep 17 00:00:00 2001 From: Byron Motoche <116190812+byron-okta@users.noreply.github.com> Date: Thu, 22 Feb 2024 15:37:36 -0500 Subject: [PATCH 3/3] update copy --- .tool-versions | 1 - views/website/navigation.pug | 6 ++---- 2 files changed, 2 insertions(+), 5 deletions(-) delete mode 100644 .tool-versions diff --git a/.tool-versions b/.tool-versions deleted file mode 100644 index 826ccf4f..00000000 --- a/.tool-versions +++ /dev/null @@ -1 +0,0 @@ -nodejs 16.15.0 diff --git a/views/website/navigation.pug b/views/website/navigation.pug index 1044d9b9..5e32b2c5 100644 --- a/views/website/navigation.pug +++ b/views/website/navigation.pug @@ -1,10 +1,8 @@ .top-banner-bg .top-banner .top-banner-container - div - p Build your login box in minutes with Auth0. - a(href="https://regionalevents.okta.com/soyouneedtobuildaloginbox/DeveloperCenter" target="_blank") Register for Code::Identity to learn how - span(aria-hiden="true") → + a(href="https://regionalevents.okta.com/soyouneedtobuildaloginbox/DeveloperCenter" target="_blank") Developers! Catch our webinar and see how to build with Auth0 in minutes. + span(aria-hiden="true") → button.close-top-banner + .top-banner-spacer