added dropdown items in main nav (styling taken from t-r.de); added toggle for light/dark mode
This commit is contained in:
parent
d86043dc5b
commit
2fc5c1520c
79
the_works/static/switchColorMode.js
Normal file
79
the_works/static/switchColorMode.js
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
/*!
|
||||||
|
* Minimal theme switcher using a checkbox
|
||||||
|
*
|
||||||
|
* Pico.css - https://picocss.com
|
||||||
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
|
* Modified by Yohn https://github.com/Yohn/PicoCSS
|
||||||
|
*/
|
||||||
|
|
||||||
|
const SwitchColorMode = {
|
||||||
|
// Config
|
||||||
|
_scheme: "auto",
|
||||||
|
toggleSelector: "input[name='color-mode-toggle']",
|
||||||
|
rootAttribute: "data-theme",
|
||||||
|
localStorageKey: "picoPreferredColorScheme",
|
||||||
|
|
||||||
|
// Init
|
||||||
|
init() {
|
||||||
|
this.checkbox = document.querySelector(this.toggleSelector);
|
||||||
|
if (!this.checkbox) {
|
||||||
|
console.error("Theme switcher toggle not found");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If first visit, use the theme from <html> attribute; otherwise, use stored preference
|
||||||
|
this.scheme = this.schemeFromLocalStorage ?? this.schemeFromHTML;
|
||||||
|
|
||||||
|
// Set checkbox state based on the applied theme
|
||||||
|
this.checkbox.checked = this.scheme === "dark";
|
||||||
|
|
||||||
|
// Listen for user changes
|
||||||
|
this.checkbox.addEventListener("change", () => {
|
||||||
|
this.scheme = this.checkbox.checked ? "dark" : "light";
|
||||||
|
this.schemeToLocalStorage();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// Get color scheme from local storage
|
||||||
|
get schemeFromLocalStorage() {
|
||||||
|
return window.localStorage?.getItem(this.localStorageKey);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Get the default theme from the <html> attribute
|
||||||
|
get schemeFromHTML() {
|
||||||
|
return document.documentElement.getAttribute(this.rootAttribute) ?? "auto";
|
||||||
|
},
|
||||||
|
|
||||||
|
// Preferred color scheme from system
|
||||||
|
get preferredColorScheme() {
|
||||||
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||||
|
},
|
||||||
|
|
||||||
|
// Set scheme
|
||||||
|
set scheme(scheme) {
|
||||||
|
if (scheme === "auto") {
|
||||||
|
this._scheme = this.preferredColorScheme;
|
||||||
|
} else if (scheme === "dark" || scheme === "light") {
|
||||||
|
this._scheme = scheme;
|
||||||
|
}
|
||||||
|
this.applyScheme();
|
||||||
|
},
|
||||||
|
|
||||||
|
// Get scheme
|
||||||
|
get scheme() {
|
||||||
|
return this._scheme;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Apply scheme
|
||||||
|
applyScheme() {
|
||||||
|
document.documentElement.setAttribute(this.rootAttribute, this._scheme);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Store scheme to local storage
|
||||||
|
schemeToLocalStorage() {
|
||||||
|
window.localStorage?.setItem(this.localStorageKey, this.scheme);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Init
|
||||||
|
SwitchColorMode.init();
|
||||||
@ -1,3 +1,63 @@
|
|||||||
|
nav {
|
||||||
|
a {
|
||||||
|
--pico-text-decoration: none;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
|
||||||
|
li#li-subtitle {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.sun-moon-li {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li[aria-current=page]>a,
|
||||||
|
li[aria-current=page]>details>summary>a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.dropdown {
|
||||||
|
margin-block-end: calc(var(--pico-spacing) * -1);
|
||||||
|
|
||||||
|
>summary:not([role]) a,
|
||||||
|
li a {
|
||||||
|
color: var(--pico-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
>summary:not([role]) {
|
||||||
|
background-color: inherit;
|
||||||
|
border: none;
|
||||||
|
padding-top: var(--pico-form-element-spacing-vertical);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li a {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* change color of sun icon to white*/
|
||||||
|
#sun-moon:not(:checked)::before {
|
||||||
|
background-color: var(--pico-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* change background & border color of theme toggle */
|
||||||
|
#sun-moon:not([aria-invalid]) {
|
||||||
|
background-color: var(--pico-primary-background);
|
||||||
|
border-color: var(--pico-primary-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
table.dataTable span.dt-column-order::before,
|
table.dataTable span.dt-column-order::before,
|
||||||
table.dataTable span.dt-column-order::after
|
table.dataTable span.dt-column-order::after
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<nav>
|
<nav role="navigation">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ url_for('home.home') }}">
|
<a href="{{ url_for('home.home') }}">
|
||||||
@ -9,16 +9,32 @@
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul>
|
<input type="checkbox" id="hamburger">
|
||||||
<li><a href="{{ url_for('text.all') }}">Texte</a></li>
|
<label id="hamburger-label" for="hamburger" aria-label="Menu" aria-controls="main-menu-items">
|
||||||
<li><a href="{{ url_for('werk.all') }}">Werke</a></li>
|
≡
|
||||||
<li><a href="{{ url_for('verlag.all') }}">Verlage</a></li>
|
</label>
|
||||||
<li><a href="{{ url_for('sprache.all') }}">Sprachen</a></li>
|
<ul role="list">
|
||||||
<li><a href="{{ url_for('textform.all') }}">Textformen</a></li>
|
<li role="listitem"><a href="{{ url_for('text.all') }}">Texte</a></li>
|
||||||
<li><a href="{{ url_for('werksform.all') }}">Werksformen</a></li>
|
<li role="listitem"><a href="{{ url_for('werk.all') }}">Werke</a></li>
|
||||||
<li><a href="{{ url_for('genre.all') }}">Genres</a></li>
|
<li aria-haspopup="menu" role="listitem">
|
||||||
<li><a href="{{ url_for('pseudonym.all') }}">Pseudonyme</a></li>
|
<details class="dropdown">
|
||||||
<li><a href="{{ url_for('reihe.all') }}">Reihen</a></li>
|
<summary><a>Basisdaten</a></summary>
|
||||||
<li><a href="{{ url_for('herausgeber.all') }}">Herausgeber:innen</a></li>
|
<ul>
|
||||||
|
<li role="listitem"><a href="{{ url_for('verlag.all') }}">Verlage</a></li>
|
||||||
|
<li role="listitem"><a href="{{ url_for('sprache.all') }}">Sprachen</a></li>
|
||||||
|
<li role="listitem"><a href="{{ url_for('textform.all') }}">Textformen</a></li>
|
||||||
|
<li role="listitem"><a href="{{ url_for('werksform.all') }}">Werksformen</a></li>
|
||||||
|
<li role="listitem"><a href="{{ url_for('genre.all') }}">Genres</a></li>
|
||||||
|
<li role="listitem"><a href="{{ url_for('pseudonym.all') }}">Pseudonyme</a></li>
|
||||||
|
<li role="listitem"><a href="{{ url_for('reihe.all') }}">Reihen</a></li>
|
||||||
|
<li role="listitem"><a href="{{ url_for('herausgeber.all') }}">Herausgeber:innen</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
</li>
|
||||||
|
<li role="listitem" class="sun-moon-li">
|
||||||
|
<label id="sun-moon-label">
|
||||||
|
<input id="sun-moon" name="color-mode-toggle" role="switch" type="checkbox" value="1" aria-label="Toggle Light or Dark Mode" />
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -49,5 +49,6 @@
|
|||||||
<footer class="container">
|
<footer class="container">
|
||||||
<p>trololol</p>
|
<p>trololol</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="{{ url_for('static', filename='switchColorMode.js') }}"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user