mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-10 23:36:14 -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-block">
|
||||||
<div class="gh-expandable-header">
|
<div class="gh-expandable-header">
|
||||||
<div>
|
<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>
|
<p class="gh-expandable-description">Give your audience a one-time way to support your work</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="for-switch">
|
<div class="for-switch">
|
||||||
|
|
@ -35,44 +35,13 @@
|
||||||
<div class="gh-expandable-content">
|
<div class="gh-expandable-content">
|
||||||
{{#liquid-if true}}
|
{{#liquid-if true}}
|
||||||
<div class="gh-setting-content-extended">
|
<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"}}
|
|
||||||
</div>
|
|
||||||
<OneWaySelect
|
|
||||||
@value="USD"
|
|
||||||
@options="USD"
|
|
||||||
id="currency"
|
|
||||||
name="currency"
|
|
||||||
@optionValuePath="value"
|
|
||||||
@optionLabelPath="label"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</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>
|
<GhFormGroup>
|
||||||
<div class="gh-offer-value percentage">
|
<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
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="tips-and-donations-amount"
|
id="tips-and-donations-amount"
|
||||||
|
|
@ -82,7 +51,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</GhFormGroup>
|
</GhFormGroup>
|
||||||
<div class="gh-offer-type">
|
<div class="gh-tips-and-donations-currency" style="width: 120px;">
|
||||||
<GhFormGroup class="no-margin">
|
<GhFormGroup class="no-margin">
|
||||||
<span class="gh-select">
|
<span class="gh-select">
|
||||||
<OneWaySelect
|
<OneWaySelect
|
||||||
|
|
@ -102,8 +71,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<GhFormGroup>
|
<GhFormGroup class="no-margin">
|
||||||
<label for="tips-and-donations-link" class="fw6 mb1">Your personalized link</label>
|
<label for="tips-and-donations-link" class="fw6 mb1">Your link</label>
|
||||||
<div class="gh-input-group">
|
<div class="gh-input-group">
|
||||||
<GhTextInput
|
<GhTextInput
|
||||||
data-test-input="tips-and-donations-link"
|
data-test-input="tips-and-donations-link"
|
||||||
|
|
@ -117,10 +86,12 @@
|
||||||
data-test-button="tips-and-donations-copy-link"
|
data-test-button="tips-and-donations-copy-link"
|
||||||
@buttonText="Copy link"
|
@buttonText="Copy link"
|
||||||
@task={{this.copyTipsAndDonationsLink}}
|
@task={{this.copyTipsAndDonationsLink}}
|
||||||
@successText="Link copied"
|
@successText="Copied"
|
||||||
@class="gh-btn gh-btn-black gh-btn-icon" />
|
@class="gh-btn gh-btn-black gh-btn-icon" />
|
||||||
</div>
|
</div>
|
||||||
<p>You can add the link to any of your posts or pages</p>
|
</GhFormGroup>
|
||||||
|
</div>
|
||||||
|
<p>Use this link to send your audience to your Stripe checkout page</p>
|
||||||
</GhFormGroup>
|
</GhFormGroup>
|
||||||
</div>
|
</div>
|
||||||
{{/liquid-if}}
|
{{/liquid-if}}
|
||||||
|
|
|
||||||
|
|
@ -3181,6 +3181,28 @@ p.theme-validation-details {
|
||||||
box-shadow: none;
|
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
|
/* History log
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
.gh-history-filter-li {
|
.gh-history-filter-li {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue