tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Updated design for newsletter preferences 

refs https://github.com/TryGhost/Team/issues/1492
This commit is contained in:
Djordje Vlaisavljevic 2022-04-19 17:04:03 +02:00
parent 64b87debcc
commit 87fbca2f30
2 changed files with 51 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/components/member/newsletter-preference.hbs
View File

@ -1,24 +1,25 @@
<h4 class="gh-main-section-header small bn">Newsletters</h4>
<div class="gh-main-section-content grey">
{{#each this.newsletters as |newsletter|}}
<div class="flex justify-between items-center">
<div>
<h4 class="gh-setting-title m">{{newsletter.name}}</h4>
<p class="gh-setting-desc">{{newsletter.description}}</p>
<div class="gh-member-newsletters">
{{#each this.newsletters as |newsletter|}}
<div class="gh-member-newsletter-row">
<div>
<h4 class="gh-member-newsletter-title">{{newsletter.name}}</h4>
</div>
<div class="for-switch">
<label class="switch" for={{newsletter.forId}}>
<Input
@checked={{newsletter.subscribed}}
@type="checkbox"
id={{newsletter.forId}}
name="subscribed"
data-test-checkbox="member-subscribed"
{{on "click" (fn this.updateNewsletterPreference newsletter)}}
/>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
<div class="for-switch">
<label class="switch" for={{newsletter.forId}}>
<Input
@checked={{newsletter.subscribed}}
@type="checkbox"
id={{newsletter.forId}}
name="subscribed"
data-test-checkbox="member-subscribed"
{{on "click" (fn this.updateNewsletterPreference newsletter)}}
/>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
{{/each}}
{{/each}}
</div>
</div>

30
app/styles/layouts/members.css
View File

@ -1006,6 +1006,36 @@ textarea.gh-member-details-textarea {
stroke-width: 1px;
}
.gh-member-newsletters {
padding: 16px 20px;
background: var(--main-bg-color);
box-shadow: 0 1px 4px -1px rgb(0 0 0 / 10%);
border-radius: 3px;
}
.gh-member-newsletter-row {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--whitegrey);
padding: 16px 0;
}
.gh-member-newsletter-row:first-child {
padding-top: 0;
}
.gh-member-newsletter-row:last-child {
padding-bottom: 0;
border-bottom: none;
}
.gh-member-newsletter-title {
font-weight: 600;
font-size: 1.4rem !important;
margin-bottom: 0!important;
}
.gh-member-feed-container {
display: flex;
flex-grow: 1;