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

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

@ -21,15 +21,19 @@
transform: scale(0.75);
color: hsl(40, 100%, 50%);
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),
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;
}

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

@ -17,6 +17,9 @@
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); }
.dark-toggle-animation {
transition: background 500ms; }
/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
/* Bulma Utilities */
.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>
<html class="is-clipped" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flask Auth Example</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css', version='0.3') }}">
<title>Pricey Bot</title>
<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>
<body data-theme="dark" onload="init()">
<section class="hero is-primary is-fullheight">
<body data-theme="light" onload="init()">
<section class="hero is-primary is-fullheight dark-toggle-animation">
<div class="hero-head">
<nav class="navbar">
<div class="container">
@ -51,57 +51,10 @@
</div>
<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">
</label>
</div>
</section>
</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>