Merge 0e79a48 into 5f5130c

MozillaFoundation · Sep 6, 2018 · 9a03682 · 9a03682
2 parents 5f5130c + 0e79a48
commit 9a03682
Show file tree

Hide file tree

Showing 13 changed files with 280 additions and 36 deletions.
diff --git a/network-api/networkapi/buyersguide/templates/bg_base.html b/network-api/networkapi/buyersguide/templates/bg_base.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/_css/buyers-guide.compiled.css">
+    <link rel="stylesheet" href="//code.cdn.mozilla.net/fonts/fira.css">
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i">
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Zilla+Slab:300,400,600,700,300i">
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700">
+    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/_images/favicons/apple-touch-icon-180x180@2x.png">
+    <link rel="icon" type="image/png" sizes="196x196" href="/_images/favicons/favicon-196x196@2x.png">
+    <link rel="shortcut icon" href="/_images/favicons/favicon.ico">
+    <title>Privacy Not Included</title>
+  </head>
+  <body id="pni-{% block body-id %}{% endblock %}">
+    <header class="container">
+      <div class="d-flex align-items-center justify-content-between">
+        <div class="d-flex align-items-center py-3">
+          <a href="/" class="moz-logo mb-0 mr-3"><span class="sr-only">Mozilla</span></a>
+          <p class="mb-0 h4-heading">*privacy not&nbsp;included</p>
+        </div>
+        <div class="social d-flex align-items-center">
+          <a class="social-button social-button-fb" href="#TODO"><span class="sr-only">Facebook</a></a>
+          <a class="social-button social-button-twitter" href="#TODO"><span class="sr-only">Twitter</a></a>
+          <a class="social-button social-button-email" href="#TODO"><span class="sr-only">Email</a></a>
+          <a class="btn btn-blue ml-3" href="#TODO">Donate</a>
+        </div>
+      </div>
+    </header>
+    <div class="primary-nav mb-3">
+      <div class="container">
+        <a class="nav-home" href="/privacynotincluded">Home</a>
+        <a class="nav-TODO" href="#TODO">Toys & Games</a>
+        <a class="nav-TODO" href="#TODO">Smart Home</a>
+        <a class="nav-TODO" href="#TODO">Entertainment</a>
+        <a class="nav-TODO" href="#TODO">Wearables</a>
+        <a class="nav-TODO" href="#TODO">Health & Exercise</a>
+        <a class="nav-TODO" href="#TODO">Pets</a>
+        <a class="nav-about" href="#TODO">About the Guide</a>
+      </div>
+    </div>
+
+    <div class="pb-5">{% block guts %}{% endblock %}</div>
+
+    <footer class="mofo-footer">
+      <div class="container">
+        <ul class="list-unstyled footer-links row justify-content-center">
+          <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-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>
+        </ul>
+        <div class="org-info mozilla">
+          <div class="logo-container"><a class="logo" href="https://mozilla.org"></a></div>
+          <p>Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the web for the public good. Visit us at <a href="https://mozilla.org">mozilla.org</a>.</p>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
+<script src="/_js/bg-main.compiled.js"></script>
diff --git a/network-api/networkapi/buyersguide/templates/buyersguide_home.html b/network-api/networkapi/buyersguide/templates/buyersguide_home.html
@@ -1,5 +1,15 @@
-Buyer's guide homepage!
+{% extends "./bg_base.html" %}
 
-{% for product in products %}
-<div><a href="{{product.name | urlencode}}">{{product.name}}</a></div>
-{% endfor %}
+{% block body-id %}home{% endblock %}
+
+{% block guts %}
+
+<div class="container">
+  <h1>Buyer's guide homepage!</h1>
+
+  {% for product in products %}
+  <div><a href="{{product.name | urlencode}}">{{product.name}}</a></div>
+  {% endfor %}
+</div>
+
+{% endblock %}
diff --git a/network-api/networkapi/buyersguide/templates/product_page.html b/network-api/networkapi/buyersguide/templates/product_page.html
@@ -1,19 +1,31 @@
-<h2>{{product.name}}</h2>
+{% extends "./bg_base.html" %}
 
