styling updates, button functions

playlist/templates/Base.html

@@ -10,8 +10,11 @@
           {% block window-title %}{% endblock %}
         </div>
         <div class="title-bar-controls">
-          <button aria-label="Help"></button>
-          <button aria-label="Close"></button>
+          <button aria-label="Help" onclick="resetWindow()"></button>
+          <form action="{% url 'oidc_logout' %}" method="post">
+            {% csrf_token %}
+            <button aria-label="Close" onclick="hideWindow()"></button>
+          </form>
         </div>
       </div>
       <div class="window-body">
@@ -46,6 +49,15 @@
           },
         }
       })
+
+      function hideWindow() {
+        document.getElementById("main-window").classList.add("hide");
+      }
+
+      function resetWindow() {
+        position.reset()
+        document.getElementById("main-window").style.transform = '';
+      }
     </script>
 
   </body>

playlist/templates/Clippy.html

@@ -8,7 +8,7 @@
 </script>
 <div class="clippy">
   <div class="body">
-    {{ body }}
+    <div class="content">{{ body }}</div>
     <br /><button onclick="closeclippy(this)">Ok</button>
   </div>
   {% if img %}

playlist/templates/Vote.html

@@ -15,11 +15,13 @@ Stemmen
     {% 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>
+    <h1 title="{{track.name}}">{{track.name}}</h1>
+    <h2 title="{{track.artist}}">{{track.artist}}</h2>
   </div>
   <input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
-  <button id="playpause">⏵️</button>
+  <div class="media-control">
+    <button id="playpause">⏵️</button>
+  </div>
 
   <div
     id="vote-buttons"

playlist/templates/head.html

@@ -35,5 +35,10 @@
 				localStorage.removeItem("position")
 			}
 		},
+		reset() {
+			this._x = 0
+			this._y = 0
+			localStorage.removeItem("position")
+		}
 	}
 </script>