Clippy update
Plus some refactors of the templates and styling
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
{% load static %}
|
||||
<script>
|
||||
function closeclippy(e) {
|
||||
console.log(e)
|
||||
e.parentElement.classList.add("hide")
|
||||
}
|
||||
</script>
|
||||
<div class="clippy">
|
||||
<div class="body">
|
||||
{{ body }}
|
||||
<br /><button onclick="closeclippy(this)">Ok</button>
|
||||
</div>
|
||||
{% if img %}
|
||||
<img src="{% static img %}" />
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
{% if track %}
|
||||
<div id="vote-box" hx-target="#vote-box">
|
||||
{% if error %}<div class="error">{{ error }}</div>{% endif %}
|
||||
<div id="embed"></div>
|
||||
<div id="album">
|
||||
{% if track.album.image_url %}
|
||||
<img src="{{track.album.image_url}}" />
|
||||
{% else %}
|
||||
<img src="https://kagi.com/proxy/windows-95-logo-png-1.png?c=xjdP8sWN58YWflc6NcGN5ZvzREJyOwtrou-TSsaXxcx37J0VVJbSeycOcAptMJEUpzzvqmbKQ3JRuSmPN8HCK43OxjkRe_cQvncxVzlCblc%3D" />
|
||||
{% endif %}
|
||||
<h1>{{track.name}}</h1>
|
||||
<h2>{{track.artist}}</h2>
|
||||
</div>
|
||||
<input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
|
||||
<button id="playpause">||</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>
|
||||
<script>
|
||||
window.onSpotifyIframeApiReady = (IFrameAPI) => {
|
||||
let element = document.getElementById('embed');
|
||||
let options = {
|
||||
uri: 'spotify:track:{{track.id}}'
|
||||
};
|
||||
const callback = (EmbedController) => {
|
||||
document.getElementById("playpause").addEventListener('click', () => {
|
||||
//EmbedController.loadUri(episode.dataset.spotifyId)
|
||||
EmbedController.togglePlay()
|
||||
});
|
||||
EmbedController.addListener('playback_update', e => {
|
||||
console.log(e);
|
||||
document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
|
||||
})
|
||||
};
|
||||
IFrameAPI.createController(element, options, callback);
|
||||
};
|
||||
{% else %}
|
||||
<p hx-boost="true">
|
||||
Je hebt niets meer om te stemmen. Lekker bezig!
|
||||
<a href="{% url 'nominate' %}">Nomineer zelf iets</a>, als je nog quota hebt.
|
||||
</p>
|
||||
{% endif %}
|
||||
@@ -5,7 +5,77 @@ Stemmen
|
||||
{% endblock %}
|
||||
|
||||
{% block main-content %}
|
||||
<div hx-get="{% url 'vote-track' %}" hx-trigger="load">
|
||||
Laden...
|
||||
{% if track %}
|
||||
<div id="vote-box" hx-target="body">
|
||||
{% if error %}<div class="error">{{ error }}</div>{% endif %}
|
||||
<div id="embed"></div>
|
||||
<div id="album">
|
||||
{% if track.album.image_url %}
|
||||
<img src="{{track.album.image_url}}" />
|
||||
{% else %}
|
||||
<img src="https://kagi.com/proxy/windows-95-logo-png-1.png?c=xjdP8sWN58YWflc6NcGN5ZvzREJyOwtrou-TSsaXxcx37J0VVJbSeycOcAptMJEUpzzvqmbKQ3JRuSmPN8HCK43OxjkRe_cQvncxVzlCblc%3D" />
|
||||
{% endif %}
|
||||
<h1>{{track.name}}</h1>
|
||||
<h2>{{track.artist}}</h2>
|
||||
</div>
|
||||
<input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
|
||||
<button id="playpause">⏵️</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' %}"
|
||||
>Helemaal mee eens</button>
|
||||
<button
|
||||
hx-vals='{"vote": "1"}'
|
||||
hx-post="{% url 'vote' %}"
|
||||
>Mee eens</button>
|
||||
<button
|
||||
hx-vals='{"vote": "0"}'
|
||||
hx-post="{% url 'vote' %}"
|
||||
>Neutraal</button>
|
||||
<button
|
||||
hx-vals='{"vote": "-1"}'
|
||||
hx-post="{% url 'vote' %}"
|
||||
>Niet mee eens</button>
|
||||
<button
|
||||
hx-vals='{"vote": "-2"}'
|
||||
hx-post="{% url 'vote' %}"
|
||||
>Helemaal niet mee eens</button>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
window.onSpotifyIframeApiReady = (IFrameAPI) => {
|
||||
let element = document.getElementById('embed');
|
||||
let options = {
|
||||
uri: 'spotify:track:{{track.id}}'
|
||||
};
|
||||
const callback = (EmbedController) => {
|
||||
document.getElementById("playpause").addEventListener('click', () => {
|
||||
EmbedController.togglePlay()
|
||||
});
|
||||
EmbedController.addListener('playback_update', e => {
|
||||
document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
|
||||
})
|
||||
};
|
||||
IFrameAPI.createController(element, options, callback);
|
||||
};
|
||||
</script>
|
||||
{% else %}
|
||||
<p hx-boost="true">
|
||||
Je hebt niets meer om te stemmen. Lekker bezig!
|
||||
<a href="{% url 'nominate' %}">Nomineer zelf iets</a>, als je nog quota hebt.
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block clippy %}
|
||||
{% include "Clippy.html" with body=track.banter img="img/draakje/draakje-headphones3.gif" %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user