improve new member form style

club/static/club/members.scss

@@ -0,0 +1,24 @@
+#club_members_table {
+  tbody label {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+#add_club_members_form {
+  fieldset {
+    display: flex;
+    flex-direction: row;
+    column-gap: 2em;
+    row-gap: 1em;
+    flex-wrap: wrap;
+
+    @media (max-width: 1100px) {
+      justify-content: space-evenly;
+    }
+
+    .errorlist {
+      max-width: 300px;
+    }
+  }
+}

club/templates/club/club_members.jinja

@@ -7,11 +7,14 @@
 {% block additional_css %}
   <link rel="stylesheet" href="{{ static("bundled/core/components/ajax-select-index.css") }}">
   <link rel="stylesheet" href="{{ static("core/components/ajax-select.scss") }}">
+  <link rel="stylesheet" href="{{ static("club/members.scss") }}">
 {% endblock %}
 
 {% block content %}
   <h2>{% trans %}Club members{% endtrans %}</h2>
   <br />
+  <h4>{% trans %}Add a new member{% endtrans %}</h4>
+
   {{ add_member_fragment }}
   <br />
   {% if members %}

club/templates/club/fragments/add_member.jinja

@@ -1,27 +1,30 @@
-<h4>{% trans %}Add a new member{% endtrans %}</h4>
 <form
   hx-post="{{ url('club:club_new_members', club_id=club.id) }}"
   hx-disabled-elt="find input[type='submit']"
   hx-swap="outerHTML"
-  id="add_users"
+  id="add_club_members_form"
 >
   {% csrf_token %}
   {{ form.non_field_errors() }}
-  <p>
+  <fieldset>
-    {{ form.user.errors }}
+
+    <div>
       {{ form.user.label_tag()}}
       <span class="helptext">{{ form.user.help_text }}</span>
       {{ form.user }}
-  </p>
+      {{ form.user.errors }}
-  <p>
+    </div>
-    {{ form.role.errors }}
+    <div>
       {{ form.role.label_tag()}}
       {{ form.role }}
-  </p>
+      {{ form.role.errors }}
-  <p>
+    </div>
-    {{ form.description.errors }}
+    <div>
       {{ form.description.label_tag()}}
       {{ form.description }}
-  </p>
+      {{ form.description.errors }}
-  <p><input type="submit" /></p>
+    </div>
+  </fieldset>
+  <button type="submit" class="btn btn-blue">
+    <i class="fa fa-user-plus"></i> {% trans %}Add{% endtrans %}</button>
 </form>

core/static/core/components/ajax-select.scss

@@ -36,6 +36,7 @@
   > .ts-control {
     box-shadow: none;
     max-width: 300px;
+    width: 300px;
     background-color: var(--nf-input-background-color);
 
     &::after {

core/static/core/forms.scss

@@ -47,6 +47,7 @@
   }
 
   input,
+  select,
   textarea[type="text"],
   [type="number"],
   .ts-control {
@@ -240,6 +241,23 @@ form {
       }
     }
   }
+  input[type="text"],
+  input[type="email"],
+  input[type="tel"],
+  input[type="url"],
+  input[type="password"],
+  input[type="number"],
+  input[type="date"],
+  input[type="datetime-local"],
+  input[type="week"],
+  input[type="time"],
+  input[type="month"],
+  input[type="search"],
+  textarea,
+  select,
+  .ts-control {
+    min-height: calc(var(--nf-input-size) * 2.5);
+  }
 
   input[type="text"],
   input[type="checkbox"],

core/static/core/style.scss

@@ -506,6 +506,10 @@ th {
   >ul {
     margin-top: 0;
   }
+
+  >input[type="checkbox"] {
+    padding: unset;
+  }
 }
 
 td {

locale/fr/LC_MESSAGES/django.po

@@ -173,10 +173,6 @@ msgstr "L'utilisateur doit être cotisant pour faire partie d'un club"
 msgid "You can not add the same user twice"
 msgstr "Vous ne pouvez pas ajouter deux fois le même utilisateur"
 
-#: club/forms.py
-msgid "You should specify a role"
-msgstr "Vous devez choisir un rôle"
-
 #: club/forms.py sas/forms.py
 msgid "You do not have the permission to do that"
 msgstr "Vous n'avez pas la permission de faire cela"
@@ -326,6 +322,14 @@ msgstr "Il n'y a pas de club dans ce site web."
 msgid "Club members"
 msgstr "Membres du club"
 
+#: club/templates/club/club_members.jinja
+msgid "Add a new member"
+msgstr "Ajouter un nouveau membre"
+
+#: club/templates/club/club_members.jinja
+msgid "Current club members"
+msgstr "Membres actuels du club"
+
 #: club/templates/club/club_members.jinja
 #: club/templates/club/club_old_members.jinja
 #: core/templates/core/user_clubs.jinja
@@ -350,11 +354,6 @@ msgstr "Depuis"
 msgid "There are no members in this club."
 msgstr "Il n'y a pas de membres dans ce club."
 
-#: club/templates/club/club_members.jinja core/templates/core/file_detail.jinja
-#: core/views/forms.py trombi/templates/trombi/detail.jinja
-msgid "Add"
-msgstr "Ajouter"
-
 #: club/templates/club/club_old_members.jinja
 msgid "Club old members"
 msgstr "Anciens membres du club"
@@ -569,6 +568,12 @@ msgstr ""
 msgid "Save"
 msgstr "Sauver"
 
+#: club/templates/club/fragments/add_member.jinja
+#: core/templates/core/file_detail.jinja core/views/forms.py
+#: trombi/templates/trombi/detail.jinja
+msgid "Add"
+msgstr "Ajouter"
+
 #: club/templates/club/mailing.jinja
 msgid "Mailing lists"
 msgstr "Mailing listes"