Unify design of the different mail previews

src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html

@@ -27,9 +27,9 @@
                                 <div id="{{ item }}_edit" class="tab-pane fade in active">
                                     {% bootstrap_field field show_label=False form_group_class="" %}
                                 </div>
-                                <div id="{{ item }}_preview" class="tab-pane">
+                                <div id="{{ item }}_preview" class="tab-pane mail-preview-group">
                                     {% for l in request.event.settings.locales %}
-                                        <pre lang="{{ l }}" for="{{ item }}"></pre>
+                                        <pre lang="{{ l }}" for="{{ item }}" class="mail-preview"></pre>
                                     {% endfor %}
                                 </div>
                             </div>
@@ -50,4 +50,4 @@
             {% endwith %}
         </div>
     </div>
-</div>
+</div>

src/pretix/control/views/event.py

@@ -423,7 +423,7 @@ class MailSettingsPreview(EventPermissionRequiredMixin, View):
         return {
             'date': date_format(now() + timedelta(days=7), 'SHORT_DATE_FORMAT'),
             'expire_date': date_format(now() + timedelta(days=15), 'SHORT_DATE_FORMAT'),
-            'payment_info': _('{} {} has been transferred to account<9999-9999-9999-9999> at {}').format(
+            'payment_info': _('{} {} has been transferred to account <9999-9999-9999-9999> at {}').format(
                 42.23, self.request.event.currency, date_format(now(), 'SHORT_DATETIME_FORMAT'))
         }
 

src/pretix/plugins/sendmail/templates/pretixplugins/sendmail/send_form.html

@@ -13,22 +13,15 @@
             {% if request.method == "POST" %}
             <fieldset>
             <legend>{% trans "E-mail preview" %}</legend>
-                {% for locale, segments in output.items %}
+                <div class="tab-pane mail-preview-group">
-                    <div class="panel panel-default">
+                    {% for locale, segments in output.items %}
-                        <div class="panel-heading">
+                        <pre lang="{{ locale }}" class="mail-preview">{% spaceless %}
-                            <h4 class="panel-title">
-                                <strong>{% blocktrans %}For locale: {{ locale }}{% endblocktrans %}</strong>
-                            </h4>
-                        </div>
-                        <div class="panel-body">
                             {% for value in segments %}
-                                <p>
+                                {{ value|linebreaksbr }}
-                                    {{ value|linebreaksbr }}
-                                </p>
                             {% endfor %}
-                        </div>
+                        {% endspaceless %}</pre>
-                    </div>
+                    {% endfor %}
-                {% endfor %}
+                </div>
             </fieldset>
             {% endif %}
             <div class="form-group submit-group">

src/pretix/static/pretixcontrol/scss/_flags.scss

@@ -9,7 +9,7 @@ textarea[lang] {
 pre[lang] {
   background: no-repeat 10px 10px;
   padding-left: 34px;
-  padding-top: 5px;
+  padding-top: 8px;
   margin-bottom: 20px;
 }
 
@@ -255,5 +255,4 @@ pre[lang=yt], input[lang=yt], textarea[lang=yt] { background-image: url(static('
 pre[lang=za], input[lang=za], textarea[lang=za] { background-image: url(static('pretixbase/img/flags/za.png')); }
 pre[lang=zm], input[lang=zm], textarea[lang=zm] { background-image: url(static('pretixbase/img/flags/zm.png')); }
 pre[lang=zw], input[lang=zw], textarea[lang=zw] { background-image: url(static('pretixbase/img/flags/zw.png')); }
-
 pre[lang=en], input[lang=en], textarea[lang=en] { background-image: url(static('pretixbase/img/flags/gb.png')); }

src/pretix/static/pretixcontrol/scss/_forms.scss

@@ -117,3 +117,24 @@ div[data-formset-body], div[data-formset-form], div[data-nested-formset-form], d
 .ticketoutput-panel .panel-title {
   line-height: 30px;
 }
+
+pre.mail-preview {
+  white-space: pre-line;       /* Since CSS 2.1 */
+  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+
+.mail-preview-group pre[lang] {
+  @include border-top-radius(0px);
+  @include border-bottom-radius(0px);
+  border-top-width: 0;
+  margin-bottom: 0;
+
+  &:first-child {
+    @include border-top-radius($input-border-radius);
+    border-top-width: 1px;
+  }
+  &:last-child {
+    @include border-bottom-radius($input-border-radius);
+    margin-bottom: 20px;
+  }
+}