remove donate slideup banner (#3696)
* remove donate slideup banner * further cleanup
This commit is contained in:
Pomax
GitHub
Родитель
5016fcae2a
Коммит
1b2afd93ed
|
|
@ -13,7 +13,6 @@
|
|||
</head>
|
||||
|
||||
<body id="view-404">
|
||||
<div class="donate-modal-wrapper"></div>
|
||||
<div class="takeover"></div>
|
||||
<div class="wrapper">
|
||||
<div id="member-notice">
|
||||
|
|
|
|||
|
|
@ -45,9 +45,6 @@
|
|||
<body class="pni" id="pni-{% block body_id %}{% endblock %}">
|
||||
<script src="/_js/bg-main.compiled.js" async defer></script>
|
||||
|
||||
<!-- these will be populated by bg-main.js if needed -->
|
||||
<div class="donate-modal-wrapper"></div>
|
||||
|
||||
{% include "./primary_nav.html" %}
|
||||
<div class="underneath-screen-overlay">
|
||||
<div class="category-nav">
|
||||
|
|
|
|||
|
|
@ -15,11 +15,6 @@
|
|||
|
||||
{% block body_id %}mozfest-{% block mozfest_body_id %}home{% endblock %}{% endblock %}
|
||||
|
||||
{% block donate %}
|
||||
<!-- nothing right now -->
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block primary_nav %}
|
||||
{% include "partials/primary_mozfest_nav.html" with background="simple-background" %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -42,11 +42,6 @@
|
|||
{% wagtailuserbar 'bottom-left' %}
|
||||
{% endif %}
|
||||
|
||||
{% block donate %}
|
||||
<div class="donate-modal-wrapper">
|
||||
<!-- this will be populated by main.js if needed -->
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block page_top_content %}{% endblock %}
|
||||
|
||||
<div class="wrapper">
|
||||
|
|
|
|||
|
|
@ -7,8 +7,6 @@
|
|||
pages, we blank out the donation block.
|
||||
{% endcomment %}
|
||||
|
||||
{% block donate %}{% endblock %}
|
||||
|
||||
{% block subcontent %}
|
||||
<div class="
|
||||
{% block content_wrapper_class %}py-4 py-md-5{% endblock %}
|
||||
|
|
|
|||
|
|
@ -200,40 +200,6 @@ let main = {
|
|||
});
|
||||
}
|
||||
|
||||
/*
|
||||
The following code has been disabled for
|
||||
https://github.com/mozilla/foundation.mozilla.org/issues/2630,
|
||||
but we want to keep this code around for when we need to
|
||||
re-enable this functionality
|
||||
|
||||
import injectDonateModal from '../donate-modal/donate-modal.jsx';
|
||||
...
|
||||
let donationModal = document.querySelector(`.donate-modal-wrapper`);
|
||||
|
||||
if (donationModal) {
|
||||
let modalOptions = {
|
||||
title: `We made this guide with support from people like you`,
|
||||
subheading: `Our supporters told us they are uncertain about how to be safer online. We listened. This guide is a result.`,
|
||||
cta: {
|
||||
title: `Help us keep this work going`,
|
||||
text: `Support Mozilla`
|
||||
},
|
||||
utm: {
|
||||
medium: `buyersguide`,
|
||||
campaign: `buyersguide2018`,
|
||||
content: `popupbutton`
|
||||
},
|
||||
ga: {
|
||||
category: `buyersguide`,
|
||||
action: `donate tap`,
|
||||
label: `donate popup on ${window.location.pathname.replace(/\w\w(-\W\W)?\/privacynotincluded\//,``)}`
|
||||
}
|
||||
};
|
||||
|
||||
injectDonateModal(donationModal, modalOptions);
|
||||
}
|
||||
*/
|
||||
|
||||
if (document.querySelectorAll(`.join-us`)) {
|
||||
var elements = Array.from(document.querySelectorAll(`.join-us`));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,108 +0,0 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import ReactGA from "../react-ga-proxy.js";
|
||||
|
||||
const DISMISSED_CHECK_KEY = "fundraising-banner";
|
||||
const MILLISECONDS = 1000;
|
||||
const DAY = 24 * 3600 * MILLISECONDS;
|
||||
const localStorage = typeof window === "undefined" ? {} : window.localStorage;
|
||||
|
||||
class DonateModal extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const INITIAL_DELAY_IN_MILLISECONDS =
|
||||
parseInt(this.props.delay) || 10 * MILLISECONDS; // 10 seconds, in ms
|
||||
const DISMISSAL_DELAY_IN_DAYS = parseInt(this.props.hideFor) || 7; // one week, in days
|
||||
|
||||
// Don't treat the modal as dismissed if:
|
||||
// 1. the user never dismissed it before, or
|
||||
// 2. it's been longer than a week since they dismissed
|
||||
let dismissed = false;
|
||||
let lastLoad = localStorage[DISMISSED_CHECK_KEY];
|
||||
if (lastLoad) {
|
||||
var diff = (Date.now() - parseInt(lastLoad, 10)) / DAY;
|
||||
if (diff < DISMISSAL_DELAY_IN_DAYS) {
|
||||
dismissed = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.state = {
|
||||
delay: INITIAL_DELAY_IN_MILLISECONDS,
|
||||
visible: false,
|
||||
dismissed
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (!this.state.dismissed) {
|
||||
// show modal after delay. If delay is a negative value, show modal immediately
|
||||
this.runTimer = setTimeout(
|
||||
() => this.setState({ visible: true }),
|
||||
this.state.delay
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
handleBtnClick() {
|
||||
if (this.props.ga) {
|
||||
ReactGA.event(this.props.ga);
|
||||
}
|
||||
|
||||
this.dismiss();
|
||||
}
|
||||
|
||||
dismiss() {
|
||||
clearInterval(this.runTimer);
|
||||
localStorage[DISMISSED_CHECK_KEY] = Date.now();
|
||||
this.setState({ dismissed: true });
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.dismissed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let title = this.props.title,
|
||||
subheading = this.props.subheading,
|
||||
cta = this.props.cta,
|
||||
utm = this.props.utm;
|
||||
|
||||
return (
|
||||
<div className={`donate-modal ${this.state.visible ? `show` : ``}`}>
|
||||
<button className="close" onClick={() => this.dismiss()}>
|
||||
<span class="sr-only">Close donate modal</span>
|
||||
</button>
|
||||
<div className="container">
|
||||
<div className="row align-items-center text-center text-md-left">
|
||||
<div className="col-md-6">
|
||||
<h1 className="h2-heading">{title}</h1>
|
||||
<p>{subheading} </p>
|
||||
</div>
|
||||
<div className="col-md-4 offset-md-2">
|
||||
<h2 className="h5-heading">{cta.title}</h2>
|
||||
<div>
|
||||
<a
|
||||
className="d-block d-md-inline-block text-center btn btn-donate ml-0"
|
||||
onClick={evt => this.handleBtnClick(evt)}
|
||||
href={`https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=${
|
||||
utm.medium
|
||||
}&utm_campaign=${utm.campaign}&utm_content=${utm.content}`}
|
||||
target="_blank"
|
||||
>
|
||||
{cta.text}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Export a manual injection function.
|
||||
|
||||
export default function injectDonateModal(element, props = {}) {
|
||||
ReactDOM.render(<DonateModal {...props} />, element);
|
||||
}
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
@import "../../../node_modules/bootstrap/scss/_variables";
|
||||
|
||||
.donate-modal {
|
||||
position: fixed;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
transition: height 0.8s cubic-bezier(0, 1, 0.5, 1);
|
||||
background-color: $gray-80;
|
||||
|
||||
@media (min-width: $bp-md) {
|
||||
background-image: url(/_images/buyers-guide/earth.jpg);
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&.show {
|
||||
height: 24em;
|
||||
max-height: 100vh; //Small devices in landscape mode sholdn't add so much extra space due to hardcoded height that they push the close button off the screen
|
||||
|
||||
@media (min-width: $bp-sm) {
|
||||
height: 23em;
|
||||
}
|
||||
|
||||
@media (min-width: $bp-lg) {
|
||||
height: 19em;
|
||||
}
|
||||
|
||||
@media (min-width: $bp-xl) {
|
||||
height: 17em;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
$width: 15px;
|
||||
$height: $width;
|
||||
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: $width;
|
||||
height: $height;
|
||||
outline: 0;
|
||||
z-index: $zindex-modal;
|
||||
|
||||
@media (min-width: $bp-md) {
|
||||
top: 20px;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: " ";
|
||||
height: $height;
|
||||
width: 2px;
|
||||
background-color: $white;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
@media (min-width: $bp-md) {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-donate {
|
||||
@include scaleText(16px, 20px);
|
||||
|
||||
background: $red;
|
||||
color: $white;
|
||||
padding: 15px 18px;
|
||||
border-radius: calc((20px + 18px * 2) / 2); // half of button's height
|
||||
|
||||
@include hover-focus-active {
|
||||
background: $dark-red;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
.h2-heading,
|
||||
.h5-heading {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.h2-heading {
|
||||
@include scaleText(28px, 32px, 34px, 42px);
|
||||
}
|
||||
|
||||
.h5-heading {
|
||||
font-weight: 400;
|
||||
|
||||
@include scaleText(22px, 28px);
|
||||
|
||||
@media (max-width: $bp-sm) {
|
||||
font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
|
||||
|
||||
@include scaleText(16px, 24px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -13,8 +13,6 @@ import News from "./components/news/news.jsx";
|
|||
import PulseProjectList from "./components/pulse-project-list/pulse-project-list.jsx";
|
||||
import ShareButtonGroup from "./components/share-button-group/share-button-group.jsx";
|
||||
|
||||
import injectDonateModal from "./donate-modal/donate-modal.jsx";
|
||||
|
||||
import primaryNav from "./primary-nav.js";
|
||||
import navNewsletter from "./nav-newsletter.js";
|
||||
import bindMozFestGA from "./mozfest-ga.js";
|
||||
|
|
@ -491,36 +489,6 @@ let main = {
|
|||
bindProfileCardAnalytics(profileCards);
|
||||
});
|
||||
|
||||
// Load up a fundraising banner
|
||||
let donationModal = document.querySelector(`.donate-modal-wrapper`);
|
||||
|
||||
if (donationModal) {
|
||||
let modalOptions = {
|
||||
title: `Big corporations try to restrict how we access the web.`,
|
||||
subheading: `Misinformation makes it harder for us to find the truth. Web-connected devices go to market without basic security standards.`,
|
||||
cta: {
|
||||
title: [
|
||||
`The non-profit Mozilla Foundation fights for a healthier internet.`,
|
||||
` `,
|
||||
<strong>Will you donate today?</strong>
|
||||
],
|
||||
text: `Support Mozilla`
|
||||
},
|
||||
utm: {
|
||||
medium: `foundation`,
|
||||
campaign: `mainsite`,
|
||||
content: `popupbutton`
|
||||
},
|
||||
ga: {
|
||||
category: `site`,
|
||||
action: `donate tap`,
|
||||
label: `donate popup on foundation site`
|
||||
}
|
||||
};
|
||||
|
||||
injectDonateModal(donationModal, modalOptions);
|
||||
}
|
||||
|
||||
// Enable the "load more results" button on index pages
|
||||
let loadMoreButton = document.querySelector(`.load-more-index-entries`);
|
||||
if (loadMoreButton) {
|
||||
|
|
|
|||
|
|
@ -40,10 +40,6 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px
|
|||
@import "../../js/buyers-guide/components/social-share/social-share";
|
||||
@import "../../js/components/join/join";
|
||||
|
||||
// Special react component
|
||||
|
||||
@import "../../js/donate-modal/donate-modal";
|
||||
|
||||
// Non-React Components
|
||||
|
||||
@import "./components/future-non-react-component";
|
||||
|
|
|
|||
|
|
@ -29,10 +29,6 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px
|
|||
@import "../js/components/petition/petition";
|
||||
@import "../js/components/share-button-group/share-button-group";
|
||||
|
||||
// Special react component
|
||||
|
||||
@import "../js/donate-modal/donate-modal";
|
||||
|
||||
// Non-React Components
|
||||
|
||||
@import "./components/hr-emphasis";
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче