From ab7428e63bc2f310c48fcb82184a9f46b430e85a Mon Sep 17 00:00:00 2001 From: Nathan Pinsker Date: Tue, 14 Jan 2025 23:46:47 -0500 Subject: [PATCH 1/2] upgrade to bootstrap 5 --- cardboard/static/style.css | 35 ++++++++++++++++++++++-------- cardboard/templates/base.html | 29 ++++++++++--------------- cardboard/templates/reactbase.html | 12 +++++----- hunts/src/DarkModeToggle.tsx | 14 +++++------- hunts/src/HuntViewHeader.tsx | 12 +++++----- hunts/src/SiteHeader.tsx | 15 +++++++------ hunts/src/TagPill.tsx | 2 +- hunts/templates/edit.html | 2 +- 8 files changed, 63 insertions(+), 58 deletions(-) diff --git a/cardboard/static/style.css b/cardboard/static/style.css index 7ce7a38f..585dba83 100644 --- a/cardboard/static/style.css +++ b/cardboard/static/style.css @@ -24,10 +24,6 @@ body { background-color: #f5f5f5; } -.table td { - vertical-align: middle; -} - /* Dark/Light Mode Toggle Overrides */ .btn label.switch-on, .btn label.switch-off { @@ -46,7 +42,7 @@ body { --table-row-danger-text: #212529; } -.bootstrap-dark { +.bootstrap[data-bs-theme="dark"] { --table-row-success: #142c15; --table-row-danger: #492121; --table-row-success-border: #244f2d; @@ -91,23 +87,44 @@ body { border: none; } -.bootstrap-dark a { +.bootstrap[data-bs-theme="dark"] a { color: #007bff; } -.bootstrap-dark .popover-header { +.bootstrap[data-bs-theme="dark"] .popover-header { color: #212529; } +.bootstrap .badge { + --bs-badge-padding-x: 0.4em; + --bs-badge-padding-y: 0.25em; +} + .puzzle-answer { max-width: 400px; overflow-wrap: anywhere; } +.bootstrap .navbar-themed { + --bs-navbar-padding-x: 1rem !important; + background-color: #f8f9fa !important; +} + +.bootstrap[data-bs-theme="dark"] .navbar-themed { + background-color: #343a40 !important; +} + .bootstrap button.cb-btn-compact, .bootstrap div.cb-btn-compact button, -.bootstrap-dark button.cb-btn-compact, -.bootstrap-dark div.cb-btn-compact button { +.bootstrap[data-bs-theme="dark"] button.cb-btn-compact, +.bootstrap[data-bs-theme="dark"] div.cb-btn-compact button { padding: .15rem .7rem; line-height: normal; } + +:root { + --bs-navbar-padding-y: .5rem; + --bs-nav-link-padding-x: 1rem; + --bs-nav-link-padding-y: .5rem; + --bs-nav-link-color: var(--bs-link-color); +} diff --git a/cardboard/templates/base.html b/cardboard/templates/base.html index fcbcffe1..74963e61 100644 --- a/cardboard/templates/base.html +++ b/cardboard/templates/base.html @@ -4,11 +4,7 @@ {{ APP_TITLE }} - - - - - + @@ -21,30 +17,27 @@ diff --git a/hunts/src/DarkModeToggle.tsx b/hunts/src/DarkModeToggle.tsx index d06c0c89..b1d951d0 100644 --- a/hunts/src/DarkModeToggle.tsx +++ b/hunts/src/DarkModeToggle.tsx @@ -1,7 +1,7 @@ import React from "react"; const isCurrentlyDark = () => { - return localStorage.getItem("cardboard-theme") === "bootstrap-dark"; + return localStorage.getItem("cardboard-theme") === "dark"; }; export const DarkModeToggle = () => { @@ -16,15 +16,11 @@ export const DarkModeToggle = () => { checked={isDark} onChange={(e) => { if (isDark) { - // Light - document.body.classList.remove("bootstrap-dark"); - document.body.classList.add("bootstrap"); - localStorage.setItem("cardboard-theme", "bootstrap"); + localStorage.setItem("cardboard-theme", "light"); + document.body.setAttribute('data-bs-theme', 'light'); } else { - // Dark - document.body.classList.remove("bootstrap"); - document.body.classList.add("bootstrap-dark"); - localStorage.setItem("cardboard-theme", "bootstrap-dark"); + localStorage.setItem("cardboard-theme", "dark"); + document.body.setAttribute('data-bs-theme', 'dark'); } setIsDark(e.target.checked); }} diff --git a/hunts/src/HuntViewHeader.tsx b/hunts/src/HuntViewHeader.tsx index 41b6bb91..d6ad2e05 100644 --- a/hunts/src/HuntViewHeader.tsx +++ b/hunts/src/HuntViewHeader.tsx @@ -42,8 +42,8 @@ function HuntViewHeader({ hunt }: { hunt: Hunt }) { alignItems: "center", }} > - - + + Metas @@ -54,25 +54,25 @@ function HuntViewHeader({ hunt }: { hunt: Hunt }) { {numMetasSolved} {" "} /{" "} - + {numMetasSolved + numMetasUnsolved} {numSolved} {" "} /{" "} - + {numUnlocked} diff --git a/hunts/src/SiteHeader.tsx b/hunts/src/SiteHeader.tsx index 4f962809..9e199325 100644 --- a/hunts/src/SiteHeader.tsx +++ b/hunts/src/SiteHeader.tsx @@ -26,7 +26,7 @@ export const SiteHeader = () => { {window.APP_SHORT_TITLE} {hunt.name} - @@ -49,20 +49,20 @@ export const SiteHeader = () => { Logout -
Logged in as {window.LOGGED_IN_USER}
+
Logged in as {window.LOGGED_IN_USER}
-
+
Chat Settings -
+
{ borderTop: "1px solid black", width: "100%", display: "inline-block", + fontWeight: "bold", + padding: ".5rem 1rem", }} - className="font-weight-bold nav-link" > Appearance -
+
diff --git a/hunts/src/TagPill.tsx b/hunts/src/TagPill.tsx index f1160b3e..760280f1 100644 --- a/hunts/src/TagPill.tsx +++ b/hunts/src/TagPill.tsx @@ -34,7 +34,7 @@ function TagPill(props: TagPillProps) { Hunt Settings {% csrf_token %} - Go to Puzzles + Go to Puzzles
From 6760f7439a567e9e78ed6e59938982c2eedb2ba5 Mon Sep 17 00:00:00 2001 From: Nathan Pinsker Date: Wed, 15 Jan 2025 03:39:20 -0500 Subject: [PATCH 2/2] simplify logic --- cardboard/templates/base.html | 10 +++------- hunts/src/DarkModeToggle.tsx | 10 +++------- 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/cardboard/templates/base.html b/cardboard/templates/base.html index 74963e61..b0e2d294 100644 --- a/cardboard/templates/base.html +++ b/cardboard/templates/base.html @@ -32,13 +32,9 @@ } themeToggle.addEventListener('change', () => { - if (themeToggle.checked){ - document.body.setAttribute('data-bs-theme', 'light'); - localStorage.setItem('cardboard-theme', "light") - } else { - document.body.setAttribute('data-bs-theme', 'dark'); - localStorage.setItem('cardboard-theme', "dark") - } + let newTheme = themeToggle.checked ? 'light' : 'dark'; + document.body.setAttribute('data-bs-theme', newTheme); + localStorage.setItem('cardboard-theme', newTheme); }) }) diff --git a/hunts/src/DarkModeToggle.tsx b/hunts/src/DarkModeToggle.tsx index b1d951d0..680bbff1 100644 --- a/hunts/src/DarkModeToggle.tsx +++ b/hunts/src/DarkModeToggle.tsx @@ -15,13 +15,9 @@ export const DarkModeToggle = () => { className="form-check-input" checked={isDark} onChange={(e) => { - if (isDark) { - localStorage.setItem("cardboard-theme", "light"); - document.body.setAttribute('data-bs-theme', 'light'); - } else { - localStorage.setItem("cardboard-theme", "dark"); - document.body.setAttribute('data-bs-theme', 'dark'); - } + let newTheme = isDark ? 'light' : 'dark'; + document.body.setAttribute('data-bs-theme', newTheme); + localStorage.setItem('cardboard-theme', newTheme); setIsDark(e.target.checked); }} />