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

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

@ -1,7 +1,9 @@
{{#each this.products as |product|}}
<div class="gh-product-card" style="flex-direction: row;align-items: stretch">
<div style="display: flex;flex-grow: 1;flex-shrink: 0;flex-basis: 50%">
<div style="display: flex;flex-direction:column;align-items: flex-start;flex-grow: 1">
<div class="gh-product-card">
<button class="gh-product-card-editbutton gh-btn gh-btn-text gh-btn-link green" {{action "openEditProduct" product}}>
<span>Edit</span>
</button>
<div class="gh-product-card-block">
<h3 class="gh-product-card-name">
{{product.name}}
</h3>
@ -9,29 +11,15 @@
{{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>
<p class="gh-product-card-description">
<span class="ttu" style="font-weight: bold">{{product.monthlyPrice.currency}}</span>
<span style="font-weight: bold">{{gh-price-amount product.monthlyPrice.amount}}</span>/month
<div class="gh-product-card-block">
<span class="gh-product-card-heading">Pricing</span>
<p class="gh-product-card-price">
<span class="amount">{{gh-price-amount product.monthlyPrice.amount}} </span><span class="currency">{{product.monthlyPrice.currency}}</span><span class="period">/month</span>
</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 class="gh-product-card-price">
<span class="amount">{{gh-price-amount product.yearlyPrice.amount}} </span><span class="currency">{{product.monthlyPrice.currency}}</span><span class="period">/year</span>
</p>
</div>
<div>
</div>
<div style="display: flex;align-items: center">
<div>
<button class="gh-btn gh-btn-link" {{action "openEditProduct" product}}>
<span>Edit</span>
</button>
</div>
</div>
</div>
{{/each}}
<div class="gh-product-card" {{action "openNewProduct" product}} style="cursor: pointer">

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

@ -1228,12 +1228,12 @@
/* 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-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);
}
.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%));
}

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

@ -12,14 +12,13 @@
}
.gh-product-card {
position:relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
align-items: flex-start;
justify-content: space-between;
border: 1px solid var(--whitegrey);
border-radius: 2px;
padding: 24px 48px;
border-radius: 3px;
padding: 24px;
background: white;
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 {
font-size: 1.75rem;
font-size: 1.8rem;
font-weight: 500;
margin: 0;
}
.gh-product-card-heading {
display: inline-block;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 2px;
}
.gh-product-card-description {
margin: 0 0 16px;
margin-top: 2px;
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 {
display: flex;
align-items: flex-end;