altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 4 Packages Projects Releases Wiki Activity

feat: Upgrade bootstrap to 5.3.0 and enable dark mode

Browse source 
Fixes #3365
This commit is contained in:
Lars Eggert 2023-04-19 23:19:47 +03:00
parent f711c83a66
commit b3c7094dc8
No known key found for this signature in database
GPG key ID: 54B5C309BF70C157
12 changed files with 129 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
.pnp.cjs generated
View file

@ -50,7 +50,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["@rollup/pluginutils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.0.2"],\
["@twuni/emojify", "npm:1.0.2"],\
["@vitejs/plugin-vue", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:4.2.1"],\
["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3"],\
["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0-alpha3"],\
["bootstrap-icons", "npm:1.10.5"],\
["browser-fs-access", "npm:0.33.1"],\
["browserlist", "npm:1.0.1"],\
@ -2940,10 +2940,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
],\
"linkType": "SOFT"\
}],\
["npm:5.2.3", {\
"packageLocation": "./.yarn/cache/bootstrap-npm-5.2.3-7458283a23-0211805dec.zip/node_modules/bootstrap/",\
["npm:5.3.0-alpha3", {\
"packageLocation": "./.yarn/cache/bootstrap-npm-5.3.0-alpha3-ed2dfa96e0-1739c40e40.zip/node_modules/bootstrap/",\
"packageDependencies": [\
["bootstrap", "npm:5.2.3"]\
["bootstrap", "npm:5.3.0-alpha3"]\
],\
"linkType": "SOFT"\
}],\
@ -2960,10 +2960,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
],\
"linkType": "HARD"\
}],\
["virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3", {\
"packageLocation": "./.yarn/__virtual__/bootstrap-virtual-c4952ffff0/0/cache/bootstrap-npm-5.2.3-7458283a23-0211805dec.zip/node_modules/bootstrap/",\
["virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0-alpha3", {\
"packageLocation": "./.yarn/__virtual__/bootstrap-virtual-cc4ceea380/0/cache/bootstrap-npm-5.3.0-alpha3-ed2dfa96e0-1739c40e40.zip/node_modules/bootstrap/",\
"packageDependencies": [\
["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3"],\
["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0-alpha3"],\
["@popperjs/core", "npm:2.11.7"],\
["@types/popperjs__core", null]\
],\
@ -7728,7 +7728,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["@rollup/pluginutils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.0.2"],\
["@twuni/emojify", "npm:1.0.2"],\
["@vitejs/plugin-vue", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:4.2.1"],\
["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3"],\
["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0-alpha3"],\
["bootstrap-icons", "npm:1.10.5"],\
["browser-fs-access", "npm:0.33.1"],\
["browserlist", "npm:1.0.1"],\

BIN
.yarn/cache/bootstrap-npm-5.2.3-7458283a23-0211805dec.zip vendored
View file

Binary file not shown.

BIN
.yarn/cache/bootstrap-npm-5.3.0-alpha3-ed2dfa96e0-1739c40e40.zip vendored Normal file
View file

Binary file not shown.

11
ietf/static/css/datepicker.scss
View file

@ -1,2 +1,11 @@
@import "vanillajs-datepicker/sass/index-bs5";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
// FIXME: color.scale doesn't seem to work with CSS variables, so avoid those:`
$dp-cell-focus-background-color: $dropdown-link-hover-bg !default;
@import "vanillajs-datepicker/sass/datepicker-bs5";

1
ietf/static/css/document_html.scss
View file

@ -11,6 +11,7 @@ $font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consola
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

7
ietf/static/css/ietf.scss
View file

@ -15,9 +15,14 @@ $popover-max-width: 100%;
$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;
// Allow color modes
$color-mode-type: media-query;
// Only import what we need:
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
$h1-font-size: $font-size-base * 2.2;
$h2-font-size: $font-size-base * 1.8;
@ -334,7 +339,7 @@ th,
}
.ballot-icon table .my {
border: 2 * $table-border-width solid #000;
border: calc(2 * $table-border-width) solid #000;
}
// See https://getbootstrap.com/docs/5.1/customize/color/#all-colors

1
ietf/static/css/list.scss
View file

@ -1,6 +1,7 @@
// Import bootstrap helpers
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
table .sort {
cursor: pointer;

6
ietf/static/css/select2.scss
View file

@ -1,5 +1,11 @@
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
// FIXME: bs-5.3.0 workaround from https://github.com/apalfrey/select2-bootstrap-5-theme/issues/75s
$s2bs5-clear-icon: str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color(red, 50%)}) !default;
@import "select2/src/scss/core";
@import "select2-bootstrap-5-theme/src/include-all";

87
ietf/static/js/theme.js Normal file
View file

@ -0,0 +1,87 @@
/*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
*/
(() => {
"use strict";
const storedTheme = localStorage.getItem("theme");
const getPreferredTheme = () => {
if (storedTheme) {
return storedTheme;
}
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
};
const setTheme = function (theme) {
if (
theme === "auto" &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
document.documentElement.setAttribute("data-bs-theme", "dark");
} else {
document.documentElement.setAttribute("data-bs-theme", theme);
}
};
setTheme(getPreferredTheme());
const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector("#bd-theme");
if (!themeSwitcher) {
return;
}
const themeSwitcherText = document.querySelector("#bd-theme-text");
const activeThemeIcon = document.querySelector(".theme-icon-active use");
const btnToActive = document.querySelector(
`[data-bs-theme-value="${theme}"]`
);
const svgOfActiveBtn = btnToActive
.querySelector("svg use")
.getAttribute("href");
document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
element.classList.remove("active");
element.setAttribute("aria-pressed", "false");
});
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 (focus) {
themeSwitcher.focus();
}
};
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", () => {
if (storedTheme !== "light" || storedTheme !== "dark") {
setTheme(getPreferredTheme());
}
});
window.addEventListener("DOMContentLoaded", () => {
showActiveTheme(getPreferredTheme());
document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
toggle.addEventListener("click", () => {
const theme = toggle.getAttribute("data-bs-theme-value");
localStorage.setItem("theme", theme);
setTheme(theme);
showActiveTheme(theme, true);
});
});
});
})();

