Email design screen cleanup

This commit is contained in:
Peter Zimon 2022-04-26 13:58:42 +02:00 committed by Matt Hanley
parent 8dd371f1e8
commit ac23f3cdae
6 changed files with 41 additions and 30 deletions

View File

@ -48,7 +48,8 @@
</GhUploader>
</GhFormGroup>
<GhFormGroup data-tooltip={{unless this.settings.icon "A publication icon must be set in Branding settings."}}>
{{#if this.settings.icon}}
<GhFormGroup>
<h4 class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</h4>
<div class="for-switch small {{unless this.settings.icon "disabled"}}">
<label class="switch" for="show-header">
@ -64,6 +65,7 @@
</label>
</div>
</GhFormGroup>
{{/if}}
<GhFormGroup>
<h4 class="modal-fullsettings-title">Publication title</h4>
<div class="for-switch small">
@ -97,8 +99,8 @@
</div>
<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>
<GhFormGroup @classNames="vertical">
<h4 class="modal-fullsettings-title gh-email-design-alignment">Title style</h4>
<div class="gh-email-design-typography-wrapper header">
<div class="modal-fullsettings-radiogroup gh-email-design-typography">
<GhFontSelector
@ -112,6 +114,17 @@
</div>
</div>
</GhFormGroup>
<GhFormGroup @classNames="vertical">
<h4 class="modal-fullsettings-title">Body style</h4>
<div class="gh-email-design-typography-wrapper">
<div class="modal-fullsettings-radiogroup gh-email-design-typography">
<GhFontSelector
@selected={{@newsletter.bodyFontCategory}}
@onChange={{fn this.changeSetting "bodyFontCategory"}}
/>
</div>
</div>
</GhFormGroup>
<GhFormGroup>
<h4 class="modal-fullsettings-title">Feature image</h4>
<div class="for-switch small">
@ -127,30 +140,19 @@
</label>
</div>
</GhFormGroup>
<GhFormGroup>
<h4 class="modal-fullsettings-title">Body style</h4>
<div class="gh-email-design-typography-wrapper">
<div class="modal-fullsettings-radiogroup gh-email-design-typography">
<GhFontSelector
@selected={{@newsletter.bodyFontCategory}}
@onChange={{fn this.changeSetting "bodyFontCategory"}}
/>
</div>
</div>
</GhFormGroup>
</div>
<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>
<KoenigBasicHtmlInput
@name="footer"
@html={{@newsletter.footerContent}}
@class="miw-100 form-text gh-members-emailsettings-footer-input"
@onChange={{fn this.changeSetting "footerContent"}}
/>
<p>Any extra information or legal text</p>
</GhFormGroup>
</div>
</fieldset>

View File

@ -17,7 +17,6 @@
<GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="description">
<label for="newsletter-description" class="modal-fullsettings-title">Description</label>
<p>Seen by members on your site</p>
<textarea
id="newsletter-description"
class="gh-input miw-100 form-text"
@ -31,7 +30,6 @@
<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>
<p>The name members will see in their inbox</p>
<input
id="newsletter-sender-name"
type="text"
@ -43,9 +41,11 @@
<GhErrorMessage @errors={{@newsletter.errors}} @property="senderName" />
</GhFormGroup>
<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>Defaults to <span class="green-d1 fw5">{{full-email-address "noreply"}}</span> if empty</p>
<GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderEmail">
<span class="flex items-center justify-between">
<label for="newsletter-sender-email" class="modal-fullsettings-title ml2">Newsletter email address</label>
<span class="tooltip-top-left" data-tooltip="Defaults to {{full-email-address "noreply"}} if empty">{{svg-jar "info" class="fill-darkgrey w4 h4"}}</span>
</span>
<input
id="newsletter-sender-email"
type="text"
@ -59,7 +59,6 @@
<GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderReplyTo">
<label for="newsletter-reply-to" class="modal-fullsettings-title">Reply-to email</label>
<p>Where you receive responses to newsletters</p>
<Inputs::Select
id="newsletter-reply-to"
@value={{@newsletter.senderReplyTo}}

View File

@ -1605,7 +1605,6 @@ p.gh-members-import-errordetail:first-of-type {
.gh-email-design-typography-wrapper {
display: flex;
width: 250px;
}
.gh-email-design-typography {
@ -1614,7 +1613,7 @@ p.gh-members-import-errordetail:first-of-type {
.gh-email-design-typography .gh-setting-dropdown {
margin: 0;
padding: 0 40px 0 8px;
padding: 0 8px 0 8px;
}
.gh-email-design-typography-wrapper.header .gh-setting-dropdown {

View File

@ -61,12 +61,12 @@
.gh-portal-settings-sidebar {
padding: 0;
width: 342px;
width: 380px;
}
.gh-portal-form-wrapper {
overflow: hidden;
width: 342px;
width: 380px;
}
.gh-portal-settings-form {
@ -247,6 +247,7 @@
align-items: center;
justify-content: flex-start;
padding: 2px;
gap: 12px;
}
.gh-portal-setting-first {

View File

@ -999,8 +999,9 @@
display: flex;
align-items: center;
margin: 0;
font-size: 1.9rem;
line-height: 22px;
font-size: 1.8rem;
font-weight: 600;
line-height: 1.3em;
}
.stats-block .gh-newsletter-card-name {
@ -1043,7 +1044,7 @@
}
.gh-newsletters-labs .modal-fullsettings-sidebar {
width: 480px;
width: 380px;
}
.gh-newsletters-setting-sectionheading {
@ -1067,8 +1068,7 @@
}
.gh-newsletters-labs .form-group.vertical p {
margin: 0 0 12px;
line-height: 1em;
margin: 4px 0 0;
}
.gh-newsletters-labs .gh-members-emailsettings-footer {

View File

@ -242,6 +242,16 @@ button, .btn-base {
transform: translate(0, -50%);
}
.tooltip-top-left:before {
right: calc(-16px + 100%);
left: auto;
transform: translateY(50%);
}
.tooltip-top-left:hover:before {
transform: translate(0, 0);
}
/* Errors
---------------------------------------------------------- */