Implement inline form renderer

src/servala/frontend/forms/renderers.py

@@ -16,13 +16,20 @@ class VerticalFormRenderer(TemplatesSetting):
     form_template_name = "frontend/forms/form.html"
     field_template_name = "frontend/forms/vertical_field.html"
 
+    def get_class_names(self, input_type):
+        if input_type == "checkbox":
+            return "form-check-input"
+        return "form-control"
+
     def render(self, template_name, context, request=None):
         if field := context.get("field"):
-            if field.field.widget.input_type == "checkbox":
-                class_name = "form-check-input"
-            else:
-                class_name = "form-control"
             field.build_widget_attrs = inject_class(
-                field.build_widget_attrs, class_name
+                field.build_widget_attrs,
+                self.get_class_names(field.field.widget.input_type),
             )
         return super().render(template_name, context, request)
+
+
+class InlineFormRenderer(VerticalFormRenderer):
+    form_template_name = "frontend/forms/form.html"
+    field_template_name = "frontend/forms/inline_field.html"

src/servala/frontend/templates/frontend/base.html

@@ -8,6 +8,7 @@
         <link rel="stylesheet"
               href="{% static 'mazer/compiled/css/app-dark.css' %}">
         <link rel="stylesheet" href="{% static 'mazer/compiled/css/iconly.css' %}">
+        <link rel="stylesheet" href="{% static 'css/servala.css' %}">
         <script src="{% static "js/htmx.min.js" %}" defer></script>
     </head>
     <title>

src/servala/frontend/templates/frontend/forms/field.html

@@ -0,0 +1,16 @@
+{% load i18n %}
+<div class="form-group d-inline{% if field.field.required %} mandatory{% endif %}{% if errors %} is-invalid{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}">
+    {% if field.use_fieldset %}
+        <fieldset {% if field.help_text and field.auto_id and "aria-describedby" not in field.field.widget.attrs %} aria-describedby="{{ field.auto_id }}_helptext"{% endif %}>
+        {% endif %}
+        {{ field }}
+        {% if field.field.widget.input_type == "checkbox" and not field.field.widget.allow_multiple_selected %}
+            <label for="{{ field.auto_id }}" class="form-check-label form-label">{{ field.label }}</label>
+        {% endif %}
+        {% if field.use_fieldset %}</fieldset>{% endif %}
+    {% for text in field.errors %}<div class="invalid-feedback">{{ text }}</div>{% endfor %}
+    {% if field.help_text %}
+        <small class="form-text text-muted"
+               {% if field.auto_id %}id="{{ field.auto_id }}_helptext"{% endif %}>{{ field.help_text|safe }}</small>
+    {% endif %}
+</div>

src/servala/frontend/templates/frontend/forms/inline_field.html

@@ -0,0 +1 @@
+{% include "frontend/forms/field.html" with extra_class="d-inline" %}

src/servala/frontend/templates/frontend/forms/vertical_field.html

@@ -1,21 +1 @@
-{% load i18n %}
+<div class="col-12">{% include "frontend/forms/field.html" %}</div>
-<div class="col-12">
-    <div class="form-group{% if field.field.required %} mandatory{% endif %}{% if errors %} is-invalid{% endif %}">
-        {% if field.field.widget.input_type != "checkbox" or field.field.widget.allow_multiple_selected %}
-            <label for="{{ field.auto_id }}" class="form-label">{{ field.label }}</label>
-        {% endif %}
-        {% if field.use_fieldset %}
-            <fieldset {% if field.help_text and field.auto_id and "aria-describedby" not in field.field.widget.attrs %} aria-describedby="{{ field.auto_id }}_helptext"{% endif %}>
-            {% endif %}
-            {{ field }}
-            {% if field.field.widget.input_type == "checkbox" and not field.field.widget.allow_multiple_selected %}
-                <label for="{{ field.auto_id }}" class="form-check-label form-label">{{ field.label }}</label>
-            {% endif %}
-            {% if field.use_fieldset %}</fieldset>{% endif %}
-        {% for text in field.errors %}<div class="invalid-feedback">{{ text }}</div>{% endfor %}
-        {% if field.help_text %}
-            <small class="form-text text-muted"
-                   {% if field.auto_id %}id="{{ field.auto_id }}_helptext"{% endif %}>{{ field.help_text|safe }}</small>
-        {% endif %}
-    </div>
-</div>

src/servala/static/css/servala.css

@@ -0,0 +1,3 @@
+.form-group.d-inline {
+    margin-bottom: 0;
+}