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::after
|
||||
{
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<nav>
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ url_for('home.home') }}">
|
||||
@ -9,16 +9,32 @@
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="{{ url_for('text.all') }}">Texte</a></li>
|
||||
<li><a href="{{ url_for('werk.all') }}">Werke</a></li>
|
||||
<li><a href="{{ url_for('verlag.all') }}">Verlage</a></li>
|
||||
<li><a href="{{ url_for('sprache.all') }}">Sprachen</a></li>
|
||||
<li><a href="{{ url_for('textform.all') }}">Textformen</a></li>
|
||||
<li><a href="{{ url_for('werksform.all') }}">Werksformen</a></li>
|
||||
<li><a href="{{ url_for('genre.all') }}">Genres</a></li>
|
||||
<li><a href="{{ url_for('pseudonym.all') }}">Pseudonyme</a></li>
|
||||
<li><a href="{{ url_for('reihe.all') }}">Reihen</a></li>
|
||||
<li><a href="{{ url_for('herausgeber.all') }}">Herausgeber:innen</a></li>
|
||||
<input type="checkbox" id="hamburger">
|
||||
<label id="hamburger-label" for="hamburger" aria-label="Menu" aria-controls="main-menu-items">
|
||||
≡
|
||||
</label>
|
||||
<ul role="list">
|
||||
<li role="listitem"><a href="{{ url_for('text.all') }}">Texte</a></li>
|
||||
<li role="listitem"><a href="{{ url_for('werk.all') }}">Werke</a></li>
|
||||
<li aria-haspopup="menu" role="listitem">
|
||||
<details class="dropdown">
|
||||
<summary><a>Basisdaten</a></summary>
|
||||
<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>
|
||||
</nav>
|
||||
|
||||
@ -49,5 +49,6 @@
|
||||
<footer class="container">
|
||||
<p>trololol</p>
|
||||
</footer>
|
||||
<script src="{{ url_for('static', filename='switchColorMode.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user