implemented darkmode into site_management module
also fixed the navbar
This commit is contained in:
Jadowyne Ulve
parent
2186330ae8
commit
bac9427457
@ -23,26 +23,6 @@ async function changeSite(site){
|
|||||||
location.reload(true)
|
location.reload(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
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 zones = await fetchZones()
|
let zones = await fetchZones()
|
||||||
await updateZonesPagination()
|
await updateZonesPagination()
|
||||||
|
|||||||
@ -12,87 +12,84 @@
|
|||||||
<!-- 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>
|
||||||
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
{% endif %}
|
||||||
<!-- to color the navbar i have to stlye this element the nav element -->
|
<nav class="uk-navbar-container">
|
||||||
<nav id="navbar" 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 uk-navbar="dropbar: true">
|
<!-- Application Navigation-->
|
||||||
<div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
|
<div class="uk-navbar-left">
|
||||||
<div class="uk-offcanvas-bar uk-flex uk-flex-column">
|
<ul class="uk-navbar-nav">
|
||||||
<ul class="uk-nav uk-nav-secondary">
|
<li>
|
||||||
<img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
|
<a href>Apps</a>
|
||||||
<li class="uk-nav-header">Apps</li>
|
<div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
|
||||||
<li><a href="/shopping-lists">Shopping Lists</a></li>
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||||
<li><a href="/recipes">Recipes</a></li>
|
<li><a href="/recipes">Recipes</a></li>
|
||||||
<li class="uk-nav-header">Logistics</li>
|
<li><a href="/shopping-lists">Shopping Lists</a></li>
|
||||||
<li><a href="/items">Items</a></li>
|
<li class="uk-nav-header">Logistics</li>
|
||||||
<li><a href="/transaction">Add Transaction</a></li>
|
<li><a href="/items">Items</a></li>
|
||||||
<li>
|
<li><a href="/items/transaction">Transaction</a></li>
|
||||||
<a href="/workshop">
|
<li><a href="/receipts">Receipts</a></li>
|
||||||
<div class="uk-active">Workshop<div class="uk-nav-subtitle" disabled>Building in the workshop...</div>
|
<li class="uk-nav-header">Points of Ease</li>
|
||||||
</div></a>
|
<li><a href="/poe/scanner">Transaction Scanner</a></li>
|
||||||
</li>
|
<li><a href="/poe/receipts">Receipts Scanner</a></li>
|
||||||
<li><a href="/receipts">Receipts</a></li>
|
</ul>
|
||||||
<li class="uk-nav-header">System Management</li>
|
</div>
|
||||||
<li><a><div>{{current_site}}<div class="uk-nav-subtitle">This is the current site you are viewing...</div></div></a>
|
</li>
|
||||||
<div uk-dropdown="mode: click">
|
</ul>
|
||||||
<ul class="uk-nav uk-dropdown-nav">
|
|
||||||
{% for site in sites %}
|
</div>
|
||||||
{% if site == current_site %}
|
<!-- Breadcrumbs Navigation -->
|
||||||
<li><a class="uk-disabled" href="#">{{site}}</a></li>
|
<div class="uk-navbar-center uk-visible@m">
|
||||||
{% else %}
|
<ul class="uk-breadcrumb uk-margin-remove">
|
||||||
<li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
|
<li style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
|
||||||
{% endif %}
|
<div uk-dropdown="mode: hover">
|
||||||
{% endfor %}
|
<ul class="uk-nav uk-dropdown-nav">
|
||||||
</ul>
|
<li class="uk-nav-header">Select Site</li>
|
||||||
</div>
|
<li class="uk-nav-divider"></li>
|
||||||
</li>
|
{% for site in sites %}
|
||||||
{% if system_admin %}
|
{% if site == current_site %}
|
||||||
<li><a href="/admin">Administration</a></li>
|
<li><a class="uk-disabled" href="#">{{site}}</a></li>
|
||||||
{% endif %}
|
{% else %}
|
||||||
<li><a href="" class="">{{username}}</a></li>
|
<li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
|
||||||
</ul>
|
{% endif %}
|
||||||
<button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
|
{% endfor %}
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-navbar-left uk-margin-small">
|
</li>
|
||||||
<a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle> Menu</a>
|
<li class="uk-disabled"><span>Site Management</span></li>
|
||||||
</div>
|
</ul>
|
||||||
<div class="uk-navbar-center uk-margin-small uk-visible@s">
|
</div>
|
||||||
<ul class="uk-breadcrumb">
|
<!-- Profile/Management Navigation-->
|
||||||
<li style="cursor: default;"><span><strong>{{current_site}}</strong></span>
|
<div class="uk-navbar-right">
|
||||||
<div uk-dropdown="mode: hover">
|
<ul class="uk-navbar-nav">
|
||||||
<ul class="uk-nav uk-dropdown-nav">
|
<li>
|
||||||
{% for site in sites %}
|
<a href="#">
|
||||||
{% if site == current_site %}
|
<img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
|
||||||
<li><a class="uk-disabled" href="#">{{site}}</a></li>
|
{{username}}
|
||||||
{% else %}
|
</a>
|
||||||
<li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
|
<div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
|
||||||
{% endif %}
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||||
{% endfor %}
|
<li><a href="/profile">Profile</a></li>
|
||||||
</ul>
|
<li><a onclick="toggleDarkMode()">Dark Mode</a></li>
|
||||||
</div>
|
<li class="uk-active"><a href="/site-management">Site Management</a></li>
|
||||||
</li>
|
<li><a href="/administration">System Management</a></li>
|
||||||
<li style="cursor: default; user-select: none;"><span>Logistics</span></li>
|
<li><a href="/access/logout">Logout</a></li>
|
||||||
<li class="uk-disabled"><span>Workshop</span></li>
|
</ul>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
<div class="uk-navbar-right">
|
</ul>
|
||||||
<div>
|
|
||||||
<a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
<div class="uk-section uk-margin-left">
|
<div class="uk-section uk-margin-left">
|
||||||
<div class="uk-child-width-1-1" uk-grid>
|
<div class="uk-child-width-1-1" uk-grid>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user