Added static Offer form inputs

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

View File

@ -1,13 +1,14 @@
<div class="modal-content">
<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 span-2">
<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 gh-product-priceform-block">
<div class="gh-main-section-content grey">
<GhFormGroup @errors={{this.errors}} @property="name">
<label for="name" class="fw6">Name</label>
<GhTextInput
@ -21,9 +22,9 @@
</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>
<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=""
@ -31,16 +32,76 @@
@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-main-section-block">
<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>
</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>

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;
}
@ -680,3 +691,20 @@
.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;
}

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
/* ---------------------------------------------------------- */