Unify design of the different mail previews

This commit is contained in:
Raphael Michel
2017-04-14 11:51:27 +02:00
parent bc6b84f900
commit f5b871f8f5
5 changed files with 33 additions and 20 deletions

View File

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

View File

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

View File

@@ -9,7 +9,7 @@ textarea[lang] {
pre[lang] { pre[lang] {
background: no-repeat 10px 10px; background: no-repeat 10px 10px;
padding-left: 34px; padding-left: 34px;
padding-top: 5px; padding-top: 8px;
margin-bottom: 20px; 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=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=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=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')); } pre[lang=en], input[lang=en], textarea[lang=en] { background-image: url(static('pretixbase/img/flags/gb.png')); }

View File

@@ -117,3 +117,24 @@ div[data-formset-body], div[data-formset-form], div[data-nested-formset-form], d
.ticketoutput-panel .panel-title { .ticketoutput-panel .panel-title {
line-height: 30px; 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;
}
}