- {{#each contributors as |contributor|}}
- {{avatar contributor avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
- {{/each}}
+
+ {{d-button
+ icon="times"
+ action="dismissBanner"
+ class="close"
+ }}
+
+
+
{{i18n 'discourse_subscriptions.campaign.body'}}
+ {{#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}}
+
+
+ {{#if isGoalMet}}
+
{{i18n 'discourse_subscriptions.campaign.goal'}}!
+ {{#if subscriberGoal}}
+
+ {{i18n 'discourse_subscriptions.campaign.goal_comparison' current=subscribers goal=goalTarget}}
+ {{i18n 'discourse_subscriptions.campaign.subscribers'}}
+
+ {{else}}
+
+ {{html-safe (i18n 'discourse_subscriptions.campaign.goal_comparison' current=(format-currency currency amountRaised) goal=(format-currency currency goalTarget))}}
+ {{i18n 'discourse_subscriptions.campaign.raised'}}
+
+ {{#if showContributors}}
+ {{#conditional-loading-spinner condition=loading size="small"}}
+
+
+ {{i18n 'discourse_subscriptions.campaign.recent_contributors'}}
+
+
+ {{#each contributors as |contributor|}}
+ {{avatar contributor avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
+ {{/each}}
+
-
- {{/conditional-loading-spinner}}
- {{/if}}
- {{/if}}
- {{else}}
- {{#if subscriberGoal}}
-
-
- {{i18n 'discourse_subscriptions.campaign.goal_comparison' current=subscribers goal=goalTarget}}
- {{i18n 'discourse_subscriptions.campaign.subscribers'}}
-
+ {{/conditional-loading-spinner}}
+ {{/if}}
+ {{/if}}
{{else}}
-
-
- {{html-safe (i18n 'discourse_subscriptions.campaign.goal_comparison' current=(format-currency currency amountRaised) goal=(format-currency currency goalTarget))}}
- {{i18n 'discourse_subscriptions.campaign.raised'}}
-
- {{/if}}
- {{#if showContributors}}
- {{#conditional-loading-spinner condition=loading size="small"}}
-
-
- {{i18n 'discourse_subscriptions.campaign.recent_contributors'}}
-
-
- {{#each contributors as |contributor|}}
- {{avatar contributor avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
- {{/each}}
+ {{#if subscriberGoal}}
+
+
+ {{i18n 'discourse_subscriptions.campaign.goal_comparison' current=subscribers goal=goalTarget}}
+ {{i18n 'discourse_subscriptions.campaign.subscribers'}}
+
+ {{else}}
+
+
+ {{html-safe (i18n 'discourse_subscriptions.campaign.goal_comparison' current=(format-currency currency amountRaised) goal=(format-currency currency goalTarget))}}
+ {{i18n 'discourse_subscriptions.campaign.raised'}}
+
+ {{/if}}
+ {{#if showContributors}}
+ {{#conditional-loading-spinner condition=loading size="small"}}
+
+
+ {{i18n 'discourse_subscriptions.campaign.recent_contributors'}}
+
+
+ {{#each contributors as |contributor|}}
+ {{avatar contributor avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
+ {{/each}}
+
-
- {{/conditional-loading-spinner}}
+ {{/conditional-loading-spinner}}
+ {{/if}}
{{/if}}
- {{/if}}
+
{{/if}}
diff --git a/assets/javascripts/discourse/templates/connectors/above-main-container/subscriptions-campaign.hbs b/assets/javascripts/discourse/templates/connectors/above-main-container/subscriptions-campaign.hbs
index e792a6c..488aa1a 100644
--- a/assets/javascripts/discourse/templates/connectors/above-main-container/subscriptions-campaign.hbs
+++ b/assets/javascripts/discourse/templates/connectors/above-main-container/subscriptions-campaign.hbs
@@ -1 +1 @@
-{{campaign-banner}}
+{{campaign-banner connectorName='above-main-container'}}
diff --git a/assets/javascripts/discourse/templates/connectors/after-topic-footer-buttons/subscriptions-campaign-topic-footer.hbs b/assets/javascripts/discourse/templates/connectors/after-topic-footer-buttons/subscriptions-campaign-topic-footer.hbs
new file mode 100644
index 0000000..6ec542f
--- /dev/null
+++ b/assets/javascripts/discourse/templates/connectors/after-topic-footer-buttons/subscriptions-campaign-topic-footer.hbs
@@ -0,0 +1 @@
+{{campaign-banner connectorName='after-topic-footer-buttons'}}
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/connectors/before-topic-list/subscriptions-campaign-sidebar.hbs b/assets/javascripts/discourse/templates/connectors/before-topic-list/subscriptions-campaign-sidebar.hbs
index e792a6c..0366ea5 100644
--- a/assets/javascripts/discourse/templates/connectors/before-topic-list/subscriptions-campaign-sidebar.hbs
+++ b/assets/javascripts/discourse/templates/connectors/before-topic-list/subscriptions-campaign-sidebar.hbs
@@ -1 +1 @@
-{{campaign-banner}}
+{{campaign-banner connectorName='before-topic-list'}}
diff --git a/assets/stylesheets/common/campaign.scss b/assets/stylesheets/common/campaign.scss
index 5bd2b83..59877ae 100644
--- a/assets/stylesheets/common/campaign.scss
+++ b/assets/stylesheets/common/campaign.scss
@@ -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;
+ }
+ }
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 9e778b2..0b23a45 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -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: "
%{current} of
%{goal}"
diff --git a/config/settings.yml b/config/settings.yml
index 94ef8af..c3f5dd8 100644
--- a/config/settings.yml
+++ b/config/settings.yml
@@ -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