Template enhancements

* adds configurable label-input ratio setting for forms and specializes for RemoveModalForm
* enhances form body html structure for better UX and usage of label-input ratio

konova/forms/base_form.py

@@ -29,6 +29,7 @@ class BaseForm(forms.Form):
     form_attrs = {}  # Holds additional attributes, that can be used in the template
     has_required_fields = False  # Automatically set. Triggers hint rendering in templates
     show_cancel_btn = True
+    label_input_ratio = (3, 9)  # used for col-sm-xy in the template. Must sum up to 12. Specify on inheriting forms
 
     def __init__(self, *args, **kwargs):
         self.instance = kwargs.pop("instance", None)
@@ -42,12 +43,26 @@ class BaseForm(forms.Form):
                 break
 
         self.check_for_recorded_instance()
+        self.__check_valid_label_input_ratio()
 
     @abstractmethod
     def save(self):
         # To be implemented in subclasses!
         pass
 
+    def __check_valid_label_input_ratio(self):
+        """ Checks whether the configured label-input ratio is valid
+
+        If not valid an AssertionError will be raised.
+        The valid sum of label-input ratio is defined by bootstrap's column layout system.
+
+        Returns:
+
+        """
+        ratio = self.label_input_ratio[0] + self.label_input_ratio[1]
+        if ratio != 12:
+            raise AssertionError(f"Label-input ratio on form must sum up to 12! It's {self.label_input_ratio}")
+
     def disable_form_field(self, field: str):
         """
         Disables a form field for user editing

konova/forms/modals/remove_form.py

@@ -24,6 +24,7 @@ class RemoveModalForm(BaseModalForm):
         widget=forms.CheckboxInput(),
         required=True,
     )
+    label_input_ratio = (2, 10)
 
     def __init__(self, *args, **kwargs):
         self.template = "modal/modal_form.html"

konova/static/css/konova.css

@@ -60,6 +60,10 @@ a {
     color: var(--rlp-red);
 }
 
+label {
+    width: 100%;
+}
+
 .form-control:focus{
     outline: none;
     border-color: var(--rlp-red);

templates/form/table/generic_table_form_body.html

@@ -4,12 +4,18 @@
         <tbody>
         {% for field in form %}
         <tr title="{{ field.help_text }}" class="{% if field.errors %}alert-danger{% endif %}">
-            <th scope="row" class="col-sm-3">
+            {{form.small_label_column}}
-                <label for="id_{{ field.name }}">{{ field.label }}<span class="label-required">{% if field.field.required %}*{% endif %}</span></label>
+            <th scope="row" class="col-sm-{{form.label_input_ratio.0}}">
-                <br>
+                <label for="id_{{ field.name }}">
-                <small>{{ field.help_text }}</small>
+                    {{ field.label }}
+                    <span class="label-required">
+                        {% if field.field.required %}*{% endif %}
+                    </span>
+                    <br>
+                    <small>{{ field.help_text }}</small>
+                </label>
             </th>
-            <td class="col-sm-9">
+            <td class="col-sm-{{form.label_input_ratio.1}}">
                 {{ field }}
                 {% for error in field.errors %}
                 <br>