diff --git a/static/js/common.js b/static/js/common.js deleted file mode 100644 index 1e551ffbc..000000000 --- a/static/js/common.js +++ /dev/null @@ -1,89 +0,0 @@ -// Mobile menu toggle -document.querySelector('.mobile-menu')?.addEventListener('click', function(e) { - document.body.classList.toggle('mobile-menu_open'); -}); - -// Docs menu toggle -document.querySelector('.docs-menu')?.addEventListener('click', function(e) { - document.body.classList.toggle('show'); -}); - -function closeMenu(elem) { - if(document.body.classList.contains('mobile-menu_open')) { - if(!elem.classList.contains('dropdown-toggle')) { - document.querySelector('.mobile-menu')?.click(); - } - } -} - -// Dropdown navigation for mobile -document.querySelectorAll(".nav-item.dropdown .nav-link").forEach(function(item) { - item.addEventListener("click", function(e) { - e.preventDefault(); - if(document.body.classList.contains('mobile-menu_open')) { - if(!this.classList.contains('nav-link_selected')) { - document.querySelectorAll('.nav-link').forEach(function(elem) { - elem.classList.remove('nav-link_selected'); - }); - this.classList.add('nav-link_selected'); - } else { - this.classList.remove('nav-link_selected'); - } - } - }); -}); - -// Dropdown focus handling for desktop -document.querySelectorAll(".nav-item.dropdown .nav-link").forEach(function(item) { - if(!document.body.classList.contains('mobile-menu_open')) { - item.addEventListener("focus", function(e) { - item.parentElement.classList.add("focus"); - }); - - // This logic is based on https://www.a11ywithlindsey.com/blog/create-accessible-dropdown-navigation - item.parentElement.querySelectorAll(".dropdown-menu").forEach(function(dropdown) { - const subMenuLinks = dropdown.querySelectorAll('a') - const lastLink = subMenuLinks[subMenuLinks.length - 1] - - lastLink.addEventListener('blur', function() { - item.parentElement.classList.remove('focus') - }) - }); - } -}); - -// Close menu on nav/dropdown click -[".nav-link", ".dropdown-item"].forEach(className => - document.querySelectorAll(className).forEach(function(item) { - item.addEventListener("click", function(e) { - closeMenu(this); - }) - }) -); - - -// Cookies - -function getCookie(cname) { - var name = cname + "="; - var decodedCookie = decodeURIComponent(document.cookie); - var ca = decodedCookie.split(';'); - for(var i = 0; i - document.querySelectorAll(className).forEach(function(item) { - item.addEventListener("click", function(e) { - closeMenu(this); - }); - }) + document.querySelectorAll(className).forEach(function(item) { + item.addEventListener("click", function(e) { + closeMenu(this); + }); + }) ); @@ -81,9 +81,29 @@ function getCookie(cname) { } document.querySelectorAll(".contact-cookies-consent-notice").forEach( - function (item) { - if (getCookie("cookieconsent_status") !== "allow") { - item.classList.remove("d-none"); + function (item) { + if (getCookie("cookieconsent_status") !== "allow") { + item.classList.remove("d-none"); + } } - } -); \ No newline at end of file +); +document.addEventListener("DOMContentLoaded", () => { + document.querySelectorAll("pre code").forEach(block => { + const wrapper = block.parentNode; + wrapper.classList.add("code-block"); + + const button = document.createElement("button"); + button.className = "copy-btn"; + button.setAttribute("aria-label", "Copy to clipboard"); + button.innerHTML = ` + `; + wrapper.appendChild(button); + + button.addEventListener("click", () => { + navigator.clipboard.writeText(block.innerText.trim()).then(() => { + button.classList.add("copied"); + setTimeout(() => button.classList.remove("copied"), 1200); + }); + }); + }); +}); \ No newline at end of file diff --git a/themes/flatcar/assets/scss/_styles.scss b/themes/flatcar/assets/scss/_styles.scss index 744f35418..c0419ddda 100644 --- a/themes/flatcar/assets/scss/_styles.scss +++ b/themes/flatcar/assets/scss/_styles.scss @@ -2,7 +2,7 @@ h2 { @include media-breakpoint-down(lg) { - font-size: 1.75rem; + font-size: 1.75rem; } @include media-breakpoint-down(md) { @@ -62,17 +62,17 @@ h6 { width: 100%; height: 2px; position: absolute; - top: 0%; - left: 0; - width: 100%; + top: 0px; + left: 0px; + width: 100; transition: all 0.3s; &:before, &:after { content: ""; position: absolute; - top: 0; - left: 0; + top: 0px; + left: 0px; display: block; width: 100%; height: 2px; @@ -114,7 +114,7 @@ h6 { } .dropdown-menu_lg { - padding: $dropdown-padding-y-lg 0; + padding: $dropdown-padding-y-lg 0px; @include media-breakpoint-down(md) { padding: 0px 16px; @@ -151,7 +151,7 @@ h6 { @include media-breakpoint-down(md) { font-size: 1em; - margin-bottom: 0; + margin-bottom: 0px; } } @@ -217,14 +217,14 @@ h6 { // Cards .card-header { - padding: 0; + padding: 0px; } .card-body { - padding: $card-spacer-y $card-spacer-x 0; + padding: $card-spacer-y $card-spacer-x 0px; @include media-breakpoint-down(sm) { - padding: $card-spacer-y-sm $card-spacer-x-sm 0; + padding: $card-spacer-y-sm $card-spacer-x-sm 0px; } } @@ -274,7 +274,7 @@ h6 { min-height: 2.5em; width: 2.5em; height: 2.5em; - padding: 0; + padding: 0px; text-align: center; transition: color 0.3s, background-color 0.3s; display: flex; @@ -304,10 +304,10 @@ h6 { content: ""; display: block; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; margin: auto; background: url("/images/arrow-big-white.svg") no-repeat center; background-size: contain; @@ -367,3 +367,57 @@ a:hover { background-color: $flatcar-blue; border-color: $flatcar-blue; } +// Copy button -> styles for code blocks (solves Issue #2022) +div.highlight { + position: relative; + .copy-btn { + position: absolute; + top: 12px; + right: 12px; + width: 33px; + min-width: 16px; + height: 17px; + margin: 4px; + padding: 6px 8px; + font-size: 0.75em; + cursor: pointer; + background: $gray-100; + border: 1px solid #ccc; + border-radius: 4px; + color: #333; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s ease, color 0.2s ease; + + &:hover { + background: $gray-100; + color: $black; + } + + &:active { + background: $gray-100; + } + + &.copied { + background: $flatcar-blue; + color: white; + border-color: $flatcar-blue; + } + } + + pre { + code { + background-color: $gray-100; + border-radius: 6px; + display: block; + overflow-x: auto; + font-family: "overpass mono", monospace; + + &.copied { + background-color: $green; + transition: background-color 0.3s ease; + } + } + } +} \ No newline at end of file diff --git a/themes/flatcar/layouts/_default/baseof.html b/themes/flatcar/layouts/_default/baseof.html index 0016f4784..74cf3b2f5 100644 --- a/themes/flatcar/layouts/_default/baseof.html +++ b/themes/flatcar/layouts/_default/baseof.html @@ -1,16 +1,16 @@ - {{- partial "head.html" . -}} - - - {{- partial "header.html" . -}} +{{- partial "head.html" . -}} + + +{{- partial "header.html" . -}} -
- {{ block "main" . }}{{ .Render "common-page" }}{{ end }} - {{ block "unique-content" . }}{{ end }} - {{ block "bottom" . }}{{ end }} -
+
+ {{ block "main" . }}{{ .Render "common-page" }}{{ end }} + {{ block "unique-content" . }}{{ end }} + {{ block "bottom" . }}{{ end }} +
- {{ partial "footer.html" . }} - - +{{ partial "footer.html" . }} + + \ No newline at end of file diff --git a/themes/flatcar/layouts/partials/head.html b/themes/flatcar/layouts/partials/head.html index 83e0741f3..9ccbeab9e 100644 --- a/themes/flatcar/layouts/partials/head.html +++ b/themes/flatcar/layouts/partials/head.html @@ -11,7 +11,6 @@ - {{ if .Params.noindex }}