From fdbdebca2a79c1159df1de82762f04be44106366 Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Tue, 20 Feb 2024 00:03:51 +0100
Subject: [PATCH] template update for nominate

---
 playlist/static/img/check.png    | Bin 0 -> 462 bytes
 playlist/static/img/error.png    | Bin 0 -> 451 bytes
 playlist/static/img/warning.png  | Bin 0 -> 458 bytes
 playlist/static/style.css        |  50 ++++++++++++++++++++++++++++++-
 playlist/templates/Base.html     |   4 +--
 playlist/templates/Nominate.html |  36 +++++++++++++++++-----
 6 files changed, 80 insertions(+), 10 deletions(-)
 create mode 100644 playlist/static/img/check.png
 create mode 100644 playlist/static/img/error.png
 create mode 100644 playlist/static/img/warning.png

diff --git a/playlist/static/img/check.png b/playlist/static/img/check.png
new file mode 100644
index 0000000000000000000000000000000000000000..b184ecc0723d5debc33c8ff6cdef666ee6488ce7
GIT binary patch
literal 462
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NSwWJ?9znhg
z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgAr#;f;tHfepn;*Gq2d4k
z{|62nkXBn23KU^13GxeOaCmkj4a7<Ec6VXv&$t-~<gk}``ns||Vi9IkHVasKEF37b
z#?!?yMB{w!#EZN~6gb*Uw;!nVQ^>r(cf-L}y$d`3>nv{&oAv8Li@yDQF{cVU&86El
zlbISOt^37XBX&{BVfUjo3-2&V?PQWFTrjJzw~pavgWGa;m%o!=2fZojP>E_~UDMFS
zy&<Wo*DuiLf_C7VX>N-o8t!kLtf8R&V&dWESdqs|tMY?g_x`mDv){O|z}WSR^VvIz
z-xf6r?Av5{#eqZr&F-^1n3_Lqe0_Z8f95<r^HyiG8&`ntRxNRjC`m~yNwrEYN(E93
zMh1o!x&|h?hL#})hE~R=R;DIEu9bm-x!Y`DxFTuD%}>cptHiCrO<MUQPy>UftDnm{
Hr-UW|V<()^

literal 0
HcmV?d00001

diff --git a/playlist/static/img/error.png b/playlist/static/img/error.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e84307f9b33596d2914d63e82dab21cae30fab2
GIT binary patch
literal 451
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NSwWJ?9znhg
z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fg!5`og;tEp0!0;bPHZ=VI
z|6j#?14xLmB*-tA!Qt7BG!Q4r+uenwKjUT~ki%Z$>Fdh=h)s$?OP819kUmgoiKmNW
zh{pNSiMIuhC~&wIUOFJ9J;9SP?M1@zf7wxSc1~$On;!4&U{aV^bWT2EqQA?U%4?ju
zZEAD*R!t5xu9R4o$$nIJdRY876XB9`A74H5oaA+nRXn^PZ;Q#^5H3*<;kk>vAFxF%
zVp{X0c-I5_ipa3wuIoWEJ&#_9$Q@s7Ki^-s=7MyKzu3WjZAlF8G8LlFJY20JZm_fR
zX6jXjl#OryFDU%Ste|H*;r{{`51@NhOI#yLQW8s2t&)pUffR$0fuV)2ftjw6S%`sw
um5Gs+iK(uEiIsuDBfZ*i6b-rgDVb@NxHU{JKKdG{fx*+&&t;ucLK6T`pObL_

literal 0
HcmV?d00001

diff --git a/playlist/static/img/warning.png b/playlist/static/img/warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..309941ee61f9a7e74e3b64fc650a848a88347ff1
GIT binary patch
literal 458
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NSwWJ?9znhg
z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgAsXNl;tEpG!0`V+!+`?_
z!0d+q|Np<Ud$a|}VJr#q3ubV5b|VeMN%D4gVM|QgQ48d-mw5WRvOi*zV$jlm%(fWh
zprxKJjv*T7WBU&Z9#-ICc{q{j(2hn9trGzbk51Irzt}&u;E=+}@5$+TM_Uy-&p(*_
z>G)pdK->HUCf5~C9e>Ffc|kh%Qr-ct3k8#0rrvkEBz<Q0#25$FOopj337!QZ2c|IO
zFa$TnKX@~VL1dY!`@g@xUdb^2Twa{Q@zyH6L69Lc;Mi0}$ps(mR8KN_Oj>(^>GUm|
z6S6McS+B44nzB1&nEiNlxakA?jx4*7d%yNp0v)Vc;u=wsl30>zm0Xkxq!^403@vmG
z%yf;+LJSP7OpL5d%ykV+tPBiFH|Er#Xvob^$xN%nt%2pul|w)c44$rjF6*2UngEZ}
Bp0WS{

literal 0
HcmV?d00001

diff --git a/playlist/static/style.css b/playlist/static/style.css
index 7cccadf..f96cfcb 100644
--- a/playlist/static/style.css
+++ b/playlist/static/style.css
@@ -6,7 +6,7 @@ body {
 	margin: 0;
 }
 
-.window:not([role="tabpanel"]) {
+#main-window {
 	position: fixed;
 	z-index:99;
 	min-height: 520px;
@@ -17,6 +17,53 @@ body {
 	display: flex;
 	flex-flow: column nowrap;
 	justify-content: space-between;
+	margin: 10px;
+}
+@media (max-width: 600px) {
+	#main-window {
+		margin: 0;
+		transform: none !important;
+	}
+}
+
+.hide {
+	display: none;
+}
+
+.window.popup {
+	position: fixed;
+	z-index: 100;
+	top: calc(50% - 75px);
+	left: calc(50% - 150px);
+	min-width: 300px;
+}
+
+.window.popup .window-body {
+	display: flex;
+	flex-flow: row nowrap;
+}
+.window.popup .window-body .text {
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: space-between;
+}
+
+.window.popup .window-body .icon {
+	width: 32px;
+	height: 32px;
+	padding: 16px;
+	background-position: center center;
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-image: url('img/check.png');
+}
+
+.window.popup .window-body .icon.error {
+	background-image: url('img/error.png');
+}
+
+.window.popup .window-body .icon.warning {
+	background-image: url('img/warning.png');
 }
 
 @media (max-width: 600px) {
@@ -29,6 +76,7 @@ body {
 .window {
 	flex-grow: 1;
 	flex-shrink: 0;
+	max-width:calc(100% - 5px);
 }
 
 .window.hide {
diff --git a/playlist/templates/Base.html b/playlist/templates/Base.html
index 8607386..2eb6a6a 100644
--- a/playlist/templates/Base.html
+++ b/playlist/templates/Base.html
@@ -5,7 +5,7 @@
   </head>
   <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
     <div class="window" id="main-window">
-      <div class="title-bar">
+      <div class="title-bar main-title-bar">
         <div class="title-bar-text">
           {% block window-title %}{% endblock %}
         </div>
@@ -39,7 +39,7 @@
     {% block clippy %}{% endblock %}
     <script>
       position.get_pos(); // Gets position from localStorage
-      interact('.title-bar').draggable({
+      interact('.main-title-bar').draggable({
         listeners: {
           move (event) {
             position.x += event.dx
diff --git a/playlist/templates/Nominate.html b/playlist/templates/Nominate.html
index 7e9856e..9307cfa 100644
--- a/playlist/templates/Nominate.html
+++ b/playlist/templates/Nominate.html
@@ -5,16 +5,38 @@ Nomineren
 {% endblock %}
 
 {% block main-content %}
-{% if warning %}
-<div class="info warning">{{nominated}}: {{warning}}</div>
-{% elif error %}
-<div class="info error">{{nominated}}: {{error}}</div>
-{% elif nominated %}
-<div class="info">{{nominated}} Genomineerd!</div>
-{% endif %}
 <form method="post">
     {% csrf_token %}
     <input type="text" name="spotify_link" placeholder="Spotify-link">
     <input type="submit" value="OK">
 </form>
+{% if nominated %}
+    <script>
+        function hidePopup() {
+            console.log("je moeder")
+            document.getElementById("info-window").classList.add("hide");
+        }
+    </script>
+    <div class="window popup" id="info-window">
+        <div class="title-bar">
+            <div class="title-bar-text">{{nominated}}</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 warning and 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 %}