Added section headings to newsletter modal

Refs https://github.com/TryGhost/Team/issues/1525
This commit is contained in:
Sanne de Vries 2022-04-20 10:40:58 +01:00
parent 64bd016950
commit 029cfca415
3 changed files with 28 additions and 12 deletions

View File

@ -1,6 +1,7 @@
<div>
<fieldset class="modal-fullsettings-form">
<div class="modal-fullsettings-section first">
<h3 class="gh-newsletters-setting-sectionheading">Header</h3>
<GhFormGroup @classNames="vertical">
<GhUploader
@extensions={{this.imageExtensions}}
@ -79,7 +80,8 @@
</div>
</GhFormGroup>
</div>
<div class="modal-fullsettings-section divider-top">
<div class="modal-fullsettings-section">
<h3 class="gh-newsletters-setting-sectionheading">Body</h3>
<GhFormGroup>
<h4 class="modal-fullsettings-title gh-email-design-alignment">Header style</h4>
<div class="gh-email-design-typography-wrapper header">
@ -110,8 +112,6 @@
</label>
</div>
</GhFormGroup>
</div>
<div class="modal-fullsettings-section">
<GhFormGroup>
<h4 class="modal-fullsettings-title">Body style</h4>
<div class="gh-email-design-typography-wrapper">
@ -124,7 +124,9 @@
</div>
</GhFormGroup>
</div>
<div class="modal-fullsettings-section divider-top">
<div class="modal-fullsettings-section">
<h3 class="gh-newsletters-setting-sectionheading">Footer</h3>
<GhFormGroup @classNames="vertical">
<label class="modal-fullsettings-title">Email footer</label>
<p>Any extra information or legal text</p>

View File

@ -1,6 +1,7 @@
<div>
<fieldset class="modal-fullsettings-form">
<div class="modal-fullsettings-section first">
<h3 class="gh-newsletters-setting-sectionheading">General</h3>
<GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="name">
<label for="newsletter-title" class="modal-fullsettings-title">Name</label>
<input
@ -26,7 +27,8 @@
</GhFormGroup>
</div>
<div class="modal-fullsettings-section divider-top">
<div class="modal-fullsettings-section">
<h3 class="gh-newsletters-setting-sectionheading">Email addresses</h3>
<GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderName">
<label for="newsletter-sender-name" class="modal-fullsettings-title">Sender name</label>
<input
@ -42,7 +44,7 @@
<GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderEmail">
<label for="newsletter-sender-email" class="modal-fullsettings-title">Newsletter email address</label>
<p>The address your newsletter posts are sent from</p>
<p>Defaults to <span class="green-d1 fw5">{{full-email-address "noreply"}}</span> if empty</p>
<input
id="newsletter-sender-email"
type="text"
@ -70,7 +72,8 @@
</GhFormGroup>
</div>
<div class="modal-fullsettings-section divider-top">
<div class="modal-fullsettings-section">
<h3 class="gh-newsletters-setting-sectionheading">Member settings</h3>
<GhFormGroup>
<label for="subscribe-on-signup" class="modal-fullsettings-title">Subscribe new members on signup</label>
<div class="for-switch small">

View File

@ -1053,13 +1053,24 @@
width: 480px;
}
.gh-newsletters-labs .modal-fullsettings-section.divider-top {
margin-top: 4rem;
padding-top: 4rem;
.gh-newsletters-setting-sectionheading {
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2px;
color: var(--midgrey-l1);
margin: 0 0 16px;
padding: 0 0 8px;
border-bottom: 1px solid var(--whitegrey);
}
.gh-newsletters-labs .modal-fullsettings-section .form-group {
margin-bottom: 24px;
.gh-newsletters-labs .modal-fullsettings-section {
margin: 40px 0;
padding: 0;
}
.gh-newsletters-labs .modal-fullsettings-section.first {
margin-top: 8px;
}
.gh-newsletters-labs .form-group.vertical p {