From b846c25ef101b86a8a757848cd3463c115fb130c Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Thu, 30 Aug 2018 14:27:21 -0700 Subject: [PATCH 01/12] basic scaffolding for PNI --- .../buyersguide/templates/bg_base.html | 41 ++++++++++++++++++ .../templates/buyersguide_home.html | 16 +++++-- .../buyersguide/templates/product_page.html | 42 +++++++++++-------- 3 files changed, 78 insertions(+), 21 deletions(-) create mode 100644 network-api/networkapi/buyersguide/templates/bg_base.html diff --git a/network-api/networkapi/buyersguide/templates/bg_base.html b/network-api/networkapi/buyersguide/templates/bg_base.html new file mode 100644 index 00000000000..fdff3e87745 --- /dev/null +++ b/network-api/networkapi/buyersguide/templates/bg_base.html @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + Privacy Not Included + + +
+ Home +
+ + {% block guts %}{% endblock %} + + + + diff --git a/network-api/networkapi/buyersguide/templates/buyersguide_home.html b/network-api/networkapi/buyersguide/templates/buyersguide_home.html index 99a16df1e3c..6f9d400822a 100644 --- a/network-api/networkapi/buyersguide/templates/buyersguide_home.html +++ b/network-api/networkapi/buyersguide/templates/buyersguide_home.html @@ -1,5 +1,13 @@ -Buyer's guide homepage! +{% extends "./bg_base.html" %} -{% for product in products %} -
{{product.name}}
-{% endfor %} +{% block guts %} + +
+

Buyer's guide homepage!

+ + {% for product in products %} +
{{product.name}}
+ {% endfor %} +
+ +{% endblock %} diff --git a/network-api/networkapi/buyersguide/templates/product_page.html b/network-api/networkapi/buyersguide/templates/product_page.html index 8ae5bba718e..22b0815a7be 100644 --- a/network-api/networkapi/buyersguide/templates/product_page.html +++ b/network-api/networkapi/buyersguide/templates/product_page.html @@ -1,19 +1,27 @@ -

{{product.name}}

+{% extends "./bg_base.html" %} - -
- {{product.company}} +{% block guts %} + +
+

{{product.name}}

+ + +
+ {{product.company}} +
+
{{product.blurb}}
+
{{product.url}}
+
{{product.price}}
+
Camera: {{product.camera}}
+
Microphone: {{product.microphone}}
+
Location: {{product.location}}
+
Need account: {{product.need_account}}
+
Privacy Controls: {{product.privacy_controls}}
+
Delete Data: {{product.delete_data}}
+
Share Data: {{product.share_data}}
+
Child rules: {{product.child_rules}}
+
Privacy Policy: {{product.privacy_policy}}
+
Worst case scenario: {{product.worst_case}}
-
{{product.blurb}}
-
{{product.url}}
-
{{product.price}}
-
Camera: {{product.camera}}
-
Microphone: {{product.microphone}}
-
Location: {{product.location}}
-
Need account: {{product.need_account}}
-
Privacy Controls: {{product.privacy_controls}}
-
Delete Data: {{product.delete_data}}
-
Share Data: {{product.share_data}}
-
Child rules: {{product.child_rules}}
-
Privacy Policy: {{product.privacy_policy}}
-
Worst case scenario: {{product.worst_case}}
+ +{% endblock %} From 731b11f969ad73ddd414ce6c984c408f306aa793 Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Fri, 31 Aug 2018 13:41:21 -0700 Subject: [PATCH 02/12] adding sass build for pni --- .../buyersguide/templates/bg_base.html | 2 +- package.json | 2 +- source/sass/buyers-guide/bg-main.scss | 32 +++++++++++++++++++ .../buyers-guide/components/creepometer.scss | 1 + 4 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 source/sass/buyers-guide/bg-main.scss create mode 100644 source/sass/buyers-guide/components/creepometer.scss diff --git a/network-api/networkapi/buyersguide/templates/bg_base.html b/network-api/networkapi/buyersguide/templates/bg_base.html index fdff3e87745..06b7e6c9f4b 100644 --- a/network-api/networkapi/buyersguide/templates/bg_base.html +++ b/network-api/networkapi/buyersguide/templates/bg_base.html @@ -3,7 +3,7 @@ - + diff --git a/package.json b/package.json index b547a133b65..2926207a4ae 100644 --- 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", diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss new file mode 100644 index 00000000000..7af626456f5 --- /dev/null +++ b/source/sass/buyers-guide/bg-main.scss @@ -0,0 +1,32 @@ +// 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 + +// Non-React Components + +// Misc + +@import '../resets'; +@import '../type'; +@import '../global'; +@import '../utilities'; + +// View specific diff --git a/source/sass/buyers-guide/components/creepometer.scss b/source/sass/buyers-guide/components/creepometer.scss new file mode 100644 index 00000000000..70b786d12ed --- /dev/null +++ b/source/sass/buyers-guide/components/creepometer.scss @@ -0,0 +1 @@ +// TODO From 4d094043e64dc1466b7e31aeef8aadf15b6f6dd3 Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Fri, 31 Aug 2018 13:49:55 -0700 Subject: [PATCH 03/12] further scaffolding js/css architecture --- .../networkapi/buyersguide/templates/product_page.html | 2 ++ .../creepometer.scss => js/buyers-guide/bg-main.js} | 0 source/js/buyers-guide/components/creepometer/creepometer.jsx | 1 + .../js/buyers-guide/components/creepometer/creepometer.scss | 3 +++ source/sass/buyers-guide/bg-main.scss | 4 ++++ .../buyers-guide/components/future-non-react-component.scss | 1 + 6 files changed, 11 insertions(+) rename source/{sass/buyers-guide/components/creepometer.scss => js/buyers-guide/bg-main.js} (100%) create mode 100644 source/js/buyers-guide/components/creepometer/creepometer.jsx create mode 100644 source/js/buyers-guide/components/creepometer/creepometer.scss create mode 100644 source/sass/buyers-guide/components/future-non-react-component.scss diff --git a/network-api/networkapi/buyersguide/templates/product_page.html b/network-api/networkapi/buyersguide/templates/product_page.html index 22b0815a7be..c11d3f4047e 100644 --- a/network-api/networkapi/buyersguide/templates/product_page.html +++ b/network-api/networkapi/buyersguide/templates/product_page.html @@ -5,6 +5,8 @@

