platform-mail: update styling & fix issue with email clients when sen…

…der is missing

changelog/8683.md

@@ -0,0 +1,6 @@
+### Changed
+- New design for platform mail form
+- sender field is now required to prevent issues with email clients
+- CKEditor styling for redesign
+- change default values for fields in platform email form
+

meinberlin/apps/platformemails/forms.py

@@ -17,3 +17,7 @@ class Meta:
                 "people in summer."
             ),
         }
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.fields["sender"].required = True

meinberlin/apps/platformemails/templates/meinberlin_platformemails/platformemail_form.html

@@ -1,35 +1,31 @@
-{% extends "a4dashboard/base_dashboard.html" %}
+{% extends "base.html" %}
 {% load i18n %}
 {% block title %}
-    {% translate 'Create platform email' %}
+  {% translate 'Create platform email' %}
 {% endblock title %}
 {% block content %}
-    <div class="container">
-        <div class="offset-lg-3 col-lg-6">
-            <h1>{% translate 'Create platform email' %}</h1>
-            <p class="form-hint">
-                {% blocktranslate %}This email will be sent to all registered and verified users of mein.berlin.de.{% endblocktranslate %}
-            </p>
-            <form novalidate
-                  enctype="multipart/form-data"
-                  action="{{ request.path }}"
-                  method="post">
-                {% csrf_token %}
-                {{ form.media }}
-                <div class="l-tiles-2">
-                    {% include 'a4forms/includes/form_field.html' with field=form.sender_name %}
-                    {% include 'a4forms/includes/form_field.html' with field=form.sender %}
-                </div>
-                {% include 'a4forms/includes/form_field.html' with field=form.subject %}
-                {% include 'a4forms/includes/form_field.html' with field=form.body %}
-                <div class="u-spacer-bottom">
-                    <input type="submit"
-                           class="btn btn--primary"
-                           name="send"
-                           value="{% translate 'Send' %}" />
-                    <a href="{% url 'wagtail_serve' '' %}" class="btn btn--light">{% translate 'Cancel' %}</a>
-                </div>
-            </form>
-        </div>
-    </div>
+  <div class="narrow-wrapper">
+    <h1 class="mb-1">{% translate 'Create platform email' %}</h1>
+    <p>
+      {% blocktranslate %}This email will be sent to all registered and verified users of mein.berlin.de.{% endblocktranslate %}
+    </p>
+    <form novalidate
+          enctype="multipart/form-data"
+          action="{{ request.path }}"
+          method="post">
+      {% csrf_token %}
+      {{ form.media }}
+      <div class="l-tiles-2">
+        {% include 'meinberlin_contrib/includes/form_field.html' with field=form.sender_name %}
+        {% include 'meinberlin_contrib/includes/form_field.html' with field=form.sender %}
+      </div>
+      {% include 'meinberlin_contrib/includes/form_field.html' with field=form.subject %}
+      {% include 'meinberlin_contrib/includes/form_field.html' with field=form.body %}
+
+      <div class="narrow-wrapper__secondary-cta narrow-wrapper__secondary-cta--left">
+        <a href="{% url 'wagtail_serve' '' %}">{% translate 'Cancel' %}</a>
+      </div>
+      <button type="submit" class="button button--full-width" name="send">{% translate 'Send' %}</button>
+    </form>
+  </div>
 {% endblock content %}

meinberlin/apps/platformemails/views.py

@@ -1,4 +1,3 @@
-from django.conf import settings
 from django.contrib import auth
 from django.contrib import messages
 from django.http.response import HttpResponseRedirect
@@ -24,11 +23,9 @@ class PlatformEmailCreateView(rules_mixins.PermissionRequiredMixin, generic.Crea
     def get_form_kwargs(self):
         kwargs = super().get_form_kwargs()
 
-        sender_name = settings.WAGTAIL_SITE_NAME
-
         kwargs["initial"] = {
-            "sender_name": sender_name,
-            "sender": settings.CONTACT_EMAIL,
+            "sender_name": "mein.berlin.de",
+            "sender": "[email protected]",
         }
         return kwargs
 

meinberlin/assets/scss/components_user_facing/_narrow-wrapper.scss

@@ -15,6 +15,12 @@
     }
 }
 
+.narrow-wrapper__secondary-cta--left {
+    padding-left: 0;
+    margin-left: 0;
+    text-align: left;
+}
+
 .narrow-wrapper__footer {
     padding: 1em 0 3em;
 
@@ -30,4 +36,4 @@
         padding: 1.2em 0 4.6em;
     }
 
-}
+}

meinberlin/assets/scss/components_user_facing/ck-editor/_base.scss

@@ -0,0 +1,8 @@
+.ck .ck-toolbar {
+  border: 2px solid black !important;
+  border-bottom: none !important;
+}
+
+.ck .ck-editor__editable {
+  border: 2px solid black !important;
+}

meinberlin/assets/scss/style_user_facing.scss

@@ -74,5 +74,6 @@
 @import "components_user_facing/adhocracy4/a4-textarea-with-counter";
 
 // ck-editor
+@import "components_user_facing/ck-editor/base";
 @import "components_user_facing/ck-editor/collapsible-fragment";
 @import "components_user_facing/ck-editor/iframe";

meinberlin/assets/scss/styles_user_facing/_utility.scss

@@ -42,6 +42,10 @@
     margin-top: 0.5em;
 }
 
+.mb-1 {
+    margin-bottom: .5em;
+}
+
 .mb-2 {
     margin-bottom: 1em;
 }