mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
Offer list and detail improvements
- added icon to offer value - added link popup to list - renamed "Delete offer" to "Archive offer"
This commit is contained in:
Peter Zimon
parent
b942029cc9
commit
e244304538
26
ghost/admin/app/components/modals/offers/link.hbs
Normal file
26
ghost/admin/app/components/modals/offers/link.hbs
Normal file
@ -0,0 +1,26 @@
|
||||
<div class="modal-content">
|
||||
<header class="modal-header">
|
||||
<h1>Offer link</h1>
|
||||
</header>
|
||||
<button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
|
||||
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
You can share this link with your members via email or social media. This discount will be applied at checkout when members use this link.
|
||||
</p>
|
||||
<div class="gh-input-group">
|
||||
<GhTextInput
|
||||
@name="url"
|
||||
@value="https://example.com/black-friday"
|
||||
@id="url"
|
||||
@disabled="disabled"
|
||||
@class="gh-input" />
|
||||
|
||||
<GhTaskButton
|
||||
@buttonText="Copy link"
|
||||
@task={{this.copyOfferUrl}}
|
||||
@successText="Link copied"
|
||||
@class="gh-btn gh-btn-black gh-btn-icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
7
ghost/admin/app/components/modals/offers/link.js
Normal file
7
ghost/admin/app/components/modals/offers/link.js
Normal file
@ -0,0 +1,7 @@
|
||||
import Component from '@glimmer/component';
|
||||
|
||||
export default class ModalsOffersLinkComponent extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
}
|
||||
@ -250,6 +250,7 @@ export default class OffersController extends Controller {
|
||||
updateDuration(duration) {
|
||||
this._saveOfferProperty('duration', duration);
|
||||
// this.offer.duration = duration;
|
||||
this.selectedDuration = duration;
|
||||
}
|
||||
|
||||
// Private -----------------------------------------------------------------
|
||||
|
||||
@ -87,7 +87,9 @@ Router.map(function () {
|
||||
this.route('member.new', {path: '/members/new'});
|
||||
this.route('member', {path: '/members/:member_id'});
|
||||
|
||||
this.route('offers');
|
||||
this.route('offers', function () {
|
||||
this.route('link');
|
||||
});
|
||||
this.route('offer.new', {path: '/offers/new'});
|
||||
this.route('offer', {path: '/offers/:offer_id'});
|
||||
|
||||
|
||||
35
ghost/admin/app/routes/offers/link.js
Normal file
35
ghost/admin/app/routes/offers/link.js
Normal file
@ -0,0 +1,35 @@
|
||||
import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
|
||||
import {action} from '@ember/object';
|
||||
import {bind} from '@ember/runloop';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
export default class SettingsOffersLinkRoute extends AuthenticatedRoute {
|
||||
@service modals;
|
||||
|
||||
activate() {
|
||||
this.advancedModal = this.modals.open('modals/offers/link', {}, {
|
||||
className: 'fullscreen-modal-action fullscreen-modal-wide',
|
||||
beforeClose: bind(this, this.beforeModalClose)
|
||||
});
|
||||
}
|
||||
|
||||
@action
|
||||
willTransition() {
|
||||
this.isTransitioning = true;
|
||||
return true;
|
||||
}
|
||||
|
||||
deactivate() {
|
||||
this.advancedModal?.close();
|
||||
this.advancedModal = null;
|
||||
this.isTransitioning = false;
|
||||
}
|
||||
|
||||
beforeModalClose() {
|
||||
if (this.isTransitioning) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.transitionTo('offers');
|
||||
}
|
||||
}
|
||||
@ -6,7 +6,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: calc(100vh - 95px);
|
||||
padding-bottom: 0;
|
||||
min-height: calc(100vh - 195px);
|
||||
}
|
||||
|
||||
.gh-offers-list-cta {
|
||||
@ -52,6 +53,23 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-offers-list .offer-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.gh-offers-list .offer-value svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.gh-offers-list .offer-value svg path {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.gh-offers-list-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -63,8 +81,31 @@
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.gh-offer-modal-content .form-group:last-of-type {
|
||||
margin-bottom: 0;
|
||||
.gh-offer-link-button {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gh-offers .gh-list-row:hover .gh-offer-link-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gh-offer-link-button,
|
||||
.gh-offer-link-button:hover {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.gh-offer-link-button svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.gh-offer-link-button svg path {
|
||||
stroke: var(--darkgrey);
|
||||
stroke-width: 1.4px;
|
||||
}
|
||||
|
||||
.gh-offer-link-button:hover svg path {
|
||||
stroke: var(--black);
|
||||
}
|
||||
|
||||
.gh-offer-type {
|
||||
@ -181,6 +222,7 @@
|
||||
|
||||
.gh-offers-help {
|
||||
margin-top: 5vmin;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-offers-help .gh-main-section-content {
|
||||
@ -201,6 +243,7 @@
|
||||
color: var(--midgrey);
|
||||
font-size: 1.4rem;
|
||||
padding: 32px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.gh-offers-help-card .thumbnail {
|
||||
@ -212,4 +255,14 @@
|
||||
|
||||
.gh-offers-help-card .gh-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-offers-help-card:hover {
|
||||
box-shadow:
|
||||
0px 54px 80px rgba(0, 0, 0, 0.07),
|
||||
0px 19.7109px 29.2013px rgba(0, 0, 0, 0.0482987),
|
||||
0px 9.56927px 14.1767px rgba(0, 0, 0, 0.0389404),
|
||||
0px 4.69103px 6.94968px rgba(0, 0, 0, 0.0310596),
|
||||
0px 1.85484px 2.74791px rgba(0, 0, 0, 0.0217013);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
@ -772,8 +772,8 @@ textarea {
|
||||
}
|
||||
|
||||
.gh-input-group .gh-btn span {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
@ -205,7 +205,7 @@
|
||||
type="button"
|
||||
class="gh-btn gh-btn-red gh-btn-icon"
|
||||
>
|
||||
<span>Delete offer</span>
|
||||
<span>Archive offer</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<section class="view-container">
|
||||
|
||||
{{#if this.offersExist}}
|
||||
<table class="gh-list">
|
||||
<table class="gh-list gh-offers-list">
|
||||
<tr class="gh-list-row header">
|
||||
<th class="gh-list-header">{{this.offersList.length}} offers</th>
|
||||
<th class="gh-list-header">Tier</th>
|
||||
@ -26,19 +26,25 @@
|
||||
<span>{{offer.tier.name}}</span> <span class="midgrey">- {{offer.cadenceInterval}}</span>
|
||||
</LinkTo>
|
||||
<LinkTo @route="offer" @model={{offer.offerModel}} class="gh-list-data">
|
||||
{{#if (eq offer.type 'percent')}}
|
||||
<span class="green fw6">{{offer.amount}}% OFF</span>
|
||||
{{/if}}
|
||||
{{#if (eq offer.type 'fixed')}}
|
||||
<span class="green fw6">20% OFF</span>
|
||||
{{/if}}
|
||||
<span class="midgrey"> – {{offer.duration}} </span>
|
||||
<span class="offer-value">
|
||||
{{svg-jar "offer"}}
|
||||
{{#if (eq offer.type 'percent')}}
|
||||
<span class="green fw6">{{offer.amount}}% OFF</span>
|
||||
{{/if}}
|
||||
{{#if (eq offer.type 'fixed')}}
|
||||
<span class="green fw6">20% OFF</span>
|
||||
{{/if}}
|
||||
<span class="dib ml1 midgrey"> – {{offer.duration}} </span>
|
||||
</span>
|
||||
</LinkTo>
|
||||
<LinkTo @route="offer" @model={{offer.offerModel}} class="gh-list-data">
|
||||
<span class="midgrey">-</span>
|
||||
</LinkTo>
|
||||
<LinkTo @route="offer" @model={{@offer.offerModel}} class="gh-list-data gh-list-cellwidth-10 gh-tag-list-chevron" @title="Edit offer">
|
||||
<LinkTo @route="offer" @model={{@offer.offerModel}} class="gh-list-data gh-list-cellwidth-10 gh-tag-list-chevron">
|
||||
<div class="flex items-center justify-end w-100 h-100">
|
||||
<LinkTo @route="offers.link" class="gh-btn gh-btn-icon gh-btn-text gh-offer-link-button" data-tooltip="Get shareable link">
|
||||
<span>{{svg-jar "link"}}</span>
|
||||
</LinkTo>
|
||||
<span class="nr2 lh-1">{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}</span>
|
||||
</div>
|
||||
</LinkTo>
|
||||
@ -46,7 +52,7 @@
|
||||
{{/each}}
|
||||
</table>
|
||||
{{else}}
|
||||
<div class="gh-offers gh-offers-list-cta">
|
||||
<div class="gh-offers-list-cta">
|
||||
{{svg-jar "discount-bubble" class="discount-bubble"}}
|
||||
<h4>Provide special offers to new signups</h4>
|
||||
<p>
|
||||
@ -59,35 +65,35 @@
|
||||
{{/if}}
|
||||
|
||||
<div class="gh-main-section gh-offers-help">
|
||||
<h2 class="gh-main-section-header small bn">Get the most out of offers</h2>
|
||||
<div class="gh-main-section-block">
|
||||
<div class="gh-main-section-content grey">
|
||||
|
||||
<div class="gh-offers-help-card">
|
||||
<a href="https://ghost.org/resources" target="_blank" class="gh-offers-help-card">
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="gh-btn"><span>Read more</span></div>
|
||||
</a>
|
||||
|
||||
<div class="gh-offers-help-card">
|
||||
<a href="https://ghost.org/resources" target="_blank" class="gh-offers-help-card">
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="gh-btn"><span>Read more</span></div>
|
||||
</a>
|
||||
|
||||
<div class="gh-offers-help-card">
|
||||
<a href="https://ghost.org/resources" target="_blank" class="gh-offers-help-card">
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="gh-btn"><span>Read more</span></div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
4
ghost/admin/public/assets/icons/offer.svg
Normal file
4
ghost/admin/public/assets/icons/offer.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs>
|
||||
<path d="M22.939 2.56V8.817C22.9391 9.61244 22.6232 10.3754 22.061 10.938L10.5 22.5C10.2187 22.7812 9.83721 22.9392 9.43946 22.9392C9.04172 22.9392 8.66026 22.7812 8.37896 22.5L1.49997 15.62C1.21876 15.3387 1.06079 14.9572 1.06079 14.5595C1.06079 14.1618 1.21876 13.7803 1.49997 13.499L13.061 1.938C13.6236 1.37572 14.3865 1.0599 15.182 1.06H21.439C21.8368 1.06 22.2183 1.21803 22.4996 1.49934C22.7809 1.78064 22.939 2.16217 22.939 2.56V2.56Z" class="a" />
|
||||
<path d="M17.689 7.81C16.8605 7.81 16.189 7.13842 16.189 6.31C16.189 5.48157 16.8605 4.81 17.689 4.81C18.5174 4.81 19.189 5.48157 19.189 6.31C19.189 7.13842 18.5174 7.81 17.689 7.81Z" class="a" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 881 B |
Loading…
Reference in New Issue
Block a user