Simplify search form styling

server/base/templatetags/ui_extras.py

@@ -45,26 +45,9 @@ def to_int(value):
     return int(value)
 
 
-@register.filter
-def flex_field_width(value):
-    """ Given the amount of fields, returns a width to use with flexbox. """
-    prefix = "-"
-    if value == 1:
-        return ""
-    elif value == 2:
-        return prefix + "8"
-    elif value == 3:
-        return prefix + "6"
-    elif value == 4:
-        return prefix + "6"
-    elif value == 5:
-        return prefix + "5"
-    else:
-        return prefix + str(value)  # FIXME: probably needs adjustment for more controls
-
-
 # Buttons
 
+
 ACTION = {
     'CREATE': {
         'icon': "bi bi-plus-circle",

server/realms/templates/realms/realmgroup_list.html

@@ -19,7 +19,7 @@ <h2 class="m-0">Group{{ paginator.count|pluralize }} ({{ paginator.count }})</h2
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-  <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+  <form method="GET" class="search-form">
     {{ form }}
     <button type="submit" class="btn btn-link mb-2">
       <i class="bi bi-search"></i>

server/realms/templates/realms/realmuser_list.html

@@ -19,7 +19,7 @@ <h2 class="m-0">User{{ paginator.count|pluralize }} ({{ paginator.count }})</h2>
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-  <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+  <form method="GET" class="search-form">
     {{ form }}
     <button type="submit" class="btn btn-link mb-2">
       <i class="bi bi-search"></i>

server/static_src/scss/styles.scss

@@ -184,14 +184,28 @@ td > p:last-child, td > table:last-child {
 }
 
 .search-form {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+
   @media screen and (max-width: 992px) {
     flex-direction: column !important;
     width: 100% !important;
 
-    .form-floating {
+    .form-floating, .form-checkbox, button {
         width: 100%;
     }
   }
+
+  .form-label {
+    margin-bottom: 0;
+  }
+}
+
+// to make sure that empty dropdowns are wide enough
+.form-floating {
+  min-width: 8vw;
 }
 
 .sidebar {

server/templates/forms/django/forms/search.html

@@ -1,44 +1,43 @@
 {% load ui_extras %}
 
 {% for field in form %}
-    {% if field in form.visible_fields %}
-    <div class={% if field.widget_type == 'checkbox' %}"form-checkbox col me-2 mb-2 text-center"{% elif field.widget_type == 'text' %}"form-floating col{{ form.visible_fields|length|flex_field_width }} me-2 mb-2"{% else %}"form-floating col me-2 mb-2"{% endif %}>
+  {% if field in form.visible_fields %}
+  <div class="mb-2 {% if field.widget_type == 'checkbox' %}me-4 form-checkbox{% else %}me-2 form-floating{% endif %}">
+      {% if field.widget_type == 'select' %}
+          <select class="form-select"
+      {% elif field.widget_type == 'checkbox' %}
+          {{ field.label_tag }}
+          <input class="form-check-input" {% if field.value %} checked {% endif %}
+      {% else %}
+          <input class="form-control"
+      {% endif %}
 
-        {% if field.widget_type == 'select' %}
-            <select class="form-select"
-        {% elif field.widget_type == 'checkbox' %}
-            {{ field.label_tag }}
-            <input class="form-check-input" {% if field.value %} checked {% endif %}
-        {% else %}
-            <input class="form-control"
-        {% endif %}
+      {% if field.widget_type == 'text' %}
+          {% if field.value %}
+              value="{{ field.value }}"
+          {% endif %}
+      {% endif %}
+          type="{{ field.widget_type }}"
+          name="{{ field.html_name }}"
+          id="{{ field.id_for_label }}"
+          {% for name, value in field.field.widget.attrs.items %}
+          {% comment %} We avoid "placeholder" because of bootstrap behavior with it {% endcomment %}
+              {% if name != "placeholder" %}
+                  {{ name }}={{ value }}
+              {% endif %}
+          {% endfor %}
+          >
 
-        {% if field.widget_type == 'text' %}
-            {% if field.value %}
-                value="{{ field.value }}"
-            {% endif %}
-        {% endif %}
-            type="{{ field.widget_type }}"
-            name="{{ field.html_name }}"
-            id="{{ field.id_for_label }}" 
-            {% for name, value in field.field.widget.attrs.items %}
-            {% comment %} We avoid "placeholder" because of bootstrap behavior with it {% endcomment %}
-                {% if name != "placeholder" %}
-                    {{ name }}={{ value }}
-                {% endif %}
-            {% endfor %}
-            >
-
-        {% if field.widget_type == 'select' %}
-            {% for option, value in field.field.choices %}
-                <option value="{{ option }}"{% if option|to_str == field.value %}selected="selected"{% endif %}>{{ value }}</option>
-            {% endfor %}
-            </select>
-        {% endif %}
-
-        {% if field.widget_type != 'checkbox' %}
-            {{ field.label_tag }}
-        {% endif %}
-    </div>
-    {% endif %}
+      {% if field.widget_type == 'select' %}
+          {% for option, value in field.field.choices %}
+              <option value="{{ option }}"{% if option|to_str == field.value %}selected="selected"{% endif %}>{{ value }}</option>
+          {% endfor %}
+          </select>
+      {% endif %}
+
+      {% if field.widget_type != 'checkbox' %}
+          {{ field.label_tag }}
+      {% endif %}
+  </div>
+  {% endif %}
 {% endfor %}

zentral/contrib/inventory/templates/inventory/android_apps.html

@@ -18,7 +18,7 @@ <h2 class="mb-0">{{ title }}</h2>
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ search_form }}
 

zentral/contrib/inventory/templates/inventory/deb_packages.html

@@ -18,7 +18,7 @@ <h2 class="mb-0">{{ title }}</h2>
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ search_form }}
 

