UX: Improve mobile campaign flow (#69)

1. Improve mobile checkout styling

These are pretty simple changes. The buttons were crammed together and not wrapping properly on mobile if there were more than a few. Also the padding was weird and causing text to overflow out of the #main-outlet on phone viewports.
2. Renders the top campaign banner on mobile even if sidebar is selected

In the original PR, we refactored using the connector JS out since we now have more Ember operators; however, we needed some more complex logic that couldn't be done in the template. Basically, we choose which outlet to render the component in based on two criteria:

    If the setting is set to sidebar or top
    If we're on a mobile device

Previously, if the site showed the banner on the sidebar and the user browsed to mobile, they wouldn't see a banner at all. This PR changes the logic to use the top outlet on mobile, even if the sidebar is selected.

assets/javascripts/discourse/connectors/above-main-container/subscriptions-campaign.js.es6

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

assets/javascripts/discourse/connectors/before-topic-list/subscriptions-campaign-sidebar.js.es6

@@ -0,0 +1,10 @@
+export default {
+  shouldRender(args, component) {
+    const { siteSettings } = component;
+    const mobileView = component.site.mobileView;
+    const bannerLocation =
+      siteSettings.discourse_subscriptions_campaign_banner_location;
+
+    return bannerLocation === "Sidebar" && !mobileView;
+  },
+};

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

@@ -1,3 +1 @@
-{{#unless (eq siteSettings.discourse_subscriptions_campaign_banner_location "Sidebar")}}
+{{campaign-banner}}
-  {{campaign-banner}}
-{{/unless}}

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

@@ -1,3 +1 @@
-{{#if (eq siteSettings.discourse_subscriptions_campaign_banner_location "Sidebar")}}
+{{campaign-banner}}
-  {{campaign-banner}}
-{{/if}}

assets/stylesheets/common/layout.scss

@@ -7,6 +7,8 @@
 
   @include breakpoint(medium) {
     flex-direction: column;
+    margin: 0;
+    padding: 0.5em;
   }
 
   .section-column {
@@ -26,10 +28,12 @@
 
       &:last-child {
         order: 2;
+        margin-left: 0;
       }
 
       &:first-child {
         order: 1;
+        margin-right: 0;
       }
     }
   }

assets/stylesheets/common/subscribe.scss

@@ -1,13 +1,13 @@
 .subscribe-buttons {
   display: flex;
-  justify-content: space-around;
+  flex-flow: row wrap;
+  justify-content: left;
 
   .btn-discourse-subscriptions-subscribe {
     flex-direction: column;
-    padding: 10px 20px;
+    margin: 0.25em;
-    div {
+    padding: 1em;
-      margin-bottom: 5px;
+    width: 6em;
-    }
   }
 }