From 1d01583913c1cdbba17563f21da9636835c20543 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sun, 15 Mar 2026 12:47:00 +0100
Subject: [PATCH] base: enable search on mobile

---
 froide_govplan/templates/cms/mypage.html      |  12 +-
 .../templates/froide_govplan/base.html        | 143 +++++++++++++-----
 .../templates/froide_govplan/detail.html      |   2 +-
 3 files changed, 113 insertions(+), 44 deletions(-)

diff --git a/froide_govplan/templates/cms/mypage.html b/froide_govplan/templates/cms/mypage.html
index cc3597a..3f17019 100644
--- a/froide_govplan/templates/cms/mypage.html
+++ b/froide_govplan/templates/cms/mypage.html
@@ -329,13 +329,11 @@ function Xe() {
             a.open(r, o, !0), a.setRequestHeader("Content-type", "application/x-www-form-urlencoded"), a.setRequestHeader("X-Requested-With", "XMLHttpRequest"), a.onload = () => {
                 var l, u;
                 if (e.dataset.modalcontainer) {
-                    const d = document.querySelector(e.dataset.modalcontainer);
-                    d != null && (new $(d).show(), console.log("got modal"));
-
-                    const modalElement = document.getElementById('govplan-searchmodal-275111');
-                    const modal = new bootstrap.Modal(modalElement);
-                    modal.show();
-
+                    const modalElement = document.querySelector(e.dataset.modalcontainer);
+                    if (modalElement) {
+                        const modal = new bootstrap.Modal(modalElement);
+                        modal.show();
+                    }
                 } else if (e.dataset.modal) {
                     const d = document.getElementById(e.dataset.modal);
                     (l = d == null ? void 0 : d.dataset) != null && l.bsTarget && ((u = $.getInstance(document.querySelector(d.dataset.bsTarget))) == null || u.hide())
diff --git a/froide_govplan/templates/froide_govplan/base.html b/froide_govplan/templates/froide_govplan/base.html
index 5816ccc..4fca08f 100644
--- a/froide_govplan/templates/froide_govplan/base.html
+++ b/froide_govplan/templates/froide_govplan/base.html
@@ -6,9 +6,51 @@
 {% block body %}
 
 <style>
-  #govplan-searchresult-275111 .card-body {
+  #govplan-searchresult-275111 .card-body,
+  #govplan-searchresult-mobile .card-body {
     padding: 1rem !important;
   }
+
+  @media (max-width: 767.98px) {
+    .header-logo { height: 32px !important; }
+    .header-title { font-size: 1.1rem !important; }
+  }
+
+  @media (min-width: 768px) {
+    #mobile-nav-menu { display: none !important; }
+  }
+
+  .burger-btn {
+    background: none;
+    border: none;
+    padding: 6px 4px;
+    cursor: pointer;
+    color: inherit;
+  }
+  .burger-icon {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    width: 24px;
+  }
+  .burger-icon span {
+    display: block;
+    height: 2px;
+    border-radius: 2px;
+    background: currentColor;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    transform-origin: center;
+  }
+  .burger-btn[aria-expanded="true"] .burger-icon span:nth-child(1) {
+    transform: translateY(7px) rotate(45deg);
+  }
+  .burger-btn[aria-expanded="true"] .burger-icon span:nth-child(2) {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  .burger-btn[aria-expanded="true"] .burger-icon span:nth-child(3) {
+    transform: translateY(-7px) rotate(-45deg);
+  }
 </style>
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
@@ -75,53 +117,54 @@
 </div>
 
 <div class="col-lg-10 mx-auto p-4 py-md-5">
-    <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
+    <header class="d-flex align-items-center flex-wrap pb-3 mb-5 border-bottom">
         <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none text-reset">
-            <img src="{% static 'froide_govplan/images/logo.svg' %}" class="bi me-2" height="50">
-            <span class="fs-4">VerwaltungsTracker</span>
+            <img src="{% static 'froide_govplan/images/logo.svg' %}" class="bi me-2 header-logo" height="50">
+            <span class="fs-4 header-title">VerwaltungsTracker</span>
         </a>
-        <div style="margin-left: auto; max-width: 350px;" class="search">
+
+        <!-- Desktop search -->
+        <div style="margin-left: auto; max-width: 350px;" class="search d-none d-md-block">
             <form method="get" action="/search/" class="ajaxified" data-container="#govplan-searchresult-275111" data-modalcontainer="#govplan-searchmodal-275111">
               <div class="input-group">
                 <input type="text" name="q" class="form-control" aria-label="Suchbegriff" placeholder="Suchbegriff">
                 <select name="status" class="form-select" style="display: none;">
                   <option value="">Status filtern</option>
-                  
-                    <option value="not_started">nicht begonnen</option>
-                  
-                    <option value="started">begonnen</option>
-                  
-                    <option value="partially_implemented">teilweise umgesetzt</option>
-                  
-                    <option value="implemented">umgesetzt</option>
-                  
-                    <option value="deferred">zurückgestellt</option>
-                  
+                  <option value="not_started">nicht begonnen</option>
+                  <option value="started">begonnen</option>
+                  <option value="partially_implemented">teilweise umgesetzt</option>
+                  <option value="implemented">umgesetzt</option>
+                  <option value="deferred">zurückgestellt</option>
                 </select>
-                <button class="btn btn-outline-secondary" type="submit">
-                  Suchen
-                </button>
+                <button class="btn btn-outline-secondary" type="submit">Suchen</button>
               </div>
-              
-                <input type="hidden" name="government" value="1"/>
-              
+              <input type="hidden" name="government" value="1"/>
             </form>
-            
-            <div class="modal fade" id="govplan-searchmodal-275111">
-              <div class="modal-dialog modal-dialog-centered modal-xl">
-                <div class="modal-content">
-                  <div class="modal-header">
-                    <h5 class="modal-title">Suchergebnisse</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen">
-                    </button>
+        </div>
+
+        <!-- Mobile burger button -->
+        <button class="burger-btn d-md-none ms-auto" type="button"
+                data-bs-toggle="collapse" data-bs-target="#mobile-nav-menu"
+                aria-expanded="false" aria-controls="mobile-nav-menu"
+                aria-label="Menü öffnen">
+            <span class="burger-icon">
+                <span></span>
+                <span></span>
+                <span></span>
+            </span>
+        </button>
+
+        <!-- Mobile collapsible menu -->
+        <div class="collapse w-100" id="mobile-nav-menu">
+            <div class="pt-3 pb-1">
+                <form method="get" action="/search/" class="ajaxified" data-container="#govplan-searchresult-mobile" data-modalcontainer="#govplan-searchmodal-mobile">
+                  <div class="input-group">
+                    <input type="text" name="q" class="form-control" aria-label="Suchbegriff" placeholder="Suchbegriff">
+                    <button class="btn btn-outline-secondary" type="submit">Suchen</button>
                   </div>
-                  <div class="modal-body">
-                    <div id="govplan-searchresult-275111"></div>
-                  </div>
-                </div>
-              </div>
+                  <input type="hidden" name="government" value="1"/>
+                </form>
             </div>
-        
         </div>
     </header>
 
@@ -237,4 +280,32 @@
     </footer>
 </div>
 
+<div class="modal fade" id="govplan-searchmodal-275111">
+  <div class="modal-dialog modal-dialog-centered modal-xl">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Suchergebnisse</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
+      </div>
+      <div class="modal-body">
+        <div id="govplan-searchresult-275111"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="govplan-searchmodal-mobile">
+  <div class="modal-dialog modal-dialog-centered modal-xl">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Suchergebnisse</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
+      </div>
+      <div class="modal-body">
+        <div id="govplan-searchresult-mobile"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
 {% endblock body %}
\ No newline at end of file
diff --git a/froide_govplan/templates/froide_govplan/detail.html b/froide_govplan/templates/froide_govplan/detail.html
index e1df6dc..2eb3ed2 100644
--- a/froide_govplan/templates/froide_govplan/detail.html
+++ b/froide_govplan/templates/froide_govplan/detail.html
@@ -25,7 +25,7 @@
 {% endblock meta %}
 {% block app_body %}
 
-    <h1 class="text-body-emphasis">{{ object.title }}</h1>
+    <h1 class="text-body-emphasis text-break">{{ object.title }}</h1>
     <p class="fs-5 col-md-8">
         <div class="d-md-flex my-4 align-items-center">
             <ul class="list-unstyled d-flex m-0">