Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Updated product card styles (alpha)

Browse source
This commit is contained in:
Peter Zimon 2021-06-04 10:59:42 +02:00
parent d4cb7f9d1d
commit a82b31353f
3 changed files with 64 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
ghost/admin/app/components/gh-membership-products-alpha.hbs
View file

@ -1,36 +1,24 @@
{{#each this.products as |product|}} {{#each this.products as |product|}}
<div class="gh-product-card" style="flex-direction: row;align-items: stretch"> <div class="gh-product-card">
<div style="display: flex;flex-grow: 1;flex-shrink: 0;flex-basis: 50%"> <button class="gh-product-card-editbutton gh-btn gh-btn-text gh-btn-link green" {{action "openEditProduct" product}}>
<div style="display: flex;flex-direction:column;align-items: flex-start;flex-grow: 1"> <span>Edit</span>
<h3 class="gh-product-card-name"> </button>
{{product.name}} <div class="gh-product-card-block">
</h3> <h3 class="gh-product-card-name">
<p class="gh-product-card-description"> {{product.name}}
{{product.description}}
</p>
</div>
</div>
<div style="display: flex;flex-direction:column;align-items: flex-start;flex-grow: 1; flex-shrink: 0; border-left: 1px solid #c4cad2;padding-left: 12px;flex-basis: 50%">
<h3 class="gh-product-card-name" style="margin-bottom: 12px">
Pricing
</h3> </h3>
<p class="gh-product-card-description"> <p class="gh-product-card-description">
<span class="ttu" style="font-weight: bold">{{product.monthlyPrice.currency}}</span> {{product.description}}
<span style="font-weight: bold">{{gh-price-amount product.monthlyPrice.amount}}</span>/month
</p>
<p class="gh-product-card-description" style="margin-bottom: 0">
<span class="ttu" style="font-weight: bold">{{product.monthlyPrice.currency}}</span>
<span style="font-weight: bold">{{gh-price-amount product.yearlyPrice.amount}}</span>/year
</p> </p>
</div> </div>
<div> <div class="gh-product-card-block">
</div> <span class="gh-product-card-heading">Pricing</span>
<div style="display: flex;align-items: center"> <p class="gh-product-card-price">
<div> <span class="amount">{{gh-price-amount product.monthlyPrice.amount}} </span><span class="currency">{{product.monthlyPrice.currency}}</span><span class="period">/month</span>
<button class="gh-btn gh-btn-link" {{action "openEditProduct" product}}> </p>
<span>Edit</span> <p class="gh-product-card-price">
</button> <span class="amount">{{gh-price-amount product.yearlyPrice.amount}} </span><span class="currency">{{product.monthlyPrice.currency}}</span><span class="period">/year</span>
</div> </p>
</div> </div>
</div> </div>
{{/each}} {{/each}}

4
ghost/admin/app/styles/layouts/main.css
View file

@ -1228,12 +1228,12 @@
/* Grey background modifiers */ /* Grey background modifiers */
.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red), .gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red),
.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black) { .gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black):not(.gh-btn-link) {
background: var(--whitegrey-d2); background: var(--whitegrey-d2);
} }
.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):hover, .gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):hover,
.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):hover { .gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-link):hover {
background: color-mod(var(--whitegrey-d2) l(-4%)); background: color-mod(var(--whitegrey-d2) l(-4%));
} }

54
ghost/admin/app/styles/layouts/products.css
View file

@ -12,14 +12,13 @@
} }
.gh-product-card { .gh-product-card {
position:relative;
display: flex; display: flex;
flex-direction: column; align-items: flex-start;
align-items: center; justify-content: space-between;
justify-content: center;
text-align: center;
border: 1px solid var(--whitegrey); border: 1px solid var(--whitegrey);
border-radius: 2px; border-radius: 3px;
padding: 24px 48px; padding: 24px;
background: white; background: white;
margin-bottom: 12px; margin-bottom: 12px;
} }
@ -30,16 +29,55 @@
} }
} }
.gh-product-card-editbutton {
position: absolute;
right: 24px;
top: 16px;
}
.gh-product-card-block {
flex-basis: 50%;
}
.gh-product-card-block:not(:first-of-type) {
border-left: 1px solid var(--whitegrey);
padding-left: 16px;
}
.gh-product-card-name { .gh-product-card-name {
font-size: 1.75rem; font-size: 1.8rem;
font-weight: 500;
margin: 0; margin: 0;
} }
.gh-product-card-heading {
display: inline-block;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 2px;
}
.gh-product-card-description { .gh-product-card-description {
margin: 0 0 16px; margin-top: 2px;
color: var(--midgrey); color: var(--midgrey);
} }
.gh-product-card-price {
margin: 0 0 2px;
font-size: 1.3rem;
color: var(--midgrey);
}
.gh-product-card-price .amount,
.gh-product-card-price .currency {
font-weight: 600;
color: var(--darkgrey);
}
.gh-product-card-price .currency {
text-transform: uppercase;
}
.gh-product-list-icon { .gh-product-list-icon {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;