Updated newsletter modal sidebar layout

https://github.com/TryGhost/Team/issues/1525
This commit is contained in:
Sanne de Vries 2022-04-18 17:10:11 +01:00
parent ef1411ae29
commit 9271fa581b
2 changed files with 45 additions and 26 deletions

View File

@ -1,10 +1,26 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-body modal-fullsettings"> <div class="modal-body modal-fullsettings">
<div class="flex items-center justify-between w-100 modal-fullsettings-topbar"> <div class="modal-fullsettings-body gh-newsletters-labs">
<div class="modal-fullsettings-sidebar">
<div class="flex items-center justify-between">
<h2 class="modal-fullsettings-heading"> <h2 class="modal-fullsettings-heading">
{{if @data.newsletter.isNew "Add" "Edit"}} newsletter {{if @data.newsletter.isNew "Create" "Edit"}} newsletter
</h2> </h2>
<div class="flex items-center"> <div class="gh-btn-group">
<button type="button" class="gh-btn gh-btn-icon {{if (eq this.tab "settings") "gh-btn-group-selected"}}" {{on "click" (fn this.changeTab "settings")}}><span>Settings</span></button>
<button type="button" class="gh-btn gh-btn-icon {{if (eq this.tab "design") "gh-btn-group-selected"}}" {{on "click" (fn this.changeTab "design")}}><span>Design</span></button>
</div>
</div>
{{#if (eq this.tab "settings")}}
<Modals::EditNewsletter::Settings @newsletter={{@data.newsletter}} />
{{else}}
<Modals::EditNewsletter::Design @newsletter={{@data.newsletter}} />
{{/if}}
</div>
<div class="modal-fullsettings-main">
<div class="modal-fullsettings-main-topbar">
<button class="gh-btn mr3" type="button" {{on "click" @close}}> <button class="gh-btn mr3" type="button" {{on "click" @close}}>
<span>Cancel</span> <span>Cancel</span>
</button> </button>
@ -19,23 +35,6 @@
data-test-button="save-newsletter" data-test-button="save-newsletter"
/> />
</div> </div>
</div>
<div class="modal-fullsettings-body">
<div class="modal-fullsettings-sidebar with-footer">
<div class="gh-btn-group">
<button type="button" class="gh-btn gh-btn-icon {{if (eq this.tab "settings") "gh-btn-group-selected"}}" {{on "click" (fn this.changeTab "settings")}}><span>Settings</span></button>
<button type="button" class="gh-btn gh-btn-icon {{if (eq this.tab "design") "gh-btn-group-selected"}}" {{on "click" (fn this.changeTab "design")}}><span>Design</span></button>
</div>
{{#if (eq this.tab "settings")}}
<Modals::EditNewsletter::Settings @newsletter={{@data.newsletter}} />
{{else}}
<Modals::EditNewsletter::Design @newsletter={{@data.newsletter}} />
{{/if}}
</div>
<div class="modal-fullsettings-main">
<Modals::EditNewsletter::Preview @newsletter={{@data.newsletter}} /> <Modals::EditNewsletter::Preview @newsletter={{@data.newsletter}} />
</div> </div>
</div> </div>

View File

@ -1053,6 +1053,26 @@
stroke-width: 3; stroke-width: 3;
} }
.gh-newsletters-labs .gh-members-emailsettings-footer {
margin-top: auto;
margin-bottom: 0;
}
.gh-newsletters-labs .modal-fullsettings-section.divider-top {
margin-top: 4rem;
padding-top: 4rem;
}
.modal-fullsettings-main-topbar {
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
width: 100%;
height: 66px;
padding: 2.4rem;
}
/* Code injection /* Code injection
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */