Discource-C
/
discourse-subscriptions
mirror of https://github.com/discourse/discourse-subscriptions.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Campaign topic footer (#72) 

* UX: Restyle banner, add topic footer functionality, other updates
This commit is contained in:
Jordan Vidrine 2021-06-10 16:02:54 -05:00 committed by GitHub
parent 227c55e6f5
commit a4f36e4966
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 189 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
assets/javascripts/discourse/components/campaign-banner.js.es6
View File

@ -10,6 +10,9 @@ export default Component.extend({
router: service(),
dismissed: false,
loading: false,
dropShadowColor: setting(
"discourse_subscriptions_campaign_banner_shadow_color"
),
isSidebar: equal(
"siteSettings.discourse_subscriptions_campaign_banner_location",
"Sidebar"
@ -25,10 +28,6 @@ export default Component.extend({
showContributors: setting(
"discourse_subscriptions_campaign_show_contributors"
),
classNameBindings: [
"isSidebar:campaign-banner-sidebar",
"shouldShow:campaign-banner",
],
init() {
this._super(...arguments);
@ -47,7 +46,7 @@ export default Component.extend({
didInsertElement() {
this._super(...arguments);
if (this.isSidebar && this.shouldShow) {
if (this.isSidebar && this.shouldShow && !this.site.mobileView) {
document.body.classList.add("subscription-campaign-sidebar");
} else {
document.body.classList.remove("subscription-campaign-sidebar");
@ -67,6 +66,14 @@ export default Component.extend({
!currentRoute.split(".")[0].includes("admin") &&
currentRoute.split(".")[0] !== "s";
// make sure not to render above main container when inside a topic
if (
this.connectorName === "above-main-container" &&
currentRoute.includes("topic")
) {
return false;
}
return showOnRoute && currentUser && enabled && visible;
},

9
assets/javascripts/discourse/connectors/after-topic-footer-buttons/subscriptions-campaign-topic-footer.js Normal file
View File

@ -0,0 +1,9 @@
export default {
shouldRender(args, component) {
const { siteSettings } = component;
const bannerLocation =
siteSettings.discourse_subscriptions_campaign_banner_location;
return bannerLocation === "Top" || bannerLocation === "Sidebar";
},
};

144
assets/javascripts/discourse/templates/components/campaign-banner.hbs
View File

@ -1,78 +1,80 @@
{{#if shouldShow}}
{{d-button
icon="times"
action="dismissBanner"
class="close"
}}
<div class="campaign-banner-info">
<h2 class="campaign-banner-info-header">{{i18n 'discourse_subscriptions.campaign.title'}}</h2>
<p class="campaign-banner-info-description">{{i18n 'discourse_subscriptions.campaign.body'}}</p>
{{#if product}}
{{#link-to "s.show" product disabled=product.subscribed class="btn btn-primary campaign-banner-info-button"}}
{{d-icon "far-heart"}} {{d-icon "heart" class="hover-heart"}} {{i18n 'discourse_subscriptions.campaign.button'}}
{{/link-to}}
{{else}}
{{#link-to "s" class="btn btn-primary campaign-banner-info-button"}}
{{d-icon "far-heart"}} {{d-icon "heart" class="hover-heart"}} {{i18n 'discourse_subscriptions.campaign.button'}}
{{/link-to}}
{{/if}}
</div>
<div class="campaign-banner-progress">
{{#if isGoalMet}}
<p class="campaign-banner-progress-success">{{i18n 'discourse_subscriptions.campaign.goal'}}!</p>
{{#if subscriberGoal}}
<p class="campaign-banner-progress-description">
{{i18n 'discourse_subscriptions.campaign.goal_comparison' current=subscribers goal=goalTarget}}
{{i18n 'discourse_subscriptions.campaign.subscribers'}}
</p>
{{else}}
<p class="campaign-banner-progress-description">
{{html-safe (i18n 'discourse_subscriptions.campaign.goal_comparison' current=(format-currency currency amountRaised) goal=(format-currency currency goalTarget))}}
{{i18n 'discourse_subscriptions.campaign.raised'}}
</p>
{{#if showContributors}}
{{#conditional-loading-spinner condition=loading size="small"}}
<div class="campaign-banner-progress-users">
<p class="campaign-banner-progress-users-title">
<strong>{{i18n 'discourse_subscriptions.campaign.recent_contributors'}}</strong>
</p>
<div class="campaign-banner-progress-users-avatars">
{{#each contributors as |contributor|}}
{{avatar contributor avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
{{/each}}
<div class="campaign-banner" style="box-shadow: 5px 5px #{{dropShadowColor}}">
{{d-button
icon="times"
action="dismissBanner"
class="close"
}}
<div class="campaign-banner-info">
<h2 class="campaign-banner-info-header">{{i18n 'discourse_subscriptions.campaign.title'}}</h2>
<p class="campaign-banner-info-description">{{i18n 'discourse_subscriptions.campaign.body'}}</p>
{{#if product}}
{{#link-to "s.show" product disabled=product.subscribed class="btn btn-primary campaign-banner-info-button"}}
{{d-icon "far-heart"}} {{d-icon "heart" class="hover-heart"}} {{i18n 'discourse_subscriptions.campaign.button'}}
{{/link-to}}
{{else}}
{{#link-to "s" class="btn btn-primary campaign-banner-info-button"}}
{{d-icon "far-heart"}} {{d-icon "heart" class="hover-heart"}} {{i18n 'discourse_subscriptions.campaign.button'}}
{{/link-to}}
{{/if}}
</div>
<div class="campaign-banner-progress">
{{#if isGoalMet}}
<p class="campaign-banner-progress-success">{{i18n 'discourse_subscriptions.campaign.goal'}}!</p>
{{#if subscriberGoal}}
<p class="campaign-banner-progress-description">
{{i18n 'discourse_subscriptions.campaign.goal_comparison' current=subscribers goal=goalTarget}}
{{i18n 'discourse_subscriptions.campaign.subscribers'}}
</p>
{{else}}
<p class="campaign-banner-progress-description">
{{html-safe (i18n 'discourse_subscriptions.campaign.goal_comparison' current=(format-currency currency amountRaised) goal=(format-currency currency goalTarget))}}
{{i18n 'discourse_subscriptions.campaign.raised'}}
</p>
{{#if showContributors}}
{{#conditional-loading-spinner condition=loading size="small"}}
<div class="campaign-banner-progress-users">
<p class="campaign-banner-progress-users-title">
<strong>{{i18n 'discourse_subscriptions.campaign.recent_contributors'}}</strong>
</p>
<div class="campaign-banner-progress-users-avatars">
{{#each contributors as |contributor|}}
{{avatar contributor avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
{{/each}}
</div>
</div>
</div>
{{/conditional-loading-spinner}}
{{/if}}
{{/if}}
{{else}}
{{#if subscriberGoal}}
<progress class="campaign-banner-progress-bar" value="{{subscribers}}" max="{{siteSettings.discourse_subscriptions_campaign_goal}}"/>
<p class="campaign-banner-progress-description">
{{i18n 'discourse_subscriptions.campaign.goal_comparison' current=subscribers goal=goalTarget}}
{{i18n 'discourse_subscriptions.campaign.subscribers'}}
</p>
{{/conditional-loading-spinner}}
{{/if}}
{{/if}}
{{else}}
<progress class="campaign-banner-progress-bar" value="{{amountRaised}}" max="{{siteSettings.discourse_subscriptions_campaign_goal}}"/>
<p class="campaign-banner-progress-description">
{{html-safe (i18n 'discourse_subscriptions.campaign.goal_comparison' current=(format-currency currency amountRaised) goal=(format-currency currency goalTarget))}}
{{i18n 'discourse_subscriptions.campaign.raised'}}
</p>
{{/if}}
{{#if showContributors}}
{{#conditional-loading-spinner condition=loading size="small"}}
<div class="campaign-banner-progress-users">
<p class="campaign-banner-progress-users-title">
<strong>{{i18n 'discourse_subscriptions.campaign.recent_contributors'}}</strong>
</p>
<div class="campaign-banner-progress-users-avatars">
{{#each contributors as |contributor|}}
{{avatar contributor avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
{{/each}}
{{#if subscriberGoal}}
<progress class="campaign-banner-progress-bar" value="{{subscribers}}" max="{{siteSettings.discourse_subscriptions_campaign_goal}}"/>
<p class="campaign-banner-progress-description">
{{i18n 'discourse_subscriptions.campaign.goal_comparison' current=subscribers goal=goalTarget}}
{{i18n 'discourse_subscriptions.campaign.subscribers'}}
</p>
{{else}}
<progress class="campaign-banner-progress-bar" value="{{amountRaised}}" max="{{siteSettings.discourse_subscriptions_campaign_goal}}"/>
<p class="campaign-banner-progress-description">
{{html-safe (i18n 'discourse_subscriptions.campaign.goal_comparison' current=(format-currency currency amountRaised) goal=(format-currency currency goalTarget))}}
{{i18n 'discourse_subscriptions.campaign.raised'}}
</p>
{{/if}}
{{#if showContributors}}
{{#conditional-loading-spinner condition=loading size="small"}}
<div class="campaign-banner-progress-users">
<p class="campaign-banner-progress-users-title">
<strong>{{i18n 'discourse_subscriptions.campaign.recent_contributors'}}</strong>
</p>
<div class="campaign-banner-progress-users-avatars">
{{#each contributors as |contributor|}}
{{avatar contributor avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
{{/each}}
</div>
</div>
</div>
{{/conditional-loading-spinner}}
{{/conditional-loading-spinner}}
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
{{/if}}

2
assets/javascripts/discourse/templates/connectors/above-main-container/subscriptions-campaign.hbs
View File

@ -1 +1 @@
{{campaign-banner}}
{{campaign-banner connectorName='above-main-container'}}

1
assets/javascripts/discourse/templates/connectors/after-topic-footer-buttons/subscriptions-campaign-topic-footer.hbs Normal file
View File

@ -0,0 +1 @@
{{campaign-banner connectorName='after-topic-footer-buttons'}}

2
assets/javascripts/discourse/templates/connectors/before-topic-list/subscriptions-campaign-sidebar.hbs
View File

@ -1 +1 @@
{{campaign-banner}}
{{campaign-banner connectorName='before-topic-list'}}

105
assets/stylesheets/common/campaign.scss
View File

@ -15,15 +15,21 @@
}
}
// All
.campaign-banner {
box-shadow: 5px 5px
var(--discourse_subscriptions_campaign_banner_shadow_color);
}
// Sidebar Version
.campaign-banner.campaign-banner-sidebar {
.subscriptions-campaign-sidebar .campaign-banner {
width: 100%;
flex-direction: column;
position: relative;
.btn.close {
position: absolute;
top: 0.5em;
right: 0.5em;
top: 1em;
right: 1em;
font-size: 10px;
z-index: 1;
}
@ -35,8 +41,8 @@
padding: 1em 1em 2em 1em;
position: relative;
&-header {
font-size: 16px;
margin: 0.5em 0 !important;
font-size: $font-up-5;
margin: 0 !important;
text-align: center;
}
&-description {
@ -75,11 +81,18 @@
}
}
// Non Sidebar version
// Hide from showing above main container outlet
// on topic list
body.archetype-regular {
.above-main-container-outlet.subscriptions-campaign {
display: none;
}
}
// Above Topic List version
.campaign-banner {
display: flex;
width: calc(100%);
height: max-content;
width: 100%;
margin: 1em 0 2em 0;
border: 1px solid var(--primary-low);
position: relative;
@ -88,8 +101,9 @@
position: absolute;
top: 1em;
right: 1em;
font-size: 12px;
font-size: 10px;
background-color: transparent;
padding: 0;
&:hover {
.d-icon {
color: var(--primary);
@ -97,16 +111,29 @@
}
}
&-info {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 40%;
padding: 1.5em 2em 1.5em;
width: 30%;
padding: 0.5em 2em 0.5em;
background-color: var(--primary-very-low);
@media screen and (min-width: 1000px) {
width: 40%;
display: grid;
grid-template-columns: 65% calc(40% - 2em);
grid-template-areas: "left right" "left right";
align-items: center;
}
@media screen and (max-width: 400px) {
width: 100%;
display: grid;
grid-template-columns: 60% auto;
grid-template-areas: "left right" "left right";
align-items: center;
}
&-header {
font-size: $font-up-4;
font-size: $font-up-6;
margin: 0;
@media screen and (max-width: 750px) {
font-size: $font-up-3;
}
}
&-success {
width: 100%;
@ -114,9 +141,13 @@
}
&-description {
width: 100%;
margin: 1em 0;
margin: 0.25em 0 1em 0;
@media screen and (max-width: 750px) {
font-size: $font-down-1;
}
}
&-button {
grid-area: right;
height: 2.5em;
padding: 0.75em 1.5em 0.75em 2.75em;
position: relative;
@ -137,13 +168,16 @@
}
&-progress {
width: 60%;
padding: 3em 2em 1.5em;
padding: 1.5em 2em 1.5em;
@media screen and (max-width: 400px) {
display: none;
}
&-success {
font-size: $font-up-1;
text-align: center;
background-color: var(--tertiary);
color: var(--secondary);
padding: 0.75em;
padding: 0.25em;
border-radius: 2em;
margin: 0;
}
@ -197,3 +231,36 @@
}
}
}
// Topic Footer Version
html:not(.mobile-view) .subscriptions-campaign-topic-footer .campaign-banner {
margin-top: 2em;
height: min-content;
width: calc(100% + 5em);
.btn.close {
top: 1em;
right: 1em;
}
.campaign-banner-info {
width: 65%;
&-header {
font-size: $font-up-6;
}
&-description {
font-size: $font-down-1;
margin: 0.25em 0.25em 1em 0 !important;
}
}
.campaign-banner-progress {
padding: 1.5em 2.5em 1em;
progress[value] {
height: 2em;
}
.campaign-banner-progress-users {
margin-top: 1em;
}
.campaign-banner-progress-users-title {
margin: 0;
}
}
}

3
config/locales/client.en.yml
View File

@ -10,6 +10,7 @@ en:
discourse_subscriptions_campaign_goal: The numerical goal for your support campaign (subscribers or amount raised).
discourse_subscriptions_campaign_type: Selects the type of campaign to run (subscribers or monthly amount raised).
discourse_subscriptions_campaign_banner_location: Selects the location of the campaign banner (top or sidebar).
discourse_subscriptions_campaign_banner_shadow_color: Selects the color of the campaign banner drop shadow.
discourse_subscriptions_campaign_show_contributors: Show avatars of the most recent purchases of subscription products.
discourse_subscriptions_campaign_product: The Stripe product id to send supporters when they click the button on the campaign. If this setting is blank, supporters will be directed to the main products page.
errors:
@ -30,7 +31,7 @@ en:
user_activity:
payments: Payments
campaign:
title: Support Our Community
title: Support Us
body: We need your help to keep this community up and running!
subscribers: Subscribers
goal_comparison: "<strong>%{current}</strong> of <strong>%{goal}</strong>"

4
config/settings.yml
View File

@ -48,6 +48,10 @@ plugins:
choices:
- Top
- Sidebar
discourse_subscriptions_campaign_banner_shadow_color:
client: true
type: color
default: "2F70AC"
discourse_subscriptions_campaign_show_contributors:
client: true
default: true