3
ietf/templates/base.html
View file

@ -6,7 +6,7 @@
{% origin %}
{% load django_bootstrap5 %}
{% load django_vite %}
<html lang="en" {% block html_attrs %}{% endblock %}>
<html data-bs-theme="auto" lang="en" {% block html_attrs %}{% endblock %}>
<head>
{% analytical_head_top %}
<meta charset="utf-8">
@ -160,6 +160,7 @@
{% endblock %}
{% block js %}
{% endblock %}
<script src="{% static 'ietf/js/theme.js' %}"></script>
<script src="{% static 'ietf/js/select2.js' %}"></script>
<script>
$('#navbar-doc-search').on('select2:select', function (e) {

3
package.json
View file

@ -18,7 +18,7 @@
"@fullcalendar/vue3": "6.1.8",
"@popperjs/core": "2.11.7",
"@twuni/emojify": "1.0.2",
"bootstrap": "5.2.3",
"bootstrap": "5.3.0-alpha3",
"bootstrap-icons": "1.10.5",
"browser-fs-access": "0.33.1",
"caniuse-lite": "1.0.30001481",
@ -144,6 +144,7 @@
"ietf/static/js/sortable.js",
"ietf/static/js/stats.js",
"ietf/static/js/status-change-edit-relations.js",
"ietf/static/js/theme.js",
"ietf/static/js/timeslot_edit.js",
"ietf/static/js/timezone.js",
"ietf/static/js/upcoming.js",

12
yarn.lock
View file

@ -2191,12 +2191,12 @@ __metadata:
languageName: node
linkType: hard
"bootstrap@npm:5.2.3":
version: 5.2.3
resolution: "bootstrap@npm:5.2.3"
"bootstrap@npm:5.3.0-alpha3":
version: 5.3.0-alpha3
resolution: "bootstrap@npm:5.3.0-alpha3"
peerDependencies:
"@popperjs/core": ^2.11.6
checksum: 0211805dec6a190c0911d142966df30fdb4b4139a04cc6c23dd83c6045ea3cb0a966b360ab2e701e7b3ad96ff01e05fdc0914be97b41bd876b11e457a8bdc6a3
"@popperjs/core": ^2.11.7
checksum: 1739c40e4033c134e9dc51235e8018f267a9fc8114feba6a5b402f2ab0c68e67c363e2f243c79f252d1cf8fcde82262b04bbaaf6ea1695c37537c02f34ae4f79
languageName: node
linkType: hard
@ -6376,7 +6376,7 @@ browserlist@latest:
"@rollup/pluginutils": 5.0.2
"@twuni/emojify": 1.0.2
"@vitejs/plugin-vue": 4.2.1
bootstrap: 5.2.3
bootstrap: 5.3.0-alpha3
bootstrap-icons: 1.10.5
browser-fs-access: 0.33.1
browserlist: latest