Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Updated tier modal design

Browse source 
refs https://github.com/TryGhost/Team/issues/1791
This commit is contained in:
Djordje Vlaisavljevic 2022-08-12 18:23:57 +02:00
parent 54baa8d71e
commit ab97216c3f
2 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
ghost/admin/app/components/modal-tier.hbs
View file

@ -54,10 +54,10 @@
</GhFormGroup> </GhFormGroup>
{{#unless this.isFreeTier}} {{#unless this.isFreeTier}}
<div class="gh-settings-members-pricetrialcont">
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices" data-test-formgroup="prices"> <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices" data-test-formgroup="prices">
<div class="gh-settings-members-pricelabelcont"> <div class="gh-settings-members-pricelabelcont">
<label for="monthlyPrice" class="fw6">Prices</label> <label for="monthlyPrice" class="fw6">Prices</label>
<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">
@ -107,7 +107,7 @@
</GhFormGroup> </GhFormGroup>
{{#if (feature 'freeTrial')}} {{#if (feature 'freeTrial')}}
<GhFormGroup @errors={{this.errors}} @property="trialDays" data-test-formgroup="trialDays"> <GhFormGroup @errors={{this.errors}} @property="trialDays" data-test-formgroup="trialDays">
<div class="flex justify-between items-center mb2 mt3"> <div class="flex justify-between items-center mb2">
<div> <div>
<h4 class="gh-tier-setting-title">Add a free trial</h4> <h4 class="gh-tier-setting-title">Add a free trial</h4>
</div> </div>
@ -125,7 +125,7 @@
</div> </div>
</div> </div>
<div class="gh-input-group gh-tier-settings-hide {{if this.freeTrialEnabled "fade-in gh-tier-settings-show"}}"> <div class="gh-input-group {{unless this.freeTrialEnabled "gh-input-group-tier-trial-disabled"}}">
<GhTextInput <GhTextInput
@value={{readonly this.tier.trialDays}} @value={{readonly this.tier.trialDays}}
@type="number" @type="number"
@ -133,14 +133,17 @@
@name="trial" @name="trial"
@id="trial" @id="trial"
@class="gh-input" @class="gh-input"
@disabled={{unless this.freeTrialEnabled "true"}}
data-test-input="tier-trial" /> data-test-input="tier-trial" />
<span class="gh-input-append">days</span> <span class="gh-input-append">days</span>
</div> </div>
<p>After trial, members will be automatically subscribed to the full price</p>
{{#if this.hasTrialDaysError}} {{#if this.hasTrialDaysError}}
<p class="response w-100"><span class="red">Free trial must be at least 1 day</span></p> <p class="response w-100"><span class="red">Free trial must be at least 1 day</span></p>
{{/if}} {{/if}}
</GhFormGroup> </GhFormGroup>
{{/if}} {{/if}}
</div>
<GhFormGroup> <GhFormGroup>
<label for="welcomePage" class="fw6">Welcome page</label> <label for="welcomePage" class="fw6">Welcome page</label>
<GhUrlInput <GhUrlInput

25
ghost/admin/app/styles/layouts/settings.css
View file

@ -2406,9 +2406,17 @@ p.theme-validation-details {
border-radius: 5px; border-radius: 5px;
} }
.gh-settings-members-pricetrialcont {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 32px;
}
.gh-settings-members-pricelabelcont { .gh-settings-members-pricelabelcont {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: space-between;
margin-bottom: 3px;
} }
.gh-settings-members-pricelabelcont span { .gh-settings-members-pricelabelcont span {
@ -2428,10 +2436,10 @@ p.theme-validation-details {
.gh-settings-members-pricelabelcont .gh-select { .gh-settings-members-pricelabelcont .gh-select {
padding: 0; padding: 0;
width: 60px;
height: 16px; height: 16px;
border: none; border: none;
margin-left: -4px; margin-left: 0;
margin-right: 0;
} }
.gh-settings-members-pricelabelcont .gh-select select { .gh-settings-members-pricelabelcont .gh-select select {
@ -2445,8 +2453,8 @@ p.theme-validation-details {
.gh-setting-members-prices { .gh-setting-members-prices {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
grid-gap: 20px; grid-gap: 6px;
} }
.gh-setting-members-currency { .gh-setting-members-currency {
@ -2472,8 +2480,17 @@ p.theme-validation-details {
.gh-setting-members-currencylabel span { .gh-setting-members-currencylabel span {
margin-right: 0; margin-right: 0;
pointer-events: none; pointer-events: none;
padding-right: 3px;
} }
.gh-input-group-tier-trial-disabled .gh-input-append {
border-color: #eceef0;
background-color: #fcfcfc;
}
.gh-input-group-tier-trial-disabled .gh-input-append:before {
background-color: #fcfcfc;
}
/* Stripe Connect modal */ /* Stripe Connect modal */
.fullscreen-modal-stripe-connect { .fullscreen-modal-stripe-connect {