From d4a9112c366ab5dc49c1df4ade4ec382f4ada6ca Mon Sep 17 00:00:00 2001 From: Florian Dendorfer Date: Fri, 1 Nov 2024 09:54:24 +0100 Subject: [PATCH 1/8] feat(mail-template): make mail templates more configurable Ref: SDWNE-3198 --- app/static/templates/sales-mail-template.html | 1123 +++-------------- 1 file changed, 202 insertions(+), 921 deletions(-) diff --git a/app/static/templates/sales-mail-template.html b/app/static/templates/sales-mail-template.html index 3a90c7fa..875e896d 100644 --- a/app/static/templates/sales-mail-template.html +++ b/app/static/templates/sales-mail-template.html @@ -9,960 +9,241 @@ margin: 0 auto; min-width: 100%; } + body { background-color: #ffffff; + color: #1f2937; + font-family: 'Noto Sans', 'Arial'; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 150%; /* 24px */ margin: 0; padding: 0; } - @media only screen and (max-width: 640px) { - table[class='responsive-table'] { - width: 100% !important; - } - } - - @media only screen and (min-width: 640px) { - table[class='responsive-table'] { - min-width: 640px !important; - max-width: 768px !important; - } - } - - @media only screen and (min-width: 768px) { - table[class='responsive-table'] { - min-width: 768px !important; - max-width: 1024px !important; - } - } - - @media only screen and (max-width: 768px) { - .logo-flag { - display: block; - width: auto !important; - height: 2.5rem !important; - } - .logo-full { - display: none; - } - } - - @media only screen and (min-width: 768px) { - .logo-flag { - display: none; - } - .logo-full { - display: block; - width: auto !important; - height: 3.5rem !important; - } - } - - @media only screen and (min-width: 1024px) { - .logo-full { - height: 4.125rem !important; - } - } - - .header-logo-container { - display: flex; - @media only screen and (max-width: 767px) { - padding-left: 10px; - padding-top: 10px; - padding-bottom: 20px; - } - - @media only screen and (min-width: 768px) { - padding-left: 20px; - padding-top: 20px; - padding-bottom: 20px; - } - - @media only screen and (min-width: 1024px) { - padding-left: 28px; - padding-top: 28px; - padding-bottom: 28px; - } - } - - .logo-separator { - height: 2.5rem; - margin-left: 1rem; - - @media only screen and (max-width: 767px) { - margin-left: 0.5rem; - } - - @media only screen and (min-width: 768px) { - margin-left: 1rem; - } - - @media only screen and (min-width: 1024px) { - margin-left: 1rem; - } - } - - .form-separator { - height: 1px; - background-color: #d1d5db; - overflow: visible; - - @media only screen and (max-width: 767px) { - margin-left: 10px; - margin-right: 10px; - } - - @media only screen and (min-width: 768px) { - margin-left: 20px; - margin-right: 20px; - } - - @media only screen and (min-width: 1024px) { - margin-left: 28px; - margin-right: 28px; - } - } - - .description-container { - background-color: #f0f4f7; - } - - @media only screen and (max-width: 767px) { - .form-title-container { - padding-left: 10px; - padding-top: 5px; - padding-bottom: 15px; - .form-title { - font-size: 1.5rem; - margin: 0; - font-weight: 600; - } - } - } - - @media only screen and (min-width: 768px) { - .form-title-container { - padding-left: 20px; - padding-top: 10px; - padding-bottom: 20px; - .form-title { - font-size: 1.75rem; - margin: 0; - font-weight: 600; - } - } - } - - @media only screen and (min-width: 1024px) { - .form-title-container { - padding-left: 28px; - padding-top: 15px; - padding-bottom: 32px; - .form-title { - font-size: 2rem; - margin: 0; - font-weight: 600; - } - } - } - - .description-section { - @media only screen and (max-width: 767px) { - padding: 10px; - padding-top: 15px; - padding-bottom: 15px; - } - - @media only screen and (min-width: 768px) { - padding: 20px; - padding-top: 15px; - padding-bottom: 15px; - } - - @media only screen and (min-width: 1024px) { - padding: 28px; - padding-top: 15px; - padding-bottom: 15px; - } - - .description-section-title { - margin: 0px; - line-height: 1.5; - - @media only screen and (max-width: 767px) { - font-size: 0.875rem; - } - - @media only screen and (min-width: 768px) { - font-size: 1rem; - } - - @media only screen and (min-width: 1024px) { - font-size: 1.125rem; - } - } - - .description-section-link { - line-height: 1.5; - word-break: break-all; - - @media only screen and (max-width: 767px) { - font-size: 0.875rem; - } - - @media only screen and (min-width: 768px) { - font-size: 1rem; - } - - @media only screen and (min-width: 1024px) { - font-size: 1.125rem; - } - } - } - - @media only screen and (min-width: 768px) { - .logo-separator { - height: 3.5rem; - } - } - @media only screen and (min-width: 1024px) { - .logo-separator { - height: 4.125rem; - } - } - - @media only screen and (max-width: 767px) { - .logo-text { - padding-left: 0.5rem; - font-size: 0.875rem; - } - } - - @media only screen and (min-width: 768px) { - .logo-text { - padding-left: 1rem; - font-size: 1rem; - } + a { + color: #d8232a; + word-break: break-all; } - @media only screen and (min-width: 1024px) { - .logo-text { - padding-left: 1rem; - font-size: 1.125rem; - } + h1 { + font-size: 26px; + font-weight: 600; + line-height: 140%; /*36.4px*/ + margin: 16px 12px 0; } - .link { - color: #d8232a; - text-decoration-line: underline; - text-underline-offset: 2px; - cursor: pointer; - overflow-wrap: break-word; - } - .link:hover { - color: #99191e; + h2 { + margin: 16px 12px 0; + padding-bottom: 12px; } - @media only screen and (max-width: 767px) { - .row-title-container { - padding-left: 10px; - padding-top: 10px; - padding-bottom: 10px; - - .row-title { - font-size: 1.125rem; - margin: 0; - font-weight: 600; - } - } + .header { + padding: 16px 12px 12px; + width: 100% } - @media only screen and (min-width: 768px) { - .row-title-container { - padding-left: 20px; - padding-top: 15px; - padding-bottom: 10px; - - .row-title { - font-size: 1.25rem; - margin: 0; - font-weight: 600; - } - } + .header img { + margin-right: 8px; + width: 34px; } - @media only screen and (min-width: 1024px) { - .row-title-container { - padding-left: 28px; - padding-top: 20px; - padding-bottom: 10px; - - .row-title { - font-size: 1.5rem; - margin: 0; - font-weight: 600; - } - } + .header__text { + border-left: 1px solid #e0e4e8; + padding-left: 8px; } - @media only screen and (max-width: 767px) { - .form-row { - margin-left: 10px; - display: flex; - flex-direction: column; - } - .form-row-title { - padding-top: 10px; - padding-bottom: 5px; - padding-left: 0px; - font-weight: 700; - p { - font-size: 0.875rem; - margin: 0px; - } - } - .form-row-description { - padding-top: 5px; - padding-bottom: 5px; - padding-left: 0px; - - p { - font-size: 0.875rem; - margin: 0px; - } - } + .info-block { + background: #f3f4f6; + margin-top: 16px; + padding: 24px 12px; + width: 100%; } - @media only screen and (min-width: 768px) { - .form-row { - margin-left: 20px; - display: flex; - flex-direction: row; - } - .form-row-title { - padding: 15px; - width: 180px; - padding-left: 0px; - font-weight: 700; - p { - font-size: 1rem; - margin: 0px; - } - } - .form-row-description { - padding: 15px; - padding-left: 0px; - p { - font-size: 1rem; - margin: 0px; - } - } + .list-item { + border-top: 1px solid #adb4bc; + margin: 0 12px; + padding: 12px 0; } - @media only screen and (min-width: 1024px) { - .form-row { - margin-left: 28px; - display: flex; - flex-direction: row; - } - .form-row-title { - padding: 15px; - width: 180px; - padding-left: 0px; - font-weight: 700; - p { - font-size: 1.125rem; - margin: 0px; - } - } - .form-row-description { - padding: 15px; - padding-left: 0px; - p { - font-size: 1.125rem; - margin: 0px; - } - } + .list-item__title { + display: inline-block; + font-weight: bold; + margin-bottom: 4px; + margin-right: 40px; + min-width: 230px; } - .footer-container { - background-color: #263645; + .list-item__text { + display: inline-block; } - .footer-section { - @media only screen and (max-width: 767px) { - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; - } - - @media only screen and (min-width: 768px) { - padding-left: 20px; - padding-top: 10px; - padding-bottom: 10px; - } - - @media only screen and (min-width: 1024px) { - padding-left: 28px; - padding-top: 15px; - padding-bottom: 15px; - } - - .footer-section-text { - font-size: 18px; - line-height: 1.5; - color: #fff; - margin: 0px; - - @media only screen and (max-width: 767px) { - font-size: 0.875rem; - } - - @media only screen and (min-width: 768px) { - font-size: 1rem; - } - - @media only screen and (min-width: 1024px) { - font-size: 1.125rem; - } - } + .footer { + background: #1f2937; + color: #ffffff; + font-size: 16px; + font-weight: 400; + line-height: 150% /*24px*/; + margin-top: 16px; + padding: 12px; + width: 100%; } + + - .bottom-spacing { - @media only screen and (max-width: 767px) { - padding-bottom: 10px; - } + + + + + + +
LogoEidgenössisches Departement für Verteidigung, Bevölkerungsschutz und Sport
- @media only screen and (min-width: 768px) { - padding-bottom: 15px; - } +

Bestellformular

- @media only screen and (min-width: 1024px) { - padding-bottom: 20px; - } - } - - - - +
-
- - - - - - - - - - - - - - - - - - - - - - -
- Logo - Logo -
-
- Eidgenössisches Departement für
- Verteidigung, Bevölkerungsschutz und Sport -
-
-

