From 80a969917a684cde6505f7c544618049f28ba9c3 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Thu, 3 Apr 2025 17:51:20 +0200
Subject: [PATCH] chore: simplify search form CSS and HTML

Co-authored-by: David Larlet <david@larlet.fr>
---
 umap/static/umap/content.css        | 17 +++++++++++++++
 umap/templates/umap/search_bar.html | 32 ++++++++++++-----------------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css
index d55b58a7..3ba0329b 100644
--- a/umap/static/umap/content.css
+++ b/umap/static/umap/content.css
@@ -19,6 +19,18 @@ input:-moz-placeholder, :-moz-placeholder {
 .search-form {
     display: flex;
     align-items: baseline;
+    gap: calc(var(--gutter) / 2);
+    max-width: 800px;
+    margin: 0 auto;
+}
+.search-form select {
+    max-width: 200px;
+}
+.search-form input[type=submit] {
+    min-width: 200px;
+}
+.flex-break {
+    justify-content: center;
 }
 
 
@@ -555,4 +567,9 @@ dialog::backdrop {
     .mhide {
         display: none;
     }
+    .flex-break {
+        flex-direction: column;
+        align-items: center;
+    }
+
 }
diff --git a/umap/templates/umap/search_bar.html b/umap/templates/umap/search_bar.html
index c4efe694..17588e70 100644
--- a/umap/templates/umap/search_bar.html
+++ b/umap/templates/umap/search_bar.html
@@ -4,25 +4,19 @@
 {% trans "Search maps" as default_placeholder %}
 <div class="wrapper search_wrapper">
   <div class="row">
-    <form class="search-form" action="{% firstof action search_url %}" method="get">
-      <div class="col half mwide">
-        <input name="q"
-               type="search"
-               placeholder="{% firstof placeholder default_placeholder %}"
-               aria-label="{% firstof placeholder default_placeholder %}"
-               value="{{ request.GET.q|default:"" }}" />
-      </div>
-      <div class="col quarter mwide">
-        <select name="tags">
-          <option value="">{% trans "Any category" %}</option>
-          {% for value, label in UMAP_TAGS %}
-          <option value="{{ value }}" {% if request.GET.tags == value %}selected{% endif %}>{{ label }}</option>
-          {% endfor %}
-        </select>
-      </div>
-      <div class="col quarter mwide">
-        <input type="submit" value="{% trans "Search" %}" class="neutral" />
-      </div>
+    <form class="search-form flex-break" action="{% firstof action search_url %}" method="get">
+      <input name="q"
+             type="search"
+             placeholder="{% firstof placeholder default_placeholder %}"
+             aria-label="{% firstof placeholder default_placeholder %}"
+             value="{{ request.GET.q|default:"" }}" />
+      <select name="tags">
+        <option value="">{% trans "Any category" %}</option>
+        {% for value, label in UMAP_TAGS %}
+        <option value="{{ value }}" {% if request.GET.tags == value %}selected{% endif %}>{{ label }}</option>
+        {% endfor %}
+      </select>
+      <input type="submit" value="{% trans "Search" %}" class="neutral" />
     </form>
   </div>
 </div>