Campaign topic footer (#72)
* UX: Restyle banner, add topic footer functionality, other updates
This commit is contained in:
Jordan Vidrine
GitHub
parent
227c55e6f5
commit
a4f36e4966
|
|
@ -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;
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
},
|
||||
};
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
{{#if shouldShow}}
|
||||
<div class="campaign-banner" style="box-shadow: 5px 5px #{{dropShadowColor}}">
|
||||
{{d-button
|
||||
icon="times"
|
||||
action="dismissBanner"
|
||||
|
|
@ -75,4 +76,5 @@
|
|||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{{campaign-banner}}
|
||||
{{campaign-banner connectorName='above-main-container'}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
{{campaign-banner connectorName='after-topic-footer-buttons'}}
|
||||
|
|
@ -1 +1 @@
|
|||
{{campaign-banner}}
|
||||
{{campaign-banner connectorName='before-topic-list'}}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue