Merge pull request #965 from ae-utbm/form-style

rework form style
ae-utbm · Dec 27, 2024 · 2f9e5bf · 2f9e5bf
2 parents 11702d3 + 72c2981
commit 2f9e5bf
Show file tree

Hide file tree

Showing 9 changed files with 761 additions and 213 deletions.
diff --git a/core/static/core/forms.scss b/core/static/core/forms.scss
diff --git a/core/static/core/header.scss b/core/static/core/header.scss
@@ -33,8 +33,8 @@ $hovered-red-text-color: #ff4d4d;
     flex-direction: row;
     gap: 10px;
 
-    >a {
-      color: $text-color;
+    > a {
+      color: $text-color!important;
     }
 
     &:hover>a {
@@ -395,9 +395,9 @@ $hovered-red-text-color: #ff4d4d;
         }
 
         >input[type=text] {
-          box-sizing: border-box;
-          max-width: 100%;
           width: 100%;
+          min-width: unset;
+          border: unset;
           height: 35px;
           border-radius: 5px;
           font-size: .9em;

diff --git a/core/static/core/style.scss b/core/static/core/style.scss
@@ -446,6 +446,11 @@ body {
         row-gap: $i * $row-gap;
       }
     }
+
+    // Make an element of the row take as much space as needed
+    .grow {
+      flex: 1;
+    }
   }
 
   /*---------------------------------NEWS--------------------------------*/
@@ -1424,16 +1429,6 @@ footer {
   width: 97%;
 }
 
