From 791c7fa7a574a3394ab4473bfa076817b915844a Mon Sep 17 00:00:00 2001 From: Justin DiRose Date: Tue, 8 Jun 2021 12:52:29 -0500 Subject: [PATCH] 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. --- .../subscriptions-campaign.js.es6 | 12 ++++++++++++ .../subscriptions-campaign-sidebar.js.es6 | 10 ++++++++++ .../above-main-container/subscriptions-campaign.hbs | 4 +--- .../subscriptions-campaign-sidebar.hbs | 4 +--- assets/stylesheets/common/layout.scss | 4 ++++ assets/stylesheets/common/subscribe.scss | 10 +++++----- 6 files changed, 33 insertions(+), 11 deletions(-) create mode 100644 assets/javascripts/discourse/connectors/above-main-container/subscriptions-campaign.js.es6 create mode 100644 assets/javascripts/discourse/connectors/before-topic-list/subscriptions-campaign-sidebar.js.es6 diff --git a/assets/javascripts/discourse/connectors/above-main-container/subscriptions-campaign.js.es6 b/assets/javascripts/discourse/connectors/above-main-container/subscriptions-campaign.js.es6 new file mode 100644 index 0000000..3906052 --- /dev/null +++ b/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) + ); + }, +}; diff --git a/assets/javascripts/discourse/connectors/before-topic-list/subscriptions-campaign-sidebar.js.es6 b/assets/javascripts/discourse/connectors/before-topic-list/subscriptions-campaign-sidebar.js.es6 new file mode 100644 index 0000000..8586827 --- /dev/null +++ b/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; + }, +}; 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 bf210b2..e792a6c 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,3 +1 @@ -{{#unless (eq siteSettings.discourse_subscriptions_campaign_banner_location "Sidebar")}} - {{campaign-banner}} -{{/unless}} \ No newline at end of file +{{campaign-banner}} 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 68316a0..e792a6c 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,3 +1 @@ -{{#if (eq siteSettings.discourse_subscriptions_campaign_banner_location "Sidebar")}} - {{campaign-banner}} -{{/if}} \ No newline at end of file +{{campaign-banner}} diff --git a/assets/stylesheets/common/layout.scss b/assets/stylesheets/common/layout.scss index e9aafa7..4b33c84 100644 --- a/assets/stylesheets/common/layout.scss +++ b/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; } } } diff --git a/assets/stylesheets/common/subscribe.scss b/assets/stylesheets/common/subscribe.scss index 82480a2..55b04f9 100644 --- a/assets/stylesheets/common/subscribe.scss +++ b/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; - div { - margin-bottom: 5px; - } + margin: 0.25em; + padding: 1em; + width: 6em; } }