Bestellformular

-
-

- You've received a new form based mail from -

- - https://www.bfs.admin.ch/bfs/de/home/dienstleistungen/kontakt/bestellungen-abonnemente/bestellformular.html - -
- - - - -
-

Bestellung

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-

Publikation:

-
-
-

Pensionskassenstatistik - Kennzahlen 2018-2022

-
-
-
-
-
-
-
-

Anzahl:

-
-
-

1

-
-
-
-
-
-
-
-

BFS-Nr:

-
-
-

554-2200

-
-
-
-
-
-
-
-

Publikation:

-
-
-

Harmonisierung amtlicher Personenregister

-
-
-
-
- - - - -
-

Rechnungsadresse

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-

Anrede:

-
-
-

Herr

-
-
-
-
-
-
-
-

Name:

-
-
-

Muster

-
-
-
-
-
-
-
-

Vorname:

-
-
-

Max

-
-
-
-
-
-
-
-

Organisation:

-
-
-

Musterfirma

-
-
-
-
-
-
-
-

Strasse / Nr.:

-
-
-

Musterstrasse 5

-
-
-
-
-
-
-
-

Ort:

-
-
-

Musterhausen

-
-
-
-
-
-
-
-

Land:

-
-
-

Schweiz

-
-
-
-
-
-
-
-

