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 ruff-format: venv
venv/bin/ruff format . venv/bin/ruff format .
djlint: venv ## Format the templates 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 pylint: venv ## Runs pylint on the code
venv/bin/pylint argos venv/bin/pylint argos
mypy: venv mypy: venv

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

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

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

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