Make popup qr codes for external links (#541)

f-klubben · Dec 25, 2024 · 629c121 · 629c121
1 parent fa8e769
commit 629c121
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 10 deletions.
diff --git a/stregsystem/static/stregsystem/external_link_qrs/code.svg b/stregsystem/static/stregsystem/external_link_qrs/code.svg
diff --git a/stregsystem/static/stregsystem/external_link_qrs/tos.svg b/stregsystem/static/stregsystem/external_link_qrs/tos.svg
diff --git a/stregsystem/static/stregsystem/stregsystem.css b/stregsystem/static/stregsystem/stregsystem.css
@@ -69,16 +69,47 @@ ol span {
     font-weight: normal;
 }
 
-button.linkalike {
-  background: none;
-  border: none;
+button {
   cursor: pointer;
-  font: inherit;
-  text-decoration: underline;
-  color: LinkText;
 
-  &:active{
-    color: ActiveText;
+    &.linkalike {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    text-decoration: underline;
+    color: LinkText;
+
+    &:active{
+      color: ActiveText;
+    }
+  }
+}
+
+.external-link-popover {
+  font-size: 1.5em;
+  padding: 1em;
+
+  & p {
+    margin: 0;
+  }
+  & button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .1em;
+    background: none;
+    border: none;
+
+    & svg {
+      width: 2.2em;
+      height: 2.2em;
+    }
+  }
+  & img {
+    width: 100vw;
+    max-width: 40vmin;
+    max-height: 40vmin;
   }
 }
 

diff --git a/stregsystem/templates/stregsystem/base.html b/stregsystem/templates/stregsystem/base.html
@@ -53,8 +53,8 @@ <h1>
   </div>
   <ul id="footer-notes">
     <li>Skabt med ☕ og 🖤 af Fklubben</li>
-    <li><a target="_blank" href="https://fklub.dk/tos">Terms of Service</a></li>
-    <li><a target="_blank" href="https://github.com/f-klubben/stregsystemet">Se koden</a></li>
+    <li>{% include "./external_link.html" with id="tos" href="https://fklub.dk/tos" text="Terms of Service" %}</li>
+    <li>{% include "./external_link.html" with id="code" href="https://github.com/f-klubben/stregsystemet" text="Se koden" %}</li>
   </ul>
 </footer>
 {% theme_content %}

diff --git a/stregsystem/templates/stregsystem/cross.html b/stregsystem/templates/stregsystem/cross.html
@@ -0,0 +1,13 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	version="1.1"
+	viewBox="0 -960 960 960"
+	width="24"
+	height="24"
+>
+	<title>{{ title }}</title>
+	<path
+		fill="currentcolor"
+		d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
+	/>
+</svg>
diff --git a/stregsystem/templates/stregsystem/external_link.html b/stregsystem/templates/stregsystem/external_link.html
@@ -0,0 +1,11 @@
+{% load static %}
+
+<button class="external-link" popovertarget="external-link-popover-{{ id }}">
+	{{ text }}
+</button>
+<div popover id="external-link-popover-{{ id }}" class="external-link-popover">
+	<p>{{ text }}</p>
+	<button autofocus popovertarget="external-link-popover-{{ id }}">{% include "./cross.html" with title="Luk" %}</button>
+	<img alt="" src="{% static "/stregsystem/external_link_qrs/" %}{{ id }}.svg"/>
+	<p>{{ href }}</p>
+</div>