From c293f2e4f9ceb72c305624f7332d2c72ca615752 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Wed, 17 Jan 2024 15:15:25 +0100
Subject: [PATCH] implement mobile progress tracker

---
 index.html | 75 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 69 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 57f99a1..28fcdac 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,29 @@
         damit keine Tier unversorgt bleibt.</p>
 
     <div class="stepTracker">
-        <ul class="progress-tracker progress-tracker--text progress-tracker--text-inline progress-tracker--spaced">
+        <ul class="progress-tracker progress-tracker-mobile progress-tracker--text">
+            <li class="progress-step is-complete">
+                <div class="progress-marker" data-text="1"></div>
+                <div class="progress-text">
+                    <h4 class="progress-title">Wildtier gefunden</h4>
+                </div>
+            </li>
+
+            <li class="progress-step">
+                <div class="progress-marker" data-text="2"></div>
+                <div class="progress-text">
+                    <h4 class="progress-title">Klassifizieren</h4>
+                </div>
+            </li>
+
+            <li class="progress-step">
+                <div class="progress-marker" data-text="3"></div>
+                <div class="progress-text">
+                    <h4 class="progress-title">Hilfestellung erhalten</h4>
+                </div>
+            </li>
+        </ul>
+        <ul class="progress-tracker progress-tracker-desktop progress-tracker--text progress-tracker--text-inline progress-tracker--spaced">
             <li class="progress-step is-complete">
               <div class="progress-marker" data-text="1">
                 <div class="progress-text">
@@ -30,7 +52,7 @@
               </div>
             </li>
   
-            <li class="progress-step is-complete">
+            <li class="progress-step">
               <div class="progress-marker" data-text="2">
                 <div class="progress-text">
                   <h4 class="progress-title">Klassifizieren</h4>
@@ -38,7 +60,7 @@
               </div>
             </li>
   
-            <li class="progress-step is-complete">
+            <li class="progress-step">
               <div class="progress-marker" data-text="3">
                 <div class="progress-text">
                   <h4 class="progress-title">Hilfestellung erhalten</h4>
@@ -54,18 +76,59 @@
     </main>
 
  <style>
-    .progress-step:last-child {
+    .progress-tracker-desktop .progress-step:last-child {
         display: inline-table !important;
         flex-grow: unset !important;
     }
-    .progress-step:last-child .progress-text {
+    .progress-tracker-desktop .progress-step:last-child .progress-text {
         overflow: visible !important;
     }
     .stepTracker {
-        min-width: 800px;
+        width: 100%;
+        max-width: 800px;
     }
     .progress-tracker {
         margin: 30px auto;
+        padding: 0 0.5rem;
+    }
+    .progress-tracker-mobile {
+        display: none;
+    }
+    @media (max-width: 600px) {
+        .progress-tracker-desktop {
+            display: none;
+        }
+        .progress-tracker-mobile {
+            display: flex;
+            margin: 1rem 0rem 0 0rem;
+        }
+        .progress-step:last-child .progress-marker {
+            display: flex;
+            flex-direction: row-reverse;
+        }
+        .progress-step:last-child .progress-title {
+            text-align: right;
+        }
+        .progress-step:last-child .progress-marker:after {
+            background-color: #b6b6b6;
+            height: 1px !important;
+            content: "";
+            display: block;
+            position: absolute;
+            z-index: -10;
+            top: 10px;
+            right: 5px;
+            width: 100%;
+            height: 4px;
+            transition: background-color 0.3s, background-position 0.3s;
+        }
+        .progress-step:nth-child(2) .progress-marker {
+            display: flex;
+            justify-content: center;
+        }
+        .progress-step:nth-child(2) .progress-title {
+            text-align: center;
+        }
     }
     .progress-marker::after {
         height: 1px !important;