Update assembly_edit page

- Use bootstrap5 form fields instead of widget_tweaks
  This shows help texts and error messages in a more consistent way
- Update layout with bootstrap5 classes to make the layout more consistent

src/backoffice/forms.py

@@ -114,6 +114,9 @@ class AssemblyEditForm(TranslatedFieldsForm):
             'assembly_location',
             'registration_details',
         ]
+        widgets = {
+            'assembly_location': forms.Textarea(attrs={'rows': 4}),
+        }
 
     def __init__(self, *args, staff_access: bool, staff_mode: bool, assembly_staff_access: bool, channel_staff_access: bool, **kwargs):
         super().__init__(*args, **kwargs)
@@ -149,7 +152,7 @@ class AssemblyEditForm(TranslatedFieldsForm):
             self.fields['is_remote'].disabled = True
 
     tags = forms.CharField(required=False)
-    parent_id = forms.UUIDField(required=False)
+    parent_id = forms.UUIDField(required=False, help_text="The parent assembly's ID")
 
     def clean_tags(self):
         # try to detect people delimiting tags with space instead of comma

src/backoffice/locale/de/LC_MESSAGES/django.po

@@ -294,18 +294,6 @@ msgstr "Ja"
 msgid "no"
 msgstr "Nein"
 
-# use translation from core
-msgid "Assembly__is_physical__help"
-msgstr ""
-
-# use translation from core
-msgid "Assembly__is_virtual__help"
-msgstr ""
-
-# use translation from core
-msgid "Assembly__is_remote__help"
-msgstr ""
-
 # use translation from core
 msgid "Assembly__state_assembly"
 msgstr ""
@@ -383,6 +371,9 @@ msgstr "Befreundete Assemblies"
 msgid "opensinnewpage"
 msgstr "öffnet in neuem Fenster/Tab"
 
+msgid "Edit"
+msgstr "Bearbeiten"
+
 msgid "assemblyedit_children"
 msgstr "Zugeordnete Assemblies"
 

src/backoffice/locale/en/LC_MESSAGES/django.po

@@ -294,18 +294,6 @@ msgstr "Yes"
 msgid "no"
 msgstr "No"
 
-# use translation from core
-msgid "Assembly__is_physical__help"
-msgstr ""
-
-# use translation from core
-msgid "Assembly__is_virtual__help"
-msgstr ""
-
-# use translation from core
-msgid "Assembly__is_remote__help"
-msgstr ""
-
 msgid "Assembly__state_assembly"
 msgstr "assembly"
 
@@ -381,6 +369,9 @@ msgstr "related assemblies"
 msgid "opensinnewpage"
 msgstr "opens in a new tab or window"
 
+msgid "Edit"
+msgstr ""
+
 msgid "assemblyedit_children"
 msgstr "Grouped Assemblies"
 

src/backoffice/templates/backoffice/assembly_basicdata.html

-{% load c3assemblies %}
 {% load i18n %}
-{% load widget_tweaks %}
+{% load django_bootstrap5 %}
 
-<div class="form-group row">
-  <div class="col-sm-9">
-    <label class="form-label" for="id_name" title="{{ form.name.help_text }}">{{ form.name.label_tag }}</label>
-    {% render_field form.name class+="form-control" title=form.name.help_text %}
-  </div>
-  <div class="col-sm-3">
-    <label class="form-label" for="id_slug" title="{{ form.slug.help_text }}">{{ form.slug.label_tag }}</label>
-    {% render_field form.slug class+="form-control" title=form.slug.help_text %}
-  </div>
+<div class="row">
+  <div class="col-md-8">{% bootstrap_field form.name %}</div>
+  <div class="col-md-4">{% bootstrap_field form.slug %}</div>
 </div>
 
-<div class="form-group row">
-  {% with conference.get_single_supported_assembly_type as c_ssat %}
-    {% if c_ssat == None %}
-      <div class="col-sm-2">
+<div class="row">
+  <div class="col">
+    {% with conference.get_single_supported_assembly_type as conf_single_assembly_type %}
+      <div class="row">
+        {% if conf_single_assembly_type == None %}
           {% if conference.support_assembly_physical %}
-          <label class="form-label" for="id_is_physical">{{ form.is_physical.label_tag }}</label>
-          {% render_field form.is_physical class+="form-control" title=form.is_physical.help_text %}
+            <div class="col">{% bootstrap_field form.is_physical %}</div>
           {% endif %}
-      </div>
-      <div class="col-sm-2">
           {% if conference.support_assembly_virtual %}
-          <label class="form-label" for="id_is_virtual">{{ form.is_virtual.label_tag }}</label>
-          {% render_field form.is_virtual class+="form-control" title=form.is_virtual.help_text %}
+            <div class="col">{% bootstrap_field form.is_virtual %}</div>
           {% endif %}
-      </div>
-      <div class="col-sm-2">
           {% if conference.support_assembly_remote %}
-          <label class="form-label" for="id_is_remote">{{ form.is_remote.label_tag }}</label>
-          {% render_field form.is_remote class+="form-control" title=form.is_remote.help_text %}
+            <div class="col">{% bootstrap_field form.is_remote %}</div>
           {% endif %}
-      </div>
         {% else %}
-      <div class="col-sm-6 text-muted"
-           title=" {% if assembly.is_physical %}{% trans "Assembly__is_physical__help" %}{% endif %} {% if assembly.is_virtual %}{% trans "Assembly__is_virtual__help" %}{% endif %} {% if assembly.is_remote %}{% trans "Assembly__is_remote__help" %}{% endif %} ">
+          <div class="col">
+            {% if assembly.is_physical %}
+              <label class="form-label" for="is_physical">{{ form.is_physical.label }}</label>
+              <div class="form-text" id="is_physical">{{ form.is_physical.help_text }}</div>
+            {% endif %}
+            {% if assembly.is_virtual %}
+              <label class="form-label" for="is_virtual">{{ form.is_virtual.label }}</label>
+              <div class="form-text" id="is_virtual">{{ form.is_virtual.help_text }}</div>
+            {% endif %}
+            {% if assembly.is_remote %}
+              <label class="form-label" for="is_remote">{{ form.is_remote.label }}</label>
+              <div class="form-text" id="is_remote">{{ form.is_remote.help_text }}</div>
+            {% endif %}
           </div>
         {% endif %}
       {% endwith %}
-  <div class="col-sm-{% if conference.support_channels %}3{% else %}6{% endif %}">
+    </div>
+  </div>
+  <div class="col-md-3">
     <label class="form-label" for="id_state_assembly">{% trans "Assembly__state_assembly" %}</label>
     <div id="id_state_assembly">{{ form.instance.get_state_assembly_display }}</div>
   </div>
   {% if conference.support_channels %}
-    <div class="col-sm-3">
+    <div class="col-md-3">
       <label class="form-label" for="id_state_channel">{% trans "Assembly__state_channel" %}</label>
       <div id="id_state_channel">{{ form.instance.get_state_channel_display }}</div>
     </div>
   {% endif %}
 </div>
 
-<div class="form-group row">
-  <div class="col-sm-12">
-    <label class="form-label"
-           for="id_banner_image"
-           title="{{ form.banner_image.help_text }}">{{ form.banner_image.label_tag }}</label>
-    {% render_field form.banner_image class+="form-control" title=form.banner_image.help_text %}
+<div class="row">
+  <div class="col">
+    <div class="col">{% bootstrap_field form.banner_image %}</div>
   </div>
 </div>
-
-<div class="form-group row">
-  <div class="col-sm-{% if conference.support_assembly_remote %}8{% else %}12{% endif %}">
-    <label class="form-label"
-           for="id_assembly_link"
-           title="{{ form.assembly_link.help_text }}">{{ form.assembly_link.label_tag }}</label>
-    {% render_field form.assembly_link class+="form-control" title=form.assembly_link.help_text type="url" %}
+<div class="row">
+  <div class="col">
+    <div class="col">{% bootstrap_field form.assembly_link %}</div>
   </div>
   {% if conference.support_assembly_remote %}
-    <div class="col-sm-4">
-      <label class="form-label"
-             for="id_assembly_location"
-             title="{{ form.assembly_location.help_text }}">{{ form.assembly_location.label_tag }}</label>
-      {% render_field form.assembly_location class+="form-control" title=form.assembly_location.help_text rows=3 %}
+    <div class="col-md-4">
+      <div class="col">{% bootstrap_field form.assembly_location %}</div>
     </div>
   {% endif %}
 </div>
 
-<div class="form-group row">
-  <div class="col-sm-6">
-    <label class="form-label" for="id_description_de">{{ form.description_de.label_tag }}</label>
-    {% render_field form.description_de class+="form-control" %}
-  </div>
-  <div class="col-sm-6">
-    <label class="form-label" for="id_description_en">{{ form.description_en.label_tag }}</label>
-    {% render_field form.description_en class+="form-control" %}
-  </div>
+<div class="row">
+  <div class="col-md">{% bootstrap_field form.description_de %}</div>
+  <div class="col-md">{% bootstrap_field form.description_en %}</div>
 </div>
 
 {% with handled_base_fields="name,slug,is_physical,is_virtual,is_remote,banner_image,assembly_link,assembly_location,description_de,description_en,registration_details"|split:"," %}
   {% for field in base_fields %}
     {% if field.name not in handled_base_fields %}
-      <div class="form-group row">
-        <label class="col-sm-2 col-form-label" for="frm{{ field.name }}">{{ field.label_tag }}</label>
-        <div class="col-sm-10{% if field.disabled %} text-muted{% endif %}">
-          {% if not field.disabled %}
-            {% render_field field class+="form-control" title=field.help_text %}
-          {% else %}
-            <input type="hidden" name="{{ field.name }}" value="{{ field.value }}">
-            {% render_field field class+="form-control" disabled="disabled" %}
-          {% endif %}
-          {% if field.help_text %}<small class="form-text text-muted">{{ field.help_text }}</small>{% endif %}
-          {% for error in field.errors %}<div class="invalid-feedback">{{ error }}</div>{% endfor %}
-        </div>
+      <div class="row">
+        <div class="col">{% bootstrap_field field %}</div>
       </div>
     {% endif %}
   {% endfor %}
 {% endwith %}
 
-<div class="form-group row text-muted">
-  <div class="col-sm-12">
-    <label class="form-label" for="id_registration_details">{{ form.registration_details.label_tag }}</label>
-    {% render_field form.registration_details class+="form-control" title=form.registration_details.help_text %}
-  </div>
+<div class="row text-muted">
+  <div class="col">{% bootstrap_field form.registration_details %}</div>
 </div>

src/backoffice/templates/backoffice/assembly_edit.html

 {% extends "backoffice/base.html" %}
 {% load i18n %}
-{% load static %}
-{% load widget_tweaks %}
 
 {% block content %}
   {% include "backoffice/assembly_edit_header.html" %}
@@ -61,9 +59,8 @@
               <p>{% trans "assemblyedit_parent__intro" %}</p>
 
               <div class="input-group">
-                <label class="form-label" for="assembly_parent">{% trans "assembly_parent" %}</label>
-                &nbsp;
-                <select id="assembly_parent" name="parent_id">
+                <label class="input-group-text" for="assembly_parent">{% trans "assembly_parent" %}</label>
+                <select class="form-select" id="assembly_parent" name="parent_id">
                   <option value=""
                           {% if assembly.parent is None %}selected="selected"{% endif %}>
                     -- {% trans "none" %} --
@@ -89,12 +86,7 @@
       <div class="col-md-6">
         <div class="card">
           {% if not assembly.is_cluster %}
-            <div class="card-header">
-              {% trans "assemblyedit_links" %}
-              <a href="{% url 'backoffice:assembly-editlinks' pk=assembly.pk %}"
-                 target="_blank"
-                 title="{% trans "opensinnewpage" %}">({% trans "edit" %})</a>
-            </div>
+            <div class="card-header">{% trans "assemblyedit_links" %}</div>
             <div class="card-body">
               {% with la=assembly.linked_assemblies %}
                 {% if la|length > 0 %}
@@ -110,6 +102,13 @@
                 {% endif %}
               {% endwith %}
             </div>
+            <div class="card-footer">
+
+              <a class="float-end btn btn-primary"
+                 href="{% url 'backoffice:assembly-editlinks' pk=assembly.pk %}"
+                 target="_blank"
+                 title="{% trans "opensinnewpage" %}">{% trans "Edit" %} ({% trans "opensinnewpage" %})</a>
+            </div>
           {% else %}
             {# assembly.is_cluster #}
             <div class="card-header">
@@ -141,19 +140,25 @@
           <div class="card-header">Tags</div>
           <div class="card-body">
             <input id="tags"
+                   class="form-control"
                    type="text"
                    name="tags"
                    value="{% for tag in assembly.sorted_tags %} {{ tag }} {% if not forloop.last %},{% endif %} {% endfor %}">
-            <small class="form-text text-muted">{% trans "Assembly__tags__splitwithcomma" %}</small>
+            <div for="tags" class="form-text">{% trans "Assembly__tags__splitwithcomma" %}</div>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="row pb-5">
-      <div class="col-md-12 text-right mb-5">
+    <div class="row pb-5 mt-3">
+      <div class="col-md-12">
+        <div class="card">
+          <div class="card-footer text-end">
             <button type="submit" class="btn btn-primary">{% trans "assemblyedit_submitbtn" %}</button>
           </div>
         </div>
+      </div>
+
+    </div>
   </form>
 {% endblock content %}