From 858c6d4468c528912e5271ad8d72fcf20a970502 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Tue, 17 Dec 2024 22:46:01 +0100
Subject: [PATCH] feat: Use real toggle

---
 .../static/fellchensammlung/css/styles.css    | 51 +++++++++++++++++++
 .../fellchensammlung/details/detail-user.html | 18 +++++--
 2 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css
index 8cb2b33..278c0b1 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/styles.css
+++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css
@@ -210,6 +210,57 @@ select, .button {
     margin: 5px;
 }
 
+.switch {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.toggle-switch {
+  display: inline-block;
+  background: #ccc;
+  border-radius: 16px;
+  width: 58px;
+  height: 32px;
+  position: relative;
+  vertical-align: middle;
+  transition: background 0.25s;
+}
+.toggle-switch:before, .toggle-switch:after {
+  content: "";
+}
+.toggle-switch:before {
+  display: block;
+  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  transition: left 0.25s;
+}
+.toggle:hover .toggle-switch:before {
+  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+}
+.checked + .toggle-switch {
+  background: #56c080;
+}
+.checked + .toggle-switch:before {
+  left: 30px;
+}
+
+.toggle-checkbox {
+  position: absolute;
+  visibility: hidden;
+}
+
+.slider-label {
+    margin-left: 5px;
+    position: relative;
+    top: 2px;
+}
 
 /*********************/
 /* UNIQUE COMPONENTS */
diff --git a/src/fellchensammlung/templates/fellchensammlung/details/detail-user.html b/src/fellchensammlung/templates/fellchensammlung/details/detail-user.html
index 0de2658..ec9169f 100644
--- a/src/fellchensammlung/templates/fellchensammlung/details/detail-user.html
+++ b/src/fellchensammlung/templates/fellchensammlung/details/detail-user.html
@@ -13,11 +13,21 @@
             <form class="card" action="" method="POST">
                 {% csrf_token %}
                 {% if user.email_notifications %}
-                    <input class="btn" type="submit" name="toggle_email_notifications"
-                           value="{% translate 'E-Mail Benachrichtigungen deaktivieren' %}">
+                    <label class="toggle">
+                        <input type="submit" class="toggle-checkbox checked" name="toggle_email_notifications">
+                        <div class="toggle-switch round "></div>
+                        <span class="slider-label">
+                        {% translate 'E-Mail Benachrichtigungen' %}
+                        </span>
+                    </label>
                 {% else %}
-                    <input class="btn" type="submit" name="toggle_email_notifications"
-                           value="{% translate 'E-Mail Benachrichtigungen aktivieren' %}">
+                    <label class="toggle">
+                        <input type="submit" class="toggle-checkbox" name="toggle_email_notifications">
+                        <div class="toggle-switch round"></div>
+                        <span class="slider-label">
+                        {% translate 'E-Mail Benachrichtigungen' %}
+                        </span>
+                    </label>
                 {% endif %}
             </form>
             <div class="card">