jadowyne/pantry-track
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Implemented darkmode in admin module

Browse Source
This commit is contained in:
Jadowyne Ulve 2025-08-09 17:53:08 -05:00
parent 30954cc6e2
commit 9bc93e12a5
5 changed files with 29 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
application/administration/static/js/adminHandler.js
View File

@ -1,21 +1,3 @@
var mode = false
async function toggleDarkMode() {
let darkMode = document.getElementById("dark-mode");
darkMode.disabled = !darkMode.disabled;
mode = !mode;
if(mode){
document.getElementById('modeToggle').innerHTML = "light_mode"
document.getElementById('main_html').classList.add('uk-light')
} else {
document.getElementById('modeToggle').innerHTML = "dark_mode"
document.getElementById('main_html').classList.remove('uk-light')
}
}
if(session.user.flags.darkmode){
toggleDarkMode()
}
document.addEventListener('DOMContentLoaded', async function() { document.addEventListener('DOMContentLoaded', async function() {
let sites = await fetchSites() let sites = await fetchSites()
await updateSitesPagination() await updateSitesPagination()

8
application/administration/templates/admin_index.html
View File

@ -12,10 +12,16 @@
<!-- Material Symbols - Sharp Set --> <!-- Material Symbols - Sharp Set -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
{% if session['user']['flags']['darkmode'] %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
{% endif %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
</head> </head>
{% if session['user']['flags']['darkmode'] %}
<body class="uk-light">
{% else %}
<body> <body>
{% endif %}
<nav class="uk-navbar-container"> <nav class="uk-navbar-container">
<div class="uk-container uk-container-expand"> <div class="uk-container uk-container-expand">
<div class="uk-navbar uk-navbar-primary"> <div class="uk-navbar uk-navbar-primary">

27
application/administration/templates/role.html
View File

@ -12,10 +12,15 @@
<!-- Material Symbols - Sharp Set --> <!-- Material Symbols - Sharp Set -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
{% if session['user']['flags']['darkmode'] %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/> <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
{% endif %}
</head> </head>
{% if session['user']['flags']['darkmode'] %}
<body class="uk-light">
{% else %}
<body> <body>
{% endif %}
<div class="uk-container uk-section"> <div class="uk-container uk-section">
<div uk-grid> <div uk-grid>
<div class="uk-width-1-1" > <div class="uk-width-1-1" >
@ -84,24 +89,6 @@
await replenishForm(role, mode) await replenishForm(role, mode)
}) })
var mode = false
async function toggleDarkMode() {
let darkMode = document.getElementById("dark-mode");
darkMode.disabled = !darkMode.disabled;
mode = !mode;
if(mode){
document.getElementById('modeToggle').innerHTML = "light_mode"
document.getElementById('main_html').classList.add('uk-light')
} else {
document.getElementById('modeToggle').innerHTML = "dark_mode"
document.getElementById('main_html').classList.remove('uk-light')
}
}
if(session.user.flags.darkmode){
toggleDarkMode()
}
async function replenishForm(role, mode){ async function replenishForm(role, mode){
document.getElementById('role_name').value = role.role_name document.getElementById('role_name').value = role.role_name
document.getElementById('role_description').value = role.role_description document.getElementById('role_description').value = role.role_description

29
application/administration/templates/site.html
View File

@ -12,10 +12,15 @@
<!-- Material Symbols - Sharp Set --> <!-- Material Symbols - Sharp Set -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
{% if session['user']['flags']['darkmode'] %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/> <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
{% endif %}
</head> </head>
<body id="test"> {% if session['user']['flags']['darkmode'] %}
<body class="uk-light">
{% else %}
<body>
{% endif %}
<div class="uk-container uk-section uk-margin-remove-top"> <div class="uk-container uk-section uk-margin-remove-top">
<div uk-grid> <div uk-grid>
<div class="uk-width-1-1" > <div class="uk-width-1-1" >
@ -151,24 +156,6 @@
console.log(mode) console.log(mode)
}) })
var mode = false
async function toggleDarkMode() {
let darkMode = document.getElementById("dark-mode");
darkMode.disabled = !darkMode.disabled;
mode = !mode;
if(mode){
document.getElementById('modeToggle').innerHTML = "light_mode"
document.getElementById('main_html').classList.add('uk-light')
} else {
document.getElementById('modeToggle').innerHTML = "dark_mode"
document.getElementById('main_html').classList.remove('uk-light')
}
}
if(session.user.flags.darkmode){
toggleDarkMode()
}
async function replenishForm(site, mode){ async function replenishForm(site, mode){
document.getElementById('site_name').value = site.site_name document.getElementById('site_name').value = site.site_name
document.getElementById('site_description').value = site.site_description document.getElementById('site_description').value = site.site_description

27
application/administration/templates/user.html
View File

@ -12,10 +12,15 @@
<!-- Material Symbols - Sharp Set --> <!-- Material Symbols - Sharp Set -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
{% if session['user']['flags']['darkmode'] %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/> <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
{% endif %}
</head> </head>
{% if session['user']['flags']['darkmode'] %}
<body class="uk-light">
{% else %}
<body> <body>
{% endif %}
<div class="uk-section"> <div class="uk-section">
<div class="uk-container uk-container-xsmall"> <div class="uk-container uk-container-xsmall">
<div class="uk-grid-small" uk-grid> <div class="uk-grid-small" uk-grid>
@ -198,24 +203,6 @@
await replenishForm(user, mode) await replenishForm(user, mode)
}) })
var mode = false
async function toggleDarkMode() {
let darkMode = document.getElementById("dark-mode");
darkMode.disabled = !darkMode.disabled;
mode = !mode;
if(mode){
document.getElementById('modeToggle').innerHTML = "light_mode"
document.getElementById('main_html').classList.add('uk-light')
} else {
document.getElementById('modeToggle').innerHTML = "dark_mode"
document.getElementById('main_html').classList.remove('uk-light')
}
}
if(session.user.flags.darkmode){
toggleDarkMode()
}
async function replenishForm(user, mode){ async function replenishForm(user, mode){
document.getElementById('login_name').value = user.username document.getElementById('login_name').value = user.username
document.getElementById('login_email').value = user.email document.getElementById('login_email').value = user.email