PriceyBot/PriceyBot2
Archived
5
0
Fork 0
Code Issues 8 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: clean up code

Browse Source
This commit is contained in:
Nicholas C 2023-03-11 01:34:14 +11:00
parent fbbb6f8a28
commit 1c057351ac
4 changed files with 94 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
priceybot2/sass/dark-mode.scss
View File

@ -33,3 +33,7 @@
; ;
} }
} }
.dark-toggle-animation {
transition: background 500ms;
}

3
priceybot2/static/css/main.css
View File

@ -17,6 +17,9 @@
color: #ffaa00; color: #ffaa00;
box-shadow: inset 0 0 0 var(--size), calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), var(--offset-orthogonal) 0 0 var(--ray-size), 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), 0 var(--offset-orthogonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size), var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); } box-shadow: inset 0 0 0 var(--size), calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), var(--offset-orthogonal) 0 0 var(--ray-size), 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), 0 var(--offset-orthogonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size), var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); }
.dark-toggle-animation {
transition: background 500ms; }
/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */ /*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
/* Bulma Utilities */ /* Bulma Utilities */
.button, .input, .textarea, .select select, .file-cta, .button, .input, .textarea, .select select, .file-cta,

72
priceybot2/static/scripts/dark-mode.js Normal file
View File

@ -0,0 +1,72 @@
// Set theme on load.
function init() {
// Default to light theme.
let theme = 'light'
// Check media query prefer and set it as dark.
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';
}
// Add event handler so if they change media query it'll update. overkill? yes.
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
let theme = event.matches ? "dark" : "light";
applyTheme(theme);
});
// If they have manually changed it use that theme instead.
theme = localStorage.getItem("theme") ?? theme
// Set it on body.
document.body.dataset.theme = theme;
// If dark-mode was toggle above we need to fix the icon.
let toggle = document.getElementsByName("dark-mode-toggle")[0];
// if it's already dark check it.
toggle.checked = theme === 'dark';
applyTheme(theme);
}
// Toggle the theme.
function darkLight() {
// Get current theme.
let element = document.body;
// Invert it.
switch (element.dataset.theme) {
case "light":
element.dataset.theme = "dark";
break;
case "dark":
element.dataset.theme = "light";
break;
}
localStorage.setItem("theme", element.dataset.theme);
applyTheme(element.dataset.theme);
}
// Apply theme
function applyTheme(theme) {
let primaryElements
// Find elements and update class.
switch (theme) {
case 'dark':
primaryElements = Array.from(document.querySelectorAll('.is-primary-invert'));
primaryElements.forEach((element) => {
element.classList.remove('is-primary-invert');
element.classList.add('is-primary');
});
break;
case 'light':
primaryElements = Array.from(document.querySelectorAll('.is-primary'));
primaryElements.forEach((element) => {
element.classList.remove('is-primary');
element.classList.add('is-primary-invert');
});
break;
}
}

59
priceybot2/templates/base.html
View File

@ -1,16 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="is-clipped" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <html class="is-clipped" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flask Auth Example</title> <title>Pricey Bot</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css', version='0.3') }}"> <script type="application/javascript" src="{{ url_for('static', filename='scripts/dark-mode.js', version='0.1') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css', version='0.1') }}">
</head> </head>
<body data-theme="dark" onload="init()"> <body data-theme="light" onload="init()">
<section class="hero is-primary is-fullheight"> <section class="hero is-primary is-fullheight dark-toggle-animation">
<div class="hero-head"> <div class="hero-head">
<nav class="navbar"> <nav class="navbar">
<div class="container"> <div class="container">
@ -51,57 +51,10 @@
</div> </div>
<div class="hero-foot"> <div class="hero-foot">
<label class="is-right"> <label class="is-pulled-right p-4">
<input name="dark-mode-toggle" class="dark-toggle" onclick="darkLight()" type="checkbox"> <input name="dark-mode-toggle" class="dark-toggle" onclick="darkLight()" type="checkbox">
</label> </label>
</div> </div>
</section> </section>
</body> </body>
<script>
function init() {
let theme = localStorage.getItem("theme") ?? "dark";
document.body.dataset.theme = theme;
applyTheme(theme);
}
function darkLight() {
let element = document.body;
switch (element.dataset.theme) {
case "light":
element.dataset.theme = "dark";
break;
case "dark":
element.dataset.theme = "light";
break;
}
localStorage.setItem("theme", element.dataset.theme);
applyTheme(element.dataset.theme);
}
function applyTheme(theme) {
console.log(theme)
let primaryElements
switch (theme) {
case 'dark':
primaryElements = Array.from(document.querySelectorAll('.is-primary-invert'));
console.log(primaryElements)
primaryElements.forEach((element) => {
element.classList.remove('is-primary-invert');
element.classList.add('is-primary');
});
break;
case 'light':
primaryElements = Array.from(document.querySelectorAll('.is-primary'));
console.log(primaryElements)
primaryElements.forEach((element) => {
element.classList.remove('is-primary');
element.classList.add('is-primary-invert');
});
break;
}
}
</script>
</html> </html>