From 5a5d6398fde332a6a98854473e0bc412be9ea20b Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Thu, 15 Apr 2021 11:07:18 +0200
Subject: [PATCH] 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
---
 .../app/components/modal-product-price.hbs    |  4 +-
 ghost/admin/app/styles/layouts/products.css   | 27 +++++-
 .../admin/app/templates/settings/product.hbs  | 83 ++++++++-----------
 3 files changed, 63 insertions(+), 51 deletions(-)

diff --git a/ghost/admin/app/components/modal-product-price.hbs b/ghost/admin/app/components/modal-product-price.hbs
index a724deec17..51865b4c61 100644
--- a/ghost/admin/app/components/modal-product-price.hbs
+++ b/ghost/admin/app/components/modal-product-price.hbs
@@ -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
diff --git a/ghost/admin/app/styles/layouts/products.css b/ghost/admin/app/styles/layouts/products.css
index 1e89e8310e..822473e5b9 100644
--- a/ghost/admin/app/styles/layouts/products.css
+++ b/ghost/admin/app/styles/layouts/products.css
@@ -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;
diff --git a/ghost/admin/app/templates/settings/product.hbs b/ghost/admin/app/templates/settings/product.hbs
index 633d1620fe..88e967ae9c 100644
--- a/ghost/admin/app/templates/settings/product.hbs
+++ b/ghost/admin/app/templates/settings/product.hbs
@@ -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 &rarr;</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>