styling updates, button functions

playlist/static/style.css

@@ -1,11 +1,14 @@
 body {
 	background-color: #01817F;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	margin: 0;
 }
 
 .window:not([role="tabpanel"]) {
 	position: fixed;
 	z-index:99;
-	min-width: 380px;
 	min-height: 520px;
 	width:max(560px, 50vw);
 	resize: both;
@@ -28,6 +31,14 @@ body {
 	flex-shrink: 0;
 }
 
+.window.hide {
+	display:none;
+}
+
+.window form {
+	margin: 0;
+}
+
 .window-body {
 	flex-grow: 1;
 	display: flex;
@@ -60,6 +71,10 @@ iframe {
 #album h1, #album h2 {
 	color: white;
 	margin: 0;
+	overflow: hidden;
+	max-width: 100%;
+	white-space: nowrap;
+	text-overflow:ellipsis;
 }
 
 #album h1 {
@@ -112,6 +127,23 @@ input[type="range"]::-moz-range-thumb {
 	position: relative;
 }
 
+.clippy .body .content {
+	max-height:calc(100vh - 197px);
+	overflow-y: scroll;
+}
+
+@media (max-width: 500px) {
+	.clippy {
+		width: calc(100vw - 10px);
+	}
+	.clippy .body.hide {
+		display: none;
+	}
+	.body.hide ~ img {
+		display:none;
+	}
+}
+
 .clippy .body.hide {
 	display: none;
 }
@@ -120,7 +152,7 @@ input[type="range"]::-moz-range-thumb {
   content: "";
   position: absolute;
   bottom: -13px;
-  left: 128px;
+  right: 128px;
   border-width: 13px 17px 0;
   border-style: solid;
   border-color: lightyellow transparent;
@@ -132,7 +164,7 @@ input[type="range"]::-moz-range-thumb {
   content: "";
   position: absolute;
   bottom: -14px;
-  left: 126px;
+  right: 127px;
   border-width: 14px 19px 0;
   border-style: solid;
   border-color: black transparent;

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="Help" onclick="resetWindow()"></button>
-          <button aria-label="Close"></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>
+    <h1 title="{{track.name}}">{{track.name}}</h1>
-    <h2>{{track.artist}}</h2>
+    <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>