{{product.name}}

+
Creep-o-meter
+
{{product.company}} diff --git a/source/sass/buyers-guide/components/creepometer.scss b/source/js/buyers-guide/bg-main.js similarity index 100% rename from source/sass/buyers-guide/components/creepometer.scss rename to source/js/buyers-guide/bg-main.js diff --git a/source/js/buyers-guide/components/creepometer/creepometer.jsx b/source/js/buyers-guide/components/creepometer/creepometer.jsx new file mode 100644 index 00000000000..70b786d12ed --- /dev/null +++ b/source/js/buyers-guide/components/creepometer/creepometer.jsx @@ -0,0 +1 @@ +// TODO diff --git a/source/js/buyers-guide/components/creepometer/creepometer.scss b/source/js/buyers-guide/components/creepometer/creepometer.scss new file mode 100644 index 00000000000..4a1fc320878 --- /dev/null +++ b/source/js/buyers-guide/components/creepometer/creepometer.scss @@ -0,0 +1,3 @@ +.creepometer { + border: 1px solid papayawhip; +} diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss index 7af626456f5..849d2a3a96b 100644 --- a/source/sass/buyers-guide/bg-main.scss +++ b/source/sass/buyers-guide/bg-main.scss @@ -20,8 +20,12 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px // React Components +@import '../../js/buyers-guide/components/creepometer/creepometer'; + // Non-React Components +@import './components/future-non-react-component'; + // Misc @import '../resets'; diff --git a/source/sass/buyers-guide/components/future-non-react-component.scss b/source/sass/buyers-guide/components/future-non-react-component.scss new file mode 100644 index 00000000000..70b786d12ed --- /dev/null +++ b/source/sass/buyers-guide/components/future-non-react-component.scss @@ -0,0 +1 @@ +// TODO From a6d75145177a6dae743e79bf18e6a2e307cfaf76 Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Fri, 31 Aug 2018 14:32:33 -0700 Subject: [PATCH 04/12] adding targets to webpack --- .../buyersguide/templates/bg_base.html | 1 + package.json | 2 +- source/js/main.js | 1 - webpack.config.js | 35 ++++++++++++------- 4 files changed, 25 insertions(+), 14 deletions(-) diff --git a/network-api/networkapi/buyersguide/templates/bg_base.html b/network-api/networkapi/buyersguide/templates/bg_base.html index 06b7e6c9f4b..83912997f9c 100644 --- a/network-api/networkapi/buyersguide/templates/bg_base.html +++ b/network-api/networkapi/buyersguide/templates/bg_base.html @@ -39,3 +39,4 @@ + diff --git a/package.json b/package.json index 2926207a4ae..10fbe7d1923 100644 --- a/package.json +++ b/package.json @@ -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/js/main.js b/source/js/main.js index eee73aac16d..2c1ebbf9a38 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -322,4 +322,3 @@ let main = { }; main.init(); - diff --git a/webpack.config.js b/webpack.config.js index 7f5e7c3eebc..0f0f69f16b9 100644 --- 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 + } +}]; From 9ef62ede61da401d922d2a20659a9b65ceeb8dbf Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Fri, 31 Aug 2018 14:45:57 -0700 Subject: [PATCH 05/12] js architecture --- .../buyersguide/templates/product_page.html | 2 +- source/js/buyers-guide/bg-main.js | 26 ++++++++++++++++++- .../components/creepometer/creepometer.jsx | 16 +++++++++++- 3 files changed, 41 insertions(+), 3 deletions(-) diff --git a/network-api/networkapi/buyersguide/templates/product_page.html b/network-api/networkapi/buyersguide/templates/product_page.html index c11d3f4047e..5a44671d7d7 100644 --- a/network-api/networkapi/buyersguide/templates/product_page.html +++ b/network-api/networkapi/buyersguide/templates/product_page.html @@ -5,7 +5,7 @@

