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

Added static benefits list to products card

Browse source
This commit is contained in:
Peter Zimon 2021-06-17 11:11:17 +02:00
parent aa35d99de4
commit b82ab6b2f6
2 changed files with 43 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,14 @@
<span class="gh-badge gh-badge-green">Available in Portal</span>
{{/if}}
</div>
<div class="gh-product-card-block">
<h4>Benefits <span class="counter">(3)</span></h4>
<ul class="benefits">
<li>{{svg-jar "check"}} Access to all J&amp;A Watch J&amp;A episodes, past and future!</li>
<li>{{svg-jar "check"}} An exclusive AD-FREE extra video episode of J&amp;A AMA every other week!</li>
<li>{{svg-jar "check"}} Includes Discord benefits</li>
</ul>
</div>
<div class="gh-product-card-block">
<div class="gh-product-price-container">
<div class="gh-product-card-price">

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

@ -47,27 +47,55 @@
padding-left: 16px;
}
.gh-product-card-block h4 {
font-size: 1.3rem;
font-weight: 500;
}
.gh-product-card-block h4 .counter {
font-weight: 400;
color: var(--midgrey);
}
.gh-product-card-name {
font-size: 1.8rem;
font-weight: 600;
margin: 0;
}
.gh-product-card-heading {
display: inline-block;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 2px;
}
.gh-product-card-description {
font-size: 1.3rem;
line-height: 1.45em;
margin: 4px 20px 4px 0;
color: var(--midgrey);
}
.gh-product-card-block ul.benefits {
list-style: none;
margin: 10px 0 0;
padding: 0;
}
.gh-product-card-block ul.benefits li {
display: flex;
align-items: flex-start;
font-size: 1.3rem;
line-height: 1.45em;
color: var(--middarkgrey);
}
.gh-product-card-block ul.benefits li svg {
flex-basis: 18px;
width: 14px;
height: 14px;
min-width: 14px;
margin-top: 3px;
color: var(--black);
}
.gh-product-price-container {
display: flex;
margin-left: 20px;
}
.gh-product-card-price {