TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 19:48:50 +03:00
Code Issues Projects Releases Wiki Activity

Basic design cleanup of Portal preview area

Browse Source 
no refs.
- applied basic spacing and typography to Portal preview area
This commit is contained in:
Peter Zimon 2020-07-15 14:39:36 +02:00
parent 670c33f2fe
commit 7ff098aae6
2 changed files with 195 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
ghost/admin/app/components/modal-members-modal-settings.hbs
View File

@ -1,10 +1,10 @@
<div class="modal-body gh-ps-modal-body">
<div class="flex pa0 flex-grow-1">
<div class="pa5">
<div class="flex pa0 flex-grow-1 gh-portal-settings">
<div class="gh-portal-settings-sidebar">
<h2 class="f4 fw6">Portal settings</h2>
<fieldset>
<div class="gh-portal-settings">
<div class="gh-portal-setting-section">
<fieldset class="gh-portal-settings-form">
<div class="gh-portal-setting-section divider-top">
<h3 class="gh-portal-setting-sectionheading">Singup</h3>
<GhFormGroup @classNames="gh-members-subscribed-checkbox pb4 mb0">
<div class="flex justify-between items-center">
<div class="mr3">
@ -27,6 +27,7 @@
</div>
</div>
</GhFormGroup>
{{#if this.isStripeConfigured}}
<div>
<div class="mb3">
<h4 class="gh-portal-setting-title">Plans available at signup</h4>
@ -41,7 +42,7 @@
checked={{this.isFreeChecked}}
id="free-plan"
name="free-plan"
disabled={{not this.allowSelfSignup}}
disabled={{not this.subscriptionSettings.allowSelfSignup}}
class="gh-input post-settings-featured"
onclick={{action "toggleFreePlan" value="target.checked"}}
data-test-checkbox="featured"
@ -89,13 +90,13 @@
</label>
</div>
</div>
{{/if}}
</div>
<div class="gh-portal-setting-section divider-top">
<h3 class="gh-portal-setting-sectionheading"> Look &amp; Feel </h3>
<GhFormGroup @classNames="flex">
<div class="gh-setting-content flex items-center">
<div class="gh-portal-setting-title">Accent Color</div>
</div>
<div class="flex w-100 items-center justify-between">
<h4 class="gh-portal-setting-title">Accent Color</h4>
<div class="gh-setting-action">
<GhFormGroup
@errors={{settings.errors}}
@ -125,12 +126,11 @@
/>
</GhFormGroup>
</div>
</div>
</GhFormGroup>
<GhFormGroup @classNames="gh-members-subscribed-checkbox mb0pt3 b--whitegrey">
<div class="flex justify-between items-center">
<div>
<div class="flex justify-between items-center nt2">
<h4 class="gh-portal-setting-title">Show Portal button</h4>
</div>
<div class="for-switch small">
<label
class="switch"
@ -149,6 +149,7 @@
</div>
</GhFormGroup>
{{#if this.settings.portalButton}}
<div class="mt5">
<GhFormGroup>
<h4 class="gh-portal-setting-title mb1">Portal button style</h4>
<span
@ -226,6 +227,7 @@
</GhFormGroup>
{{/if}}
</div>
<GhFormGroup>
<h4 class="gh-portal-setting-title">Signup button text</h4>
@ -266,17 +268,14 @@
</div>
</GhFormGroup>
</div>
</div>
</fieldset>
</div>
<div style="border-left: 1px solid #e5eff5;">
</div>
<div class="flex flex-column flex-grow-1 pa5">
<div style="padding-bottom: 12px;display: flex;justify-content: center;">
<span style="padding: 0 20px 0 20px; font-weight: bold"><a href="#" {{action "switchPreviewPage" "signup"}} data-test-link="switch-portal-preview-page">Signup</a></span>
<span style="padding: 0 20px 0 20px; font-weight: bold"><a href="#" {{action "switchPreviewPage" "accountHome"}} data-test-link="switch-portal-preview-page">Account</a></span>
<span style="padding: 0 20px 0 20px; font-weight: bold"><a href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page">Links</a></span>
</div>
<div class="gh-portal-settings-main">
<ul class="gh-portal-settings-maintabs">
<li><a href="#" {{action "switchPreviewPage" "signup"}} data-test-link="switch-portal-preview-page">Signup</a></li>
<li><a href="#" {{action "switchPreviewPage" "accountHome"}} data-test-link="switch-portal-preview-page">Account</a></li>
<li><a href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page">Links</a></li>
</ul>
<div style="position: relative;flex-grow: 1">
<GhSiteIframe
@guid="test-site-portal"
@ -298,7 +297,7 @@
@buttonText="Save and close"
@successText="Saved"
@task={{this.saveTask}}
@idleClass="gh-btn-green"
@idleClass="gh-btn-blue"
@class="gh-btn gh-btn-icon"
data-test-button="save-members-modal-setting"
/>

54
ghost/admin/app/styles/layouts/members.css
View File

@ -725,10 +725,12 @@ p.gh-members-import-errordetail:first-of-type {
/* Portal settings
/* ----------------------------------------- */
.gh-portal-settings-modal {
/* display: flex;
flex-grow: 1;
padding: 20px 0; */
.gh-portal-settings-sidebar {
padding: 28px;
}
.gh-portal-settings-form {
min-width: 290px;
}
.gh-portal-setting-title {
@ -752,12 +754,12 @@ p.gh-members-import-errordetail:first-of-type {
}
.gh-portal-setting-section {
margin: 12px -20px;
padding: 0 20px;
margin: 12px -28px;
padding: 0 28px;
}
.gh-portal-setting-section.divider-top {
border-top: 1px solid var(--lightgrey);
border-top: 1px solid var(--whitegrey);
padding-top: 16px;
}
@ -785,7 +787,7 @@ p.gh-members-import-errordetail:first-of-type {
.gh-portal-settings .gh-select select,
.gh-portal-settings .gh-input {
padding: 3px 10px 3px 11px;
padding: 3px 10px 3px 8px;
height: 36px;
font-size: 1.4rem;
}
@ -798,3 +800,39 @@ p.gh-members-import-errordetail:first-of-type {
top: 19px;
right: 9px;
}
.gh-portal-settings-main {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 28px;
border-left: 1px solid var(--whitegrey);
}
.gh-portal-settings .modal-footer {
margin-top: 28px;
}
.gh-portal-settings-maintabs {
list-style: none;
list-style-type: none;
display: flex;
align-items: center;
padding: 0;
margin: 4px 0 16px;
}
.gh-portal-settings-maintabs li {
padding: 0;
margin: 0;
}
.gh-portal-settings-maintabs li a {
display: inline-block;
padding: 4px 12px;
margin: -4px 0;
}
.gh-portal-settings-maintabs li:first-of-type a {
margin-left: -12px;
}