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;
}
.gh-offer-modal-content {
margin: -32px -32px 0;
padding: 32px 32px 0;
max-height: calc(100vh - 16vw);
overflow: scroll;
}
.gh-offer-modal-content .gh-main-section.columns-3 {
grid-template-columns: 0.8fr 0.8fr 1.2fr;
.gh-offers .view-container {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: calc(100vh - 95px);
}
.gh-offers-list-cta {
@ -21,7 +17,7 @@
}
.gh-offers-list-cta h4 {
color: var(--darkgrey);
color: var(--black);
text-align: center;
font-weight: 600;
margin-bottom: 8px;
@ -165,6 +161,17 @@
border-radius: 3px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07);
color: var(--midgrey);
font-size: 1.3rem;
font-size: 1.4rem;
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">
<GhCanvasHeader class="gh-canvas-header break tablet members-header">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="offers" data-test-link="offers-back">Offers</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>

View File

@ -1,5 +1,5 @@
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header break tablet members-header">
<section class="gh-canvas gh-offers">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>Offers</h2>
<section class="view-actions">
<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>
<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>
</div>
<a href="https://ghost.org" class="gh-btn"><span>Read more</span></a>
@ -83,7 +84,8 @@
<div class="gh-offers-help-card">
<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>
</div>
<a href="https://ghost.org" class="gh-btn"><span>Read more</span></a>
@ -91,7 +93,8 @@
<div class="gh-offers-help-card">
<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>
</div>
<a href="https://ghost.org" class="gh-btn"><span>Read more</span></a>