mirror of
https://github.com/godotengine/godot-showreel-voting.git
synced 2026-09-03 18:15:13 +03:00
Update skip logic (#28)
* added link to video in admin view, truncated titles that are too long * added total vote counts to admin page, removed pagination on admin page * Track skipped videos in DB * suggest skipped videos if no others left
This commit is contained in:
Iñigo
GitHub
@@ -14,14 +14,20 @@
|
||||
</style>
|
||||
<main id="admin">
|
||||
<h1 style="margin-bottom: 20px;">Vote results</h1>
|
||||
<div>
|
||||
<p>Total votes: <strong>{{ total_votes }}</strong></p>
|
||||
<p>Positive votes: <strong>{{ positive_votes }}</strong></p>
|
||||
<p>Negative votes: <strong>{{ total_votes - positive_votes }}</strong></p>
|
||||
</div>
|
||||
<br>
|
||||
<form action="{{ url_for('votes.download_vote_results') }}" method="get" style="display:inline;">
|
||||
<button type="submit" class="button primary small">Download results .csv</button>
|
||||
</form>
|
||||
<div>
|
||||
<div class="entries">
|
||||
{% for entry in vote_tally.items %}
|
||||
{% for entry in vote_tally %}
|
||||
<div class="entry panel padded">
|
||||
<h2>{{ entry[0].game }}</h2>
|
||||
<h2><a href="{{ url_for('votes.video_view', video_id=entry[0].id) }}">{{ entry[0].game }}</a></h2>
|
||||
<p>Category: <strong>{{ entry[0].showreel.title }}</strong></p>
|
||||
<p>Author: <strong>{{ entry[0].author_name }}</strong></p>
|
||||
<p>Vote sum: <strong>{{ entry[1] }}</strong></p>
|
||||
@@ -29,8 +35,5 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% with elements=vote_tally, request_url="votes.admin_view", hx_target="#admin", strategy="outerHTML" %}
|
||||
{% include "pagination.html" with context %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
</main>
|
||||
117
templates/video-view.html
Normal file
117
templates/video-view.html
Normal file
@@ -0,0 +1,117 @@
|
||||
<style>
|
||||
iframe {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
height: auto;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
div.main {
|
||||
max-width: 134vh;
|
||||
}
|
||||
.col-2 {
|
||||
text-align: left;
|
||||
display: grid;
|
||||
margin: 20px 0px;
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
.thank-you {
|
||||
font-size: 1.3em;
|
||||
padding: 41px 50px;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
h1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
@media (min-width: 768px) {
|
||||
text-align: right;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
font-size: 18px;
|
||||
color: inherit;
|
||||
opacity: 0.8;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
progress {
|
||||
max-width: 190px;
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
position: relative;
|
||||
top: -8px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
div.main.title {
|
||||
margin-top: -20px;
|
||||
margin-bottom: -15px;
|
||||
padding-top: 10px;
|
||||
max-width: 100%;
|
||||
h1 {
|
||||
max-width: 40ch;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 auto;
|
||||
@media (min-width: 768px) {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
.col-2 {
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: 200px 1fr 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.truncate {
|
||||
max-width: 40ch;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
<div id="vote-view">
|
||||
<div style="background: black; color: white; margin-bottom: -20px; padding-bottom: 24px;">
|
||||
<div class="main title">
|
||||
<div class="col-2" style="margin-bottom: 0;">
|
||||
<div>
|
||||
<a href="/">
|
||||
<img class="logo" src="/static/images/nav-logo.svg" alt="Godot Showreel Voting">
|
||||
</a>
|
||||
</div>
|
||||
<h1 title="{{ data.game }}">{{ data.game }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="background: black; margin: 20px 0;">
|
||||
<div class="main">
|
||||
<iframe width="560" height="315" src="{{ data.youtube_embed }}?rel=0&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="panel padded" style="margin-top: 10px;">
|
||||
<h2>Submission info:</h2>
|
||||
<div class="col-2">
|
||||
<p class="truncate" title="{{ data.game }}">Project: <strong>{{ data.game }}</strong></p>
|
||||
<p>Video Link: <a href="{{ data.video_link }}" target="_blank">{{ data.video_link }}</a></p>
|
||||
<p>Author: <strong>{{ data.author }}</strong></p>
|
||||
<p>Store Link: <a href="{{ data.store_link }}" target="_blank">{{ data.store_link }}</a></p>
|
||||
<p>Category: <strong>{{ data.category }}</strong></p>
|
||||
<p>Follow them: <a href="{{ data.follow_me_link }}" target="_blank">{{ data.follow_me_link }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,6 +56,11 @@
|
||||
padding-top: 10px;
|
||||
max-width: 100%;
|
||||
h1 {
|
||||
max-width: 40ch;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 auto;
|
||||
@media (min-width: 768px) {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
@@ -68,6 +73,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.truncate {
|
||||
max-width: 40ch;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
<div id="vote-view">
|
||||
{% if not data %}
|
||||
@@ -88,7 +99,7 @@
|
||||
<img class="logo" src="/static/images/nav-logo.svg" alt="Godot Showreel Voting">
|
||||
</a>
|
||||
</div>
|
||||
<h1>{{ data.game }}</h1>
|
||||
<h1 title="{{ data.game }}">{{ data.game }}</h1>
|
||||
<div style="display: grid; align-content: end;">
|
||||
<div class="progress">
|
||||
<a href="/history">
|
||||
@@ -115,7 +126,7 @@
|
||||
{{ cast_vote_form.csrf_token }}
|
||||
{{ cast_vote_form.video_id(value=data.id, hidden=True) }}
|
||||
<button id="downvote" type="submit" name="action" value="downvote" class="button tertiary" title="Shortcut: 'A' or 'Q' keys">No 👎</button>
|
||||
<button id="skip" type="submit" name="action" value="skip" class="button dim" title="Shortcut: 'S' key">Skip ⏭️</button>
|
||||
<button id="skip" type="submit" name="action" value="skip" class="button dim" title="Shortcut: 'S' key. You need to wait 3 seconds before skipping." disabled>Skip ⏭️</button>
|
||||
<button id="upvote" type="submit" name="action" value="upvote" class="button primary" title="Shortcut: 'D' key">Yes 👍</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -124,7 +135,7 @@
|
||||
<div class="panel padded" style="margin-top: 10px;">
|
||||
<h2>Submission info:</h2>
|
||||
<div class="col-2">
|
||||
<p>Project: <strong>{{ data.game }}</strong></p>
|
||||
<p class="truncate" title="{{ data.game }}">Project: <strong>{{ data.game }}</strong></p>
|
||||
<p>Video Link: <a href="{{ data.video_link }}" target="_blank">{{ data.video_link }}</a></p>
|
||||
<p>Author: <strong>{{ data.author }}</strong></p>
|
||||
<p>Store Link: <a href="{{ data.store_link }}" target="_blank">{{ data.store_link }}</a></p>
|
||||
@@ -151,4 +162,11 @@
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// enable skip button after 5 seconds
|
||||
setTimeout(function() {
|
||||
document.getElementById("skip").disabled = false;
|
||||
}, 3000);
|
||||
</script>
|
||||
Reference in New Issue
Block a user