mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-27 22:49:56 -05:00
Updated Tips & donations settings (#17585)
refs https://github.com/TryGhost/Product/issues/3667 - Updated Tips & Donations settings with improved copy and more compact layout
This commit is contained in:
Djordje Vlaisavljevic
GitHub
parent
262c6be70f
commit
f26203f8cb
2 changed files with 73 additions and 80 deletions
|
|
@ -17,7 +17,7 @@
|
|||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Tips & donations</h4>
|
||||
<h4 class="gh-expandable-title">Enable tips & donations</h4>
|
||||
<p class="gh-expandable-description">Give your audience a one-time way to support your work</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
|
|
@ -35,92 +35,63 @@
|
|||
<div class="gh-expandable-content">
|
||||
{{#liquid-if true}}
|
||||
<div class="gh-setting-content-extended">
|
||||
{{!-- Option 1 --}}
|
||||
{{!-- <GhFormGroup>
|
||||
<div class="gh-settings-members-pricelabelcont free-trial-enabled">
|
||||
<label for="monthlyPrice" class="fw6">Suggest an amount</label>
|
||||
<div>
|
||||
<span class="gh-setting-members-currency gh-select">
|
||||
<div class="gh-setting-members-currencylabel">
|
||||
<span>USD</span>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
<GhFormGroup>
|
||||
<div class="flex items-center">
|
||||
<div class="gh-tips-and-donations-suggested-amount">
|
||||
<label for="tips-and-donations-amount" class="fw6 mb1">Suggested amount</label>
|
||||
<div class="flex flex-row items-start">
|
||||
<GhFormGroup class="no-margin">
|
||||
<div class="percentage">
|
||||
<input
|
||||
type="number"
|
||||
id="tips-and-donations-amount"
|
||||
class="gh-input"
|
||||
name="amount"
|
||||
value="0"
|
||||
/>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<div class="gh-tips-and-donations-currency" style="width: 120px;">
|
||||
<GhFormGroup class="no-margin">
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@value={{this.currency}}
|
||||
@options={{this.allCurrencies}}
|
||||
id="currency"
|
||||
name="currency"
|
||||
@optionValuePath="value"
|
||||
@optionLabelPath="label"
|
||||
>
|
||||
<option value="">USD</option>
|
||||
</OneWaySelect>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<OneWaySelect
|
||||
@value="USD"
|
||||
@options="USD"
|
||||
id="currency"
|
||||
name="currency"
|
||||
@optionValuePath="value"
|
||||
@optionLabelPath="label"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-input-group">
|
||||
<GhTextInput
|
||||
@id="tips-and-donations-default-amount"
|
||||
@value="0"
|
||||
@type="number"
|
||||
data-test-input="tips-and-donations-default-amount"
|
||||
/>
|
||||
<span class="gh-input-append"><span class="ttu">USD</span></span>
|
||||
</div>
|
||||
</GhFormGroup> --}}
|
||||
|
||||
{{!-- Option 2 --}}
|
||||
<div class="gh-offer-discount">
|
||||
<label for="tips-and-donations-amount" class="fw6 mb1">Suggest an amount</label>
|
||||
<div class="flex items-start" style="max-width: 620px;">
|
||||
<GhFormGroup>
|
||||
<div class="gh-offer-value percentage">
|
||||
<input
|
||||
type="number"
|
||||
id="tips-and-donations-amount"
|
||||
class="gh-input"
|
||||
name="amount"
|
||||
value="0"
|
||||
<GhFormGroup class="no-margin">
|
||||
<label for="tips-and-donations-link" class="fw6 mb1">Your link</label>
|
||||
<div class="gh-input-group">
|
||||
<GhTextInput
|
||||
data-test-input="tips-and-donations-link"
|
||||
@id="tips-and-donations-link"
|
||||
@name="tips-and-donations-link"
|
||||
@disabled={{true}}
|
||||
@value="https://publication.com/portal/support"
|
||||
@placeholder="https://publication.com/portal/support"
|
||||
/>
|
||||
<GhTaskButton
|
||||
data-test-button="tips-and-donations-copy-link"
|
||||
@buttonText="Copy link"
|
||||
@task={{this.copyTipsAndDonationsLink}}
|
||||
@successText="Copied"
|
||||
@class="gh-btn gh-btn-black gh-btn-icon" />
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<div class="gh-offer-type">
|
||||
<GhFormGroup class="no-margin">
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@value={{this.currency}}
|
||||
@options={{this.allCurrencies}}
|
||||
id="currency"
|
||||
name="currency"
|
||||
@optionValuePath="value"
|
||||
@optionLabelPath="label"
|
||||
>
|
||||
<option value="">USD</option>
|
||||
</OneWaySelect>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GhFormGroup>
|
||||
<label for="tips-and-donations-link" class="fw6 mb1">Your personalized link</label>
|
||||
<div class="gh-input-group">
|
||||
<GhTextInput
|
||||
data-test-input="tips-and-donations-link"
|
||||
@id="tips-and-donations-link"
|
||||
@name="tips-and-donations-link"
|
||||
@disabled={{true}}
|
||||
@value="https://publication.com/portal/support"
|
||||
@placeholder="https://publication.com/portal/support"
|
||||
/>
|
||||
<GhTaskButton
|
||||
data-test-button="tips-and-donations-copy-link"
|
||||
@buttonText="Copy link"
|
||||
@task={{this.copyTipsAndDonationsLink}}
|
||||
@successText="Link copied"
|
||||
@class="gh-btn gh-btn-black gh-btn-icon" />
|
||||
</div>
|
||||
<p>You can add the link to any of your posts or pages</p>
|
||||
<p>Use this link to send your audience to your Stripe checkout page</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
|
|
|
|||
|
|
@ -3181,6 +3181,28 @@ p.theme-validation-details {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Tips & donations
|
||||
/* ---------------------------------------------------------- */
|
||||
.gh-tips-and-donations-suggested-amount {
|
||||
max-width: 200px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.gh-tips-and-donations-suggested-amount .gh-input {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.gh-tips-and-donations-currency {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.gh-tips-and-donations-currency select {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
/* History log
|
||||
/* ---------------------------------------------------------- */
|
||||
.gh-history-filter-li {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue