almet/argos
1
0
Fork 0
mirror of https://framagit.org/framasoft/framaspace/argos.git synced 2025-04-28 09:52:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Styling: enhance the mobile view

Browse source 
- Add some spacing that was previously removed on all pages
- Include the JavaScript only if not on the login view
- Change the menu to not use buttons, and use rtl so the menu is viewable on small screens.
This commit is contained in:
Alexis Métaireau 2024-07-25 20:27:57 +02:00 committed by Luc Didry
parent eb65470935
commit 9dc0ffc5ef
No known key found for this signature in database
GPG key ID: EA868E12D0257E3C
4 changed files with 103 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Makefile
View file

@ -25,7 +25,7 @@ ruff: venv
ruff-format: venv
venv/bin/ruff format .
djlint: venv ## Format the templates
venv/bin/djlint --ignore=H030,H031,H006 --profile jinja --lint argos/server/templates/*html
venv/bin/djlint --ignore=H006 --profile jinja --lint argos/server/templates/*html
pylint: venv ## Runs pylint on the code
venv/bin/pylint argos
mypy: venv

8
argos/server/static/styles.css
View file

@ -4,10 +4,6 @@ code {
white-space: pre-wrap;
}
body > header,
body > main {
padding: 0 !important;
}
#title {
margin-bottom: 0;
}
@ -53,3 +49,7 @@ label[for="select-status"] {
#refresh-delay {
max-width: 120px;
}
/* Remove chevron on menu */
#nav-menu summary::after {
background-image: none !important;
}

134
argos/server/templates/base.html
View file

@ -3,6 +3,10 @@
<head>
<meta charset="utf-8">
<title>Argos</title>
<meta name="description"
content="Argos monitoring">
<meta name="keywords"
content="argos, monitoring">
<link rel="shortcut icon"
href="{{ url_for('static', path='/logo.png') }}">
<meta name="viewport"
@ -12,14 +16,14 @@
{% if auto_refresh_enabled %}
<meta http-equiv="refresh"
content="{{ auto_refresh_seconds }}">
{% endif %}
{%- endif %}
<link rel="stylesheet"
href="{{ url_for('static', path='/styles.css') }}">
</head>
<body>
<header class="container">
<nav>
<a href="{{ url_for('get_severity_counts_view') }}">
<a href="{{ url_for("get_severity_counts_view") }}">
<ul>
<li>
<img src="{{ url_for('static', path='/logo-64.png') }}"
@ -34,48 +38,50 @@
</a>
{% if request.url.remove_query_params('msg') != url_for('login_view') %}
<ul>
<details id="nav-menu" class="dropdown">
<summary autofocus>Menu</summary>
<ul>
<li>
<a href="{{ url_for('get_severity_counts_view') }}"
class="outline {{ 'contrast' if request.url == url_for('get_severity_counts_view') }}"
role="button">
Dashboard
</a>
</li>
<li>
<a href="{{ url_for('get_domains_view') }}"
class="outline {{ 'contrast' if request.url == url_for('get_domains_view') }}"
role="button">
Domains
</a>
</li>
<li>
<a href="{{ url_for('get_agents_view') }}"
class="outline {{ 'contrast' if request.url == url_for('get_agents_view') }}"
role="button">
Agents
</a>
</li>
<li>
<a href="#"
id="reschedule-all"
class="outline"
title="Reschedule non-ok checks as soon as possible"
role="button">
Reschedule non-ok checks
</a>
</li>
<li>
<a href="{{ url_for('logout_view') }}"
class="outline {{ 'contrast' if request.url == url_for('get_agents_view') }}"
role="button">
Logout
</a>
</li>
</ul>
</details>
<li>
<details id="nav-menu" class="dropdown">
<summary autofocus>Menu</summary>
<ul dir="rtl">
<li>
<a href="{{ url_for('get_severity_counts_view') }}"
class="outline {{ 'contrast' if request.url == url_for('get_severity_counts_view') }}"
role="button">
Dashboard
</a>
</li>
<li>
<a href="{{ url_for('get_domains_view') }}"
class="outline {{ 'contrast' if request.url == url_for('get_domains_view') }}"
role="button">
Domains
</a>
</li>
<li>
<a href="{{ url_for('get_agents_view') }}"
class="outline {{ 'contrast' if request.url == url_for('get_agents_view') }}"
role="button">
Agents
</a>
</li>
<li>
<a href="#"
id="reschedule-all"
class="outline"
title="Reschedule non-ok checks as soon as possible"
role="button">
Reschedule non-ok checks
</a>
</li>
<li>
<a href="{{ url_for('logout_view') }}"
class="outline {{ 'contrast' if request.url == url_for('get_agents_view') }}"
role="button">
Logout
</a>
</li>
</ul>
</details>
</li>
</ul>
{% endif %}
</nav>
@ -97,26 +103,28 @@
(<a href="https://framagit.org/framasoft/framaspace/argos">sources</a>)
<br>
API documentation:
<a href="{{ url_for('get_severity_counts_view') }}docs">Swagger</a>
<a href="{{ url_for("get_severity_counts_view") }}docs">Swagger</a>
or
<a href="{{ url_for('get_severity_counts_view') }}redoc">Redoc</a>
<a href="{{ url_for("get_severity_counts_view") }}redoc">Redoc</a>
</footer>
<script>
async function rescheduleAll() {
const response = await fetch('{{ url_for("reschedule_all") }}', {method: 'POST'});
const json = await response.json();
const dialog = document.getElementById('msg');
dialog.innerText = json.msg;
dialog.setAttribute('open', '');
setTimeout(() => {
dialog.removeAttribute('open');
}, 1500);
}
document.getElementById('reschedule-all').addEventListener('click', event => {
event.preventDefault();
rescheduleAll();
document.getElementById('nav-menu').open = false;
});
</script>
{% if request.url.remove_query_params('msg') != url_for('login_view') %}
<script>
async function rescheduleAll() {
const response = await fetch('{{ url_for("reschedule_all") }}', {method: 'POST'});
const json = await response.json();
const dialog = document.getElementById('msg');
dialog.innerText = json.msg;
dialog.setAttribute('open', '');
setTimeout(() => {
dialog.removeAttribute('open');
}, 1500);
}
document.getElementById('reschedule-all').addEventListener('click', event => {
event.preventDefault();
rescheduleAll();
document.getElementById('nav-menu').open = false;
});
</script>
{% endif %}
</body>
</html>

43
argos/server/templates/index.html
View file

@ -1,11 +1,13 @@
{% extends "base.html" %}
{% block title %}<h2>Dashboard</h2>{% endblock title %}
{% block title %}
<h2>Dashboard</h2>
{% endblock title %}
{% block content %}
<div id="domains" class="frame">
<nav>
<ul>
<li>
<a href="{{ url_for('get_agents_view') }}">
<a href="{{ url_for("get_agents_view") }}">
{{ agents | length }} agent{{ 's' if agents | length > 1 }}
</a>
</li>
@ -21,46 +23,55 @@
</li>
<li>
<label class="inline-label">
Every <input id="refresh-delay"
class="initial-width"
name="auto_refresh_seconds"
type="number"
form="refresh-form"
min="5"
value="{{ auto_refresh_seconds }}"> seconds
Every
<input id="refresh-delay"
class="initial-width"
name="auto_refresh_seconds"
type="number"
form="refresh-form"
min="5"
value="{{ auto_refresh_seconds }}">
seconds
</label>
</li>
<li>
<form id="refresh-form"
method="post"
action="{{ url_for('set_refresh_cookies_view') }}">
action="{{ url_for("set_refresh_cookies_view") }}">
<input type="Submit">
</form>
</li>
</ul>
</nav>
<div class="container">
<div class="grid grid-index">
<article>
<header title="Unknown">❔</header>
<header title="Unknown">
❔
</header>
{{ counts_dict['unknown'] }}
</article>
<article>
<header title="OK">✅</header>
<header title="OK">
✅
</header>
{{ counts_dict['ok'] }}
</article>
<article>
<header title="Warning">⚠️</header>
<header title="Warning">
⚠️
</header>
{{ counts_dict['warning'] }}
</article>
<article>
<header title="Critical">❌</header>
<header title="Critical">
❌
</header>
{{ counts_dict['critical'] }}
</article>
</div>
<p class="text-center">
<a href="{{ url_for('get_domains_view') }}"
<a href="{{ url_for("get_domains_view") }}"
class="outline"
role="button">
Domains