Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Updated 'Add product' modal styles

Browse source
This commit is contained in:
Peter Zimon 2021-06-04 14:27:33 +02:00
parent e9486a8e87
commit 49655fa451
5 changed files with 59 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ghost/admin/app/components/gh-membership-products-alpha.hbs
View file

@ -1,3 +1,4 @@
<label>Products</label>
<div class="gh-product-cards"> <div class="gh-product-cards">
{{#each this.products as |product productIdx|}} {{#each this.products as |product productIdx|}}
<div class="gh-product-card"> <div class="gh-product-card">

102
ghost/admin/app/components/modal-product.hbs
View file

@ -29,59 +29,57 @@
@class="gh-input" /> @class="gh-input" />
<GhErrorMessage @errors={{this.errors}} @property="description" /> <GhErrorMessage @errors={{this.errors}} @property="description" />
</GhFormGroup> </GhFormGroup>
<div class=""> <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices">
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices"> <div class="gh-settings-members-pricelabelcont">
<div class="gh-settings-members-pricelabelcont"> <label for="monthlyPrice">Prices</label>
<label for="monthlyPrice">Prices</label> <span>–</span>
<span>–</span> <div>
<div> <span class="gh-setting-members-currency gh-select">
<span class="gh-setting-members-currency gh-select"> <div class="gh-setting-members-currencylabel">
<div class="gh-setting-members-currencylabel"> <span>{{this.currency}}</span>
<span>{{this.currency}}</span> {{svg-jar "arrow-down-small"}}
{{svg-jar "arrow-down-small"}} </div>
</div> <OneWaySelect
<OneWaySelect @value={{this.selectedCurrency}}
@value={{this.selectedCurrency}} id="currency"
id="currency" name="currency"
name="currency" @options={{readonly this.allCurrencies}}
@options={{readonly this.allCurrencies}} @optionValuePath="value"
@optionValuePath="value" @optionLabelPath="label"
@optionLabelPath="label" @update={{action "setCurrency"}}
@update={{action "setCurrency"}} />
/> </span>
</span>
</div>
</div> </div>
<div class="gh-setting-members-prices"> </div>
<div class="gh-setting-members-prices">
<div class="gh-input-group"> <div class="gh-input-group">
<GhTextInput <GhTextInput
@id="monthlyPrice" @id="monthlyPrice"
@value={{readonly this.stripeMonthlyAmount}} @value={{readonly this.stripeMonthlyAmount}}
@type="number" @type="number"
@input={{action (mut this.stripeMonthlyAmount) value="target.value"}} @input={{action (mut this.stripeMonthlyAmount) value="target.value"}}
@focus-out={{action "validateStripePlans"}} @focus-out={{action "validateStripePlans"}}
/> />
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/month</span> <span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/month</span>
</div>
<div class="gh-input-group">
<GhTextInput
@id="yearlyPrice"
@value={{readonly this.stripeYearlyAmount}}
@type="number"
@input={{action (mut this.stripeYearlyAmount) value="target.value"}}
@focus-out={{this.validateStripePlans}}
@placeholder=''
data-test-title-input={{true}}
/>
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/year</span>
</div>
</div> </div>
{{#if this.stripePlanError}} <div class="gh-input-group">
<p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p> <GhTextInput
{{/if}} @id="yearlyPrice"
</GhFormGroup> @value={{readonly this.stripeYearlyAmount}}
</div> @type="number"
@input={{action (mut this.stripeYearlyAmount) value="target.value"}}
@focus-out={{this.validateStripePlans}}
@placeholder=''
data-test-title-input={{true}}
/>
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/year</span>
</div>
</div>
{{#if this.stripePlanError}}
<p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p>
{{/if}}
</GhFormGroup>
</div> </div>
</div> </div>
</div> </div>
@ -97,10 +95,10 @@
> >
<span>Cancel</span> <span>Cancel</span>
</button> </button>
<GhTaskButton @buttonText="Save" <GhTaskButton @buttonText="{{if this.isExistingProduct "Save" "Add product"}}"
@successText={{this.successText}} @successText={{this.successText}}
@task={{this.saveProduct}} @task={{this.saveProduct}}
@idleClass="gh-btn-primary" @idleClass="gh-btn-primary"
@class="gh-btn gh-btn-black gh-btn-icon" @class="gh-btn {{if this.isExistingProduct "gh-btn-black" "gh-btn-green"}} gh-btn-icon"
data-test-button="save-product" /> data-test-button="save-product" />
</div> </div>

2
ghost/admin/app/components/modal-product.js
View file

@ -54,7 +54,7 @@ export default class ModalProductPrice extends ModalBase {
get title() { get title() {
if (this.isExistingProduct) { if (this.isExistingProduct) {
return `Product - ${this.product.name || 'No Name'}`; return `Edit product`;
} }
return 'New Product'; return 'New Product';
} }

6
ghost/admin/app/styles/layouts/products.css
View file

@ -50,7 +50,7 @@
.gh-product-card-name { .gh-product-card-name {
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 500; font-weight: 600;
margin: 0; margin: 0;
} }
@ -308,6 +308,10 @@
margin-bottom: 32px; margin-bottom: 32px;
} }
.gh-product-priceform-block .form-group:last-of-type {
margin-bottom: 0;
}
.gh-product-priceform-pricecurrency { .gh-product-priceform-pricecurrency {
display: grid; display: grid;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;

3
ghost/admin/app/styles/patterns/forms.css
View file

@ -798,7 +798,8 @@ textarea {
} }
.form-rich-radio .gh-radio-label .description h4 { .form-rich-radio .gh-radio-label .description h4 {
font-size: 1.4rem; font-size: 1.5rem;
font-weight: 600;
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 1.4em; line-height: 1.4em;