From c7bd7fda9b7d59932718d85bf484ea029c6d5987 Mon Sep 17 00:00:00 2001 From: Mark Hoekveen Date: Tue, 13 Feb 2024 23:44:59 +0100 Subject: [PATCH] Clippy update Plus some refactors of the templates and styling --- muzak/settings.py | 2 +- playlist/static/style.css | 93 +++++++++++++++++++++++++++- playlist/templates/Base.html | 75 ++++++++++++---------- playlist/templates/Clippy.html | 17 +++++ playlist/templates/SpotifyEmbed.html | 75 ---------------------- playlist/templates/Vote.html | 74 +++++++++++++++++++++- playlist/urls.py | 3 +- playlist/views.py | 17 +---- 8 files changed, 226 insertions(+), 130 deletions(-) create mode 100644 playlist/templates/Clippy.html delete mode 100644 playlist/templates/SpotifyEmbed.html diff --git a/muzak/settings.py b/muzak/settings.py index 9bfdf25..b7ecac3 100644 --- a/muzak/settings.py +++ b/muzak/settings.py @@ -12,7 +12,7 @@ SECRET_KEY = 'oefjei1lwe918Alkfwuf3ionwu-@kt)6m1e)ah$&^_i9y!qffhm-a$#m6+++' # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True -ALLOWED_HOSTS = [] +ALLOWED_HOSTS = ['*'] INSTALLED_APPS = [ diff --git a/playlist/static/style.css b/playlist/static/style.css index 5755cda..873e05a 100644 --- a/playlist/static/style.css +++ b/playlist/static/style.css @@ -1,8 +1,9 @@ -.popup { +.window:not([role="tabpanel"]) { position: fixed; z-index:99; min-width: 380px; - max-width:540px; + min-height: 520px; + width:max(560px, 50vw); resize: both; overflow-y:scroll; overflow-x:visible; @@ -11,12 +12,38 @@ justify-content: space-between; } +@media (max-width: 600px) { + .window:not([role="tabpanel"]) { + left: 0; + width: calc(100% - 6px); + } +} + +.window { + flex-grow: 1; + flex-shrink: 0; +} + +.window-body { + flex-grow: 1; + display: flex; + flex-flow: column nowrap; +} + +/* tab menu fix */ +menu[role="tablist"] > li > a { + padding: 6px; + margin: 0; +} + iframe { opacity: 0; position: fixed; left: 100%; } +/* Media player */ + #album { background: black; width: 100%; @@ -58,5 +85,65 @@ input[type="range"]::-moz-range-thumb { background: transparent; border: 3px solid lightgray; border-bottom-color: darkgrey; - box-shadow: 1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9; +} + +/* Clippy */ +.clippy { + position: fixed; + z-index:99; + right: 5px; + bottom: 0px; + display: flex; + flex-flow: column nowrap; + align-items: flex-end; + width: 256px; +} + +.clippy .body { + background: lightyellow; + color: black; + padding: 10px; + border-radius: 10px; + border: 1px solid black; + position: relative; +} + +.clippy .body.hide { + display: none; +} + +.clippy .body::after { + content: ""; + position: absolute; + bottom: -13px; + left: 128px; + border-width: 13px 17px 0; + border-style: solid; + border-color: lightyellow transparent; + display: block; + width: 0; +} + +.clippy .body::before { + content: ""; + position: absolute; + bottom: -14px; + left: 126px; + border-width: 14px 19px 0; + border-style: solid; + border-color: black transparent; + display: block; + width: 0; +} + +.clippy .body button { + background: lightyellow; + border: 1px #999 solid; + border-radius: 2px; + box-shadow: none; + margin-top: 5px; +} + +.clippy img { + width: 128px; } diff --git a/playlist/templates/Base.html b/playlist/templates/Base.html index b6bdb05..8e94d36 100644 --- a/playlist/templates/Base.html +++ b/playlist/templates/Base.html @@ -10,41 +10,52 @@ - -
-
-
-
- -
-
-
- {% block window-title %}{% endblock %} + +
+
+
+ {% block window-title %}{% endblock %} +
+
+ + +
-
- - +
+ +
  • + Stemmen +
    • +
  • + Nomineren +
    • +
  • + Statistieken +
    • +     +
    +
    + {% block main-content %}{% endblock %} +
    +
    -
    - -
  • - Stemmen -
    • -
  • - Nomineren -
    • -
  • - Statistieken -
    • -     -
    -
    - {% block main-content %}{% endblock %} -
    -
    - {% block popup %}{% endblock %} + {% block clippy %}{% endblock %} + -
    diff --git a/playlist/templates/Clippy.html b/playlist/templates/Clippy.html new file mode 100644 index 0000000..fabee27 --- /dev/null +++ b/playlist/templates/Clippy.html @@ -0,0 +1,17 @@ +{% load static %} + +
    +
    + {{ body }} +
    +
    + {% if img %} + + {% endif %} +
    + diff --git a/playlist/templates/SpotifyEmbed.html b/playlist/templates/SpotifyEmbed.html deleted file mode 100644 index 5d1e4ce..0000000 --- a/playlist/templates/SpotifyEmbed.html +++ /dev/null @@ -1,75 +0,0 @@ -{% if track %} -
    - {% if error %}
    {{ error }}
    {% endif %} -
    -
    - {% if track.album.image_url %} - - {% else %} - - {% endif %} -

    {{track.name}}

    -

    {{track.artist}}

    -
    - - - -
    -
    - Dit vind ik een leuk nummer! - - - - - -
    -
    - {% if track.banter %} - {% block popup %} - {% include "Popup.html" with body=track.banter title=track img="img/draakje/draakje-headphones3.gif" %} - {% endblock %} - {% endif %} -
    - +{% else %} +

    + Je hebt niets meer om te stemmen. Lekker bezig! + Nomineer zelf iets, als je nog quota hebt. +

    +{% endif %} {% endblock %} + +{% block clippy %} + {% include "Clippy.html" with body=track.banter img="img/draakje/draakje-headphones3.gif" %} +{% endblock %} \ No newline at end of file diff --git a/playlist/urls.py b/playlist/urls.py index 35aebfe..2ab9ac3 100644 --- a/playlist/urls.py +++ b/playlist/urls.py @@ -2,10 +2,9 @@ from django.urls import path from . import views urlpatterns = [ - path('track/', views.TrackDetailView.as_view(), name="track-detail"), path('track/', views.NominateView.as_view(), name="nominate"), path('track//banter', views.BanterView.as_view(), name="track-banter"), path('vote/', views.VoteView.as_view(), name="vote"), - path('vote/track', views.VoteTrackView.as_view(), name="vote-track"), + #path('vote/track', views.VoteTrackView.as_view(), name="vote-track"), path('', views.AuthView.as_view()), ] diff --git a/playlist/views.py b/playlist/views.py index c324bfb..2077b8d 100644 --- a/playlist/views.py +++ b/playlist/views.py @@ -15,23 +15,10 @@ class AuthView(View): def get(self, request): return TemplateResponse(request, "Login.html", {}) -class TrackDetailView(LoginRequiredMixin, View): - def get(self, request, spotify_id): - try: - track = Track.objects.get(pk=spotify_id) - return HttpResponse(str(track)) - except Track.DoesNotExist: - return HttpResponse("No track") - class VoteView(LoginRequiredMixin, View): - def get(self, request): - songs = Track.objects.all() - return TemplateResponse(request, "Vote.html", {"songs": songs}) - -class VoteTrackView(LoginRequiredMixin, View): def get(self, request, error=None): track = get_unvoted(request.user) - return TemplateResponse(request, "SpotifyEmbed.html", {"track": track, "error": error}) + return TemplateResponse(request, "Vote.html", {"track": track, "error": error}) def post(self, request): try: spotify_id = self.request.POST['spotify_id'] @@ -41,7 +28,7 @@ class VoteTrackView(LoginRequiredMixin, View): try: Vote.objects.get(user=request.user, track=track) except Vote.DoesNotExist: - pass #expected behaviour + pass else: raise Exception(f"{request.user} already voted for {track}") Vote.objects.create(track=track, user=request.user, points=score)