{{product.name}}

-
Creep-o-meter
+
diff --git a/source/js/buyers-guide/bg-main.js b/source/js/buyers-guide/bg-main.js index 70b786d12ed..7264ad8d5d6 100644 --- a/source/js/buyers-guide/bg-main.js +++ b/source/js/buyers-guide/bg-main.js @@ -1 +1,25 @@ -// TODO +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`)) { + var elements = Array.from(document.querySelectorAll(`.creepometer`)); + + if (elements.length) { + elements.forEach(element => { + ReactDOM.render(, element); + }); + } + } + } +}; + +main.init(); diff --git a/source/js/buyers-guide/components/creepometer/creepometer.jsx b/source/js/buyers-guide/components/creepometer/creepometer.jsx index 70b786d12ed..74ee9c2d8e2 100644 --- a/source/js/buyers-guide/components/creepometer/creepometer.jsx +++ b/source/js/buyers-guide/components/creepometer/creepometer.jsx @@ -1 +1,15 @@ -// TODO +import React from 'react'; + +export default class Creepometer extends React.Component { + constructor(props) { + super(props); + + this.state = {}; + } + + render() { + return ( +
Creepometer!
+ ); + } +} From 175643b52a9fe00c9e7855b18bac84cd596d4ead Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Fri, 31 Aug 2018 14:54:31 -0700 Subject: [PATCH 06/12] optimized --- source/js/buyers-guide/bg-main.js | 10 +++------- .../components/creepometer/creepometer.jsx | 2 +- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/source/js/buyers-guide/bg-main.js b/source/js/buyers-guide/bg-main.js index 7264ad8d5d6..728ee8511ec 100644 --- a/source/js/buyers-guide/bg-main.js +++ b/source/js/buyers-guide/bg-main.js @@ -11,13 +11,9 @@ let main = { // Embed various React components based on the existence of containers within the current page injectReactComponents() { if (document.querySelectorAll(`.creepometer`)) { - var elements = Array.from(document.querySelectorAll(`.creepometer`)); - - if (elements.length) { - elements.forEach(element => { - ReactDOM.render(, element); - }); - } + Array.from(document.querySelectorAll(`.creepometer`)).forEach(element => { + ReactDOM.render(, element); + }); } } }; diff --git a/source/js/buyers-guide/components/creepometer/creepometer.jsx b/source/js/buyers-guide/components/creepometer/creepometer.jsx index 74ee9c2d8e2..535ef569a2a 100644 --- a/source/js/buyers-guide/components/creepometer/creepometer.jsx +++ b/source/js/buyers-guide/components/creepometer/creepometer.jsx @@ -9,7 +9,7 @@ export default class Creepometer extends React.Component { render() { return ( -
Creepometer!
+
Creepometer 😬
); } } From 513b9be45e90bd6b5288822024f41cccb46e259b Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Thu, 6 Sep 2018 11:49:48 -0700 Subject: [PATCH 07/12] styling primary nav --- .../buyersguide/templates/bg_base.html | 25 ++++++++++++++++- source/sass/buyers-guide/bg-main.scss | 28 +++++++++++++++++++ 2 files changed, 52 insertions(+), 1 deletion(-) diff --git a/network-api/networkapi/buyersguide/templates/bg_base.html b/network-api/networkapi/buyersguide/templates/bg_base.html index 83912997f9c..a26054b2aab 100644 --- a/network-api/networkapi/buyersguide/templates/bg_base.html +++ b/network-api/networkapi/buyersguide/templates/bg_base.html @@ -15,8 +15,31 @@
- Home +
+
+

