✨ [#988] IMPROVE the forms.

maykinmedia · Dec 10, 2024 · 5c09224 · 5c09224
1 parent 36fc809
commit 5c09224
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 67 deletions.
diff --git a/src/sdg/js/components/formset/add_formset_form.js b/src/sdg/js/components/formset/add_formset_form.js
@@ -9,7 +9,7 @@ import { DynamicTitle } from "../dynamic_title";
 import { DynamicCheckbox } from "./dynamic_checkbox";
 
 /** @type {HTMLDivElement} */
-const ADD_FORM_ELEMENT = document.querySelector(".formset__add");
+const ADD_FORM_ELEMENT = document.querySelector(".formset__button--add");
 const PREFIX_PLACEHOLDER = "__prefix__";
 
 class AddFormsetForm extends FormsetFormComponent {

diff --git a/src/sdg/js/components/formset/remove_formset_form.js b/src/sdg/js/components/formset/remove_formset_form.js
@@ -1,6 +1,6 @@
 import { FormsetFormComponent } from "./abstract/formset_form_component";
 
-const REMOVE_ELEMENTS = document.querySelectorAll(".formset__remove");
+const REMOVE_ELEMENTS = document.querySelectorAll(".formset__button--remove");
 
 export class RemoveFormsetForm extends FormsetFormComponent {
     /**

diff --git a/src/sdg/organisaties/migrations/0033_auto_20241022_1421.py b/src/sdg/organisaties/migrations/0033_auto_20241022_1421.py
@@ -6,17 +6,21 @@
 class Migration(migrations.Migration):
 
     dependencies = [
-        ('organisaties', '0032_alter_links'),
+        ("organisaties", "0032_alter_links"),
     ]
 
     operations = [
         migrations.AlterModelOptions(
-            name='lokatie',
-            options={'ordering': ('order', 'naam'), 'verbose_name': 'locatie', 'verbose_name_plural': 'locaties'},
+            name="lokatie",
+            options={
+                "ordering": ("order", "naam"),
+                "verbose_name": "locatie",
+                "verbose_name_plural": "locaties",
+            },
         ),
         migrations.AddField(
-            model_name='lokatie',
-            name='order',
-            field=models.PositiveIntegerField(default=0, verbose_name='order'),
+            model_name="lokatie",
+            name="order",
+            field=models.PositiveIntegerField(default=0, verbose_name="order"),
         ),
     ]
diff --git a/src/sdg/scss/components/_form.scss b/src/sdg/scss/components/_form.scss
@@ -67,6 +67,7 @@
     padding: .75rem;
     vertical-align: top;
     width: 100%;
+    padding: 12px;
 
     // Input states
     &[disabled],
@@ -80,6 +81,12 @@
       color: transparent;
     }
 
+    &:focus-visible {
+      // Use CK-editor focus state as default focus state.
+      box-shadow: var(--ck-inner-shadow), 0 0;
+      --field-border-color: var(--ck-color-focus-border);
+    }
+
     // Modifiers
     &--preview {
       --field-border-color: #{$color_grey_light};
@@ -244,26 +251,6 @@
     }
   }
 
-  &__input {
-    border: 1px solid #dfdfdf;
-    padding: 12px;
-    outline: none;
-    font-size: 16px;
-    width: 100%;
-    min-height: 57px;
-
-    &[disabled],
-    &[readonly]:not(.flatpickr-input),
-    &--disabled {
-      background-color: $color_grey_lightest;
-    }
-
-    &[disabled]::placeholder,
-    &[readonly]::placeholder {
-      color: transparent;
-    }
-  }
-
   &__block {
     width: 425px;
 

diff --git a/src/sdg/scss/components/_formset.scss b/src/sdg/scss/components/_formset.scss
@@ -8,7 +8,6 @@
     --margin-bottom: 32px;
     --text-gap: .75rem;
     --font-size: 1rem;
-    --button-size: ;
 
     margin-bottom: var(--margin-bottom);
     color: var(--text-color);
@@ -17,7 +16,6 @@
         font-size: 13.3333px;
     }
 
-
     &__form{
         margin-bottom: var(--margin-bottom);
         border: 1px solid var(--border-color);
@@ -84,7 +82,6 @@
         }
     }
 
-
     &__header {
         display: flex;
         gap: var(--x-spacing);
@@ -106,24 +103,6 @@
     &__label {
         font-size: 16px;
     }
-
-
-
-    .button {
-        margin: 0;
-    }
-
-    button:not(.button) {
-        appearance: none;
-        color: #0b71a1;
-        border: none;
-        padding: 0;
-        font-size: 1rem;
-        cursor: pointer;
-        background-color: transparent;
-
-    }
-
 
     &__footer{
         padding: 24px;
@@ -148,20 +127,30 @@
     &__form:not(&__form--hidden) &__toggle-indication {
         transform: rotate(180deg);
     }
-
-    // TODO: Change this element to a button and disable the native styling.
-    &__add {
-        color: #0b71a1;
+
+    &__button {
         cursor: pointer;
-        margin-bottom: 42px;
-        margin-left: 16px;
         border: none;
         font-size: 1rem;
-        margin-bottom: 10px;
         padding: 0;
         background-color: transparent;
-    }
+        appearance: none;
 
+        &--add {
+            color: #0b71a1;
+            margin-bottom: 42px;
+            margin-left: 16px;
+            margin-bottom: 10px;
+        }
+
+        &--remove {
+            color: $color_red;
+        }
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
 
     // Remove the dynamic title '(' & ')' if there is no dyanmic title target availible
     &__form-name:has([class*="dynamic_title_target"]:empty){

diff --git a/src/sdg/templates/forms/location_form.html b/src/sdg/templates/forms/location_form.html
@@ -53,7 +53,7 @@ <h3 class="formset__form-title">
             </div>
         </div>
         <footer class="formset__ftr formset__footer">
-            <button class="formset__remove red" type="button">
+            <button class="formset__button formset__button--remove" type="button">
                 <i class="far fa-trash-alt"></i>
                 {% trans "Locatie verwijderen" %}
             </button>

diff --git a/src/sdg/templates/forms/organization_form.html b/src/sdg/templates/forms/organization_form.html
@@ -35,7 +35,7 @@ <h3 class="formset__form-title">
         </div>
 
         <footer class="formset__footer">
-            <button class="formset__remove red" type="button">
+            <button class="formset__button formset__button--remove" type="button">
                 <i class="far fa-trash-alt"></i>
                 {% trans "Organisatie verwijderen" %}
             </button>

diff --git a/src/sdg/templates/organisaties/_prefix/locatie_formset.html b/src/sdg/templates/organisaties/_prefix/locatie_formset.html
@@ -48,7 +48,7 @@ <h3 class="formset__form-title">
             </div>
         </div>
         <footer class="formset__footer">
-            <button class="formset__remove red" type="button">
+            <button class="formset__button formset__button--remove" type="button">
                 <i class="far fa-trash-alt"></i>
                 {% trans "Locatie verwijderen" %}
             </button>

diff --git a/src/sdg/templates/organisaties/_prefix/organisatie_formset.html b/src/sdg/templates/organisaties/_prefix/organisatie_formset.html
@@ -28,7 +28,7 @@ <h3 class="formset__form-title">
             </div>
         </div>
         <footer class="formset__footer">
-            <button class="formset__remove red" type="button">
+            <button class="formset__button formset__button--remove" type="button">
                 <i class="far fa-trash-alt"></i>
                 {% trans "Organisatie verwijderen" %}
             </button>

diff --git a/src/sdg/templates/organisaties/bevoegde_organisaties.html b/src/sdg/templates/organisaties/bevoegde_organisaties.html
@@ -48,7 +48,7 @@ <h3 class="formset__form-title">
                 {% endfor %}
             </div>
         </div>
-        <button class="formset__add" data-formset-prefix="{{ locatie_formset.prefix }}" type="button">
+        <button class="formset__button formset__button--add" data-formset-prefix="{{ locatie_formset.prefix }}" type="button">
             <i class="fas fa-plus"></i>
             {% trans "Nog een organisatie toevoegen" %}
         </button>

diff --git a/src/sdg/templates/organisaties/locaties.html b/src/sdg/templates/organisaties/locaties.html
@@ -2,6 +2,11 @@
 {% load static i18n utils %}
 
 {% block page_title %}{% trans "Locaties" %}{% endblock %}
+{% block page_intro %}
+    <p class="subheading">
+        {% trans "Je kant hier alle locaties opgeven waar producten worden aangeboden. Bij elk product kan je vervolgens een of meer locaties selecteren uit deze lijst." %}
+    </p>
+{% endblock %}
 
 {% block inner_content %}
     <form action="{% url "organisaties:locaties" pk=lokaleoverheid.pk %}" method="post" class="form">
@@ -16,7 +21,7 @@
                 {% endfor %}
             </div>
         </div>
-        <button class="formset__add" data-formset-prefix="{{ locatie_formset.prefix }}" type="button">
+        <button class="formset__button formset__button--add" data-formset-prefix="{{ locatie_formset.prefix }}" type="button">
             <i class="fas fa-plus"></i>
             {% trans "Nog een locatie toevoegen" %}
         </button>

diff --git a/src/sdg/utils/templatetags/utils.py b/src/sdg/utils/templatetags/utils.py
@@ -116,14 +116,24 @@ def order_field(context, field=None, **kwargs):
 
 
 @register.inclusion_tag("forms/location_form.html", takes_context=True)
-def location_form(context,subform, initialOrder, **kwargs):
+def location_form(context, subform, initialOrder, **kwargs):
     print(subform)
-    return {"context":context, "subform": subform, "initialOrder": initialOrder, **kwargs}
+    return {
+        "context": context,
+        "subform": subform,
+        "initialOrder": initialOrder,
+        **kwargs,
+    }
 
 
 @register.inclusion_tag("forms/organization_form.html", takes_context=True)
-def organization_form(context,subform, initialOrder, **kwargs):
-    return {"context":context, "subform": subform, "initialOrder": initialOrder, **kwargs}
+def organization_form(context, subform, initialOrder, **kwargs):
+    return {
+        "context": context,
+        "subform": subform,
+        "initialOrder": initialOrder,
+        **kwargs,
+    }
 
 
 @register.inclusion_tag("forms/table_grid_field.html")