zentral/contrib/inventory/templates/inventory/group_list.html

@@ -17,7 +17,7 @@ <h2 class="mb-0">Group{{ object_list|length|pluralize }} ({{ object_list|length
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ search_form }}
 

zentral/contrib/inventory/templates/inventory/ios_apps.html

@@ -18,7 +18,7 @@ <h2 class="mb-0">{{ title }}</h2>
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ search_form }}
 

zentral/contrib/inventory/templates/inventory/macos_apps.html

@@ -19,7 +19,7 @@ <h2 class="mb-0">{{ title }}</h2>
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ search_form }}
 

zentral/contrib/inventory/templates/inventory/mbu_list.html

@@ -19,7 +19,7 @@ <h2 class="m-0">Business unit{{ page_obj.paginator.count|pluralize }} ({{ page_o
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ form }}
 

zentral/contrib/inventory/templates/inventory/programs.html

@@ -18,7 +18,7 @@ <h2 class="mb-0">{{ title }}</h2>
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ search_form }}
 

zentral/contrib/mdm/templates/mdm/artifact_list.html

@@ -27,7 +27,7 @@ <h2 class="m-0">Artifact{{ page_obj.paginator.count|pluralize }} ({{ page_obj.pa
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ form }}
 

zentral/contrib/mdm/templates/mdm/depdevice_list.html

@@ -19,7 +19,7 @@ <h2 class="m-0">Device{{ page_obj.paginator.count|pluralize }} ({{ page_obj.pagi
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75 align-items-center">
+    <form method="GET" class="search-form">
 
         {{ form }}
 

zentral/contrib/mdm/templates/mdm/enrolleddevice_list.html

@@ -19,7 +19,7 @@ <h2 class="m-0">Device{{ page_obj.paginator.count|pluralize }} ({{ page_obj.pagi
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
             {{ form }}
 

zentral/contrib/monolith/templates/monolith/manifest_list.html

@@ -13,7 +13,7 @@ <h2 class="m-0">Manifest{{ paginator.count|pluralize }} ({{ paginator.count }})<
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
         {{ form }}
         <button type="submit" class="btn btn-link mb-2">
             <i class="bi bi-search"></i>

zentral/contrib/monolith/templates/monolith/pkginfo_list.html

@@ -19,7 +19,7 @@ <h2>Package name{{ name_number|pluralize }} ({{ name_number }}) / Package{{ in
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ form }}
 

zentral/contrib/monolith/templates/monolith/sub_manifest_list.html

@@ -13,7 +13,7 @@ <h2>Sub manifest{{ paginator.count|pluralize }} ({{ paginator.count }})</h2>
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
         {{ form }}
         <button type="submit" class="btn btn-link mb-2">
             <i class="bi bi-search"></i>

zentral/contrib/munki/templates/munki/scriptcheck_list.html

@@ -25,7 +25,7 @@ <h2 class="m-0">Script check{{ paginator.count|pluralize }} ({{ paginator.count
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ form }}
 

zentral/contrib/osquery/templates/osquery/distributedquerymachine_list.html

@@ -27,7 +27,7 @@
 <h2 class="mye-3">Run #{{ distributed_query }}</h2>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ form }}
 

zentral/contrib/osquery/templates/osquery/query_list.html

@@ -26,7 +26,7 @@
 <h2 class="mb-3">Quer{{ page_obj.paginator.count|pluralize:"y,ies" }} ({{ page_obj.paginator.count }})</h2>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75 align-items-center">
+    <form method="GET" class="search-form">
 
         {{ form }}
 

zentral/contrib/santa/templates/santa/pick_rule_binary.html

@@ -12,7 +12,7 @@
 
 <h2>Pick Santa rule binary</h2>
 
-<form method="GET" class="search-form d-flex flex-row flex-wrap w-25">
+<form method="GET" class="search-form">
 
     {{ form }}
 

zentral/contrib/santa/templates/santa/pick_rule_bundle.html

@@ -12,7 +12,7 @@
 
 <h2>Pick Santa rule bundle</h2>
 
-<form method="GET" class="search-form d-flex flex-row flex-wrap w-25">
+<form method="GET" class="search-form">
 
     {{ form }}
 

zentral/contrib/santa/templates/santa/pick_rule_cdhash.html

@@ -12,7 +12,7 @@
 
 <h2>Pick Santa rule cdhash</h2>
 
-<form method="GET" class="search-form d-flex flex-row flex-wrap w-25">
+<form method="GET" class="search-form">
 
     {{ form }}
 

zentral/contrib/santa/templates/santa/pick_rule_certificate.html

@@ -12,7 +12,7 @@
 
 <h2>Pick Santa rule certificate</h2>
 
-<form method="GET" class="search-form d-flex flex-row flex-wrap w-25">
+<form method="GET" class="search-form">
 
     {{ form }}
 

zentral/contrib/santa/templates/santa/pick_rule_signing_id.html

@@ -12,7 +12,7 @@
 
 <h2>Pick Santa rule signing ID</h2>
 
-<form method="GET" class="search-form d-flex flex-row flex-wrap w-25">
+<form method="GET" class="search-form">
 
     {{ form }}
 

zentral/contrib/santa/templates/santa/pick_rule_team_id.html

@@ -12,7 +12,7 @@
 
 <h2>Pick Santa rule team ID</h2>
 
-<form method="GET" class="search-form d-flex flex-row flex-wrap w-25">
+<form method="GET" class="search-form">
 
     {{ form }}
 

zentral/contrib/santa/templates/santa/targets.html

@@ -21,7 +21,7 @@
 <h2 class="mb-3">Target{{ target_count|pluralize }} ({{ target_count }})</h2>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ form }}
 

zentral/core/incidents/templates/incidents/index.html

@@ -18,7 +18,7 @@ <h2 class="m-0">Incident{{ paginator.count|pluralize }} ({{ paginator.count }})<
 </div>
 
 <div class="d-flex flex-wrap align-items-center mb-1">
-    <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+    <form method="GET" class="search-form">
 
         {{ form }}
 

zentral/core/probes/templates/probes/index.html

@@ -18,7 +18,7 @@ <h2 class="mb-3">Probe{{ paginator.count|pluralize }} ({{ paginator.count }})</h
     </div>
 
     <div class="d-flex flex-wrap align-items-center mb-1">
-        <form method="GET" class="search-form d-flex flex-row flex-wrap w-75">
+        <form method="GET" class="search-form">
 
             {{ form }}