Telefon:

-
-
-

+41 79 123 45 67

-
-
-
-
-
-
-
-

E-Mail:

-
-
-

Max.Muster@muster.com

-
-
-
-
-
-
-
-

Nachricht:

-
-
-

Wichtiger Hinweis...

-
-
-
-
- - - - -
-

Lieferadresse

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-

Anrede:

-
-
-

Herr

-
-
-
-
-
-
-
-

Name:

-
-
-

Muster

-
-
-
-
-
-
-
-

Vorname:

-
-
-

Max

-
-
-
-
-
-
-
-

Organisation:

-
-
-

Musterfirma

-
-
-
-
-
-
-
-

Strasse / Nr.:

-
-
-

Musterstrasse 5

-
-
-
-
-
-
-
-

Ort:

-
-
-

Musterhausen

-
-
-
-
-
-
-
-

Land:

-
-
-

Schweiz

-
-
-
-
-
-
-
-

Telefon:

-
-
-

+41 79 123 45 67

-
-
-
-
-
-
-
-

E-Mail:

-
-
-

Max.Muster@muster.com

-
-
-
-
- - - - -
-
+
+

You've received a new form based email from

+ + https://www.bfs.admin.ch/bfs/de/home/dienstleistungen/kontakt/bestellungen-abonnemente/bestellformular.html +
+ +

Bestellung

+ +
+
Publikation:
+
Pensionskassenstatistik - Kennzahlen 2018-2022
+
+ +
+
Anzahl:
+
1
+
+ +
+
BFS-Nr:
+
554-2200
+
+ +
+
Publikation:
+
Harmonisierung amtlicher Personenregister
+
+ +

Rechnungsadresse

+ +
+
Anrede:
+
Herr
+
+ +
+
Name:
+
Erismann
+
+ +
+
Vorname:
+
Daniel
+
+ +
+
Organisation:
+
BFS
+
+ +
+
Strasse / Nr.:
+
Espace de l'Europe 10
+
+ +
+
Ort:
+
Neuchâtel
+
+ +
+
Land:
+
Schweiz
+
+ +
+
Telefon:
+
+41795713056
+
+ +
+
E-Mail:
+
daniel.erismann@efs.admin.ch
+
+ +
+
Nachricht:
+
Dies ist nur ein Test, bitte ignorieren.
+
+ +
+
AGB:
+
Ich bin mit den allgemeinen Geschäftsbedingungen einverstanden.
+
+ +

Lieferadresse