-<img src="{{mediaUrl}}{{product.image}}" width="500"/>
-<div>
-  {{product.company}}
+{% block body-id %}TODO-CATEGORY{% endblock %}
+
+{% block guts %}
+
+<div class="container">
+  <h2>{{product.name}}</h2>
+
+  <div class="creepometer mb-5"></div>
+
+  <img src="{{mediaUrl}}{{product.image}}" width="500"/>
+  <div>
+    {{product.company}}
+  </div>
+  <div>{{product.blurb}}</div>
+  <div>{{product.url}}</div>
+  <div>{{product.price}}</div>
+  <div>Camera: {{product.camera}}</div>
+  <div>Microphone: {{product.microphone}}</div>
+  <div>Location: {{product.location}}</div>
+  <div>Need account: {{product.need_account}}</div>
+  <div>Privacy Controls: {{product.privacy_controls}}</div>
+  <div>Delete Data: {{product.delete_data}}</div>
+  <div>Share Data: {{product.share_data}}</div>
+  <div>Child rules: {{product.child_rules}}</div>
+  <div>Privacy Policy: {{product.privacy_policy}}</div>
+  <div>Worst case scenario: {{product.worst_case}}</div>
 </div>
-<div>{{product.blurb}}</div>
-<div>{{product.url}}</div>
-<div>{{product.price}}</div>
-<div>Camera: {{product.camera}}</div>
-<div>Microphone: {{product.microphone}}</div>
-<div>Location: {{product.location}}</div>
-<div>Need account: {{product.need_account}}</div>
-<div>Privacy Controls: {{product.privacy_controls}}</div>
-<div>Delete Data: {{product.delete_data}}</div>
-<div>Share Data: {{product.share_data}}</div>
-<div>Child rules: {{product.child_rules}}</div>
-<div>Privacy Policy: {{product.privacy_policy}}</div>
-<div>Worst case scenario: {{product.worst_case}}</div>
+
+{% endblock %}
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "build:images": "shx rm -rf network-api/networkapi/frontend/_images && shx cp -r source/images network-api/networkapi/frontend/_images",
     "build:js-uncompressed": "webpack",
     "build:js": "webpack -p",
-    "build:sass": "shx mkdir -p network-api/networkapi/frontend/_css && node-sass source/sass/main.scss network-api/networkapi/frontend/_css/main.compiled.css && npm run autoprefix",
+    "build:sass": "shx mkdir -p network-api/networkapi/frontend/_css && node-sass source/sass/main.scss network-api/networkapi/frontend/_css/main.compiled.css && node-sass source/sass/buyers-guide/bg-main.scss network-api/networkapi/frontend/_css/buyers-guide.compiled.css && npm run autoprefix",
     "build": "npm run build:common && npm run build:js",
     "build-uncompressed": "npm run build:common && npm run build:js-uncompressed",
     "heroku-postbuild": "npm run build",
@@ -23,7 +23,7 @@
     "server": "pipenv run python network-api/manage.py runserver",
     "start": "npm i && npm run build-uncompressed && run-p server watch:**",
     "snyk": "snyk test --file=package.json",
-    "test:eslint": "eslint --config ./.eslintrc.yaml scripts/**/*.js source/js/**/*.js source/js/components/**/*.jsx",
+    "test:eslint": "eslint --config ./.eslintrc.yaml scripts/**/*.js source/js/**/*.js source/js/components/**/*.jsx webpack.config.js",
     "test:scss": "stylelint \"source/sass/**/*.scss\" \"source/js/components/**/*.scss\" --syntax scss",
     "test": "npm run build && run-s test:**",
     "watch:images": "chokidar 'source/images/**/*' -c 'npm run build:images'",

diff --git a/source/images/glyphs/email.svg b/source/images/glyphs/email.svg
diff --git a/source/images/glyphs/fb.svg b/source/images/glyphs/fb.svg
diff --git a/source/js/buyers-guide/bg-main.js b/source/js/buyers-guide/bg-main.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Creepometer from './components/creepometer/creepometer.jsx';
+
+let main = {
+  init() {
+    this.injectReactComponents();
+  },
+
+  // Embed various React components based on the existence of containers within the current page
+  injectReactComponents() {
+    if (document.querySelectorAll(`.creepometer`)) {
+      Array.from(document.querySelectorAll(`.creepometer`)).forEach(element => {
+        ReactDOM.render(<Creepometer/>, element);
+      });
+    }
+  }
+};
+
+main.init();
diff --git a/source/js/buyers-guide/components/creepometer/creepometer.jsx b/source/js/buyers-guide/components/creepometer/creepometer.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default class Creepometer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div>Creepometer 😬</div>
+    );
+  }
+}
diff --git a/source/js/buyers-guide/components/creepometer/creepometer.scss b/source/js/buyers-guide/components/creepometer/creepometer.scss
@@ -0,0 +1,3 @@
+.creepometer {
+  border: 1px solid papayawhip;
+}
diff --git a/source/js/main.js b/source/js/main.js
@@ -322,4 +322,3 @@ let main = {
 };
 
 main.init();
-
diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss
@@ -0,0 +1,105 @@
+// Bootstrap
+
+@import '../../../node_modules/mofo-bootstrap/dest/css/mofo-bootstrap';
+@import '../../../node_modules/mofo-bootstrap/src/scss/custom/_colors';
+@import '../../../node_modules/bootstrap/scss/_variables';
+@import '../../../node_modules/bootstrap/scss/mixins';
+
+// Breakpoints (imported from Bootstrap)
+
+$bp-xs: #{map-get($grid-breakpoints, xs)}; // < 576px
+$bp-sm: #{map-get($grid-breakpoints, sm)}; // >= 576px
+$bp-md: #{map-get($grid-breakpoints, md)}; // >= 768px
+$bp-lg: #{map-get($grid-breakpoints, lg)}; // >= 992px
+$bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px
+
+//Site-wide
+
+@import '../colors';
+@import '../mixins';
+
+// React Components
+
+@import '../../js/buyers-guide/components/creepometer/creepometer';
+
+// Non-React Components
+
+@import './components/future-non-react-component';
+
+.btn-blue {
+  color: $white;
+  background: #3302ff;
+
+  &:hover {
+    color: $white;
+    background: #4a90e2;
+  }
+}
+
+// Misc
+
+@import '../resets';
+@import '../type';
+@import '../buttons';
+@import '../global';
+@import '../utilities';
+
+// Header
+
+.moz-logo {
+  width: 97px;
+  height: 28px;
+  background-image: url("../_images/mozilla-on-black.svg");
+  flex-shrink: 0;
+}
+
+.primary-nav {
+  overflow-x: scroll;
+  white-space: nowrap;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+
+  a {
+    display: inline-block;
+    font-family: "Nunito Sans";
+    font-size: 17px;
+    color: #909090;
+    font-weight: 900;
+    margin-right: 20px;
+    padding: 10px 0 6px;
+    text-decoration: none;
+
+    &:hover {
+      color: $black;
+    }
+  }
+}
+
+#pni-home .nav-home {
+  border-bottom: 4px solid $black;
+  color: $black;
+}
+
+.social-button {
+  display: block;
+  width: 25px;
+  height: 25px;
+  margin: 0 12px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.social-button-fb {
+  background-image: url("/_images/glyphs/fb.svg");
+}
+
+.social-button-twitter {
+  background-image: url("/_images/glyphs/twitter.svg");
+}
+
+.social-button-email {
+  background-image: url("/_images/glyphs/email.svg");
+}
+
+// View specific
diff --git a/source/sass/buyers-guide/components/future-non-react-component.scss b/source/sass/buyers-guide/components/future-non-react-component.scss
@@ -0,0 +1 @@
+// TODO
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,17 +1,28 @@
-module.exports = {
+let loaders = [
+  {
+    test: /\.js(x?)$/,
+    exclude: /node_modules/,
+    loader: `babel-loader`,
+    query: {
+      presets: [`es2015`, `react`]
+    }
+  }
+];
+
+module.exports = [{
   entry: `./source/js/main.js`,
   output: {
     filename: `./network-api/networkapi/frontend/_js/main.compiled.js`
   },
   module: {
-    loaders: [
-      {
-        test: /\.js(x?)$/,
-        exclude: /node_modules/,
-        loader: `babel-loader`,
-        query: {
-          presets: [`es2015`, `react`]
-        }
-      }
-    ]
-  }};
+    loaders: loaders
+  }
+}, {
+  entry: `./source/js/buyers-guide/bg-main.js`,
+  output: {
+    filename: `./network-api/networkapi/frontend/_js/bg-main.compiled.js`
+  },
+  module: {
+    loaders: loaders
+  }
+}];