-#user_edit {
-  * {
-    text-align: center;
-  }
-
-  img {
-    width: 100px;
-  }
-}
-
 #cash_summary_form label,
 .inline {
   display: inline;

diff --git a/core/static/user/user_edit.scss b/core/static/user/user_edit.scss
@@ -1,26 +1,9 @@
-
 @media (max-width: 750px) {
   .title {
     text-align: center;
   }
 }
 
-.field-error {
-  height: auto !important;
-
-  > ul {
-    list-style-type: none;
-    margin: 0;
-    color: indianred;
-
-    > li {
-      text-align: left !important;
-      line-height: normal;
-      margin-top: 5px;
-    }
-  }
-}
-
 .profile {
   &-visible {
     display: flex;
@@ -87,11 +70,7 @@
         max-height: 100%;
       }
 
-      > i {
-        font-size: 32px;
-      }
-
-      >p {
+      > p {
         text-align: left !important;
         width: 100% !important;
       }
@@ -107,25 +86,15 @@
       > div {
         max-width: 100%;
 
-        > input {
-          font-weight: normal;
-          cursor: pointer;
-          text-align: left !important;
-        }
-
-        > button {
-          min-width: 30%;
-        }
-
         @media (min-width: 750px) {
           height: auto;
           align-items: center;
           display: inline-flex;
           overflow: hidden;
 
           > input {
-            width: 70%;
             font-size: .6em;
+
             &::file-selector-button {
               height: 30px;
             }
@@ -167,7 +136,7 @@
       max-width: 100%;
     }
 
-    >* {
+    > * {
       width: 100%;
       max-width: 300px;
 
@@ -181,45 +150,22 @@
     }
 
     &-content {
-
-      >* {
+      > * {
         box-sizing: border-box;
         text-align: left !important;
-        line-height: 40px;
-        max-width: 100%;
-        width: 100%;
-        height: 40px;
         margin: 0;
 
-        >* {
+        > * {
           text-align: left !important;
         }
       }
+    }
 
-
-      >textarea {
-        height: 120px;
-        min-height: 40px;
-        min-width: 300px;
-        max-width: 300px;
-        line-height: initial;
-
-        @media (max-width: 750px) {
-          max-width: 100%;
-        }
-      }
-
-      >input[type="file"] {
-        font-size: small;
-        line-height: 30px;
-      }
-
-      >input[type="checkbox"] {
-        width: 20px;
-        height: 20px;
-        margin: 0;
-        float: left;
-      }
+    textarea {
+      height: 7rem;
+    }
+    .final-actions {
+      text-align: center;
     }
   }
 }
diff --git a/core/templates/core/user_edit.jinja b/core/templates/core/user_edit.jinja
@@ -63,9 +63,7 @@
             {%- trans -%}Delete{%- endtrans -%}
           </button>
         </div>
-        <p>
-          {{ form[field_name].label }}
-        </p>
+        {{ form[field_name].label_tag() }}
         {{ form[field_name].errors }}
       {%- else -%}
         <em>{% trans %}To edit your profile picture, ask a member of the AE{% endtrans %}</em>
@@ -118,68 +116,68 @@
     {# All fields #}
     <div class="profile-fields">
       {%- for field in form -%}
-        {%-
-        if field.name in ["quote","profile_pict","avatar_pict","scrub_pict","is_subscriber_viewable","forum_signature"]
-        -%}
-        {%- continue -%}
-      {%- endif -%}
+        {%- if field.name in ["quote","profile_pict","avatar_pict","scrub_pict","is_subscriber_viewable","forum_signature"] -%}
+          {%- continue -%}
+        {%- endif -%}
 
-      <div class="profile-field">
-        <div class="profile-field-label">{{ field.label }}</div>
-        <div class="profile-field-content">
-          {{ field }}
-          {%- if field.errors -%}
-            <div class="field-error">{{ field.errors }}</div>
-          {%- endif -%}
+        <div class="profile-field">
+          <div class="profile-field-label">{{ field.label }}</div>
+          <div class="profile-field-content">
+            {{ field }}
+            {%- if field.errors -%}
+              <div class="field-error">{{ field.errors }}</div>
+            {%- endif -%}
+          </div>
         </div>
-      </div>
-{%- endfor -%}
-</div>
+      {%- endfor -%}
+    </div>
 
     {# Textareas #}
-<div class="profile-fields">
-  {%- for field in [form.quote, form.forum_signature] -%}
-    <div class="profile-field">
-      <div class="profile-field-label">{{ field.label }}</div>
-      <div class="profile-field-content">
-        {{ field }}
-        {%- if field.errors -%}
-          <div class="field-error">{{ field.errors }}</div>
-        {%- endif -%}
-      </div>
+    <div class="profile-fields">
+      {%- for field in [form.quote, form.forum_signature] -%}
+        <div class="profile-field">
+          <div class="profile-field-label">{{ field.label }}</div>
+          <div class="profile-field-content">
+            {{ field }}
+            {%- if field.errors -%}
+              <div class="field-error">{{ field.errors }}</div>
+            {%- endif -%}
+          </div>
+        </div>
+      {%- endfor -%}
     </div>
-  {%- endfor -%}
-</div>
 
     {# Checkboxes #}
-<div class="profile-visible">
-  {{ form.is_subscriber_viewable }}
-  {{ form.is_subscriber_viewable.label }}
-</div>
+    <div class="profile-visible">
+      {{ form.is_subscriber_viewable }}
+      {{ form.is_subscriber_viewable.label }}
+    </div>
+    <div class="final-actions">
+
+      {%- if form.instance == user -%}
+        <p>
+          <a href="{{ url('core:password_change') }}">{%- trans -%}Change my password{%- endtrans -%}</a>
+        </p>
+      {%- elif user.is_root -%}
+        <p>
+          <a href="{{ url('core:password_root_change', user_id=form.instance.id) }}">
+            {%- trans -%}Change user password{%- endtrans -%}
+          </a>
+        </p>
+      {%- endif -%}
+
+      <p>
+        <input type="submit" value="{%- trans -%}Update{%- endtrans -%}" />
+      </p>
+    </div>
+  </form>
 
-{%- if form.instance == user -%}
-  <p>
-    <a href="{{ url('core:password_change') }}">{%- trans -%}Change my password{%- endtrans -%}</a>
-  </p>
-{%- elif user.is_root -%}
   <p>
-    <a href="{{ url('core:password_root_change', user_id=form.instance.id) }}">
-      {%- trans -%}Change user password{%- endtrans -%}
-    </a>
+    <em>{%- trans -%}Username: {%- endtrans -%}&nbsp;{{ form.instance.username }}</em>
+    <br />
+    {%- if form.instance.customer -%}
+      <em>{%- trans -%}Account number: {%- endtrans -%}&nbsp;{{ form.instance.customer.account_id }}</em>
+    {%- endif -%}
   </p>
-{%- endif -%}
-
-<p>
-  <input type="submit" value="{%- trans -%}Update{%- endtrans -%}" />
-</p>
-</form>
-
-<p>
-  <em>{%- trans -%}Username: {%- endtrans -%}&nbsp;{{ form.instance.username }}</em>
-  <br />
-  {%- if form.instance.customer -%}
-    <em>{%- trans -%}Account number: {%- endtrans -%}&nbsp;{{ form.instance.customer.account_id }}</em>
-  {%- endif -%}
-</p>
 
 {%- endblock -%}
diff --git a/core/views/forms.py b/core/views/forms.py
@@ -173,6 +173,9 @@ class Meta:
 class UserProfileForm(forms.ModelForm):
     """Form handling the user profile, managing the files"""
 
+    required_css_class = "required"
+    error_css_class = "error"
+
     class Meta:
         model = User
         fields = [

diff --git a/counter/forms.py b/counter/forms.py
@@ -47,6 +47,8 @@ class Meta:
 class StudentCardForm(forms.ModelForm):
     """Form for adding student cards"""
 
+    error_css_class = "error"
+
     class Meta:
         model = StudentCard
         fields = ["uid"]

diff --git a/counter/templates/counter/product_list.jinja b/counter/templates/counter/product_list.jinja
@@ -32,7 +32,7 @@
             x-model.debounce.500ms="search"
           />
         </fieldset>
-        <fieldset>
+        <fieldset class="grow">
           <legend>{% trans %}Product state{% endtrans %}</legend>
           <div class="row">
             <input type="radio" id="filter-active-products" x-model="productStatus" value="active">

diff --git a/eboutic/templates/eboutic/eboutic_makecommand.jinja b/eboutic/templates/eboutic/eboutic_makecommand.jinja
@@ -77,8 +77,7 @@
             >
               {% csrf_token %}
               {{ billing_form }}
-              <br>
-              <br>
+              <br />
               <div
                 x-show="[BillingInfoReqState.SUCCESS, BillingInfoReqState.FAILURE].includes(reqState)"
                 class="alert"