+ +
+
Anrede:
+
Herr
+
+ +
+
Name:
+
Erismann
+
+ +
+
Vorname:
+
Daniel
+
+ +
+
Organisation:
+
BFS
+
+ +
+
Strasse / Nr.:
+
Espace de l'Europe 10
+
+ +
+
Ort:
+
Neuchâtel
+
+ +
+
Land:
+
Schweiz
+
+ +
+
Telefon:
+
+41795713056
+
+ +
+
E-Mail:
+
daniel.erismann@efs.admin.ch
+
+ + + + + + + From 828617857f3d338ab991576512111e855d918e96 Mon Sep 17 00:00:00 2001 From: gebelj Date: Fri, 1 Nov 2024 10:54:14 +0100 Subject: [PATCH 2/8] feat(sales-template): make mail templates more configurable --- .../templates/customer-mail-template.html | 1117 +++-------------- 1 file changed, 199 insertions(+), 918 deletions(-) diff --git a/app/static/templates/customer-mail-template.html b/app/static/templates/customer-mail-template.html index bcc25ece..e2225f37 100644 --- a/app/static/templates/customer-mail-template.html +++ b/app/static/templates/customer-mail-template.html @@ -9,956 +9,237 @@ margin: 0 auto; min-width: 100%; } + body { background-color: #ffffff; + color: #1f2937; + font-family: 'Noto Sans', 'Arial'; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 150%; /* 24px */ margin: 0; padding: 0; } - @media only screen and (max-width: 640px) { - table[class='responsive-table'] { - width: 100% !important; - } - } - - @media only screen and (min-width: 640px) { - table[class='responsive-table'] { - min-width: 640px !important; - max-width: 768px !important; - } - } - - @media only screen and (min-width: 768px) { - table[class='responsive-table'] { - min-width: 768px !important; - max-width: 1024px !important; - } - } - - @media only screen and (max-width: 768px) { - .logo-flag { - display: block; - width: auto !important; - height: 2.5rem !important; - } - .logo-full { - display: none; - } - } - - @media only screen and (min-width: 768px) { - .logo-flag { - display: none; - } - .logo-full { - display: block; - width: auto !important; - height: 3.5rem !important; - } - } - - @media only screen and (min-width: 1024px) { - .logo-full { - height: 4.125rem !important; - } - } - .header-logo-container { - display: flex; - @media only screen and (max-width: 767px) { - padding-left: 10px; - padding-top: 10px; - padding-bottom: 20px; - } - - @media only screen and (min-width: 768px) { - padding-left: 20px; - padding-top: 20px; - padding-bottom: 20px; - } - - @media only screen and (min-width: 1024px) { - padding-left: 28px; - padding-top: 28px; - padding-bottom: 28px; - } - } - - .logo-separator { - height: 2.5rem; - margin-left: 1rem; - - @media only screen and (max-width: 767px) { - margin-left: 0.5rem; - } - - @media only screen and (min-width: 768px) { - margin-left: 1rem; - } - - @media only screen and (min-width: 1024px) { - margin-left: 1rem; - } - } - - .form-separator { - height: 1px; - background-color: #d1d5db; - overflow: visible; - - @media only screen and (max-width: 767px) { - margin-left: 10px; - margin-right: 10px; - } - - @media only screen and (min-width: 768px) { - margin-left: 20px; - margin-right: 20px; - } - - @media only screen and (min-width: 1024px) { - margin-left: 28px; - margin-right: 28px; - } - } - - .description-container { - background-color: #f0f4f7; - } - - @media only screen and (max-width: 767px) { - .form-title-container { - padding-left: 10px; - padding-top: 5px; - padding-bottom: 15px; - .form-title { - font-size: 1.5rem; - margin: 0; - font-weight: 600; - } - } - } - - @media only screen and (min-width: 768px) { - .form-title-container { - padding-left: 20px; - padding-top: 10px; - padding-bottom: 20px; - .form-title { - font-size: 1.75rem; - margin: 0; - font-weight: 600; - } - } - } - - @media only screen and (min-width: 1024px) { - .form-title-container { - padding-left: 28px; - padding-top: 15px; - padding-bottom: 32px; - .form-title { - font-size: 2rem; - margin: 0; - font-weight: 600; - } - } - } - - .description-section { - @media only screen and (max-width: 767px) { - padding: 10px; - padding-top: 15px; - padding-bottom: 15px; - } - - @media only screen and (min-width: 768px) { - padding: 20px; - padding-top: 15px; - padding-bottom: 15px; - } - - @media only screen and (min-width: 1024px) { - padding: 28px; - padding-top: 15px; - padding-bottom: 15px; - } - - .description-section-title { - margin: 0px; - line-height: 1.5; - - @media only screen and (max-width: 767px) { - font-size: 0.875rem; - } - - @media only screen and (min-width: 768px) { - font-size: 1rem; - } - - @media only screen and (min-width: 1024px) { - font-size: 1.125rem; - } - } - - .description-section-link { - line-height: 1.5; - word-break: break-all; - - @media only screen and (max-width: 767px) { - font-size: 0.875rem; - } - - @media only screen and (min-width: 768px) { - font-size: 1rem; - } - - @media only screen and (min-width: 1024px) { - font-size: 1.125rem; - } - } - } - - @media only screen and (min-width: 768px) { - .logo-separator { - height: 3.5rem; - } - } - - @media only screen and (min-width: 1024px) { - .logo-separator { - height: 4.125rem; - } - } - - @media only screen and (max-width: 767px) { - .logo-text { - padding-left: 0.5rem; - font-size: 0.875rem; - } - } - - @media only screen and (min-width: 768px) { - .logo-text { - padding-left: 1rem; - font-size: 1rem; - } + a { + color: #d8232a; + word-break: break-all; } - @media only screen and (min-width: 1024px) { - .logo-text { - padding-left: 1rem; - font-size: 1.125rem; - } + h1 { + font-size: 26px; + font-weight: 600; + line-height: 140%; /*36.4px*/ + margin: 16px 12px 0; } - .link { - color: #d8232a; - text-decoration-line: underline; - text-underline-offset: 2px; - cursor: pointer; - overflow-wrap: break-word; - } - .link:hover { - color: #99191e; + h2 { + margin: 16px 12px 0; + padding-bottom: 12px; } - @media only screen and (max-width: 767px) { - .row-title-container { - padding-left: 10px; - padding-top: 10px; - padding-bottom: 10px; - - .row-title { - font-size: 1.125rem; - margin: 0; - font-weight: 600; - } - } + .header { + padding: 16px 12px 12px; + width: 100% } - @media only screen and (min-width: 768px) { - .row-title-container { - padding-left: 20px; - padding-top: 15px; - padding-bottom: 10px; - - .row-title { - font-size: 1.25rem; - margin: 0; - font-weight: 600; - } - } + .header img { + margin-right: 8px; + width: 34px; } - @media only screen and (min-width: 1024px) { - .row-title-container { - padding-left: 28px; - padding-top: 20px; - padding-bottom: 10px; - - .row-title { - font-size: 1.5rem; - margin: 0; - font-weight: 600; - } - } + .header__text { + border-left: 1px solid #e0e4e8; + padding-left: 8px; } - @media only screen and (max-width: 767px) { - .form-row { - margin-left: 10px; - display: flex; - flex-direction: column; - } - .form-row-title { - padding-top: 10px; - padding-bottom: 5px; - padding-left: 0px; - font-weight: 700; - p { - font-size: 0.875rem; - margin: 0px; - } - } - .form-row-description { - padding-top: 5px; - padding-bottom: 5px; - padding-left: 0px; - - p { - font-size: 0.875rem; - margin: 0px; - } - } + .info-block { + background: #f3f4f6; + margin-top: 16px; + padding: 24px 12px; + width: 100%; } - @media only screen and (min-width: 768px) { - .form-row { - margin-left: 20px; - display: flex; - flex-direction: row; - } - .form-row-title { - padding: 15px; - width: 180px; - padding-left: 0px; - font-weight: 700; - p { - font-size: 1rem; - margin: 0px; - } - } - .form-row-description { - padding: 15px; - padding-left: 0px; - p { - font-size: 1rem; - margin: 0px; - } - } + .info-text { + margin: 0; + width: 100%; } - @media only screen and (min-width: 1024px) { - .form-row { - margin-left: 28px; - display: flex; - flex-direction: row; - } - .form-row-title { - padding: 15px; - width: 180px; - padding-left: 0px; - font-weight: 700; - p { - font-size: 1.125rem; - margin: 0px; - } - } - .form-row-description { - padding: 15px; - padding-left: 0px; - p { - font-size: 1.125rem; - margin: 0px; - } - } + .list-item { + border-top: 1px solid #adb4bc; + margin: 0 12px; + padding: 12px 0; } - .footer-container { - background-color: #263645; + .list-item__title { + display: inline-block; + font-weight: bold; + margin-bottom: 4px; + margin-right: 40px; + min-width: 230px; } - .footer-section { - @media only screen and (max-width: 767px) { - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; - } - - @media only screen and (min-width: 768px) { - padding-left: 20px; - padding-top: 10px; - padding-bottom: 10px; - } - - @media only screen and (min-width: 1024px) { - padding-left: 28px; - padding-top: 15px; - padding-bottom: 15px; - } - - .footer-section-text { - font-size: 18px; - line-height: 1.5; - color: #fff; - margin: 0px; - - @media only screen and (max-width: 767px) { - font-size: 0.875rem; - } - - @media only screen and (min-width: 768px) { - font-size: 1rem; - } - - @media only screen and (min-width: 1024px) { - font-size: 1.125rem; - } - } + .list-item__text { + display: inline-block; } - .bottom-spacing { - @media only screen and (max-width: 767px) { - padding-bottom: 10px; - } - - @media only screen and (min-width: 768px) { - padding-bottom: 15px; - } - - @media only screen and (min-width: 1024px) { - padding-bottom: 20px; - } + .footer { + background: #1f2937; + color: #ffffff; + font-size: 16px; + font-weight: 400; + line-height: 150% /*24px*/; + margin-top: 16px; + padding: 12px; + width: 100%; } - - + +
+ + + + +
LogoEidgenössisches Departement für Verteidigung, Bevölkerungsschutz und Sport
+ +

Bestellformular

+ +
+

Danke für Ihre Bestellung.

+

Sie wurde wie folgt notiert:

+
+ +

Bestellung

+ +
+
Publikation:
+
Pensionskassenstatistik - Kennzahlen 2018-2022
+
+ +
+
Anzahl:
+
1
+
+ +
+
BFS-Nr:
+
554-2200
+
+ +
+
Publikation:
+
Harmonisierung amtlicher Personenregister
+
+ +

Rechnungsadresse

+ +
+
Anrede:
+
Herr
+
+ +
+
Name:
+
Erismann
+
+ +
+
Vorname:
+
Daniel
+
+ +
+
Organisation:
+
BFS
+
+ +
+
Strasse / Nr.:
+
Espace de l'Europe 10
+
+ +
+
Ort:
+
Neuchâtel
+
+ +
+
Land:
+
Schweiz
+
+ +
+
Telefon:
+
+41795713056
+
+ +
+
E-Mail:
+
daniel.erismann@efs.admin.ch
+
+ +
+
Nachricht:
+
Dies ist nur ein Test, bitte ignorieren.
+
+ +
+
AGB:
+
Ich bin mit den allgemeinen Geschäftsbedingungen einverstanden.
+
+ +

Lieferadresse

+ +
+
Anrede:
+
Herr
+
+ +
+
Name:
+
Erismann
+
+ +
+
Vorname:
+
Daniel
+
+ +
+
Organisation:
+
BFS
+
+ +
+
Strasse / Nr.:
+
Espace de l'Europe 10
+
+ +
+
Ort:
+
Neuchâtel
+
+ +
+
Land:
+
Schweiz
+
+ +
+
Telefon:
+
+41795713056
+
+ +
+
E-Mail:
+
daniel.erismann@efs.admin.ch
+
+ + - + From c0d253ba1e246ee2c21f102b6d212af9750c8450 Mon Sep 17 00:00:00 2001 From: gebelj Date: Fri, 1 Nov 2024 11:35:35 +0100 Subject: [PATCH 3/8] Fix logo responsiveness --- .../templates/customer-mail-template.html | 48 +++++++++++++++++-- app/static/templates/sales-mail-template.html | 45 +++++++++++++++-- 2 files changed, 86 insertions(+), 7 deletions(-) diff --git a/app/static/templates/customer-mail-template.html b/app/static/templates/customer-mail-template.html index e2225f37..6ccc18c9 100644 --- a/app/static/templates/customer-mail-template.html +++ b/app/static/templates/customer-mail-template.html @@ -41,7 +41,7 @@ .header { padding: 16px 12px 12px; - width: 100% + width: 100%; } .header img { @@ -49,6 +49,35 @@ width: 34px; } + .logo-flag { + display: block; + width: 150px; + height: auto; + } + + .logo-full { + display: none; + } + + .first-col { + min-width: 42px; + } + + .second-col { + width: 100%; + } + + @media only screen and (min-width: 768px) { + .logo-flag { + display: none !important; + } + .logo-full { + display: block !important; + width: 250px !important; + height: auto !important; + } + } + .header__text { border-left: 1px solid #e0e4e8; padding-left: 8px; @@ -99,8 +128,19 @@ - - + +
LogoEidgenössisches Departement für Verteidigung, Bevölkerungsschutz und Sport + Logo + Logo + Eidgenössisches Departement für Verteidigung, Bevölkerungsschutz und Sport
@@ -236,7 +276,7 @@

Lieferadresse

E-Mail:
daniel.erismann@efs.admin.ch
- + diff --git a/app/static/templates/sales-mail-template.html b/app/static/templates/sales-mail-template.html index 875e896d..903c755c 100644 --- a/app/static/templates/sales-mail-template.html +++ b/app/static/templates/sales-mail-template.html @@ -49,6 +49,35 @@ width: 34px; } + .logo-flag { + display: block; + width: 150px; + height: auto; + } + + .logo-full { + display: none; + } + + .first-col { + min-width: 42px; + } + + .second-col { + width: 100%; + } + + @media only screen and (min-width: 768px) { + .logo-flag { + display: none !important; + } + .logo-full { + display: block !important; + width: 250px !important; + height: auto !important; + } + } + .header__text { border-left: 1px solid #e0e4e8; padding-left: 8px; @@ -95,8 +124,19 @@ - - + +
LogoEidgenössisches Departement für Verteidigung, Bevölkerungsschutz und Sport + Logo + Logo + Eidgenössisches Departement für Verteidigung, Bevölkerungsschutz und Sport
@@ -238,7 +278,6 @@

Lieferadresse

E-Mail:
daniel.erismann@efs.admin.ch
- From 8d0a33377c03fa8d1d76b07acd41b620c10ba4e1 Mon Sep 17 00:00:00 2001 From: Florian Dendorfer Date: Fri, 1 Nov 2024 17:09:44 +0100 Subject: [PATCH 4/8] More responsive spacings --- .../templates/customer-mail-template.html | 190 +++++++++++++----- app/static/templates/sales-mail-template.html | 180 +++++++++++++---- 2 files changed, 280 insertions(+), 90 deletions(-) diff --git a/app/static/templates/customer-mail-template.html b/app/static/templates/customer-mail-template.html index 6ccc18c9..bf752872 100644 --- a/app/static/templates/customer-mail-template.html +++ b/app/static/templates/customer-mail-template.html @@ -15,6 +15,7 @@ color: #1f2937; font-family: 'Noto Sans', 'Arial'; font-size: 16px; + font-size: 1rem; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ @@ -24,65 +25,58 @@ a { color: #d8232a; + line-height: 150%; /* 24px */ word-break: break-all; } h1 { font-size: 26px; + font-size: 1.625rem; font-weight: 600; line-height: 140%; /*36.4px*/ margin: 16px 12px 0; } h2 { - margin: 16px 12px 0; + font-size: 20px; + font-size: 1.25rem; + margin: 16px 12px; padding-bottom: 12px; } .header { - padding: 16px 12px 12px; + padding: 12px 36px; width: 100%; } .header img { - margin-right: 8px; - width: 34px; + width: 100%; } - .logo-flag { + .header__text { + border-left: 1px solid #e0e4e8; + padding-left: 8px; + } + + .first-col-flag { display: block; - width: 150px; height: auto; + /* width: 42px; */ + min-width: 42px; /* 34px logo with + 8px margin right */ + margin-right: 8px; } - .logo-full { + .first-col-full { display: none; - } - - .first-col { - min-width: 42px; + height: auto; + width: 0px; + mso-hide: all; } .second-col { width: 100%; } - @media only screen and (min-width: 768px) { - .logo-flag { - display: none !important; - } - .logo-full { - display: block !important; - width: 250px !important; - height: auto !important; - } - } - - .header__text { - border-left: 1px solid #e0e4e8; - padding-left: 8px; - } - .info-block { background: #f3f4f6; margin-top: 16px; @@ -90,15 +84,10 @@ width: 100%; } - .info-text { - margin: 0; - width: 100%; - } - .list-item { border-top: 1px solid #adb4bc; margin: 0 12px; - padding: 12px 0; + padding: 16px 0 12px; } .list-item__title { @@ -116,46 +105,145 @@ .footer { background: #1f2937; color: #ffffff; - font-size: 16px; font-weight: 400; line-height: 150% /*24px*/; margin-top: 16px; padding: 12px; width: 100%; } + + @media only screen and (min-width: 768px) { + body { + font-size: 20px; + font-size: 1.25rem; + } + + h1 { + font-size: 32px; + font-size: 2rem; + margin: 24px 36px 0; + } + + h2 { + font-size: 26px; + font-size: 1.625rem; + margin: 28px 36px 24px; + } + + .header { + padding: 32px 36px; + } + + .header__text { + padding-left: 24px; + } + + .first-col-flag { + display: none !important; + } + + .first-col-full { + display: block !important; + min-width: 274px !important; /* 250px logo with + 24px margin right */ + margin-right: 24px; + mso-hide: all; + } + + .info-block { + margin-top: 24px; + padding: 24px 36px; + } + + .list-item { + margin: 0 36px; + padding: 24px 0; + } + + .footer { + margin-top: 24px; + padding: 18px 36px; + } + } + + @media only screen and (min-width: 1024px) { + body { + font-size: 22px; + font-size: 1.375rem; + } + + h1 { + font-size: 40px; + font-size: 2.5rem; + margin: 24px 48px 0; + } + + h2 { + font-size: 32px; + font-size: 2rem; + margin: 28px 48px 24px; + } + + .header { + padding: 40px 48px; + } + + .info-block { + margin-top: 32px; + padding: 24px 48px; + } + + .list-item { + margin: 0 48px; + } + + .footer { + margin-top: 40px; + padding: 20px 48px; + } + } + - + - +
+ Logo + Logo Eidgenössisches Departement für Verteidigung, Bevölkerungsschutz und Sport + Eidgenössisches Departement für Verteidigung, Bevölkerungsschutz und + Sport +

Bestellformular

-
-

Danke für Ihre Bestellung.

-

Sie wurde wie folgt notiert:

-
+ + + + +
+

Danke für Ihre Bestellung.

+

Sie wurde wie folgt notiert:

+

Bestellung

Publikation:
-
Pensionskassenstatistik - Kennzahlen 2018-2022
+
+ Pensionskassenstatistik - Kennzahlen 2018-2022 +
@@ -170,7 +258,9 @@

Bestellung

Publikation:
-
Harmonisierung amtlicher Personenregister
+
+ Harmonisierung amtlicher Personenregister +

Rechnungsadresse

@@ -222,12 +312,16 @@

Rechnungsadresse

Nachricht:
-
Dies ist nur ein Test, bitte ignorieren.
+
+ Dies ist nur ein Test, bitte ignorieren. +
AGB:
-
Ich bin mit den allgemeinen Geschäftsbedingungen einverstanden.
+
+ Ich bin mit den allgemeinen Geschäftsbedingungen einverstanden. +

Lieferadresse

diff --git a/app/static/templates/sales-mail-template.html b/app/static/templates/sales-mail-template.html index 903c755c..c61d46ea 100644 --- a/app/static/templates/sales-mail-template.html +++ b/app/static/templates/sales-mail-template.html @@ -15,6 +15,7 @@ color: #1f2937; font-family: 'Noto Sans', 'Arial'; font-size: 16px; + font-size: 1rem; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ @@ -24,65 +25,58 @@ a { color: #d8232a; + line-height: 150%; /* 24px */ word-break: break-all; } h1 { font-size: 26px; + font-size: 1.625rem; font-weight: 600; line-height: 140%; /*36.4px*/ margin: 16px 12px 0; } h2 { - margin: 16px 12px 0; + font-size: 20px; + font-size: 1.25rem; + margin: 16px 12px; padding-bottom: 12px; } .header { - padding: 16px 12px 12px; - width: 100% + padding: 12px 36px; + width: 100%; } .header img { - margin-right: 8px; - width: 34px; + width: 100%; + } + + .header__text { + border-left: 1px solid #e0e4e8; + padding-left: 8px; } - .logo-flag { + .first-col-flag { display: block; - width: 150px; height: auto; + /* width: 42px; */ + min-width: 42px; /* 34px logo with + 8px margin right */ + margin-right: 8px; } - .logo-full { + .first-col-full { display: none; - } - - .first-col { - min-width: 42px; + height: auto; + width: 0px; + mso-hide: all; } .second-col { width: 100%; } - @media only screen and (min-width: 768px) { - .logo-flag { - display: none !important; - } - .logo-full { - display: block !important; - width: 250px !important; - height: auto !important; - } - } - - .header__text { - border-left: 1px solid #e0e4e8; - padding-left: 8px; - } - .info-block { background: #f3f4f6; margin-top: 16px; @@ -93,7 +87,7 @@ .list-item { border-top: 1px solid #adb4bc; margin: 0 12px; - padding: 12px 0; + padding: 16px 0 12px; } .list-item__title { @@ -111,32 +105,124 @@ .footer { background: #1f2937; color: #ffffff; - font-size: 16px; font-weight: 400; line-height: 150% /*24px*/; margin-top: 16px; padding: 12px; width: 100%; } + + @media only screen and (min-width: 768px) { + body { + font-size: 20px; + font-size: 1.25rem; + } + + h1 { + font-size: 32px; + font-size: 2rem; + margin: 24px 36px 0; + } + + h2 { + font-size: 26px; + font-size: 1.625rem; + margin: 28px 36px 24px; + } + + .header { + padding: 32px 36px; + } + + .header__text { + padding-left: 24px; + } + + .first-col-flag { + display: none !important; + } + + .first-col-full { + display: block !important; + min-width: 274px !important; /* 250px logo with + 24px margin right */ + margin-right: 24px; + mso-hide: all; + } + + .info-block { + margin-top: 24px; + padding: 24px 36px; + } + + .list-item { + margin: 0 36px; + padding: 24px 0; + } + + .footer { + margin-top: 24px; + padding: 18px 36px; + } + } + + @media only screen and (min-width: 1024px) { + body { + font-size: 22px; + font-size: 1.375rem; + } + + h1 { + font-size: 40px; + font-size: 2.5rem; + margin: 24px 48px 0; + } + + h2 { + font-size: 32px; + font-size: 2rem; + margin: 28px 48px 24px; + } + + .header { + padding: 40px 48px; + } + + .info-block { + margin-top: 32px; + padding: 24px 48px; + } + + .list-item { + margin: 0 48px; + } + + .footer { + margin-top: 40px; + padding: 20px 48px; + } + } - + - +
+ Logo + Logo Eidgenössisches Departement für Verteidigung, Bevölkerungsschutz und Sport + Eidgenössisches Departement für Verteidigung, Bevölkerungsschutz und + Sport +
@@ -146,7 +232,9 @@

Bestellformular

You've received a new form based email from

- + https://www.bfs.admin.ch/bfs/de/home/dienstleistungen/kontakt/bestellungen-abonnemente/bestellformular.html @@ -157,7 +245,9 @@

Bestellung

Publikation:
-
Pensionskassenstatistik - Kennzahlen 2018-2022
+
+ Pensionskassenstatistik - Kennzahlen 2018-2022 +
@@ -172,7 +262,9 @@

Bestellung

Publikation:
-
Harmonisierung amtlicher Personenregister
+
+ Harmonisierung amtlicher Personenregister +

Rechnungsadresse

@@ -224,12 +316,16 @@

Rechnungsadresse

Nachricht:
-
Dies ist nur ein Test, bitte ignorieren.
+
+ Dies ist nur ein Test, bitte ignorieren. +
AGB:
-
Ich bin mit den allgemeinen Geschäftsbedingungen einverstanden.
+
+ Ich bin mit den allgemeinen Geschäftsbedingungen einverstanden. +

Lieferadresse

@@ -278,7 +374,7 @@

Lieferadresse

E-Mail:
daniel.erismann@efs.admin.ch
- + From 19ac973c557d0c26cd65c06060ea68990dcf7707 Mon Sep 17 00:00:00 2001 From: gebelj Date: Thu, 7 Nov 2024 17:22:18 +0100 Subject: [PATCH 5/8] Hide full logo container in outlook --- app/static/templates/customer-mail-template.html | 5 +++-- app/static/templates/sales-mail-template.html | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/app/static/templates/customer-mail-template.html b/app/static/templates/customer-mail-template.html index bf752872..b4df8bb6 100644 --- a/app/static/templates/customer-mail-template.html +++ b/app/static/templates/customer-mail-template.html @@ -61,8 +61,7 @@ .first-col-flag { display: block; height: auto; - /* width: 42px; */ - min-width: 42px; /* 34px logo with + 8px margin right */ + width: 34px; margin-right: 8px; } @@ -213,12 +212,14 @@ alt="Logo" /> + + + + - - - -