Campaign topic footer (#72)

Campaign topic footer (#72)

  • UX: Restyle banner, add topic footer functionality, other updates
diff --git a/assets/javascripts/discourse/components/campaign-banner.js.es6 b/assets/javascripts/discourse/components/campaign-banner.js.es6
index 00e753c..c4134bd 100644
--- a/assets/javascripts/discourse/components/campaign-banner.js.es6
+++ b/assets/javascripts/discourse/components/campaign-banner.js.es6
@@ -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;
   },
 
diff --git a/assets/javascripts/discourse/connectors/after-topic-footer-buttons/subscriptions-campaign-topic-footer.js b/assets/javascripts/discourse/connectors/after-topic-footer-buttons/subscriptions-campaign-topic-footer.js
new file mode 100644
index 0000000..d1bb3a4
--- /dev/null
+++ b/assets/javascripts/discourse/connectors/after-topic-footer-buttons/subscriptions-campaign-topic-footer.js
@@ -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";
+  },
+};
diff --git a/assets/javascripts/discourse/templates/components/campaign-banner.hbs b/assets/javascripts/discourse/templates/components/campaign-banner.hbs
index 02fdab1..080bed8 100644
--- a/assets/javascripts/discourse/templates/components/campaign-banner.hbs
+++ b/assets/javascripts/discourse/templates/components/campaign-banner.hbs
@@ -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">

[... diff too long, it was truncated ...]

GitHub sha: a4f36e49669ed0cbb75c3744d120057e9385649d

This commit appears in #72 which was approved by justindirose. It was merged by jordanvidrine.