mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
Updated new/edit offer form design
refs https://github.com/TryGhost/Team/issues/1811
This commit is contained in:
Djordje Vlaisavljevic
parent
d3fb88ecb3
commit
e359d2cb32
@ -1256,6 +1256,30 @@
|
||||
grid-column: 1 / 4;
|
||||
}
|
||||
|
||||
.gh-main-section-header-with-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.gh-main-section-header-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.gh-main-section-header-info svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
|
||||
.gh-main-section-block {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -142,6 +142,11 @@
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.gh-offer-discount {
|
||||
width: 100%;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.gh-offer-duration {
|
||||
display: flex;
|
||||
}
|
||||
@ -165,6 +170,11 @@
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.gh-offer-trial-duration {
|
||||
width: 100%;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.gh-offer-trial-duration .trial-duration::before {
|
||||
position: absolute;
|
||||
content: "days";
|
||||
@ -175,14 +185,63 @@
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.gh-offer-url .gh-input {
|
||||
background: var(--main-color-content-greybg);
|
||||
border-color: var(--lightgrey-l1);
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.gh-offer-type-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border: 1px solid #dddedf;
|
||||
background: #fff;
|
||||
color: #394047;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.gh-offer-tier-and-trial {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gh-select-product-cadence select {
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.gh-offer-type-container .gh-radio {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-offer-type-container .gh-radio:not(:first-child) {
|
||||
border-left: 1px solid #F6F6F6;
|
||||
}
|
||||
|
||||
.gh-offer-type-container .gh-radio-button {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.gh-offer-type-container .gh-radio.active .gh-radio-button:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
border: 2px solid #fff;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-radius: 0px;
|
||||
background: transparent;
|
||||
opacity: 1;
|
||||
transition: opacity .15s ease-in-out;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
/* Offers – Portal preview */
|
||||
.gh-offer-portal-preview {
|
||||
display: flex;
|
||||
@ -290,6 +349,35 @@
|
||||
fill: var(--midgrey);
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.gh-offer-tier-and-trial, .gh-offer-duration {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-offer-discount, .gh-offer-trial-duration, .gh-offer-duration .form-group:not(:first-of-type) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.gh-offer-type-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-offer-type-container .gh-radio:not(:first-child) {
|
||||
border-left: none;
|
||||
border-top: 1px solid #f6f6f6;
|
||||
}
|
||||
|
||||
.gh-offer-title-and-code {
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: none;
|
||||
grid-column-gap: 0px;
|
||||
}
|
||||
|
||||
.gh-offer-duration .form-group {
|
||||
margin-bottom: 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.gh-offer-portal-preview {
|
||||
display: none;
|
||||
@ -320,6 +408,33 @@
|
||||
.gh-offers-help-card p {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.gh-offer-tier-and-trial, .gh-offer-duration {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.gh-offer-discount, .gh-offer-trial-duration, .gh-offer-duration .form-group:not(:first-of-type) {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.gh-offer-type-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.gh-offer-type-container .gh-radio:not(:first-child) {
|
||||
border-top: none;
|
||||
border-left: 1px solid #f6f6f6;
|
||||
}
|
||||
|
||||
.gh-offer-title-and-code {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: none;
|
||||
grid-column-gap: 24px;
|
||||
}
|
||||
|
||||
.gh-offer-duration .form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
@ -357,6 +472,33 @@
|
||||
min-width: 200px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.gh-offer-tier-and-trial, .gh-offer-duration {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-offer-discount, .gh-offer-trial-duration, .gh-offer-duration .form-group:not(:first-of-type) {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.gh-offer-type-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-offer-type-container .gh-radio:not(:first-child) {
|
||||
border-left: none;
|
||||
border-top: 1px solid #f6f6f6;
|
||||
}
|
||||
|
||||
.gh-offer-title-and-code {
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: none;
|
||||
grid-column-gap: 0px;
|
||||
}
|
||||
|
||||
.gh-offer-duration .form-group {
|
||||
margin-bottom: 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
|
||||
@ -41,113 +41,142 @@
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
|
||||
<h4 class="gh-main-section-header small bn">
|
||||
Discount information <span class="midgrey"> – Once saved, this cannot be changed.</span>
|
||||
<h4 class="gh-main-section-header gh-main-section-header-with-info small bn">
|
||||
<span>Discount information</span>
|
||||
<div class="midgrey gh-main-section-header-info"><span>Once saved, this cannot be changed.</span><span>{{svg-jar "info"}}</span></div>
|
||||
</h4>
|
||||
<div class="gh-main-section-content grey">
|
||||
{{#if (feature 'freeTrial')}}
|
||||
<GhFormGroup>
|
||||
<div>
|
||||
<label class="fw6">Offer type</label>
|
||||
<div class="gh-btn-group flex">
|
||||
<button class="gh-btn flex-grow-1 {{if this.isDiscountOffer "gh-btn-group-selected"}}" type="button" {{on "click" (fn this.changeType "discount")}} disabled={{this.isDiscountSectionDisabled}}>
|
||||
<span>Discount</span>
|
||||
</button>
|
||||
<button class="gh-btn flex-grow-1 {{if this.isTrialOffer "gh-btn-group-selected"}}"
|
||||
<div class="gh-offer-type-container">
|
||||
<div class="gh-radio flex-grow-1 {{if this.isDiscountOffer "active"}}" type="button" {{on "click" (fn this.changeType "discount")}} disabled={{this.isDiscountSectionDisabled}}>
|
||||
<div class="gh-radio-button"></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Discount</div>
|
||||
<div class="gh-radio-desc">Offer a special reduced price.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-radio flex-grow-1 {{if this.isTrialOffer "active"}}"
|
||||
type="button" {{on "click" (fn this.changeType "trial")}} disabled={{this.isDiscountSectionDisabled}}>
|
||||
<span>Free trial</span>
|
||||
</button>
|
||||
<div class="gh-radio-button"></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Free trial</div>
|
||||
<div class="gh-radio-desc">Give free access for a limited time.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
{{/if}}
|
||||
<GhFormGroup @errors={{this.errors}} @property="product-cadence">
|
||||
<label for="product-cadence" class="fw6">Tier – cadence</label>
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@value={{this.cadence}}
|
||||
@options={{this.cadences}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="name"
|
||||
@disabled={{this.isDiscountSectionDisabled}}
|
||||
@update={{this.updateCadence}}
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
|
||||
</GhFormGroup>
|
||||
{{#if this.isTrialOffer}}
|
||||
<div class="gh-offer-trial-duration">
|
||||
<GhFormGroup @errors={{this.offer.errors}} @property="trialDuration">
|
||||
<label for="trial-duration" class="fw6">Trial duration</label>
|
||||
<div class="trial-duration">
|
||||
<GhTextInput
|
||||
@name="trial-duration"
|
||||
@type="number"
|
||||
@placeholder=""
|
||||
<div class="gh-offer-tier-and-trial">
|
||||
<GhFormGroup @errors={{this.errors}} @property="product-cadence">
|
||||
<label for="product-cadence" class="fw6">Tier – cadence</label>
|
||||
<span class="gh-select gh-select-product-cadence">
|
||||
<OneWaySelect
|
||||
@value={{this.cadence}}
|
||||
@options={{this.cadences}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="name"
|
||||
@disabled={{this.isDiscountSectionDisabled}}
|
||||
@value={{readonly this.offer.amount}}
|
||||
{{on "input" this.setTrialDuration}}
|
||||
@id="trial-duration"
|
||||
@class="gh-input"
|
||||
@update={{this.updateCadence}}
|
||||
/>
|
||||
</div>
|
||||
<span class="error">
|
||||
<GhErrorMessage @errors={{this.offer.errors}} @property="amount" />
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="gh-offer-discount">
|
||||
<label for="amount" class="fw6 mb1">Amount off</label>
|
||||
<div class="flex items-start">
|
||||
<GhFormGroup @errors={{this.offer.errors}} @property="amount" @hasValidated={{this.offer.hasValidated}}>
|
||||
<div class="gh-offer-value percentage">
|
||||
{{#if (eq this.offer.type 'fixed')}}
|
||||
<GhTextInput
|
||||
@name="amount"
|
||||
@type="number"
|
||||
@placeholder=""
|
||||
@disabled={{this.isDiscountSectionDisabled}}
|
||||
@value={{readonly (gh-price-amount this.offer.amount)}}
|
||||
@input={{this.setDiscountAmount}}
|
||||
@id="amount"
|
||||
@class="gh-input"
|
||||
/>
|
||||
{{else}}
|
||||
<GhTextInput
|
||||
@name="amount"
|
||||
@type="number"
|
||||
@placeholder=""
|
||||
@disabled={{this.isDiscountSectionDisabled}}
|
||||
@value={{readonly this.offer.amount}}
|
||||
@input={{this.setDiscountAmount}}
|
||||
@id="amount"
|
||||
@class="gh-input"
|
||||
/>
|
||||
{{/if}}
|
||||
<div class="gh-offer-trial-duration">
|
||||
<GhFormGroup @errors={{this.offer.errors}} @property="trialDuration">
|
||||
<label for="trial-duration" class="fw6">Trial duration</label>
|
||||
<div class="trial-duration">
|
||||
<GhTextInput
|
||||
@name="trial-duration"
|
||||
@type="number"
|
||||
@placeholder=""
|
||||
@disabled={{this.isDiscountSectionDisabled}}
|
||||
@value={{readonly this.offer.amount}}
|
||||
{{on "input" this.setTrialDuration}}
|
||||
@id="trial-duration"
|
||||
@class="gh-input"
|
||||
/>
|
||||
</div>
|
||||
<span class="error">
|
||||
<GhErrorMessage @errors={{this.offer.errors}} @property="amount" />
|
||||
</span>
|
||||
</GhFormGroup>
|
||||
<div class="gh-offer-type">
|
||||
<GhFormGroup @errors={{this.offer.errors}} @property="type" @hasValidated={{this.offer.hasValidated}} class="no-margin">
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@value={{this.offer.type}}
|
||||
@options={{this.offertypes}}
|
||||
@optionValuePath="offertype"
|
||||
@disabled={{this.isDiscountSectionDisabled}}
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="offertype"
|
||||
@update = {{this.setDiscountType}}
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="gh-offer-tier-and-trial">
|
||||
<GhFormGroup @errors={{this.errors}} @property="product-cadence">
|
||||
<label for="product-cadence" class="fw6">Tier – cadence</label>
|
||||
<span class="gh-select gh-select-product-cadence">
|
||||
<OneWaySelect
|
||||
@value={{this.cadence}}
|
||||
@options={{this.cadences}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="name"
|
||||
@disabled={{this.isDiscountSectionDisabled}}
|
||||
@update={{this.updateCadence}}
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
|
||||
</GhFormGroup>
|
||||
<div class="gh-offer-discount">
|
||||
<label for="amount" class="fw6 mb1">Amount off</label>
|
||||
<div class="flex items-start">
|
||||
<GhFormGroup @errors={{this.offer.errors}} @property="amount" @hasValidated={{this.offer.hasValidated}}>
|
||||
<div class="gh-offer-value percentage">
|
||||
{{#if (eq this.offer.type 'fixed')}}
|
||||
<GhTextInput
|
||||
@name="amount"
|
||||
@type="number"
|
||||
@placeholder=""
|
||||
@disabled={{this.isDiscountSectionDisabled}}
|
||||
@value={{readonly (gh-price-amount this.offer.amount)}}
|
||||
@input={{this.setDiscountAmount}}
|
||||
@id="amount"
|
||||
@class="gh-input"
|
||||
/>
|
||||
{{else}}
|
||||
<GhTextInput
|
||||
@name="amount"
|
||||
@type="number"
|
||||
@placeholder=""
|
||||
@disabled={{this.isDiscountSectionDisabled}}
|
||||
@value={{readonly this.offer.amount}}
|
||||
@input={{this.setDiscountAmount}}
|
||||
@id="amount"
|
||||
@class="gh-input"
|
||||
/>
|
||||
{{/if}}
|
||||
</div>
|
||||
<span class="error">
|
||||
<GhErrorMessage @errors={{this.offer.errors}} @property="amount" />
|
||||
</span>
|
||||
<GhErrorMessage @errors={{this.offer.errors}} @property="type" />
|
||||
</GhFormGroup>
|
||||
<div class="gh-offer-type">
|
||||
<GhFormGroup @errors={{this.offer.errors}} @property="type" @hasValidated={{this.offer.hasValidated}} class="no-margin">
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@value={{this.offer.type}}
|
||||
@options={{this.offertypes}}
|
||||
@optionValuePath="offertype"
|
||||
@disabled={{this.isDiscountSectionDisabled}}
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="offertype"
|
||||
@update = {{this.setDiscountType}}
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<GhErrorMessage @errors={{this.offer.errors}} @property="type" />
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -193,7 +222,7 @@
|
||||
|
||||
<h4 class="gh-main-section-header small bn">Portal settings</h4>
|
||||
<div class="gh-main-section-content grey">
|
||||
<div class="form-col2">
|
||||
<div class="form-col2 gh-offer-title-and-code">
|
||||
<GhFormGroup @errors={{this.offer.errors}} @property="displayTitle" @hasValidated={{this.offer.hasValidated}}>
|
||||
<label for="display-title" class="fw6">Display title</label>
|
||||
<GhTextInput
|
||||
|
||||
Loading…
Reference in New Issue
Block a user