Merge pull request #716 from maykinmedia/fix/1617-fix-labels-html-syntax

🎨 [#1617] Fixing labels for correct HTML syntax

src/open_inwoner/components/templates/components/Form/ChoiceRadio.html

@@ -1,6 +1,6 @@
 {% load l10n form_tags %}
 
-<label class="radio">
+<div class="radio">
     {% spaceless %}
     {% initial_match as checked %}
     <input
@@ -13,4 +13,4 @@
     />
     <label class="radio__label" for="id_{{ name }}_{{ index }}">{{ choice.1 }}</label>
     {% endspaceless %}
-</label>
+</div>

src/open_inwoner/components/templates/components/Form/Input.html

@@ -3,10 +3,10 @@
 <div class="form__control {{ extra_classes|default:"" }}">
     <label class="label {% if no_label %}label--gapless{% endif %}">
         {% if icon %}{% icon icon outlined=True %}{% endif %}
-        <label class="label__label {% if no_label %}label__label--hidden{% endif %}">
+        <span class="label__label {% if no_label %}label__label--hidden{% endif %}">
             {{ field.label }}
             {% if field.field.required %}<span class="label__label--required"> * </span>{% endif %}
-        </label>
+        </span>
         {{ field|addclass:"input" }}
         {% if field.help_text and not no_help %}
             <p class="p">{{ field.help_text }}</p>

src/open_inwoner/components/templates/components/Header/WarningHeader.html

@@ -0,0 +1,15 @@
+{% load i18n icon_tags link_tags static %}
+
+<style nonce="{{ request.csp_nonce }}"> 
+	.warning-header {
+		background-color: {{ warning_banner_background_color }};
+    color: {{ warning_banner_font_color }};
+	}
+</style>
+
+<div class="warning-header">
+	<div class="warning-header__container">
+    <span class="warning-header__icon">{% icon icon="error_outlined" icon_position="after" outlined=True %}</span>
+		<span class="warning-header__text">{{ warning_banner_text }}</span>
+	</div>
+</div>

src/open_inwoner/configurations/admin.py

@@ -102,6 +102,18 @@ class SiteConfigurarionAdmin(OrderedInlineModelAdminMixin, SingletonModelAdmin):
                 )
             },
         ),
+        (
+            _("Warning banner"),
+            {
+                "classes": ("collapse",),
+                "fields": (
+                    "warning_banner_enabled",
+                    "warning_banner_text",
+                    "warning_banner_background_color",
+                    "warning_banner_font_color",
+                ),
+            },
+        ),
         (
             _("Page texts"),
             {
@@ -237,6 +249,13 @@ def check_contrast_ratio(label1, color1, label2, color2, expected_ratio):
             obj.accent_font_color,
             ACCESSIBLE_CONTRAST_RATIO,
         )
+        check_contrast_ratio(
+            _("Warning banner background color"),
+            obj.warning_banner_background_color,
+            _("Warning banner font color"),
+            obj.warning_banner_font_color,
+            ACCESSIBLE_CONTRAST_RATIO,
+        )
 
     def save_model(self, request, obj, form, change):
         super().save_model(request, obj, form, change)

src/open_inwoner/configurations/migrations/0047_auto_20230809_0833.py

@@ -0,0 +1,53 @@
+# Generated by Django 3.2.15 on 2023-08-09 06:33
+
+from django.db import migrations, models
+
+import colorfield.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("configurations", "0046_siteconfiguration_cookie_consent"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="siteconfiguration",
+            name="warning_banner_background_color",
+            field=colorfield.fields.ColorField(
+                default="#FFDBAD",
+                help_text="The background color for the warning banner",
+                max_length=18,
+                verbose_name="Warning banner background",
+            ),
+        ),
+        migrations.AddField(
+            model_name="siteconfiguration",
+            name="warning_banner_enabled",
+            field=models.BooleanField(
+                default=False,
+                help_text="Whether the warning banner should be displayed",
+                verbose_name="Show warning banner",
+            ),
+        ),
+        migrations.AddField(
+            model_name="siteconfiguration",
+            name="warning_banner_font_color",
+            field=colorfield.fields.ColorField(
+                default="#000000",
+                help_text="The font color for the warning banner",
+                max_length=18,
+                verbose_name="Warning banner font",
+            ),
+        ),
+        migrations.AddField(
+            model_name="siteconfiguration",
+            name="warning_banner_text",
+            field=models.TextField(
+                blank=True,
+                help_text="Text will be displayed on the warning banner",
+                verbose_name="Warning banner text",
+            ),
+        ),
+    ]

src/open_inwoner/configurations/models.py

@@ -57,6 +57,26 @@ class SiteConfiguration(SingletonModel):
         default=ColorTypeChoices.dark,
         help_text=_("The font color for when the background is the accent color"),
     )
+    warning_banner_enabled = models.BooleanField(
+        verbose_name=_("Show warning banner"),
+        default=False,
+        help_text=_("Whether the warning banner should be displayed"),
+    )
+    warning_banner_text = models.TextField(
+        verbose_name=_("Warning banner text"),
+        blank=True,
+        help_text=_("Text will be displayed on the warning banner"),
+    )
+    warning_banner_background_color = ColorField(
+        verbose_name=_("Warning banner background"),
+        default="#FFDBAD",
+        help_text=_("The background color for the warning banner"),
+    )
+    warning_banner_font_color = ColorField(
+        verbose_name=_("Warning banner font"),
+        default="#000000",
+        help_text=_("The font color for the warning banner"),
+    )
     logo = FilerImageField(
         verbose_name=_("Logo"),
         null=True,

src/open_inwoner/pdc/migrations/0037_category_highlighted.py

@@ -15,7 +15,7 @@ class Migration(migrations.Migration):
             name="highlighted",
             field=models.BooleanField(
                 default=False,
-                help_text="Wether the category should be highlighted or not",
+                help_text="Whether the category should be highlighted or not",
                 verbose_name="Highlighted",
             ),
         ),

src/open_inwoner/pdc/migrations/0038_auto_20220601_1435.py

@@ -1,8 +1,9 @@
 # Generated by Django 3.2.13 on 2022-06-01 12:35
 
+import django.db.models.deletion
 from django.conf import settings
 from django.db import migrations, models
-import django.db.models.deletion
+
 import filer.fields.image
 
 
@@ -45,7 +46,7 @@ class Migration(migrations.Migration):
             name="highlighted",
             field=models.BooleanField(
                 default=False,
-                help_text="Wether the category should be highlighted or not.",
+                help_text="Whether the category should be highlighted or not.",
                 verbose_name="Highlighted",
             ),
         ),

src/open_inwoner/scss/components/Card/Card.scss

@@ -66,6 +66,11 @@
     .form .caption__content {
       color: var(--color-tinted-mute);
     }
+
+    .card__body--direction-horizontal .link .link__text {
+      text-align: right;
+      padding-left: var(--spacing-small);
+    }
   }
 
   &__img {

src/open_inwoner/scss/components/Form/MultiCheckbox.scss

@@ -10,7 +10,8 @@
   margin: 0;
   gap: 18px;
 
-  label {
+  label,
+  .label {
     display: flex;
     flex-direction: row;
     gap: 10px;

src/open_inwoner/scss/components/WarningHeader/WarningHeader.scss

@@ -0,0 +1,24 @@
+.warning-header {
+  display: flex;
+  box-sizing: border-box;
+  padding: var(--spacing-large);
+
+  .warning-header__container {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin: 0 auto;
+
+    @media (min-width: 768px) {
+      max-width: 90%;
+    }
+
+    .warning-header__icon,
+    .warning-header__text {
+      padding: var(--spacing-small);
+    }
+    .warning-header__icon {
+      width: 20px;
+    }
+  }
+}

src/open_inwoner/scss/components/_index.scss

@@ -97,3 +97,4 @@
 @import './Emoji/Emoji.scss';
 @import './Profile/personal-information';
 @import './Profile/edit.scss';
+@import './WarningHeader/WarningHeader.scss';

src/open_inwoner/templates/master.html

@@ -37,6 +37,10 @@
     </head>
 
     <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+        {% if warning_banner_enabled %}
+          {% include "components/Header/WarningHeader.html" %}
+        {% endif %}
+
         {% cms_toolbar %}
         {% header categories=menu_categories request=request breadcrumbs=breadcrumbs search_form=search_form has_general_faq_questions=has_general_faq_questions cms_apps=cms_apps %}
 

src/open_inwoner/templates/pages/plans/create.html

@@ -24,16 +24,16 @@ <h1 class="h1">{% trans "Start nieuwe samenwerking" %}</h1>
                         <div>{% trans "Doel" %}</div>
                         <div></div>
                     </div>
-                    <label class="plan-template__row radio">
+                    <div class="label plan-template__row radio">
                         <div>
                             <input class="radio__input" type="radio" name="template" value="" id="id_template_0" {% if not form.data.template %}checked{% endif %}>
                             <label class="radio__label" for="id_template_0">Geen template</label>
                         </div>
                         <div></div>
                         <div></div>
-                    </label>
+                    </div>
                     {% for tpl_id, plan_template in form.template.field.choices %}
-                        <label class="plan-template__row radio">
+                        <div class="label plan-template__row radio">
                             <div>
                                 <input class="radio__input" type="radio" name="template" value="{{ plan_template.id }}" id="id_template_{{ plan_template.id }}"
                                        {% if tpl_id == form.data.template %}checked{% endif %}>
@@ -60,7 +60,7 @@ <h2 class="h2 modal__title" id="modal__title">{{ plan_template.name }}
                                     </div>
                                 </div>
                             </div>
-                        </label>
+                        </div>
                     {% endfor %}
                 </div>
 

src/open_inwoner/templates/utils/widgets/message_file_input.html

@@ -1,5 +1,5 @@
 <input type="{{ widget.type }}" name="{{ widget.name }}" data-init="{{ widget.value|default:'' }}"{% include "django/forms/widgets/attrs.html" %}>
-<label>
+<span>
     <input type="text" name="{{ widget.init_name }}" id="{{ widget.init_id }}" {% if widget.value %} value="{{ widget.value.instance.uuid }}"{% endif %} class="message-file__init">
-</label>
+</span>
 

src/open_inwoner/templates/utils/widgets/private_file_input.html

@@ -1,5 +1,5 @@
 {% if widget.is_initial %}{{ widget.initial_text }}: <a href="{{ url }}">{{ widget.value }}</a>{% if not widget.required %}
 <input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"{% if widget.attrs.disabled %} disabled{% endif %}>
-<label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>{% endif %}<br>
+<span for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</span>{% endif %}<br>
 {{ widget.input_text }}:{% endif %}
 <input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>

src/open_inwoner/utils/context_processors.py

@@ -87,6 +87,10 @@ def settings(request):
             [(k, getattr(django_settings, k, None)) for k in public_settings]
         ),
         "hide_categories_from_anonymous_users": config.hide_categories_from_anonymous_users,
+        "warning_banner_enabled": config.warning_banner_enabled,
+        "warning_banner_text": config.warning_banner_text,
+        "warning_banner_background_color": config.warning_banner_background_color,
+        "warning_banner_font_color": config.warning_banner_font_color,
     }
 
     if hasattr(django_settings, "SENTRY_CONFIG"):

src/open_inwoner/utils/templatetags/utils.py

@@ -5,6 +5,8 @@
 
 from humanfriendly import format_size
 
+from open_inwoner.configurations.models import SiteConfiguration
+
 register = template.Library()