mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Updated product details mock screen
Updated product details mock screen for the first version: - removed icon and chart - added status to price list - changed icons to text links on price list
This commit is contained in:
Peter Zimon
parent
802efc91a5
commit
5a5d6398fd
3 changed files with 63 additions and 51 deletions
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
<h4 class="gh-main-section-header small bn">Advanced</h4>
|
||||
<div class="gh-main-section-content grey gh-product-priceform-block">
|
||||
<GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="trial-period">
|
||||
{{!-- <GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="trial-period">
|
||||
<label for="trial-period" class="fw6">Trial period</label>
|
||||
<div class="flex items-center justify-center gh-input-group gh-labs-price-label">
|
||||
<GhTextInput
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<span class="gh-input-append">days</span>
|
||||
</div>
|
||||
<GhErrorMessage @errors={{this.price.errors}} @property="trial-period" />
|
||||
</GhFormGroup>
|
||||
</GhFormGroup> --}}
|
||||
<GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="welcome-page">
|
||||
<label for="welcome-page" class="fw6">Welcome page</label>
|
||||
<GhTextInput
|
||||
|
|
|
|||
|
|
@ -24,11 +24,15 @@
|
|||
/* Product details */
|
||||
.gh-product-details {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 32px;
|
||||
margin-bottom: 3vw;
|
||||
}
|
||||
|
||||
.gh-product-details .max-width {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.gh-product-details-form {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -68,6 +72,7 @@
|
|||
justify-content: stretch;
|
||||
}
|
||||
|
||||
/* Product stats */
|
||||
.gh-product-stat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -125,6 +130,13 @@
|
|||
.gh-price-list-actionlist a,
|
||||
.gh-price-list-actionlist button {
|
||||
line-height: 0;
|
||||
margin-left: 24px;
|
||||
color: var(--darkgrey);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-price-list-actionlist button.archive {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.gh-price-list-title,
|
||||
|
|
@ -132,6 +144,19 @@
|
|||
width: 35%;
|
||||
}
|
||||
|
||||
.gh-price-list-name span.archived {
|
||||
background: var(--midgrey);
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.gh-price-list-archived .gh-price-list-name,
|
||||
.gh-price-list-archived .gh-price-list-description,
|
||||
.gh-price-list-archived .gh-price-list-price span,
|
||||
.gh-price-list-archived .gh-price-list-subscriptions span {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.product-actions-menu {
|
||||
top: calc(100% + 6px);
|
||||
right: 10px;
|
||||
|
|
|
|||
|
|
@ -39,10 +39,10 @@
|
|||
<section class="gh-product-config">
|
||||
<h4 class="gh-main-section-header small bn">Product details</h4>
|
||||
<div class="gh-main-section-content grey gh-product-details-form">
|
||||
<GhFormGroup @property="name" @class="gh-product-icon-container">
|
||||
{{!-- <GhFormGroup @property="name" @class="gh-product-icon-container">
|
||||
<label for="member-name">ICON</label>
|
||||
<div class="gh-product-icon whitegrey">Icon</div>
|
||||
</GhFormGroup>
|
||||
</GhFormGroup> --}}
|
||||
<div class="gh-product-details-fields">
|
||||
<GhFormGroup @property="name" @classNames="max-width">
|
||||
<label for="member-name">Product name</label>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="gh-product-stats">
|
||||
{{!-- <section class="gh-product-stats">
|
||||
<h4 class="gh-main-section-header small bn">Members</h4>
|
||||
<div class="gh-product-stat-container">
|
||||
<div class="gh-product-chart">CHART</div>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
</div>
|
||||
<LinkTo @route="members">See members →</LinkTo>
|
||||
</div>
|
||||
</section>
|
||||
</section> --}}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
|
@ -82,91 +82,78 @@
|
|||
<div class="gh-list-header"></div>
|
||||
</li>
|
||||
<li class="gh-list-row">
|
||||
<LinkTo @route="settings.product" class="gh-list-data gh-price-list-title">
|
||||
<div class="gh-list-data gh-price-list-title">
|
||||
<h3 class="gh-price-list-name">
|
||||
Monthly
|
||||
</h3>
|
||||
<p class="ma0 pa0 f8 midgrey gh-price-list-description">
|
||||
Full access
|
||||
</p>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<LinkTo @route="settings.product" class="gh-list-data gh-price-list-price">
|
||||
<div class="gh-list-data gh-price-list-price">
|
||||
<span>$5 USD / month</span>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<LinkTo @route="settings.product" class="gh-list-data gh-price-list-subscriptions">
|
||||
<div class="gh-list-data gh-price-list-subscriptions">
|
||||
<span>91</span>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<LinkTo @route="settings.product" class="gh-list-data gh-price-list-actions">
|
||||
<div class="gh-list-data gh-price-list-actions">
|
||||
<div class="gh-price-list-actionlist">
|
||||
<LinkTo @route="settings.product">
|
||||
{{svg-jar "pen" class="w6 h6 fill-midgrey pa1 mr1"}}
|
||||
</LinkTo>
|
||||
<button>
|
||||
{{svg-jar "trash" class="w6 fill-red pa1"}}
|
||||
</button>
|
||||
<LinkTo @route="settings.product">Edit</LinkTo>
|
||||
<button class="gh-btn gh-btn-link archive"><span>Archive</span></button>
|
||||
</div>
|
||||
</LinkTo>
|
||||
</div>
|
||||
</li>
|
||||
<li class="gh-list-row">
|
||||
<LinkTo @route="settings.product" class="gh-list-data gh-price-list-title">
|
||||
<div class="gh-list-data gh-price-list-title">
|
||||
<h3 class="gh-price-list-name">
|
||||
Yearly
|
||||
</h3>
|
||||
<p class="ma0 pa0 f8 midgrey gh-price-list-description">
|
||||
37% discount
|
||||
</p>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<LinkTo @route="settings.product" class="gh-list-data gh-price-list-price">
|
||||
<div class="gh-list-data gh-price-list-price">
|
||||
<span>$50 USD / year</span>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<LinkTo @route="settings.product" class="gh-list-data gh-price-list-subscriptions">
|
||||
<div class="gh-list-data gh-price-list-subscriptions">
|
||||
<span>76</span>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<LinkTo @route="settings.product" class="gh-list-data gh-price-list-actions">
|
||||
<div class="gh-list-data gh-price-list-actions">
|
||||
<div class="gh-price-list-actionlist">
|
||||
<LinkTo @route="settings.product">
|
||||
{{svg-jar "pen" class="w6 h6 fill-midgrey pa1 mr1"}}
|
||||
</LinkTo>
|
||||
<button>
|
||||
{{svg-jar "trash" class="w6 fill-red pa1"}}
|
||||
</button>
|
||||
<LinkTo @route="settings.product">Edit</LinkTo>
|
||||
<button class="gh-btn gh-btn-link archive"><span>Archive</span></button>
|
||||
</div>
|
||||
</LinkTo>
|
||||
</div>
|
||||
</li>
|
||||
<li class="gh-list-row">
|
||||
<LinkTo @route="settings.product" class="gh-list-data gh-price-list-title">
|
||||
<li class="gh-list-row gh-price-list-archived">
|
||||
<div class="gh-list-data gh-price-list-title">
|
||||
<h3 class="gh-price-list-name">
|
||||
Complimentary
|
||||
Complimentary <span class="gh-badge archived">Archived</span>
|
||||
</h3>
|
||||
<p class="ma0 pa0 f8 midgrey gh-price-list-description">
|
||||
Free of charge subscription
|
||||
</p>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<LinkTo @route="settings.product" class="gh-list-data gh-price-list-price">
|
||||
<div class="gh-list-data gh-price-list-price">
|
||||
<span>$0 USD</span>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<LinkTo @route="settings.product" class="gh-list-data gh-price-list-subscriptions">
|
||||
<div class="gh-list-data gh-price-list-subscriptions">
|
||||
<span>18</span>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<LinkTo @route="settings.product" class="gh-list-data gh-price-list-actions">
|
||||
<div class="gh-list-data gh-price-list-actions">
|
||||
<div class="gh-price-list-actionlist">
|
||||
<LinkTo @route="settings.product">
|
||||
{{svg-jar "pen" class="w6 h6 fill-midgrey pa1 mr1"}}
|
||||
</LinkTo>
|
||||
<button>
|
||||
{{svg-jar "trash" class="w6 fill-red pa1"}}
|
||||
</button>
|
||||
<button class="gh-btn gh-btn-link"><span>Activate</span></button>
|
||||
</div>
|
||||
</LinkTo>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue