Merge branch 'master' into dependabot/pip/whitenoise-4.0

network-api/networkapi/templates/pages/base.html

@@ -41,7 +41,7 @@
             <li class="col-auto"><a class="footer-link-email" href="mailto:network@mozillafoundation.org">Email</a></li>
             <li class="col-auto"><a class="footer-link-twitter" href="https://twitter.com/mozilla">Twitter</a></li>
             <li class="col-auto"><a class="footer-link-cc-license" href="https://creativecommons.org/licenses/by/4.0">License</a></li>
-            <li class="col-auto"><a class="footer-link-code-of-conduct" href="https://www.mozilla.org/about/governance/policies/participation/">Participation Guidelines</a></li>
+            <li class="col-auto"><a class="footer-link-participation-guidelines" href="https://www.mozilla.org/about/governance/policies/participation/">Participation Guidelines</a></li>
             <li class="col-auto"><a class="footer-link-legal" href="https://mozilla.org/en-US/about/legal/">Legal</a></li>
             <li class="col-auto"><a class="footer-link-privacy" href="https://mozilla.org/en-US/privacy/websites/">Privacy</a></li>
             <li class="col-auto"><a class="footer-link-donate" id="donate-footer-btn" href="https://donate.mozilla.org?utm_source=foundation.mozilla.org&amp;utm_medium=referral&amp;utm_content=footer" target="_blank" rel="noopener noreferrer">Donate</a></li>

network-api/networkapi/wagtailpages/templates/wagtailpages/static/participate_page2.html

@@ -6,12 +6,13 @@
 {% block content %}
 
 {% image page.ctaHero format-jpeg as big_hero %}
-<div class="bottom-line mb-4" style="background-image: url({{ big_hero.url }}); background-repeat:no-repeat; background-position: top center; background-size: cover;">
+<div id="participate-hero" class="bottom-line mb-4" style="background-image: url({{ big_hero.url }});">
+  <img class="w-100 d-sm-none" src="{{ big_hero.url }}"/>
   <div class="container">
     <div class="row py-5">
       <div class="col-12 col-md-10 col-xl-5 mb-2">
         <h1 class="h1-heading">{{ page.ctaHeroHeader }}</h1>
-        <p class="body-large">{{ page.ctaHeroSubhead | richtext }}</p>
+        <div class="body-large">{{ page.ctaHeroSubhead | richtext }}</div>
         <p class="commitment">{{ page.ctaCommitment }}</p>
         <a class="btn btn-normal" href={{ page.ctaButtonURL }}>{{ page.ctaButtonTitle }}</a>
       </div>
@@ -21,7 +22,7 @@ <h1 class="h1-heading">{{ page.ctaHeroHeader }}</h1>
 
 <div class="container">
   <div class="row">
-    <div class="col-12 col-md-8 mb-1">
+    <div class="col-12 col-lg-8 mb-1">
       <h2 class="h3-heading">{{ page.h2 }}</h2>
       <p class="body-large">{{ page.h2Subheader }}</p>
     </div>
@@ -53,7 +54,13 @@ <h2 class="h3-heading">{{ page.h2 }}</h2>
 
   <div class="my-5">
     {% for cta in page.cta4.all %}
+      <div class="d-block d-sm-none">
+      {% image cta.hero width-320 as temp %}
+      {% card temp.url cta.header cta.subhead cta.buttonURL cta.buttonTitle cta.commitment %}
+      </div>
+      <div class="d-none d-sm-block">
       {% cardLarge cta.hero cta.header cta.subhead cta.buttonURL cta.buttonTitle cta.commitment %}
+      </div>
     {% endfor %}
   </div>
 </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/tags/card-cta.html

@@ -1,9 +1,9 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
-<div class="row card-cta" style="background: #F5F5F5;">
-  <div class="col-12 col-md-6 p-5">
+<div class="row flex-column-reverse flex-md-row card-cta" style="background: #F5F5F5;">
+  <div class="col-12 col-md-6 px-5 pt-4 pb-5 p-sm-5">
     <h3 class="">{{ title }}</h3>
-    <p>{{ description | richtext }}</p>
+    <div class="body-large">{{ description | richtext }}</div>
 
     {% if commitment %}
     <div class="commitment mb-3">{{ commitment }}</div>

network-api/networkapi/wagtailpages/templates/wagtailpages/tags/card-large.html

@@ -1,13 +1,16 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
-<div class="row card-cta-large my-3">
-  <div class="col-12 col-md-6 mb-3">
+<div class="row card-cta-large my-3 align-items-center my-4">
+  <div class="col-12 col-md-6 mb-3 mb-md-0">
     {% image image fill-1080x600-c100 format-jpeg as hero %}
-    <img src="{{ hero.url }}" class="w-100"/>
+    <img class="full-bleed-xs d-block d-md-none d-lg-block" src="{{ hero.url }}" class="w-100"/>
+
+    {% image image fill-600x600-c100 format-jpeg as hero2 %}
+    <img class="d-none d-md-block d-lg-none" src="{{ hero2.url }}" class="w-100"/>
   </div>
   <div class="col-12 col-md-6">
     <h3 class="h3-heading">{{ title }}</h3>
-    <p class="body-large">{{ description | richtext }}</p>
+    <div class="body-large">{{ description | richtext }}</div>
     <p class="commitment">{{ commitment }}</p>
     <a href="{{ link_url }}" class="btn btn-ghost">{{ link_label }}</a>
   </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/tags/card.html

@@ -1,4 +1,6 @@
-<div class="pb-5 card-regular">
+{% load wagtailcore_tags wagtailimages_tags %}
+
+<div class="card-regular">
 
   {% if commitment %}
   <div class="commitment">{{ commitment }}</div>
@@ -9,7 +11,7 @@
   <div class="full-bleed-xs">
     <div class="key-item mx-2 mx-md-3 p-3">
       <h5 class="h4-heading mb-2">{{ title }}</h5>
-      <p>{{ description }}</p>
+      <p>{{ description | richtext }}</p>
       <a class="cta-link mb-2" href="{{ link_url }}">{{ link_label }}</a>
     </div>
   </div>

package.json

@@ -40,7 +40,7 @@
     "ajv-cli": "^2.1.0",
     "autoprefixer": "^7.2.6",
     "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
+    "babel-loader": "^7.1.5",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "browserslist": "^2.11.3",
@@ -52,19 +52,19 @@
     "html-entities": "^1.2.1",
     "imagemin-guetzli": "^1.0.0",
     "js-cookie": "2.2.0",
-    "mofo-bootstrap": "4.0.1",
+    "mofo-bootstrap": "4.1.0",
     "mofo-style": "^2.4.0",
     "moment": "^2.22.1",
     "node-sass": "^4.9.0",
     "npm-run-all": "^4.1.2",
     "optipng-bin": "^4.0.0",
     "postcss": "^6.0.22",
     "postcss-cli": "^4.1.1",
-    "prop-types": "^15.6.1",
+    "prop-types": "^15.6.2",
     "react": "16.0.0",
-    "react-dom": "16.0.0",
-    "react-ga": "2.4.1",
-    "shelljs": "^0.7.8",
+    "react-dom": "16.4.2",
+    "react-ga": "2.5.3",
+    "shelljs": "^0.8.2",
     "shx": "^0.2.2",
     "snyk": "^1.78.1",
     "stylelint": "^8.4.0",