Clippy update

Plus some refactors of the templates and styling
This commit is contained in:
2024-02-13 23:44:59 +01:00
parent d77ad8fec9
commit c7bd7fda9b
8 changed files with 226 additions and 130 deletions
+43 -32
View File
@@ -10,41 +10,52 @@
<script src="https://open.spotify.com/embed/iframe-api/v1" async></script>
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' style="background:#01817F;">
<header>
</header>
<main>
</main>
<div class="window" style="max-width:960px">
<div class="title-bar">
<div class="title-bar-text">
{% block window-title %}{% endblock %}
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' style="background:#01817F;">
<div class="window">
<div class="title-bar">
<div class="title-bar-text">
{% block window-title %}{% endblock %}
</div>
<div class="title-bar-controls">
<button aria-label="Help"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="title-bar-controls">
<button aria-label="Help"></button>
<button aria-label="Close"></button>
<div class="window-body">
<menu role="tablist" hx-boost="true">
<li role="tab" {% if request.path == '/vote/' %}aria-selected="true" {% endif %}>
<a href="{% url 'vote' %}">Stemmen</a>
</li>
<li role="tab" {% if request.path == '/track/' %}aria-selected="true" {% endif %}>
<a href="{% url 'nominate' %}">Nomineren</a>
</li>
<li role="tab" {% if request.path == '/' %}aria-selected="true" {% endif %}>
<a href="/">Statistieken</a>
</li>
</menu>
<div class="window" role="tabpanel">
<div class="window-body">
{% block main-content %}{% endblock %}
</div>
</div>
</div>
</div>
<div class="window-body">
<menu role="tablist" hx-boost="true">
<li role="tab" {% if request.path == '/vote/' %}aria-selected="true" {% endif %}>
<a href="{% url 'vote' %}">Stemmen</a>
</li>
<li role="tab" {% if request.path == '/track/' %}aria-selected="true" {% endif %}>
<a href="{% url 'nominate' %}">Nomineren</a>
</li>
<li role="tab" {% if request.path == '/' %}aria-selected="true" {% endif %}>
<a href="/">Statistieken</a>
</li>
</menu>
<div class="window" role="tabpanel">
<div class="window-body">
{% block main-content %}{% endblock %}
</div>
</div>
{% block popup %}{% endblock %}
{% block clippy %}{% endblock %}
<script>
position = { x: 0, y: 0 }
interact('.title-bar').draggable({
listeners: {
move (event) {
position.x += event.dx
position.y += event.dy
event.target.parentElement.style.transform =
`translate(${position.x}px, ${position.y}px)`
},
}
})
</script>
</div>
</body>
</html>