mark/muzak
2
0
Fork 0
Code Issues Pull Requests Activity

Voegt stijl toe

Browse Source 
En wat voor een stijl. Damn.
This commit is contained in:
Mark Hoekveen
2024-02-12 02:06:28 +01:00
parent 66e69bc23d
commit 963ab7f0bf
13 changed files with 137 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
playlist/templates/Banter.html
+7 -8
View File
@@ -1,14 +1,13 @@
{% load static %}
<div
class="banter"
hx-get="{% url 'track-banter' track.id %}"
id="banter"
{% if not track.banter_done %}
hx-trigger="every {% if track.banter %}500ms{% else %}5s{% endif %}"
hx-get="{% url 'track-banter' track.id %}"
hx-trigger="load delay:{% if track.banter %}500ms{% else %}5s{% endif %}"
{% endif %}
hx-swap="outerHTML"
hx-target="#banter"
>
{% if track.banter != "" %}
{{track.banter}}
{% else %}
{{ waiting | random }}
{% endif %}
{% include "Popup.html" with body=track.banter title=track img="img/draakje/draakje-headphones3.gif" %}
</div>
</div>
playlist/templates/Base.html
+41 -10
View File
@@ -1,21 +1,52 @@
<html>
<head>
{% load static %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="{% static 'js/htmx.min.js' %}" defer></script>
<script src="https://unpkg.com/interactjs"></script>
<link
rel="stylesheet"
href="https://unpkg.com/98.css"
>
<link href="{% static 'style.css'%}" rel="stylesheet" type="text/css" />
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' style="background:#01817F;">
<header>
<nav>
<ul hx-boost="true">
<li><a href="{% url 'vote' %}">Stemmen</a></li>
<li><a href="{% url 'nominate' %}">Nomineren</a></li>
<li><a href="/">Statistieken</a></li>
</ul>
</nav>
<h1>{% block page-name %}Muzak{% endblock %}</h1>
</header>
<main>
{% block main-content %}{% endblock %}
</main>
<div class="window" style="max-width:960px">
<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="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 %}
</div>
</body>
</html>
playlist/templates/Nominate.html
+4 -2
View File
@@ -1,7 +1,10 @@
{% extends "Base.html" %}
{% block window-title %}
Nomineren
{% endblock %}
{% block main-content %}
<h2>Nominate</h2>
{% if warning %}
<div class="info warning">{{warning}}</div>
{% endif %}
@@ -14,7 +17,6 @@
<input type="submit" value="OK">
</form>
{% if nominated %}
<div class="info">{% if error %}❌{% else %}✅{% endif %} {{nominated}}</div>
{% include "Banter.html" with track=nominated %}
{% endif %}
{% endblock %}
playlist/templates/Popup.html
+31
View File
@@ -0,0 +1,31 @@
{% load static %}
<div class="window popup">
<div class="title-bar">
<div class="title-bar-text">{{title}}</div>
</div>
<div class="window-body">
{{ body }}
{% if img %}
<br /><img src="{% static img %}" />
{% endif %}
</div>
<div class="status-bar">
<p class="status-bar-field">{{title}}</p>
<p class="status-bar-field">CPU Usage: 14%</p>
</div>
</div>
<script>
position = { x: 0, y: 0 }
interact('.popup .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>
playlist/templates/SpotifyEmbed.html
+37 -22
View File
@@ -2,30 +2,45 @@
<div id="vote-box" hx-target="#vote-box">
{% if error %}<div class="error">{{ error }}</div>{% endif %}
<iframe src="https://open.spotify.com/embed/track/{{ track.id }}"
class="play-sample" width="300" height="380" frameborder="0" allowtransparency="true"
class="play-sample"
width="100%"
height="352"
frameborder="0"
allow="encrypted-media"></iframe>
<div id="vote-buttons" hx-vals='{"spotify_id": "{{ track.id }}"}'>
<button
hx-vals='{"vote": "2"}'
hx-post="{% url 'vote-track' %}"
>Helemaal mee eens</button>
<button
hx-vals='{"vote": "1"}'
hx-post="{% url 'vote-track' %}"
>Mee eens</button>
<button
hx-vals='{"vote": "0"}'
hx-post="{% url 'vote-track' %}"
>Neutraal</button>
<button
hx-vals='{"vote": "-1"}'
hx-post="{% url 'vote-track' %}"
>Niet mee eens</button>
<button
hx-vals='{"vote": "-2"}'
hx-post="{% url 'vote-track' %}"
>Helemaal niet mee eens</button>
<div
id="vote-buttons"
hx-vals='{"spotify_id": "{{ track.id }}"}'
style="margin-top:10px;"
>
<fieldset>
<legend>Dit vind ik een leuk nummer!</legend>
<button
hx-vals='{"vote": "2"}'
hx-post="{% url 'vote-track' %}"
>Helemaal mee eens</button>
<button
hx-vals='{"vote": "1"}'
hx-post="{% url 'vote-track' %}"
>Mee eens</button>
<button
hx-vals='{"vote": "0"}'
hx-post="{% url 'vote-track' %}"
>Neutraal</button>
<button
hx-vals='{"vote": "-1"}'
hx-post="{% url 'vote-track' %}"
>Niet mee eens</button>
<button
hx-vals='{"vote": "-2"}'
hx-post="{% url 'vote-track' %}"
>Helemaal niet mee eens</button>
</fieldset>
</div>
{% if track.banter %}
{% block popup %}
{% include "Popup.html" with body=track.banter title=track img="img/draakje/draakje-headphones3.gif" %}
{% endblock %}
{% endif %}
</div>
{% else %}
<p hx-boost="true">
playlist/templates/Vote.html
+4 -1
View File
@@ -1,7 +1,10 @@
{% extends "Base.html" %}
{% block window-title %}
Stemmen
{% endblock %}
{% block main-content %}
<h2>Lekker stemmen</h2>
<div hx-get="{% url 'vote-track' %}" hx-trigger="load">
Laden...
</div>