Mozilla

+

*privacy not included

+
+ +
+
+
+ Home + Toys & Games + Smart Home + Entertainment + Wearables + Health & Exercise + Pets + About the Guide +
+
{% block guts %}{% endblock %} diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss index 849d2a3a96b..f3371bb522c 100644 --- a/source/sass/buyers-guide/bg-main.scss +++ b/source/sass/buyers-guide/bg-main.scss @@ -26,11 +26,39 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px @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 + +.primary-nav { + overflow-x: scroll; + white-space: nowrap; + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; + + a { + font-family: "Nunito Sans"; + font-size: 17px; + color: #909090; + font-weight: 900; + margin-right: 20px; + } +} + // View specific From efa5ffeffd88f13a857f5672ed527cded6de11d3 Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Thu, 6 Sep 2018 14:28:31 -0700 Subject: [PATCH 08/12] more nav --- .../buyersguide/templates/bg_base.html | 16 +++++----- source/images/glyphs/email.svg | 1 + source/images/glyphs/fb.svg | 1 + source/sass/buyers-guide/bg-main.scss | 29 +++++++++++++++++++ 4 files changed, 39 insertions(+), 8 deletions(-) create mode 100644 source/images/glyphs/email.svg create mode 100644 source/images/glyphs/fb.svg diff --git a/network-api/networkapi/buyersguide/templates/bg_base.html b/network-api/networkapi/buyersguide/templates/bg_base.html index a26054b2aab..2a014a2499b 100644 --- a/network-api/networkapi/buyersguide/templates/bg_base.html +++ b/network-api/networkapi/buyersguide/templates/bg_base.html @@ -17,14 +17,14 @@
-

Mozilla

-

*privacy not included

+ +

*privacy not included

-
@@ -41,7 +41,7 @@
- {% block guts %}{% endblock %} +
{% block guts %}{% endblock %}
diff --git a/source/images/glyphs/email.svg b/source/images/glyphs/email.svg new file mode 100644 index 00000000000..34ec0e2d8f3 --- /dev/null +++ b/source/images/glyphs/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/images/glyphs/fb.svg b/source/images/glyphs/fb.svg new file mode 100644 index 00000000000..64dc50a0a01 --- /dev/null +++ b/source/images/glyphs/fb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss index f3371bb522c..82d75712dce 100644 --- a/source/sass/buyers-guide/bg-main.scss +++ b/source/sass/buyers-guide/bg-main.scss @@ -46,6 +46,13 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px // 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; @@ -61,4 +68,26 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px } } +.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 From e0da89766b931d12c5743013e98320dcc490e66c Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Thu, 6 Sep 2018 16:11:10 -0700 Subject: [PATCH 09/12] moar nav bits --- .../buyersguide/templates/bg_base.html | 22 +++++++++---------- .../templates/buyersguide_home.html | 2 ++ .../buyersguide/templates/product_page.html | 2 ++ source/sass/buyers-guide/bg-main.scss | 12 ++++++++++ 4 files changed, 27 insertions(+), 11 deletions(-) diff --git a/network-api/networkapi/buyersguide/templates/bg_base.html b/network-api/networkapi/buyersguide/templates/bg_base.html index 2a014a2499b..612abe3faf7 100644 --- a/network-api/networkapi/buyersguide/templates/bg_base.html +++ b/network-api/networkapi/buyersguide/templates/bg_base.html @@ -13,11 +13,11 @@ Privacy Not Included - +
- +

*privacy not included

-
- Home - Toys & Games - Smart Home - Entertainment - Wearables - Health & Exercise - Pets - About the Guide +
+ Home + Toys & Games + Smart Home + Entertainment + Wearables + Health & Exercise + Pets + About the Guide
diff --git a/network-api/networkapi/buyersguide/templates/buyersguide_home.html b/network-api/networkapi/buyersguide/templates/buyersguide_home.html index 6f9d400822a..c7ad2dc99d3 100644 --- a/network-api/networkapi/buyersguide/templates/buyersguide_home.html +++ b/network-api/networkapi/buyersguide/templates/buyersguide_home.html @@ -1,5 +1,7 @@ {% extends "./bg_base.html" %} +{% block body-id %}home{% endblock %} + {% block guts %}
diff --git a/network-api/networkapi/buyersguide/templates/product_page.html b/network-api/networkapi/buyersguide/templates/product_page.html index 5a44671d7d7..09c3d92ca5a 100644 --- a/network-api/networkapi/buyersguide/templates/product_page.html +++ b/network-api/networkapi/buyersguide/templates/product_page.html @@ -1,5 +1,7 @@ {% extends "./bg_base.html" %} +{% block body-id %}TODO-CATEGORY{% endblock %} + {% block guts %}
diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss index 82d75712dce..e249da19d6d 100644 --- a/source/sass/buyers-guide/bg-main.scss +++ b/source/sass/buyers-guide/bg-main.scss @@ -60,14 +60,26 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px 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; From 31dcd2630e69f6deb680d2a5e2f27334160629ef Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Fri, 7 Sep 2018 14:55:34 -0700 Subject: [PATCH 10/12] more nav --- .../networkapi/buyersguide/templates/bg_base.html | 4 ++-- source/sass/buyers-guide/bg-main.scss | 11 ++++++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/network-api/networkapi/buyersguide/templates/bg_base.html b/network-api/networkapi/buyersguide/templates/bg_base.html index 612abe3faf7..7761e44dedc 100644 --- a/network-api/networkapi/buyersguide/templates/bg_base.html +++ b/network-api/networkapi/buyersguide/templates/bg_base.html @@ -11,7 +11,7 @@ - Privacy Not Included + Mozilla - *privacy not included
@@ -24,7 +24,7 @@ - Donate + Donate
diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss index e249da19d6d..592382eedf6 100644 --- a/source/sass/buyers-guide/bg-main.scss +++ b/source/sass/buyers-guide/bg-main.scss @@ -47,10 +47,15 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px // Header .moz-logo { - width: 97px; - height: 28px; - background-image: url("../_images/mozilla-on-black.svg"); + background-image: url("../_images/mozilla-m.svg"); flex-shrink: 0; + width: 28px; + height: 28px; + + @include media-breakpoint-up(md) { + width: 97px; + background-image: url("../_images/mozilla-on-black.svg"); + } } .primary-nav { From abae3ee80d8be21f7f7220648176fd724a452224 Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Mon, 10 Sep 2018 09:42:47 -0700 Subject: [PATCH 11/12] adding about page --- .../networkapi/buyersguide/templates/about.html | 11 +++++++++++ .../networkapi/buyersguide/templates/bg_base.html | 2 +- .../buyersguide/templates/buyersguide_home.html | 2 +- network-api/networkapi/buyersguide/urls.py | 3 ++- network-api/networkapi/buyersguide/views.py | 5 +++++ source/sass/buyers-guide/bg-main.scss | 3 ++- 6 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 network-api/networkapi/buyersguide/templates/about.html diff --git a/network-api/networkapi/buyersguide/templates/about.html b/network-api/networkapi/buyersguide/templates/about.html new file mode 100644 index 00000000000..1e7902c0efd --- /dev/null +++ b/network-api/networkapi/buyersguide/templates/about.html @@ -0,0 +1,11 @@ +{% extends "./bg_base.html" %} + +{% block body-id %}about{% endblock %} + +{% block guts %} + +
+

About page goes here!

+
+ +{% endblock %} diff --git a/network-api/networkapi/buyersguide/templates/bg_base.html b/network-api/networkapi/buyersguide/templates/bg_base.html index 7761e44dedc..ed6b2bca7fc 100644 --- a/network-api/networkapi/buyersguide/templates/bg_base.html +++ b/network-api/networkapi/buyersguide/templates/bg_base.html @@ -37,7 +37,7 @@ Wearables Health & Exercise Pets - About the Guide + About the Guide
diff --git a/network-api/networkapi/buyersguide/templates/buyersguide_home.html b/network-api/networkapi/buyersguide/templates/buyersguide_home.html index c7ad2dc99d3..5cc48dd9902 100644 --- a/network-api/networkapi/buyersguide/templates/buyersguide_home.html +++ b/network-api/networkapi/buyersguide/templates/buyersguide_home.html @@ -8,7 +8,7 @@

Buyer's guide homepage!

{% for product in products %} - + {% endfor %}
diff --git a/network-api/networkapi/buyersguide/urls.py b/network-api/networkapi/buyersguide/urls.py index f0eebbff756..0cf29d4ceb9 100644 --- a/network-api/networkapi/buyersguide/urls.py +++ b/network-api/networkapi/buyersguide/urls.py @@ -4,5 +4,6 @@ urlpatterns = [ url(r'^$', views.buyersguide_home, name='buyersguide-home'), - url(r'^(?P[\w\ ]+)/', views.product_view, name='product-view'), + url(r'^about/', views.about_view, name='about-view'), + url(r'^product/(?P[\w\ ]+)/', views.product_view, name='product-view'), ] diff --git a/network-api/networkapi/buyersguide/views.py b/network-api/networkapi/buyersguide/views.py index 1def9a0a7be..cb43bb3399f 100644 --- a/network-api/networkapi/buyersguide/views.py +++ b/network-api/networkapi/buyersguide/views.py @@ -16,3 +16,8 @@ def buyersguide_home(request): def product_view(request, productname): product = Product.objects.get(name__iexact=productname) return render(request, 'product_page.html', {'product': product, 'mediaUrl': settings.MEDIA_URL}) + + +@login_required +def about_view(request): + return render(request, 'about.html') diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss index 592382eedf6..60b2648034f 100644 --- a/source/sass/buyers-guide/bg-main.scss +++ b/source/sass/buyers-guide/bg-main.scss @@ -80,7 +80,8 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px } } -#pni-home .nav-home { +#pni-home .nav-home, +#pni-about .nav-about { border-bottom: 4px solid $black; color: $black; } From a0d33d93b9b92784be648eb2ddff38f515bde854 Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Mon, 10 Sep 2018 14:23:46 -0700 Subject: [PATCH 12/12] extending product model --- network-api/networkapi/buyersguide/factory.py | 13 ++- .../migrations/0002_auto_20180910_2037.py | 64 +++++++++++++++ network-api/networkapi/buyersguide/models.py | 80 ++++++++++++++++--- 3 files changed, 144 insertions(+), 13 deletions(-) create mode 100644 network-api/networkapi/buyersguide/migrations/0002_auto_20180910_2037.py diff --git a/network-api/networkapi/buyersguide/factory.py b/network-api/networkapi/buyersguide/factory.py index f4d934b2235..da17bb67d21 100644 --- a/network-api/networkapi/buyersguide/factory.py +++ b/network-api/networkapi/buyersguide/factory.py @@ -31,12 +31,19 @@ class Meta: camera = Faker('boolean') microphone = Faker('boolean') location = Faker('boolean') + uses_encryption = Faker('boolean') + privacy_policy = Faker('url') + share_data = Faker('boolean') + must_change_default_password = Faker('boolean') + security_updates = Faker('boolean') need_account = Faker('boolean') - privacy_controls = Faker('boolean') delete_data = Faker('boolean') - share_data = Faker('boolean') child_rules = Faker('boolean') - privacy_policy = Faker('url') + manage_security = Faker('boolean') + customer_support_easy = Faker('boolean') + phone_number = Faker('phone_number') + live_chat = Faker('url') + email = Faker('email') worst_case = Faker('sentence') @post_generation diff --git a/network-api/networkapi/buyersguide/migrations/0002_auto_20180910_2037.py b/network-api/networkapi/buyersguide/migrations/0002_auto_20180910_2037.py new file mode 100644 index 00000000000..98c4d92ea61 --- /dev/null +++ b/network-api/networkapi/buyersguide/migrations/0002_auto_20180910_2037.py @@ -0,0 +1,64 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.11.14 on 2018-09-10 20:37 +from __future__ import unicode_literals + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('buyersguide', '0001_initial'), + ] + + operations = [ + migrations.RemoveField( + model_name='product', + name='privacy_controls', + ), + migrations.AddField( + model_name='product', + name='customer_support_easy', + field=models.NullBooleanField(help_text='Makes it easy to contact customer support?'), + ), + migrations.AddField( + model_name='product', + name='email', + field=models.CharField(blank='True', help_text='Email', max_length=100), + ), + migrations.AddField( + model_name='product', + name='live_chat', + field=models.CharField(blank='True', help_text='Live Chat', max_length=100), + ), + migrations.AddField( + model_name='product', + name='manage_security', + field=models.NullBooleanField(help_text='Manages security vulnerabilities?'), + ), + migrations.AddField( + model_name='product', + name='must_change_default_password', + field=models.NullBooleanField(help_text='Must change a default password?'), + ), + migrations.AddField( + model_name='product', + name='phone_number', + field=models.CharField(blank='True', help_text='Phone Number', max_length=100), + ), + migrations.AddField( + model_name='product', + name='security_updates', + field=models.NullBooleanField(help_text='Security updates?'), + ), + migrations.AddField( + model_name='product', + name='uses_encryption', + field=models.NullBooleanField(help_text='Does the product use encryption?'), + ), + migrations.AlterField( + model_name='product', + name='price', + field=models.CharField(blank='True', help_text='Price', max_length=100), + ), + ] diff --git a/network-api/networkapi/buyersguide/models.py b/network-api/networkapi/buyersguide/models.py index 7712cb0c2c7..1366ba9f946 100644 --- a/network-api/networkapi/buyersguide/models.py +++ b/network-api/networkapi/buyersguide/models.py @@ -12,6 +12,8 @@ def get_product_image_upload_path(instance, filename): ) +# https://docs.google.com/document/d/1jtWOVqH20qMYRSwvb2rHzPNTrWIoPs8EbWR25r9iyi4/edit + class Product(models.Model): """ A thing you can buy in stores and our review of it @@ -22,6 +24,7 @@ class Product(models.Model): help_text='Name of Product', blank="True", ) + company = models.CharField( max_length=100, help_text='Name of Company', @@ -33,51 +36,108 @@ class Product(models.Model): help_text='Description of the product', blank="True" ) + url = models.URLField( max_length=2048, help_text='Link to this product page', blank="True", ) + price = models.CharField( max_length=100, - help_text='Price range', + help_text='Price', blank="True", ) + image = models.FileField( max_length=2048, help_text='Image representing this prodct', upload_to=get_product_image_upload_path, blank=True, ) + + # Can it spy on me? + camera = models.NullBooleanField( help_text='Does this product have or access a camera?', ) + microphone = models.NullBooleanField( help_text='Does this product have or access a microphone?', ) + location = models.NullBooleanField( help_text='Does this product access your location?', ) + + # What does it know about me? + + uses_encryption = models.NullBooleanField( + help_text='Does the product use encryption?', + ) + + privacy_policy = models.URLField( + help_text='Link to privacy policy for this product', + max_length=2048, + blank="True", + ) + + share_data = models.NullBooleanField( + help_text='Does the maker share data with other companies?', + ) + + # Can I control it? + + must_change_default_password = models.NullBooleanField( + help_text='Must change a default password?', + ) + + security_updates = models.NullBooleanField( + help_text='Security updates?', + ) + need_account = models.NullBooleanField( help_text='Do you need an account to use this product?', ) - privacy_controls = models.NullBooleanField( - help_text='Do users have access to privacy controls?', - ) + delete_data = models.NullBooleanField( help_text='Can you request data be deleted?', ) - share_data = models.NullBooleanField( - help_text='Does the maker share data with other companies?', - ) + child_rules = models.NullBooleanField( help_text='Are there rules for children?', ) - privacy_policy = models.URLField( - help_text='Link to privacy policy for this product', - max_length=2048, + + # Company shows it cares about its customers? + + manage_security = models.NullBooleanField( + help_text='Manages security vulnerabilities?', + ) + + customer_support_easy = models.NullBooleanField( + help_text='Makes it easy to contact customer support?', + ) + + phone_number = models.CharField( + max_length=100, + help_text='Phone Number', + blank="True", + ) + + live_chat = models.CharField( + max_length=100, + help_text='Live Chat', blank="True", ) + + email = models.CharField( + max_length=100, + help_text='Email', + blank="True", + ) + + # What could happen if something went wrong? + worst_case = models.CharField( max_length=5000, help_text="What's the worst thing that could happen by using this product?",