Template refactors

En iets met de playlist-maker. URLs opnieuw ingedeeld.

playlist/templates/Base.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       <div class="window-body">
-        <menu role="tablist" hx-boost="true">
+        <menu role="tablist" hx-boost="true" class="multirows">
           <li role="tab" {% if request.path == '/vote/' %}aria-selected="true" {% endif %}>
             <a href="{% url 'vote' %}">Stemmen</a>
           </li>
@@ -33,8 +33,37 @@
             <a href="{% url 'settings' %}">Instellingen</a>
           </li>
         </menu>
+        {% block multi-row %}{% endblock %}
         <div class="window" role="tabpanel">
           <div class="window-body">
+            {% if message_type %}
+              <script>
+                function hidePopup() {
+                  document.getElementById("info-window").classList.add("hide");
+                }
+              </script>
+              <div class="window popup" id="info-window">
+                <div class="title-bar">
+                  <div class="title-bar-text">
+                    {% if message_title %}{{message_title}}{% else %}{{message_type | title}}{% endif %}
+                  </div>
+                  <div class="title-bar-controls">
+                      <button aria-label="Close" onclick="hidePopup()"></button>
+                  </div>
+                </div>
+                <div class="window-body">
+                  <div class="icon {{message_type}}"></div>
+                  <div class="text">
+                      <div>
+                        {{message}}
+                      </div>
+                      <section class="field-row" style="justify-content: flex-end">
+                          <button onclick="hidePopup()">Ok</button>
+                      </section>
+                  </div>
+                </div>
+              </div>
+            {% endif %}
             {% block main-content %}{% endblock %}
           </div>
         </div>

playlist/templates/Nominate.html

@@ -11,42 +11,6 @@ Nomineren
     <input type="text" id="spotify-input" name="spotify_link" placeholder="Spotify-link">
     <input type="submit" value="Insturen" {% if user.profile.quota < 1%}disabled{%endif%}>
 </form>
-{% if nominated or error or warning %}
-    <script>
-        function hidePopup() {
-            document.getElementById("info-window").classList.add("hide");
-        }
-    </script>
-    <div class="window popup" id="info-window">
-        <div class="title-bar">
-            <div class="title-bar-text">
-                {% if nominated %}
-                    {{nominated}}
-                {% elif error %}
-                    Error
-                {% else %}
-                    Let op!
-                {% endif %}
-            </div>
-            <div class="title-bar-controls">
-                <button aria-label="Close" onclick="hidePopup()"></button>
-            </div>
-        </div>
-        <div class="window-body">
-            <div class="icon {% if warning %}warning{% elif error %}error{% endif %}"></div>
-            <div class="text">
-                <div>
-                    {{warning}}
-                    {{error}}
-                    {% if not error %}Genomineerd!{% endif %}
-                </div>
-                <section class="field-row" style="justify-content: flex-end">
-                    <button onclick="hidePopup()">Ok</button>
-                </section>
-            </div>
-        </div>
-    </div>
-{% endif %}
 {% endblock %}
 
 {% block status-bar%}

playlist/templates/Overview.html

@@ -4,6 +4,17 @@
 Overzicht
 {% endblock %}
 
+{% block multi-row %}
+  <menu role="tablist" hx-boost="true" class="multirows">
+    <li role="tab" aria-selected="true">
+      <a href="{% url 'overview' %}">Tracks</a>
+    </li>
+    <li role="tab">
+      <a href="{% url 'playlist-list' %}">Playlists</a>
+    </li>
+  </menu>
+{% endblock %}
+
 {% block main-content %}
 <p>Onderstaand alle nummers waar je al op gestemd hebt.</p>
 <ul class="tree-view overview"> 

playlist/templates/Popup.html

@@ -1,31 +1,17 @@
 {% load static %}
-<div class="window popup">
+<script>
+  function hidePopup() {
+    document.getElementById("info-window").classList.add("hide");
+  }
+</script>
+<div class="window popup" id="info-window">
   <div class="title-bar">
-    <div class="title-bar-text">{{title}}</div>
+    <div class="title-bar-text">
+      {{title}}
+      <button aria-label="Close" onclick="hidePopup()"></button>
+    </div>
   </div>
   <div class="window-body">
-    {{ body }}
-    {% if img %}
-    <br /><img src="{% static img %}" />
-    {% endif %}
+    {{body}}
   </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>
+</div>

playlist/templates/Settings.html

@@ -24,7 +24,7 @@ Instellingen
     </div>
   </form>
   {% else %}
-  <form action="{% url 'spotify' %}">
+  <form action="{% url 'spotify-callback' %}">
     <div class="field-row settings">
       <label>Link je spotify:</label>
       <input type="submit" value="" class="icon spotify" />