Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upgrade to bootstrap 5 #846

Merged
merged 2 commits into from
Jan 15, 2025
Merged

upgrade to bootstrap 5 #846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab7428e
upgrade to bootstrap 5
npinsker Jan 15, 2025
6760f74
simplify logic
npinsker Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 26 additions & 9 deletions cardboard/static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
31 changes: 10 additions & 21 deletions cardboard/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@
<title>{{ APP_TITLE }}</title>
<link rel="shortcut icon" type="image/png" href="{% static FAVICON %}"/>

<!-- https://github.com/ForEvolve/bootstrap-dark -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@1.0.0/dist/css/toggle-bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@1.0.0/dist/css/toggle-bootstrap-dark.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@1.0.0/dist/css/toggle-bootstrap-print.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" />

<!-- https://github.com/gitbrent/bootstrap-switch-button -->
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/css/bootstrap-switch-button.min.css" rel="stylesheet" />
Expand All @@ -21,31 +17,24 @@
<!--Light/Dark Mode-->
<script>
document.addEventListener('DOMContentLoaded', () => {
document.body.classList.add('bootstrap');

const themeToggle = document.getElementById('light-switch');
const storedTheme = localStorage.getItem('cardboard-theme');
if (storedTheme) {
document.body.classList.add(storedTheme);
if (storedTheme == "bootstrap-dark") {
document.body.setAttribute('data-bs-theme', storedTheme);
if (storedTheme == "dark") {
themeToggle.switchButton('off');
}
} else {
document.body.classList.add('bootstrap');
localStorage.setItem('cardboard-theme', 'bootstrap')
document.body.setAttribute('data-bs-theme', 'light');
localStorage.setItem('cardboard-theme', 'light')
}

themeToggle.addEventListener('change', () => {
if (themeToggle.checked){
// Light
document.body.classList.remove('bootstrap-dark');
document.body.classList.add('bootstrap');
localStorage.setItem('cardboard-theme', "bootstrap")
} else {
// Dark
document.body.classList.remove('bootstrap');
document.body.classList.add('bootstrap-dark');
localStorage.setItem('cardboard-theme', "bootstrap-dark")
}
let newTheme = themeToggle.checked ? 'light' : 'dark';
document.body.setAttribute('data-bs-theme', newTheme);
localStorage.setItem('cardboard-theme', newTheme);
})
})
</script>
Expand Down Expand Up @@ -100,7 +89,7 @@
{% endif %}
{% endif %}
</ul>
<div class="navbar-nav ml-auto">
<div class="navbar-nav ms-auto">
<input id="light-switch" type="checkbox" checked data-toggle="switchbutton" data-onstyle="outline-secondary" data-offstyle="secondary" data-onlabel="Light" data-offlabel="Dark">
</div>

Expand Down
12 changes: 5 additions & 7 deletions cardboard/templates/reactbase.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@
<title>{{ APP_TITLE }}</title>
<link rel="shortcut icon" type="image/png" href="{% static FAVICON %}"/>

<!-- https://github.com/ForEvolve/bootstrap-dark -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@1.0.0/dist/css/toggle-bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@1.0.0/dist/css/toggle-bootstrap-dark.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@1.0.0/dist/css/toggle-bootstrap-print.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" />


<!-- https://github.com/gitbrent/bootstrap-switch-button -->
Expand All @@ -21,12 +18,13 @@
<!--Light/Dark Mode-->
<script>
document.addEventListener('DOMContentLoaded', () => {
document.body.classList.add('bootstrap');
const storedTheme = localStorage.getItem('cardboard-theme');
if (storedTheme) {
document.body.classList.add(storedTheme);
document.body.setAttribute('data-bs-theme', storedTheme);
} else {
document.body.classList.add('bootstrap');
localStorage.setItem('cardboard-theme', 'bootstrap')
document.body.setAttribute('data-bs-theme', 'light');
localStorage.setItem('cardboard-theme', 'light')
}
})
</script>
Expand Down
16 changes: 4 additions & 12 deletions hunts/src/DarkModeToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -15,17 +15,9 @@ export const DarkModeToggle = () => {
className="form-check-input"
checked={isDark}
onChange={(e) => {
if (isDark) {
// Light
document.body.classList.remove("bootstrap-dark");
document.body.classList.add("bootstrap");
localStorage.setItem("cardboard-theme", "bootstrap");
} else {
// Dark
document.body.classList.remove("bootstrap");
document.body.classList.add("bootstrap-dark");
localStorage.setItem("cardboard-theme", "bootstrap-dark");
}
let newTheme = isDark ? 'light' : 'dark';
document.body.setAttribute('data-bs-theme', newTheme);
localStorage.setItem('cardboard-theme', newTheme);
setIsDark(e.target.checked);
}}
/>
Expand Down
12 changes: 6 additions & 6 deletions hunts/src/HuntViewHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@ function HuntViewHeader({ hunt }: { hunt: Hunt }) {
alignItems: "center",
}}
>
<Container fluid>
<Row className="text-center font-weight-bold small">
<Container fluid style={{ fontWeight: "bold" }}>
<Row className="text-center small">
<Col xs={1} className="text-nowrap px-0 mx-0">
Metas
</Col>
Expand All @@ -54,25 +54,25 @@ function HuntViewHeader({ hunt }: { hunt: Hunt }) {
<Row className="text-center">
<Col xs={1}>
<span
className="text-primary font-weight-bold"
className="text-primary"
style={{ fontSize: "1.25rem" }}
>
{numMetasSolved}
</span>{" "}
/{" "}
<span className="text-secondary font-weight-bold">
<span className="text-secondary">
{numMetasSolved + numMetasUnsolved}
</span>
</Col>
<Col xs={1}>
<span
className="text-success font-weight-bold"
className="text-success"
style={{ fontSize: "1.25rem" }}
>
{numSolved}
</span>{" "}
/{" "}
<span className="text-secondary font-weight-bold">
<span className="text-secondary">
{numUnlocked}
</span>
</Col>
Expand Down
15 changes: 8 additions & 7 deletions hunts/src/SiteHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const SiteHeader = () => {
{window.APP_SHORT_TITLE}
</a>
{hunt.name}
<button type="button" className="btn ml-auto" onClick={toggleDrawer}>
<button type="button" className="btn ms-auto" onClick={toggleDrawer}>
<IconMenu2 aria-label="expand menu" />
</button>
</nav>
Expand All @@ -49,33 +49,34 @@ export const SiteHeader = () => {
<a className="nav-link" href="/accounts/logout/">
Logout
</a>
<div className="nav-link">Logged in as {window.LOGGED_IN_USER}</div>
<div style={{ padding: ".5rem 1rem" }}>Logged in as {window.LOGGED_IN_USER}</div>

<div className="mt-auto" style={{ marginBottom: "36px" }}>
<div className="mt-auto" style={{ padding: ".5rem 1rem", marginBottom: "36px" }}>
<span
style={{
borderTop: "1px solid black",
width: "100%",
display: "inline-block",
fontWeight: "bold",
}}
className="font-weight-bold nav-link"
>
Chat Settings
</span>
<div className="nav-link">
<div style={{ padding: ".5rem 1rem" }}>
<ChatVersionSelector />
</div>
<span
style={{
borderTop: "1px solid black",
width: "100%",
display: "inline-block",
fontWeight: "bold",
padding: ".5rem 1rem",
}}
className="font-weight-bold nav-link"
>
Appearance
</span>
<div className="nav-link">
<div style={{ padding: ".5rem 1rem" }}>
<DarkModeToggle />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion hunts/src/TagPill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function TagPill(props: TagPillProps) {
<Badge
pill
bg={color}
text="white"
text={color === "light" ? "black" : "white"}
key={name}
onClick={onClick || undefined}
style={style}
Expand Down
2 changes: 1 addition & 1 deletion hunts/templates/edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ <h1>Hunt Settings</h1>
{% csrf_token %}
<button type="submit" class="btn btn-secondary mx-2">Add users from Google Drive</button>
</form>
<a class="btn btn-light ml-auto mx-2" href="/">Go to Puzzles</a>
<a class="btn btn-light ms-auto mx-2" href="/">Go to Puzzles</a>
<button type="submit" class="btn btn-primary mx-2" form="hunt_settings" >Submit</button>
</div>
</div>
Expand Down
Loading