Hexor/OutFleet
1
0
Fork 0
mirror of https://github.com/house-of-vanity/OutFleet.git synced 2025-07-07 09:24:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Restore UI

Browse Source
This commit is contained in:
Alexandr Bogomyakov
2024-03-18 19:06:10 +02:00
parent 5109de5c9a
commit 715494fa5f
4 changed files with 347 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
templates/base.html Executable file → Normal file
View File

@ -1,113 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Dashboard{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='pure.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='layout.css') }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.border {
border: 0px solid black;
}
.content {
padding: 10px;
}
.form-field {
margin: 5px;
width: 100%;
}
</style>
<!-- Script to make the Menu link work -->
<!-- Just stripped down version of the js/ui.js script for the side-menu layout -->
<script>
function getElements() {
return {
menu: document.getElementById('nav'),
menuLink: document.getElementById('menuLink')
};
}
function toggleClass(element, className) {
var classes = element.className.split(/\s+/);
var length = classes.length;
var i = 0;
for (; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
function toggleMenu() {
var active = 'active';
var elements = getElements();
toggleClass(elements.menu, active);
}
// function handleEvent(e) {
// var elements = getElements();
// if (e.target.id === elements.menuLink.id) {
// toggleMenu();
// e.preventDefault();
// } else if (elements.menu.className.indexOf('active') !== -1) {
// toggleMenu();
// }
// }
// document.addEventListener('DOMContentLoaded', function () {
// document.addEventListener('click', handleEvent);
// });
</script>
<title>{% block title %}Dashboard{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='pure.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='layout.css') }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="pure-g">
<div class="pure-u-2-24 border" style="background: rgb(37, 42, 58);">
<div class="content">
<div class="nav-inner">
<h1 onclick="location.href='/';" style="cursor:pointer;" class="pure-button">OutFleet {{VERSION}}
</h1>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="/" class="pure-menu-link">Servers</a></li>
<li class="pure-menu-item"><a href="/clients" class="pure-menu-link">Clients</a></li>
<li class="pure-menu-item"><a href="/sync" class="pure-menu-link">Sync status</a></li>
</ul>
</div>
</div>
</div>
<div class="pure-u-22-24 border">
<div class="content">
{% block content %}{% endblock %}
<div id="layout" class="content pure-g">
<div id="nav" class="pure-u-1-3">
<a href="#" id="menuLink" class="nav-menu-button">Menu</a>
<div class="nav-inner">
<button onclick="location.href='/';" style="cursor:pointer;" class="primary-button pure-button">OutFleet v.{{ VERSION }}</button>
<div class="pure-menu custom-restricted-width">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="/" class="pure-menu-link">Servers</a></li>
<li class="pure-menu-item"><a href="/clients" class="pure-menu-link">Clients</a></li>
<li class="pure-menu-item"><a href="/sync" class="pure-menu-link">Sync status</a></li>
</ul>
{{ VERSION }}
</div>
</div>
</div>
{% block content %}{% endblock %}
</div>
<!-- Script to make the Menu link work -->
<!-- Just stripped down version of the js/ui.js script for the side-menu layout -->
<script>
function getElements() {
return {
menu: document.getElementById('nav'),
menuLink: document.getElementById('menuLink')
};
}
function toggleClass(element, className) {
var classes = element.className.split(/\s+/);
var length = classes.length;
var i = 0;
{% if nt %}
<label>
<input type="checkbox" class="alertCheckbox" autocomplete="off" />
<div class="alert {% if nl == 'error' %}error{% else %}success{% endif %}">
<span class="alertText">{{nt}}
<br class="clear" /></span>
</div>
</label>
{% endif %}
for (; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
function toggleMenu() {
var active = 'active';
var elements = getElements();
toggleClass(elements.menu, active);
}
function handleEvent(e) {
var elements = getElements();
if (e.target.id === elements.menuLink.id) {
toggleMenu();
e.preventDefault();
} else if (elements.menu.className.indexOf('active') !== -1) {
toggleMenu();
}
}
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('click', handleEvent);
});
</script>
{% if nt %}
<label>
<input type="checkbox" class="alertCheckbox" autocomplete="off" />
<div class="alert {% if nl == 'error' %}error{% else %}success{% endif %}">
<span class="alertText">{{nt}}
<br class="clear"/></span>
</div>
</label>
{% endif %}
</body>
</html>
</html>