Updated tier modal design

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

View File

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

View File

@ -2406,9 +2406,17 @@ p.theme-validation-details {
border-radius: 5px;
}
.gh-settings-members-pricetrialcont {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 32px;
}
.gh-settings-members-pricelabelcont {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 3px;
}
.gh-settings-members-pricelabelcont span {
@ -2428,10 +2436,10 @@ p.theme-validation-details {
.gh-settings-members-pricelabelcont .gh-select {
padding: 0;
width: 60px;
height: 16px;
border: none;
margin-left: -4px;
margin-left: 0;
margin-right: 0;
}
.gh-settings-members-pricelabelcont .gh-select select {
@ -2445,8 +2453,8 @@ p.theme-validation-details {
.gh-setting-members-prices {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
grid-template-rows: 1fr 1fr;
grid-gap: 6px;
}
.gh-setting-members-currency {
@ -2472,8 +2480,17 @@ p.theme-validation-details {
.gh-setting-members-currencylabel span {
margin-right: 0;
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 */
.fullscreen-modal-stripe-connect {