Added mock content for offers list help

This commit is contained in:
Peter Zimon 2021-10-04 16:17:32 +02:00
parent 713fa7725a
commit 84c9123bfd
3 changed files with 27 additions and 17 deletions

View File

@ -2,15 +2,11 @@
max-width: 1220px; max-width: 1220px;
} }
.gh-offer-modal-content { .gh-offers .view-container {
margin: -32px -32px 0; display: flex;
padding: 32px 32px 0; flex-direction: column;
max-height: calc(100vh - 16vw); justify-content: space-between;
overflow: scroll; min-height: calc(100vh - 95px);
}
.gh-offer-modal-content .gh-main-section.columns-3 {
grid-template-columns: 0.8fr 0.8fr 1.2fr;
} }
.gh-offers-list-cta { .gh-offers-list-cta {
@ -21,7 +17,7 @@
} }
.gh-offers-list-cta h4 { .gh-offers-list-cta h4 {
color: var(--darkgrey); color: var(--black);
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
margin-bottom: 8px; margin-bottom: 8px;
@ -165,6 +161,17 @@
border-radius: 3px; border-radius: 3px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07);
color: var(--midgrey); color: var(--midgrey);
font-size: 1.3rem; font-size: 1.4rem;
padding: 32px; padding: 32px;
}
.gh-offers-help-card .thumbnail {
width: 100%;
height: 120px;
background-size: cover;
margin-bottom: 16px;
}
.gh-offers-help-card .gh-btn {
width: 100%;
} }

View File

@ -1,5 +1,5 @@
<section class="gh-canvas circle-bg"> <section class="gh-canvas circle-bg">
<GhCanvasHeader class="gh-canvas-header break tablet members-header"> <GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title> <h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="offers" data-test-link="offers-back">Offers</LinkTo> <LinkTo @route="offers" data-test-link="offers-back">Offers</LinkTo>
<span>{{svg-jar "arrow-right"}}</span> <span>{{svg-jar "arrow-right"}}</span>

View File

@ -1,5 +1,5 @@
<section class="gh-canvas"> <section class="gh-canvas gh-offers">
<GhCanvasHeader class="gh-canvas-header break tablet members-header"> <GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>Offers</h2> <h2 class="gh-canvas-title" data-test-screen-title>Offers</h2>
<section class="view-actions"> <section class="view-actions">
<LinkTo @route="offer" class="gh-btn gh-btn-primary"><span>New offer</span></LinkTo> <LinkTo @route="offer" class="gh-btn gh-btn-primary"><span>New offer</span></LinkTo>
@ -75,7 +75,8 @@
<div class="gh-offers-help-card"> <div class="gh-offers-help-card">
<div> <div>
<h2>Discounts right on the beat</h2> <div class="thumbnail" style="background-image: url(assets/img/dashboard/bp1.jpg);"></div>
<h3>Discounts right on the beat</h3>
<p>Setting up the right timing for your offers is as critical as finding the right amount.</p> <p>Setting up the right timing for your offers is as critical as finding the right amount.</p>
</div> </div>
<a href="https://ghost.org" class="gh-btn"><span>Read more</span></a> <a href="https://ghost.org" class="gh-btn"><span>Read more</span></a>
@ -83,7 +84,8 @@
<div class="gh-offers-help-card"> <div class="gh-offers-help-card">
<div> <div>
<h2>How The Browser grow their audience with special offers</h2> <div class="thumbnail" style="background-image: url(assets/img/dashboard/bp2.jpg);"></div>
<h3>How The Browser grow their audience with special offers</h3>
<p>Learn about how The Browser work with offers</p> <p>Learn about how The Browser work with offers</p>
</div> </div>
<a href="https://ghost.org" class="gh-btn"><span>Read more</span></a> <a href="https://ghost.org" class="gh-btn"><span>Read more</span></a>
@ -91,7 +93,8 @@
<div class="gh-offers-help-card"> <div class="gh-offers-help-card">
<div> <div>
<h2>Read more about offers</h2> <div class="thumbnail" style="background-image: url(assets/img/dashboard/join-community.jpg)"></div>
<h3>Read more about offers</h3>
<p>Check out the Ghost blog for more tips about how offers can boost your subscriptions.</p> <p>Check out the Ghost blog for more tips about how offers can boost your subscriptions.</p>
</div> </div>
<a href="https://ghost.org" class="gh-btn"><span>Read more</span></a> <a href="https://ghost.org" class="gh-btn"><span>Read more</span></a>