TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Added static Offer form inputs

Browse Source
This commit is contained in:
Peter Zimon 2021-09-23 13:12:01 +02:00
parent dce39c8a91
commit 7783452aeb
3 changed files with 138 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
ghost/admin/app/components/modals/membership/offer.hbs
View File

@ -1,46 +1,107 @@
<div class="modal-content">
<header class="modal-header">
<h1>New offer</h1>
</header>
<form>
<div class="modal-body">
<div class="gh-main-section columns-3">
<div class="gh-main-section-block span-2">
<h4 class="gh-main-section-header small bn">Basic</h4>
<div class="gh-main-section-content grey gh-product-priceform-block">
<GhFormGroup @errors={{this.errors}} @property="name">
<label for="name" class="fw6">Name</label>
<GhTextInput
@name="name"
@placeholder="Black Friday"
@id="name"
@class="gh-input" />
<GhErrorMessage @errors={{this.errors}} @property="name" />
<p>User internally</p>
</GhFormGroup>
</div>
<section class="modal-content">
<div class="gh-offer-modal-content">
<header class="modal-header">
<h1>New offer</h1>
</header>
<form>
<div class="modal-body">
<div class="gh-main-section columns-3">
<div class="gh-main-section-block no-margin span-2">
<h4 class="gh-main-section-header small bn">Basic</h4>
<div class="gh-main-section-content grey">
<GhFormGroup @errors={{this.errors}} @property="name">
<label for="name" class="fw6">Name</label>
<GhTextInput
@name="name"
@placeholder="Black Friday"
@id="name"
@class="gh-input" />
<GhErrorMessage @errors={{this.errors}} @property="name" />
<p>User internally</p>
</GhFormGroup>
</div>
<h4 class="gh-main-section-header small bn">Discount info</h4>
<div class="gh-main-section-content grey gh-product-priceform-block">
<GhFormGroup @errors={{this.errors}} @property="name">
<label for="name" class="fw6">Product – cadence</label>
<GhTextInput
@name="product-cadence"
@placeholder=""
@id="product-cadence"
@class="gh-input" />
<GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
</GhFormGroup>
<h4 class="gh-main-section-header small bn">Discount info</h4>
<div class="gh-main-section-content grey">
<GhFormGroup @errors={{this.errors}} @property="product-cadence">
<label for="product-cadence" class="fw6">Product – cadence</label>
<GhTextInput
@name="product-cadence"
@placeholder=""
@id="product-cadence"
@class="gh-input" />
<GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
</GhFormGroup>
<div class="form-col2">
<div class="gh-offer-type">
<div class="gh-radio active">
<div class="gh-radio-button"></div>
<div class="gh-radio-content">
<div class="gh-radio-label">Percentage discount</div>
</div>
</div>
<div class="gh-radio">
<div class="gh-radio-button"></div>
<div class="gh-radio-content">
<div class="gh-radio-label">Fixed amount discount</div>
</div>
</div>
</div>
<GhFormGroup @errors={{this.errors}} @property="amount">
<label for="amount" class="fw6">Percentage off</label>
<GhTextInput
@name="amount"
@placeholder=""
@id="amount"
@class="gh-input" />
<GhErrorMessage @errors={{this.errors}} @property="amount" />
</GhFormGroup>
</div>
</div>
<h4 class="gh-main-section-header small bn">Portal settings</h4>
<div class="gh-main-section-content grey">
<div class="form-col2">
<GhFormGroup @errors={{this.errors}} @property="display-title">
<label for="display-title" class="fw6">Display title</label>
<GhTextInput
@name="display-title"
@placeholder=""
@id="display-title"
@class="gh-input" />
<GhErrorMessage @errors={{this.errors}} @property="display-title" />
</GhFormGroup>
<GhFormGroup @errors={{this.errors}} @property="code">
<label for="code" class="fw6">Offer code</label>
<GhTextInput
@name="code"
@placeholder=""
@id="code"
@class="gh-input" />
<GhErrorMessage @errors={{this.errors}} @property="code" />
</GhFormGroup>
</div>
<GhFormGroup @errors={{this.errors}} @property="description">
<label for="description" class="fw6">Description</label>
<GhTextInput
@name="description"
@placeholder=""
@id="description"
@class="gh-input" />
<GhErrorMessage @errors={{this.errors}} @property="description" />
</GhFormGroup>
</div>
</div>
<div class="gh-main-section-block no-margin">
<h4 class="gh-main-section-header small bn">Portal preview</h4>
</div>
</div>
<div class="gh-main-section-block">
<h4 class="gh-main-section-header small bn">Portal preview</h4>
</div>
</div>
</div>
</form>
</form>
<div class="modal-footer">
</div>
<div class="modal-footer top-shadow">
<button
class="gh-btn"
{{on "click" @close}}
@ -57,4 +118,4 @@
@class="gh-btn gh-btn-green gh-btn-icon gh-btn-add-memberproduct"
data-test-button="save-comp-product" />
</div>
</div>
</section>

36
ghost/admin/app/styles/layouts/products.css
View File

@ -623,6 +623,21 @@
}
/* Offers */
.fullscreen-modal-edit-offer {
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-list-cta {
display: flex;
flex-direction: column;
@ -662,10 +677,6 @@
min-width: 140px;
}
.fullscreen-modal-edit-offer {
max-width: 1020px;
}
.gh-offers-list {
padding: 0;
}
@ -679,4 +690,21 @@
.gh-offers-list-footer a svg path {
stroke-width: 1.5px;
}
.gh-offer-modal-content .form-group:last-of-type {
margin-bottom: 0;
}
.gh-offer-type {
white-space: nowrap;
margin-top: 3px;
}
.gh-offer-type .gh-radio {
margin-bottom: 16px;
}
.gh-offer-type .gh-radio-label {
font-size: 1.3rem;
}

6
ghost/admin/app/styles/patterns/forms.css
View File

@ -66,6 +66,12 @@ input[type=number] {
opacity: 0.5;
}
.form-col2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 24px;
}
/* Form Groups
/* ---------------------------------------------------------- */