fix: Add theme switcher to document view (#6202)
* fix: Add theme switcher to document view And reduce duplication in the page structure while I'm here. Fixes #6200 * Fix tests
This commit is contained in:
Lars Eggert
GitHub
parent
2bcb2c04f9
commit
16c250fa33
|
|
@ -1,7 +1,27 @@
|
|||
@use "sass:map";
|
||||
|
||||
$font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
$font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
$font-family-sans-serif: "Inter",
|
||||
system-ui,
|
||||
-apple-system,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
"Helvetica Neue",
|
||||
"Noto Sans",
|
||||
"Liberation Sans",
|
||||
Arial,
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
$font-family-monospace: "Noto Sans Mono",
|
||||
SFMono-Regular,
|
||||
Menlo,
|
||||
Monaco,
|
||||
Consolas,
|
||||
"Liberation Mono",
|
||||
"Courier New",
|
||||
monospace;
|
||||
|
||||
@import "bootstrap/scss/functions";
|
||||
|
||||
|
|
@ -25,7 +45,7 @@ $color-mode-type: data;
|
|||
@import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/buttons";
|
||||
@import "bootstrap/scss/transitions";
|
||||
// @import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/button-group";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/navbar";
|
||||
|
|
@ -65,12 +85,16 @@ $color-mode-type: data;
|
|||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.sidebar-toggle[aria-expanded="true"] {
|
||||
.sidebar-toggle[aria-expanded="true"] .sidebar-shown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-toggle[aria-expanded="false"] {
|
||||
display: inherit;
|
||||
.sidebar-toggle[aria-expanded="false"] .sidebar-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-toolbar {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Toggle classes for dark/light modes
|
||||
|
|
@ -94,6 +118,11 @@ $color-mode-type: data;
|
|||
}
|
||||
}
|
||||
|
||||
// Show theme toggler checkbox
|
||||
.dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
@include media-breakpoint-down(md) {
|
||||
body {
|
||||
|
|
@ -354,7 +383,7 @@ tbody.meta tr {
|
|||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
a:link,
|
||||
a:visited {
|
||||
// color: inherit;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* Copyright 2011-2023 The Bootstrap Authors
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
*
|
||||
* Based on the below, with some changes for the datatracker:
|
||||
* https://github.com/twbs/bootstrap/blob/main/site/static/docs/5.3/assets/js/color-modes.js
|
||||
*/
|
||||
|
||||
|
|
@ -45,9 +46,10 @@
|
|||
// Commented-out lines are from the original bs5 js, which uses a more complicated pref dropdown.
|
||||
// Kept them here for easier future diffing.
|
||||
const themeSwitcherText = document.querySelector('#bd-theme-text')
|
||||
// const activeThemeIcon = document.querySelector('.theme-icon-active use')
|
||||
const activeThemeIcon = document.querySelector('.theme-icon-active')
|
||||
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
|
||||
// const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
|
||||
const iconPattern = new RegExp(/\bbi-[\w-]+\b/);
|
||||
const iconOfActiveBtn = btnToActive.querySelector('i').className.match(iconPattern)[0]
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active')
|
||||
|
|
@ -56,10 +58,13 @@
|
|||
|
||||
btnToActive.classList.add('active')
|
||||
btnToActive.setAttribute('aria-pressed', 'true')
|
||||
// activeThemeIcon.setAttribute('href', svgOfActiveBtn)
|
||||
// const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
|
||||
// themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
|
||||
|
||||
if (activeThemeIcon) {
|
||||
activeThemeIcon.className = activeThemeIcon.className.replace(iconPattern, iconOfActiveBtn)
|
||||
}
|
||||
if (themeSwitcherText) {
|
||||
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
|
||||
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
|
||||
}
|
||||
if (focus) {
|
||||
themeSwitcher.focus()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,17 +51,50 @@
|
|||
</head>
|
||||
<body>
|
||||
{% analytical_body_top %}
|
||||
<button class="btn btn-outline-secondary position-fixed top-0 end-0 m-2 sidebar-toggle"
|
||||
type="button"
|
||||
id="sidebar-on"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#sidebar"
|
||||
aria-expanded="{% if request.COOKIES.sidebar != 'off'%}true{% else %}false{% endif %}"
|
||||
aria-controls="sidebar"
|
||||
aria-label="Show metadata sidebar"
|
||||
title="Show metadata sidebar">
|
||||
<i class="bi bi-layout-sidebar-reverse"></i>
|
||||
</button>
|
||||
<div class="btn-toolbar sidebar-toolbar position-fixed top-0 end-0 m-2 m-lg-3">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-secondary btn-sm me-1 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme">
|
||||
<i class="theme-icon-active bi bi-circle-half"></i>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-menu" aria-labelledby="bd-theme">
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light" aria-pressed="false">
|
||||
<i class="me-2 opacity-50 theme-icon bi bi-sun-fill"></i>
|
||||
Light<i class="bi bi-check2 ms-auto d-none"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark" aria-pressed="false">
|
||||
<i class="me-2 opacity-50 theme-icon bi bi-moon-stars-fill"></i>
|
||||
Dark<i class="bi bi-check2 ms-auto d-none"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto" aria-pressed="true">
|
||||
<i class="me-2 opacity-50 theme-icon bi bi-circle-half"></i>
|
||||
Auto<i class="bi bi-check2 ms-auto d-none"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary btn-sm sidebar-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#sidebar"
|
||||
aria-expanded="{% if request.COOKIES.sidebar != 'off'%}true{% else %}false{% endif %}"
|
||||
aria-controls="sidebar"
|
||||
aria-label="Toggle metadata sidebar"
|
||||
title="Toggle metadata sidebar">
|
||||
<i class="bi bi-layout-sidebar-reverse sidebar-shown"></i>
|
||||
<i class="bi bi-arrow-bar-up sidebar-collapsed"></i>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="navbar bg-light-subtle px-1 fixed-top d-print-none d-md-none">
|
||||
<a class="nav-link ps-1"
|
||||
href="{% url 'ietf.doc.views_doc.document_main' name=doc.canonical_name %}">
|
||||
|
|
@ -139,17 +172,6 @@
|
|||
</div>
|
||||
<div class="d-print-none col-md-3 bg-light-subtle collapse{% if request.COOKIES.sidebar != 'off'%} show{% endif %}" id="sidebar">
|
||||
<div class="position-fixed border-start sidebar overflow-scroll overscroll-none no-scrollbar">
|
||||
<button class="btn btn-outline-secondary float-end m-2"
|
||||
type="button"
|
||||
id="sidebar-off"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#sidebar"
|
||||
aria-expanded="{% if request.COOKIES.sidebar != 'off'%}true{% else %}false{% endif %}"
|
||||
aria-controls="sidebar"
|
||||
aria-label="Hide metadata sidebar"
|
||||
title="Hide metadata sidebar">
|
||||
<i class="bi bi-arrow-bar-up"></i>
|
||||
</button>
|
||||
<div class="pt-2 pt-lg-3 px-md-2 px-lg-3">
|
||||
<a class="btn btn-primary btn-sm" href="{% url 'ietf.doc.views_doc.document_main' name=doc.canonical_name %}">Datatracker</a>
|
||||
<p class="fw-bold pt-2">
|
||||
|
|
|
|||
Loading…
Reference in a new issue