clippy move

playlist/static/style.css

@@ -251,18 +251,18 @@ iframe {
 }
 
 /* Clippy */
-.clippy {
+#clippy {
 	position: fixed;
 	z-index:99;
-	right: 5px;
-	bottom: 0px;
 	display: flex;
 	flex-flow: column nowrap;
 	align-items: flex-end;
 	width: 256px;
+	left: 550px;
+	top: 340px;
 }
 
-.clippy .body {
+#clippy .body {
 	background: #ffffe0;
 	color: black;
 	padding: 10px;
@@ -271,16 +271,21 @@ iframe {
 	position: relative;
 }
 
-.clippy .body .content {
+#clippy .body .content {
 	max-height:calc(100vh - 197px);
 	overflow-y: scroll;
 }
 
 @media (max-width: 500px) {
-	.clippy {
+	#clippy {
 		width: calc(100vw - 10px);
+		top: unset;
+		left: unset;
+		transform: none !important;
+		bottom: 0;
+		right: 0;
 	}
-	.clippy .body.hide {
+	#clippy .body.hide {
 		display: none;
 	}
 	.body.hide ~ img {
@@ -288,11 +293,11 @@ iframe {
 	}
 }
 
-.clippy .body.hide {
+#clippy .body.hide {
 	display: none;
 }
 
-.clippy .body::after {
+#clippy .body::after {
   content: "";
   position: absolute;
   bottom: -13px;
@@ -304,7 +309,7 @@ iframe {
   width: 0;
 }
 
-.clippy .body::before {
+#clippy .body::before {
   content: "";
   position: absolute;
   bottom: -14px;
@@ -316,7 +321,7 @@ iframe {
   width: 0;
 }
 
-.clippy .body button {
+#clippy .body button {
 	background: lightyellow;
 	border: 1px #999 solid;
 	border-radius: 2px;
@@ -324,7 +329,7 @@ iframe {
 	margin-top: 5px;
 }
 
-.clippy img {
+#clippy img {
 	width: 128px;
 }
 

playlist/templates/Base.html

@@ -10,7 +10,8 @@
           {% block window-title %}{% endblock %}
         </div>
         <div class="title-bar-controls">
-          <button aria-label="Help" onclick="resetWindow()"></button>
+          <button aria-label="Minimize" onclick="resetWindow()"></button>
+          <button aria-label="Restore" onclick="resetWindow()"></button>
           <form action="{% url 'oidc_logout' %}" method="post">
             {% csrf_token %}
             <button aria-label="Close" onclick="hideWindow()"></button>
@@ -51,6 +52,8 @@
               position.y += event.dy
               event.target.parentElement.style.transform =
                 `translate(${position.x}px, ${position.y}px)`
+              document.getElementById("clippy").style.transform = 
+                `translate(${position.x}px, ${position.y}px)`
             },
           }
         })
@@ -64,6 +67,7 @@
       function resetWindow() {
         position.reset()
         document.getElementById("main-window").style.transform = '';
+        document.getElementById("clippy").style.transform = '';
       }
     </script>
 

playlist/templates/Clippy.html

@@ -6,7 +6,7 @@
     e.parentElement.classList.add("hide")
   }
 </script>
-<div class="clippy">
+<div id="clippy">
   <div class="body">
     <div class="content">{{ body }}</div>
     <br /><button onclick="closeclippy(this)">Ok</button>

playlist/templates/head.html

@@ -34,6 +34,8 @@
 				position.y = stored_position.y
 				document.getElementById("main-window").style.transform =
 					`translate(${position.x}px, ${position.y}px)`
+				document.getElementById("clippy").style.transform = 
+					`translate(${position.x}px, ${position.y}px)`
 			} else {
 				localStorage.removeItem("position")
 			}