From ec5199e313b7fbd1648a9ee5ef41edbadfd26d60 Mon Sep 17 00:00:00 2001 From: Glade Date: Thu, 11 Apr 2019 18:19:24 +1000 Subject: [PATCH 1/7] Vote UI paper draft - +.editorconfig +prettier update --- .editorconfig | 9 + .prettierrc | 10 +- gatsby-config.js | 83 ++-- gatsby-node.js | 49 ++- package-lock.json | 136 +++++- package.json | 5 +- src/components/layout.css | 770 ++++++++++++++++----------------- src/components/layout.js | 68 +-- src/templates/division-page.js | 10 +- src/templates/state-page.js | 10 +- src/templates/vote-page.js | 262 +++++++++++ 11 files changed, 911 insertions(+), 501 deletions(-) create mode 100644 .editorconfig create mode 100644 src/templates/vote-page.js diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..56118ee --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +# EditorConfig is awesome: https://EditorConfig.org + +# top-most EditorConfig file +root = true + +# Unix-style newlines with a newline ending every file +[*] +indent_style = space +indent_size = 4 \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 36301bc..8201271 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,7 @@ { - "semi": false, - "singleQuote": true, - "trailingComma": "es5" -} + "semi": false, + "singleQuote": true, + "tabWidth": 4, + "useTabs": false, + "trailingComma": "es5" +} \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js index ec19a21..f33465b 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,44 +1,45 @@ module.exports = { - siteMetadata: { - title: `Below The Line`, - description: `Vote Your Way`, - author: `Benno Rice`, - }, - plugins: [ - `gatsby-plugin-react-helmet`, - { - resolve: `gatsby-source-filesystem`, - options: { - name: `images`, - path: `${__dirname}/src/images`, - }, + siteMetadata: { + title: `Below The Line`, + description: `Vote Your Way`, + author: `Benno Rice`, }, - `gatsby-transformer-sharp`, - `gatsby-plugin-sharp`, - { - resolve: `gatsby-plugin-manifest`, - options: { - name: `gatsby-starter-default`, - short_name: `starter`, - start_url: `/`, - background_color: `#663399`, - theme_color: `#663399`, - display: `minimal-ui`, - icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site. - }, - }, - `gatsby-plugin-typescript`, - `gatsby-transformer-yaml`, - `gatsby-transformer-remark`, - { - resolve: `gatsby-source-filesystem`, - options: { - name: `src`, - path: `${__dirname}/src/data`, - }, - }, - // this (optional) plugin enables Progressive Web App + Offline functionality - // To learn more, visit: https://gatsby.app/offline - // 'gatsby-plugin-offline', - ], + plugins: [ + `gatsby-plugin-react-helmet`, + { + resolve: `gatsby-source-filesystem`, + options: { + name: `images`, + path: `${__dirname}/src/images`, + }, + }, + `gatsby-transformer-sharp`, + `gatsby-plugin-sharp`, + { + resolve: `gatsby-plugin-manifest`, + options: { + name: `gatsby-starter-default`, + short_name: `starter`, + start_url: `/`, + background_color: `#663399`, + theme_color: `#663399`, + display: `minimal-ui`, + icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site. + }, + }, + `gatsby-plugin-typescript`, + `gatsby-transformer-yaml`, + `gatsby-transformer-remark`, + { + resolve: `gatsby-source-filesystem`, + options: { + name: `src`, + path: `${__dirname}/src/data`, + }, + }, + `gatsby-plugin-styled-components`, + // this (optional) plugin enables Progressive Web App + Offline functionality + // To learn more, visit: https://gatsby.app/offline + // 'gatsby-plugin-offline', + ], } diff --git a/gatsby-node.js b/gatsby-node.js index f5efd74..bbac3b5 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -17,28 +17,27 @@ exports.createPages = ({ graphql, actions }) => { const { createPage } = actions return new Promise((resolve, reject) => { graphql(` - { - allStatesYaml { - edges { - node { - fields { - slug + { + allStatesYaml { + edges { + node { + fields { + slug + } + } + } } - } - } - }, - allDivisionsYaml { - edges { - node { - fields { - slug + allDivisionsYaml { + edges { + node { + fields { + slug + } + } + } } - } } - } - } - ` - ).then(result => { + `).then(result => { result.data.allStatesYaml.edges.forEach(({ node }) => { createPage({ path: node.fields.slug, @@ -61,6 +60,18 @@ exports.createPages = ({ graphql, actions }) => { }, }) }) + + // Temporary Vote page creation before data + createPage({ + path: 'vote', + component: path.resolve(`./src/templates/vote-page.js`), + context: { + // Data passed to context is available + // in page queries as GraphQL variables. + slug: 'vote', + }, + }) + resolve() }) }) diff --git a/package-lock.json b/package-lock.json index 7d6a787..1a85424 100644 --- a/package-lock.json +++ b/package-lock.json @@ -828,6 +828,24 @@ "to-fast-properties": "^2.0.0" } }, + "@emotion/is-prop-valid": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz", + "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==", + "requires": { + "@emotion/memoize": "0.7.1" + } + }, + "@emotion/memoize": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", + "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==" + }, + "@emotion/unitless": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz", + "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==" + }, "@moocar/lokijs": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@moocar/lokijs/-/lokijs-1.0.1.tgz", @@ -1842,6 +1860,17 @@ "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.5.2.tgz", "integrity": "sha512-txof6/YcbYgl0CTPFJPCIkaxqAkLz0JZzzl9jp9fd3csRT2vpKKLmCiD5vWApRvBcQ4LB5pa9Rmkwns6xBMoaA==" }, + "babel-plugin-styled-components": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz", + "integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.10" + } + }, "babel-plugin-syntax-class-properties": { "version": "6.13.0", "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", @@ -3084,6 +3113,11 @@ } } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -3849,6 +3883,11 @@ } } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "http://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -3960,6 +3999,16 @@ } } }, + "css-to-react-native": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.0.tgz", + "integrity": "sha512-IhR7bNIrCFwbJbKZOAjNDZdwpsbjTN6f1agXeELHDqg1wHPA8c2QLruttKOW7hgMGetkfraRJCIEMrptifBfVw==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^3.3.0" + } + }, "css-tree": { "version": "1.0.0-alpha.28", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz", @@ -6106,7 +6155,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -6124,11 +6174,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6141,15 +6193,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6252,7 +6307,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -6262,6 +6318,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6274,17 +6331,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -6301,6 +6361,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -6373,7 +6434,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -6383,6 +6445,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -6458,7 +6521,8 @@ }, "safe-buffer": { "version": "5.1.1", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -6488,6 +6552,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6505,6 +6570,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6543,11 +6609,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.2", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -7006,6 +7074,14 @@ } } }, + "gatsby-plugin-styled-components": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-3.0.7.tgz", + "integrity": "sha512-a9sg4qWC5K75eip7TwN4F2TGXCaoRZhx9lvu1U5aQQrC8OpTgWus66Fzws0XVcUCe18isfOm1kGfhLNm5/lOFw==", + "requires": { + "@babel/runtime": "^7.0.0" + } + }, "gatsby-plugin-typescript": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.0.3.tgz", @@ -9657,6 +9733,11 @@ "mimic-fn": "^1.0.0" } }, + "memoize-one": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz", + "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -12433,6 +12514,11 @@ } } }, + "react-is": { + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", + "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" + }, "react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", @@ -14261,6 +14347,24 @@ "css": "2.2.4" } }, + "styled-components": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.2.0.tgz", + "integrity": "sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/is-prop-valid": "^0.7.3", + "@emotion/unitless": "^0.7.0", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^2.2.2", + "memoize-one": "^5.0.0", + "prop-types": "^15.5.4", + "react-is": "^16.6.0", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.1.tgz", @@ -14308,6 +14412,16 @@ } } }, + "stylis": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" + }, + "stylis-rule-sheet": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", diff --git a/package.json b/package.json index a2fad0c..23e9d26 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,14 @@ "version": "0.1.0", "author": "Kyle Mathews ", "dependencies": { + "babel-plugin-styled-components": "^1.10.0", "gatsby": "^2.0.76", "gatsby-image": "^2.0.20", "gatsby-plugin-manifest": "^2.0.9", "gatsby-plugin-offline": "^2.0.16", "gatsby-plugin-react-helmet": "^3.0.2", "gatsby-plugin-sharp": "^2.0.14", + "gatsby-plugin-styled-components": "^3.0.7", "gatsby-plugin-typescript": "^2.0.3", "gatsby-source-filesystem": "^2.0.12", "gatsby-transformer-remark": "^2.1.19", @@ -19,7 +21,8 @@ "prop-types": "^15.6.2", "react": "^16.6.3", "react-dom": "^16.6.3", - "react-helmet": "^5.2.0" + "react-helmet": "^5.2.0", + "styled-components": "^4.2.0" }, "keywords": [ "gatsby" diff --git a/src/components/layout.css b/src/components/layout.css index 68aa933..22f9700 100644 --- a/src/components/layout.css +++ b/src/components/layout.css @@ -1,10 +1,10 @@ html { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; + font-family: 'Roboto', sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; } body { - margin: 0; + margin: 0; } article, aside, @@ -18,607 +18,607 @@ menu, nav, section, summary { - display: block; + display: block; } audio, canvas, progress, video { - display: inline-block; + display: inline-block; } audio:not([controls]) { - display: none; - height: 0; + display: none; + height: 0; } progress { - vertical-align: baseline; + vertical-align: baseline; } [hidden], template { - display: none; + display: none; } a { - background-color: transparent; - -webkit-text-decoration-skip: objects; + background-color: transparent; + -webkit-text-decoration-skip: objects; } a:active, a:hover { - outline-width: 0; + outline-width: 0; } abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; } b, strong { - font-weight: inherit; - font-weight: bolder; + font-weight: inherit; + font-weight: bolder; } dfn { - font-style: italic; + font-style: italic; } h1 { - font-size: 2em; - margin: 0.67em 0; + font-size: 2em; + margin: 0.67em 0; } mark { - background-color: #ff0; - color: #000; + background-color: #ff0; + color: #000; } small { - font-size: 80%; + font-size: 80%; } sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sub { - bottom: -0.25em; + bottom: -0.25em; } sup { - top: -0.5em; + top: -0.5em; } img { - border-style: none; + border-style: none; } svg:not(:root) { - overflow: hidden; + overflow: hidden; } code, kbd, pre, samp { - font-family: monospace, monospace; - font-size: 1em; + font-family: monospace, monospace; + font-size: 1em; } figure { - margin: 1em 40px; + margin: 1em 40px; } hr { - box-sizing: content-box; - height: 0; - overflow: visible; + box-sizing: content-box; + height: 0; + overflow: visible; } button, input, optgroup, select, textarea { - font: inherit; - margin: 0; + font: inherit; + margin: 0; } optgroup { - font-weight: 700; + font-weight: 700; } button, input { - overflow: visible; + overflow: visible; } button, select { - text-transform: none; + text-transform: none; } [type='reset'], [type='submit'], button, html [type='button'] { - -webkit-appearance: button; + -webkit-appearance: button; } [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner, button::-moz-focus-inner { - border-style: none; - padding: 0; + border-style: none; + padding: 0; } [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring, button:-moz-focusring { - outline: 1px dotted ButtonText; + outline: 1px dotted ButtonText; } fieldset { - border: 1px solid silver; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + border: 1px solid silver; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } legend { - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; } textarea { - overflow: auto; + overflow: auto; } [type='checkbox'], [type='radio'] { - box-sizing: border-box; - padding: 0; + box-sizing: border-box; + padding: 0; } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { - height: auto; + height: auto; } [type='search'] { - -webkit-appearance: textfield; - outline-offset: -2px; + -webkit-appearance: textfield; + outline-offset: -2px; } [type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } ::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; + color: inherit; + opacity: 0.54; } ::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; + -webkit-appearance: button; + font: inherit; } html { - font: 112.5%/1.45em georgia, serif; - box-sizing: border-box; - overflow-y: scroll; + font: 112.5%/1.45em georgia, serif; + box-sizing: border-box; + overflow-y: scroll; } * { - box-sizing: inherit; + box-sizing: inherit; } *:before { - box-sizing: inherit; + box-sizing: inherit; } *:after { - box-sizing: inherit; + box-sizing: inherit; } body { - color: hsla(0, 0%, 0%, 0.8); - font-family: georgia, serif; - font-weight: normal; - word-wrap: break-word; - font-kerning: normal; - -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; - -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; - -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; - font-feature-settings: 'kern', 'liga', 'clig', 'calt'; + color: hsla(0, 0%, 0%, 0.8); + font-family: georgia, serif; + font-weight: normal; + word-wrap: break-word; + font-kerning: normal; + -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; + -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; + -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; + font-feature-settings: 'kern', 'liga', 'clig', 'calt'; } img { - max-width: 100%; - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; + max-width: 100%; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; } h1 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 2.25rem; - line-height: 1.1; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + color: inherit; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-weight: bold; + text-rendering: optimizeLegibility; + font-size: 2.25rem; + line-height: 1.1; } h2 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 1.62671rem; - line-height: 1.1; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + color: inherit; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-weight: bold; + text-rendering: optimizeLegibility; + font-size: 1.62671rem; + line-height: 1.1; } h3 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 1.38316rem; - line-height: 1.1; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + color: inherit; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-weight: bold; + text-rendering: optimizeLegibility; + font-size: 1.38316rem; + line-height: 1.1; } h4 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 1rem; - line-height: 1.1; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + color: inherit; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-weight: bold; + text-rendering: optimizeLegibility; + font-size: 1rem; + line-height: 1.1; } h5 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 0.85028rem; - line-height: 1.1; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + color: inherit; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-weight: bold; + text-rendering: optimizeLegibility; + font-size: 0.85028rem; + line-height: 1.1; } h6 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 0.78405rem; - line-height: 1.1; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + color: inherit; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-weight: bold; + text-rendering: optimizeLegibility; + font-size: 0.78405rem; + line-height: 1.1; } hgroup { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; } ul { - margin-left: 1.45rem; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - list-style-position: outside; - list-style-image: none; + margin-left: 1.45rem; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + list-style-position: outside; + list-style-image: none; } ol { - margin-left: 1.45rem; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - list-style-position: outside; - list-style-image: none; + margin-left: 1.45rem; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + list-style-position: outside; + list-style-image: none; } dl { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; } dd { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; } p { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; } figure { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; } pre { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - font-size: 0.85rem; - line-height: 1.42; - background: hsla(0, 0%, 0%, 0.04); - border-radius: 3px; - overflow: auto; - word-wrap: normal; - padding: 1.45rem; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + font-size: 0.85rem; + line-height: 1.42; + background: hsla(0, 0%, 0%, 0.04); + border-radius: 3px; + overflow: auto; + word-wrap: normal; + padding: 1.45rem; } table { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - font-size: 1rem; - line-height: 1.45rem; - border-collapse: collapse; - width: 100%; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + font-size: 1rem; + line-height: 1.45rem; + border-collapse: collapse; + width: 100%; } fieldset { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; } blockquote { - margin-left: 1.45rem; - margin-right: 1.45rem; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; + margin-left: 1.45rem; + margin-right: 1.45rem; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; } form { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; } noscript { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; } iframe { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; } hr { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: calc(1.45rem - 1px); - background: hsla(0, 0%, 0%, 0.2); - border: none; - height: 1px; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: calc(1.45rem - 1px); + background: hsla(0, 0%, 0%, 0.2); + border: none; + height: 1px; } address { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; } b { - font-weight: bold; + font-weight: bold; } strong { - font-weight: bold; + font-weight: bold; } dt { - font-weight: bold; + font-weight: bold; } th { - font-weight: bold; + font-weight: bold; } li { - margin-bottom: calc(1.45rem / 2); + margin-bottom: calc(1.45rem / 2); } ol li { - padding-left: 0; + padding-left: 0; } ul li { - padding-left: 0; + padding-left: 0; } li > ol { - margin-left: 1.45rem; - margin-bottom: calc(1.45rem / 2); - margin-top: calc(1.45rem / 2); + margin-left: 1.45rem; + margin-bottom: calc(1.45rem / 2); + margin-top: calc(1.45rem / 2); } li > ul { - margin-left: 1.45rem; - margin-bottom: calc(1.45rem / 2); - margin-top: calc(1.45rem / 2); + margin-left: 1.45rem; + margin-bottom: calc(1.45rem / 2); + margin-top: calc(1.45rem / 2); } blockquote *:last-child { - margin-bottom: 0; + margin-bottom: 0; } li *:last-child { - margin-bottom: 0; + margin-bottom: 0; } p *:last-child { - margin-bottom: 0; + margin-bottom: 0; } li > p { - margin-bottom: calc(1.45rem / 2); + margin-bottom: calc(1.45rem / 2); } code { - font-size: 0.85rem; - line-height: 1.45rem; + font-size: 0.85rem; + line-height: 1.45rem; } kbd { - font-size: 0.85rem; - line-height: 1.45rem; + font-size: 0.85rem; + line-height: 1.45rem; } samp { - font-size: 0.85rem; - line-height: 1.45rem; + font-size: 0.85rem; + line-height: 1.45rem; } abbr { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; + border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); + cursor: help; } acronym { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; + border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); + cursor: help; } abbr[title] { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; - text-decoration: none; + border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); + cursor: help; + text-decoration: none; } thead { - text-align: left; + text-align: left; } td, th { - text-align: left; - border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); - font-feature-settings: 'tnum'; - -moz-font-feature-settings: 'tnum'; - -ms-font-feature-settings: 'tnum'; - -webkit-font-feature-settings: 'tnum'; - padding-left: 0.96667rem; - padding-right: 0.96667rem; - padding-top: 0.725rem; - padding-bottom: calc(0.725rem - 1px); + text-align: left; + border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); + font-feature-settings: 'tnum'; + -moz-font-feature-settings: 'tnum'; + -ms-font-feature-settings: 'tnum'; + -webkit-font-feature-settings: 'tnum'; + padding-left: 0.96667rem; + padding-right: 0.96667rem; + padding-top: 0.725rem; + padding-bottom: calc(0.725rem - 1px); } th:first-child, td:first-child { - padding-left: 0; + padding-left: 0; } th:last-child, td:last-child { - padding-right: 0; + padding-right: 0; } tt, code { - background-color: hsla(0, 0%, 0%, 0.04); - border-radius: 3px; - font-family: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Droid Sans Mono', - 'Liberation Mono', Menlo, Courier, monospace; - padding: 0; - padding-top: 0.2em; - padding-bottom: 0.2em; + background-color: hsla(0, 0%, 0%, 0.04); + border-radius: 3px; + font-family: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Droid Sans Mono', + 'Liberation Mono', Menlo, Courier, monospace; + padding: 0; + padding-top: 0.2em; + padding-bottom: 0.2em; } pre code { - background: none; - line-height: 1.42; + background: none; + line-height: 1.42; } code:before, code:after, tt:before, tt:after { - letter-spacing: -0.2em; - content: ' '; + letter-spacing: -0.2em; + content: ' '; } pre code:before, pre code:after, pre tt:before, pre tt:after { - content: ''; + content: ''; } @media only screen and (max-width: 480px) { - html { - font-size: 100%; - } + html { + font-size: 100%; + } } diff --git a/src/components/layout.js b/src/components/layout.js index f1b6a12..97a5dee 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -1,44 +1,52 @@ import React from 'react' import PropTypes from 'prop-types' import { StaticQuery, graphql } from 'gatsby' +import { Helmet } from 'react-helmet' import Header from './header' import './layout.css' const Layout = ({ children }) => ( - ( - <> -
-
- {children} -
- © 2018, Built with Gatsby -
-
- - )} - /> + ( + <> + + + +
+
+ {children} +
+ © 2018, Built with{' '} + Gatsby +
+
+ + )} + /> ) Layout.propTypes = { - children: PropTypes.node.isRequired, + children: PropTypes.node.isRequired, } export default Layout diff --git a/src/templates/division-page.js b/src/templates/division-page.js index ee7aa03..9e6daed 100644 --- a/src/templates/division-page.js +++ b/src/templates/division-page.js @@ -1,6 +1,6 @@ -import React from "react" -import { graphql } from "gatsby" -import Layout from "../components/layout" +import React from 'react' +import { graphql } from 'gatsby' +import Layout from '../components/layout' export default ({ data }) => { const division = data.divisionsYaml @@ -17,6 +17,6 @@ export const query = graphql` query($slug: String!) { divisionsYaml(fields: { slug: { eq: $slug } }) { name - } + } } - ` +` diff --git a/src/templates/state-page.js b/src/templates/state-page.js index 13acd98..fe1a7ea 100644 --- a/src/templates/state-page.js +++ b/src/templates/state-page.js @@ -1,6 +1,6 @@ -import React from "react" -import { graphql } from "gatsby" -import Layout from "../components/layout" +import React from 'react' +import { graphql } from 'gatsby' +import Layout from '../components/layout' export default ({ data }) => { const state = data.statesYaml @@ -17,6 +17,6 @@ export const query = graphql` query($slug: String!) { statesYaml(fields: { slug: { eq: $slug } }) { name - } + } } - ` +` diff --git a/src/templates/vote-page.js b/src/templates/vote-page.js new file mode 100644 index 0000000..f9633c7 --- /dev/null +++ b/src/templates/vote-page.js @@ -0,0 +1,262 @@ +import React from 'react' +import { graphql } from 'gatsby' +import Layout from '../components/layout' +import styled from 'styled-components' + +const VoteContainer = styled.div` + width: 100%; + overflow: auto; + font-family: 'Roboto', sans-serif; +` + +const Inner = styled.div` + width: 102em; + border: 1px solid black; +` + +const Col = styled.div` + flex: 0 0 10em; + width: 10em; + padding: 2em 0.5em 1em; + margin: 0.5em 0; + position: relative; + + &:not(:last-child) { + border-right: 1px solid black; + } +` + +const ColLabel = styled.span` + position: absolute; + top: 0; + left: 0.5em; +` + +const ContentCol = styled.div` + width: 10em; + flex: 0 0 10em; + padding: 0.5em; + border-right: 1px solid black; + margin: 0.5em 0; + font-weight: bold; + position: relative; +` + +const CandidateBlock = styled.div` + display: flex; + flex-flow: row nowrap; + width: 100%; + + &:not(:first-child) { + margin-top: 1em; + } + + &:not(:last-child) { + margin-bottom: 1em; + } +` + +const CandidateVoteCol = styled.div` + width: 2em; + margin-right: 0.25em; +` + +const VoteInput = styled.input` + width: 2rem; + height: 2rem; + border: 1px solid black; + padding: 0.25rem; + font-size: 0.75em; + + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } +` + +const CandidateInfoCol = styled.div` + word-break: break-word; + overflow-wrap: break-word; +` + +const FirstContent = styled.p` + font-weight: bold; +` + +const Row = styled.div` + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + width: 100%; + + &:first-child { + border-bottom: 1em solid black; + } +` + +const Title = styled.h2` + display: block; + margin: 0 0 1rem; + font-weight: bold; + font-size: 1.2em; + line-height: 1; +` + +const voteData = { + name: 'Batman', + slug: 'vote-batman', + candidates: [], +} + +const Surname = styled.span` + display: block; + font-family: arial, sans-serif; + text-transform: uppercase; +` + +const GivenName = styled.span` + display: block; + font-family: arial, sans-serif; +` + +const Party = styled.span` + display: block; + text-transform: uppercase; +` + +const PartyTitle = styled.span` + display: block; + text-transform: uppercase; + font-weight: bold; +` + +const Arrow = styled.span` + display: block; + padding: 0.25rem; + height: 2rem; + line-height: 1; + background: linear-gradient( + 90deg, + black, + black calc(100% - 1rem), + transparent calc(100% - 1rem) + ) + 0 0, + linear-gradient(45deg, black, black 50%, transparent 50%) no-repeat 100% + 0 / 1rem 1rem, + linear-gradient(-45deg, transparent, transparent 50%, black 50%) + no-repeat 100% 100% / 1rem 1rem; + color: white; + margin: 1rem 0 1rem; +` + +export const Candidate = ({ given, surname, party, vote }) => ( + + + + + + + {surname} + {given} + {party} + + +) + +const CandidateData = [ + 'a', + 'b', + 'c', + 'd', + 'e', + 'f', + 'g', + 'h', + 'i', + 'j', + 'k', + 'l', +] + +export default ({ data }) => { + // const state = data.statesYaml + const vote = voteData + return ( + +
+

{vote.name}

+
+ + + + + + You may vote in one of two ways{' '} + <Arrow>Either:</Arrow> + + Above the line + + the line By numbering at least 6 of these boxes + in the order of your choice (with number 1 as + your first choice) + + + {CandidateData.map((val, ind) => ( + + {val} Above the line data + + ))} + + + + + <Arrow>Or:</Arrow> + + Below the line + + By numbering at least 12 of these boxes in the + order of your choice (with number 1 as your + first choice). + + + {CandidateData.map((val, ind) => ( + + {val} + + {'The Dingo Party of Australia'} + + {/*Loop over Candidate Data later */} + + + + ))} + + + + + ) +} + +// export const query = graphql` +// query($slug: String!) { +// statesYaml(fields: { slug: { eq: $slug } }) { +// name +// } +// } +// ` From 72f5ea9c484670b523c02978588609cfebe0d9f7 Mon Sep 17 00:00:00 2001 From: Glade Date: Thu, 11 Apr 2019 19:27:29 +1000 Subject: [PATCH 2/7] Component refactor --- src/components/candidate.jsx | 74 ++++++++++ src/components/list.jsx | 54 ++++++++ src/components/result.jsx | 172 +++++++++++++++++++++++ src/components/vote.jsx | 43 ++++++ src/templates/vote-page.js | 261 ++--------------------------------- 5 files changed, 358 insertions(+), 246 deletions(-) create mode 100644 src/components/candidate.jsx create mode 100644 src/components/list.jsx create mode 100644 src/components/result.jsx create mode 100644 src/components/vote.jsx diff --git a/src/components/candidate.jsx b/src/components/candidate.jsx new file mode 100644 index 0000000..cf636a3 --- /dev/null +++ b/src/components/candidate.jsx @@ -0,0 +1,74 @@ +import React, { Component } from 'react' +import styled from 'styled-components' + +const CandidateBlock = styled.div` + display: flex; + flex-flow: row nowrap; + width: 100%; + + &:not(:first-child) { + margin-top: 1em; + } + + &:not(:last-child) { + margin-bottom: 1em; + } +` + +const CandidateVoteCol = styled.div` + width: 2em; + margin-right: 0.25em; +` + +const VoteInput = styled.input` + width: 2rem; + height: 2rem; + border: 1px solid black; + padding: 0.25rem; + font-size: 0.75em; + + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } +` + +const CandidateInfoCol = styled.div` + word-break: break-word; + overflow-wrap: break-word; +` + +const Surname = styled.span` + display: block; + font-family: arial, sans-serif; + text-transform: uppercase; +` + +const GivenName = styled.span` + display: block; + font-family: arial, sans-serif; +` + +const Party = styled.span` + display: block; + text-transform: uppercase; +` + +const Candidate = ({ given, surname, party, vote }) => ( + + + + + + + {surname} + {given} + {party} + + +) + +export default Candidate diff --git a/src/components/list.jsx b/src/components/list.jsx new file mode 100644 index 0000000..eb476e7 --- /dev/null +++ b/src/components/list.jsx @@ -0,0 +1,54 @@ +import React, { Component } from 'react' +import styled from 'styled-components' + +const ListData = [ + { + name: 'Bob Doggy', + id: 'dingo-party-bob-doggy', + partyId: 'dingo-party', + description: 'Some desc here blah', + }, + { + name: 'Frank Kangaroo', + id: 'dingo-party-frank-doggy', + partyId: 'dingo-party', + description: 'Some desc here blah', + }, + { + name: 'Sue Koala', + id: 'dingo-party-sue-doggy', + partyId: 'dingo-party', + description: 'Some desc here blah', + }, +] + +const Ul = styled.ul` + margin: 0; + padding: 0; + list-style: none; +` + +const ListItem = styled.li` + padding: 0.25em; + border: 1px solid black; +` + +class List extends Component { + constructor() { + super() + } + + render() { + return ( +
+
    + {ListData.map((val, ind) => ( + {val.name} + ))} +
+
+ ) + } +} + +export default List diff --git a/src/components/result.jsx b/src/components/result.jsx new file mode 100644 index 0000000..30e03e3 --- /dev/null +++ b/src/components/result.jsx @@ -0,0 +1,172 @@ +import React, { Component } from 'react' +import styled from 'styled-components' +import Candidate from './candidate' + +const VoteContainer = styled.div` + width: 100%; + overflow: auto; + font-family: 'Roboto', sans-serif; +` + +const Inner = styled.div` + width: 102em; + border: 1px solid black; +` + +const Col = styled.div` + flex: 0 0 10em; + width: 10em; + padding: 2em 0.5em 1em; + margin: 0.5em 0; + position: relative; + + &:not(:last-child) { + border-right: 1px solid black; + } +` + +const ColLabel = styled.span` + position: absolute; + top: 0; + left: 0.5em; +` + +const ContentCol = styled.div` + width: 10em; + flex: 0 0 10em; + padding: 0.5em; + border-right: 1px solid black; + margin: 0.5em 0; + font-weight: bold; + position: relative; +` + +const FirstContent = styled.p` + font-weight: bold; +` + +const Row = styled.div` + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + width: 100%; + + &:first-child { + border-bottom: 1em solid black; + } +` + +const Title = styled.h2` + display: block; + margin: 0 0 1rem; + font-weight: bold; + font-size: 1.2em; + line-height: 1; +` + +const voteData = { + name: 'Batman', + slug: 'vote-batman', + candidates: [], +} + +const PartyTitle = styled.span` + display: block; + text-transform: uppercase; + font-weight: bold; +` + +const Arrow = styled.span` + display: block; + padding: 0.25rem; + height: 2rem; + line-height: 1; + background: linear-gradient( + 90deg, + black, + black calc(100% - 1rem), + transparent calc(100% - 1rem) + ) + 0 0, + linear-gradient(45deg, black, black 50%, transparent 50%) no-repeat 100% + 0 / 1rem 1rem, + linear-gradient(-45deg, transparent, transparent 50%, black 50%) + no-repeat 100% 100% / 1rem 1rem; + color: white; + margin: 1rem 0 1rem; +` + +const CandidateData = [ + 'a', + 'b', + 'c', + 'd', + 'e', + 'f', + 'g', + 'h', + 'i', + 'j', + 'k', + 'l', +] + +const Result = () => ( + + + + + + You may vote in one of two ways <Arrow>Either:</Arrow> + + Above the line + + the line By numbering at least 6 of these boxes in the + order of your choice (with number 1 as your first + choice) + + + {CandidateData.map((val, ind) => ( + + {val} Above the line data + + ))} + + + + + <Arrow>Or:</Arrow> + + Below the line + + By numbering at least 12 of these boxes in the order of + your choice (with number 1 as your first choice). + + + {CandidateData.map((val, ind) => ( + + {val} + + {'The Dingo Party of Australia'} + + {/*Loop over Candidate Data later */} + + + + ))} + + + +) + +export default Result diff --git a/src/components/vote.jsx b/src/components/vote.jsx new file mode 100644 index 0000000..0560bef --- /dev/null +++ b/src/components/vote.jsx @@ -0,0 +1,43 @@ +import React, { Component } from 'react' +import styled from 'styled-components' +import Result from './result' +import List from './list' + +const Container = styled.div` + display: flex; + flex-flow: column nowrap; + + @media screen and (min-width: 50em) { + flex-flow: row nowrap; + } +` + +const ColData = styled.div` + width: 15em; + padding: 0 0.5em 0.5em; +` + +const ColResult = styled.div` + width: calc(100% - 15em); +` + +class Vote extends Component { + constructor() { + super() + } + + render() { + return ( + + + + + + + + + ) + } +} + +export default Vote diff --git a/src/templates/vote-page.js b/src/templates/vote-page.js index f9633c7..4b1bed2 100644 --- a/src/templates/vote-page.js +++ b/src/templates/vote-page.js @@ -1,262 +1,31 @@ import React from 'react' import { graphql } from 'gatsby' import Layout from '../components/layout' +import Vote from '../components/vote' import styled from 'styled-components' -const VoteContainer = styled.div` +const FullWidth = styled.div` width: 100%; - overflow: auto; - font-family: 'Roboto', sans-serif; + padding: 1em; ` -const Inner = styled.div` - width: 102em; - border: 1px solid black; -` - -const Col = styled.div` - flex: 0 0 10em; - width: 10em; - padding: 2em 0.5em 1em; - margin: 0.5em 0; - position: relative; - - &:not(:last-child) { - border-right: 1px solid black; - } -` - -const ColLabel = styled.span` - position: absolute; - top: 0; - left: 0.5em; -` - -const ContentCol = styled.div` - width: 10em; - flex: 0 0 10em; - padding: 0.5em; - border-right: 1px solid black; - margin: 0.5em 0; - font-weight: bold; - position: relative; -` - -const CandidateBlock = styled.div` - display: flex; - flex-flow: row nowrap; - width: 100%; - - &:not(:first-child) { - margin-top: 1em; - } - - &:not(:last-child) { - margin-bottom: 1em; - } -` - -const CandidateVoteCol = styled.div` - width: 2em; - margin-right: 0.25em; -` - -const VoteInput = styled.input` - width: 2rem; - height: 2rem; - border: 1px solid black; - padding: 0.25rem; - font-size: 0.75em; - - ::-webkit-inner-spin-button, - ::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; - } -` - -const CandidateInfoCol = styled.div` - word-break: break-word; - overflow-wrap: break-word; -` - -const FirstContent = styled.p` - font-weight: bold; -` - -const Row = styled.div` - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - width: 100%; - - &:first-child { - border-bottom: 1em solid black; - } -` - -const Title = styled.h2` - display: block; - margin: 0 0 1rem; - font-weight: bold; - font-size: 1.2em; - line-height: 1; -` - -const voteData = { - name: 'Batman', - slug: 'vote-batman', - candidates: [], -} - -const Surname = styled.span` - display: block; - font-family: arial, sans-serif; - text-transform: uppercase; -` - -const GivenName = styled.span` - display: block; - font-family: arial, sans-serif; -` - -const Party = styled.span` - display: block; - text-transform: uppercase; -` - -const PartyTitle = styled.span` - display: block; - text-transform: uppercase; - font-weight: bold; -` - -const Arrow = styled.span` - display: block; - padding: 0.25rem; - height: 2rem; - line-height: 1; - background: linear-gradient( - 90deg, - black, - black calc(100% - 1rem), - transparent calc(100% - 1rem) - ) - 0 0, - linear-gradient(45deg, black, black 50%, transparent 50%) no-repeat 100% - 0 / 1rem 1rem, - linear-gradient(-45deg, transparent, transparent 50%, black 50%) - no-repeat 100% 100% / 1rem 1rem; - color: white; - margin: 1rem 0 1rem; -` - -export const Candidate = ({ given, surname, party, vote }) => ( - - - - - - - {surname} - {given} - {party} - - -) - -const CandidateData = [ - 'a', - 'b', - 'c', - 'd', - 'e', - 'f', - 'g', - 'h', - 'i', - 'j', - 'k', - 'l', -] - export default ({ data }) => { // const state = data.statesYaml - const vote = voteData return ( - +
-

{vote.name}

+

Vote page

- - - - - - You may vote in one of two ways{' '} - <Arrow>Either:</Arrow> - - Above the line - - the line By numbering at least 6 of these boxes - in the order of your choice (with number 1 as - your first choice) - - - {CandidateData.map((val, ind) => ( - - {val} Above the line data - - ))} - - - - - <Arrow>Or:</Arrow> - - Below the line - - By numbering at least 12 of these boxes in the - order of your choice (with number 1 as your - first choice). - - - {CandidateData.map((val, ind) => ( - - {val} - - {'The Dingo Party of Australia'} - - {/*Loop over Candidate Data later */} - - - - ))} - - - - + + + ) } -// export const query = graphql` -// query($slug: String!) { -// statesYaml(fields: { slug: { eq: $slug } }) { -// name -// } -// } -// ` +export const query = graphql` + query($slug: String!) { + statesYaml(fields: { slug: { eq: $slug } }) { + name + } + } +` From a671bc742db71a5cbe1983bb122c2339d1c9852d Mon Sep 17 00:00:00 2001 From: Glade Date: Fri, 12 Apr 2019 01:23:23 +1000 Subject: [PATCH 3/7] voting ui drafted and working --- package-lock.json | 138 ++++++++++++++++++++++++++--- package.json | 5 +- src/components/list.jsx | 64 ++++++++------ src/components/result.jsx | 68 ++++++-------- src/components/vote.jsx | 43 --------- src/templates/vote-page.js | 177 +++++++++++++++++++++++++++++++++---- 6 files changed, 349 insertions(+), 146 deletions(-) delete mode 100644 src/components/vote.jsx diff --git a/package-lock.json b/package-lock.json index 1a85424..c34ee1a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -782,6 +782,27 @@ "regenerator-runtime": "^0.12.0" } }, + "@babel/runtime-corejs2": { + "version": "7.4.3", + "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.4.3.tgz", + "integrity": "sha512-anTLTF7IK8Hd5f73zpPzt875I27UaaTWARJlfMGgnmQhvEe1uNHQRKBUbXL0Gc0VEYiVzsHsTPso5XdK8NGvFg==", + "requires": { + "core-js": "^2.6.5", + "regenerator-runtime": "^0.13.2" + }, + "dependencies": { + "core-js": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz", + "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==" + }, + "regenerator-runtime": { + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz", + "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==" + } + } + }, "@babel/template": { "version": "7.2.2", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.2.2.tgz", @@ -3883,6 +3904,14 @@ } } }, + "css-box-model": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.1.1.tgz", + "integrity": "sha512-ZxbuLFeAPEDb0wPbGfT7783Vb00MVAkvOlMKwr0kA2PD5EGxk6P3MAhedvVuyVJCWb54bb+6HQ7pdPYENf8AZw==", + "requires": { + "tiny-invariant": "^1.0.3" + } + }, "css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", @@ -12298,6 +12327,11 @@ "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.0.tgz", "integrity": "sha512-sluvZZ1YiTLD5jsqZcDmFyV2EwToyXZBfpoVOmktMmW+VEnhgakFHnasVph65fOjGPTWN0Nw3+XQaSeMayr0kg==" }, + "raf-schd": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.0.tgz", + "integrity": "sha512-m7zq0JkIrECzw9mO5Zcq6jN4KayE34yoIS9hJoiZNXyOAT06PPA8PrR+WtJIeFW09YjUfNkMMN9lrmAt6BURCA==" + }, "randomatic": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz", @@ -12375,14 +12409,40 @@ } }, "react": { - "version": "16.7.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz", - "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==", + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz", + "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.12.0" + "scheduler": "^0.13.6" + }, + "dependencies": { + "scheduler": { + "version": "0.13.6", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", + "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + } + } + }, + "react-beautiful-dnd": { + "version": "11.0.0-beta.3", + "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-11.0.0-beta.3.tgz", + "integrity": "sha512-eJ3yfsXQq5dQlOYXfC/E+QS4sLGylt2sG8WfKs/v2IH0GEFCrpsP0zE7AiLyaaQ+qqlDXI4ghnOXHTgMSI2d4Q==", + "requires": { + "@babel/runtime-corejs2": "^7.4.3", + "css-box-model": "^1.1.1", + "memoize-one": "^5.0.4", + "raf-schd": "^4.0.0", + "react-redux": "^7.0.1", + "redux": "^4.0.1", + "tiny-invariant": "^1.0.4", + "use-memo-one": "^1.0.1" } }, "react-dev-utils": { @@ -12465,14 +12525,14 @@ } }, "react-dom": { - "version": "16.7.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz", - "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==", + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz", + "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.12.0" + "scheduler": "^0.13.6" } }, "react-error-overlay": { @@ -12524,6 +12584,52 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-redux": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.0.1.tgz", + "integrity": "sha512-orSiI/QXtGiiJmf8lN/zVTx4hysFo/kGOsce28IUu/mu98AGemBwPTDzf64P4Vf/miRmevO8/w2RSw2awDd21w==", + "requires": { + "@babel/runtime": "^7.4.3", + "hoist-non-react-statics": "^3.3.0", + "invariant": "^2.2.4", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.8.6" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.4.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.3.tgz", + "integrity": "sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "hoist-non-react-statics": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", + "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "requires": { + "react-is": "^16.7.0" + } + }, + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, + "regenerator-runtime": { + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz", + "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==" + } + } + }, "react-side-effect": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz", @@ -13233,9 +13339,9 @@ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==" }, "scheduler": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz", - "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==", + "version": "0.13.6", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", + "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -14774,6 +14880,11 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz", + "integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g==" + }, "tinycolor2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", @@ -15401,6 +15512,11 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, + "use-memo-one": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.0.1.tgz", + "integrity": "sha512-j4R9HCMUVktNm7D3qnNglesHs67Wnmib8z5rrvUXTlKsB4LcSYMKsmJes+rUrlKCdVqVyYuDHBRsmIcverwbDg==" + }, "util": { "version": "0.10.4", "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", diff --git a/package.json b/package.json index 23e9d26..e6c98a5 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,9 @@ "gatsby-transformer-sharp": "^2.1.8", "gatsby-transformer-yaml": "^2.1.6", "prop-types": "^15.6.2", - "react": "^16.6.3", - "react-dom": "^16.6.3", + "react": "^16.8.6", + "react-beautiful-dnd": "^11.0.0-beta.3", + "react-dom": "^16.8.6", "react-helmet": "^5.2.0", "styled-components": "^4.2.0" }, diff --git a/src/components/list.jsx b/src/components/list.jsx index eb476e7..008ad53 100644 --- a/src/components/list.jsx +++ b/src/components/list.jsx @@ -1,26 +1,6 @@ import React, { Component } from 'react' import styled from 'styled-components' - -const ListData = [ - { - name: 'Bob Doggy', - id: 'dingo-party-bob-doggy', - partyId: 'dingo-party', - description: 'Some desc here blah', - }, - { - name: 'Frank Kangaroo', - id: 'dingo-party-frank-doggy', - partyId: 'dingo-party', - description: 'Some desc here blah', - }, - { - name: 'Sue Koala', - id: 'dingo-party-sue-doggy', - partyId: 'dingo-party', - description: 'Some desc here blah', - }, -] +import { Droppable, Draggable } from 'react-beautiful-dnd' const Ul = styled.ul` margin: 0; @@ -28,11 +8,27 @@ const Ul = styled.ul` list-style: none; ` -const ListItem = styled.li` +const Li = styled.li` padding: 0.25em; border: 1px solid black; + background-color: white; ` +const Option = ({ val, draggableId, index }) => ( + + {provided => ( +
  • + {index + 1} {val.surname}, {val.given} +
    • + )} +     +) + class List extends Component { constructor() { super() @@ -40,13 +36,23 @@ class List extends Component { render() { return ( -
    -
      - {ListData.map((val, ind) => ( - {val.name} - ))} -
    -
    + + {provided => ( +
    +
      + {this.props.order.map((val, ind) => ( +
    +
    + )} +     ) } } diff --git a/src/components/result.jsx b/src/components/result.jsx index 30e03e3..246dbce 100644 --- a/src/components/result.jsx +++ b/src/components/result.jsx @@ -1,5 +1,6 @@ import React, { Component } from 'react' import styled from 'styled-components' +import propTypes from 'prop-types' import Candidate from './candidate' const VoteContainer = styled.div` @@ -64,12 +65,6 @@ const Title = styled.h2` line-height: 1; ` -const voteData = { - name: 'Batman', - slug: 'vote-batman', - candidates: [], -} - const PartyTitle = styled.span` display: block; text-transform: uppercase; @@ -96,25 +91,14 @@ const Arrow = styled.span` margin: 1rem 0 1rem; ` -const CandidateData = [ - 'a', - 'b', - 'c', - 'd', - 'e', - 'f', - 'g', - 'h', - 'i', - 'j', - 'k', - 'l', -] - -const Result = () => ( +const Result = ({ voteData, partyData }) => ( - - + {console.log(partyData)} + {console.log(Object.keys(partyData))} + + You may vote in one of two ways <Arrow>Either:</Arrow> @@ -126,9 +110,9 @@ const Result = () => ( choice) </FirstContent> </ContentCol> - {CandidateData.map((val, ind) => ( + {Object.keys(partyData).map((val, ind) => ( <Col key={ind}> - <ColLabel>{val}</ColLabel> Above the line data + <ColLabel>{val}</ColLabel> {partyData[val].name} </Col> ))} </Row> @@ -143,25 +127,20 @@ const Result = () => ( your choice (with number 1 as your first choice). </FirstContent> </ContentCol> - {CandidateData.map((val, ind) => ( + {Object.keys(partyData).map((val, ind) => ( <Col key={ind}> <ColLabel>{val}</ColLabel> - <PartyTitle> - {'The Dingo Party of Australia'} - </PartyTitle> + {/* <PartyTitle>{partyData[val].name}</PartyTitle> */} + <PartyTitle>{val}</PartyTitle> {/*Loop over Candidate Data later */} - <Candidate - given={'Johnny'} - surname={'Citizen'} - party={'The Dingo Party of Australia'} - vote={10} - /> - <Candidate - given={'Koala'} - surname={'Fluffy'} - party={'The Dingo Party of Australia'} - vote={10} - /> + {partyData[val].candidates.map((cVal, c) => ( + <Candidate + given={voteData[cVal].given} + surname={voteData[cVal].surname} + party={partyData[val].name} + vote={voteData[cVal].order} + /> + ))} </Col> ))} </Row> @@ -169,4 +148,9 @@ const Result = () => ( </VoteContainer> ) +Result.propTypes = { + voteData: propTypes.object.isRequired, + partyData: propTypes.object.isRequired, +} + export default Result diff --git a/src/components/vote.jsx b/src/components/vote.jsx deleted file mode 100644 index 0560bef..0000000 --- a/src/components/vote.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import React, { Component } from 'react' -import styled from 'styled-components' -import Result from './result' -import List from './list' - -const Container = styled.div` - display: flex; - flex-flow: column nowrap; - - @media screen and (min-width: 50em) { - flex-flow: row nowrap; - } -` - -const ColData = styled.div` - width: 15em; - padding: 0 0.5em 0.5em; -` - -const ColResult = styled.div` - width: calc(100% - 15em); -` - -class Vote extends Component { - constructor() { - super() - } - - render() { - return ( - <Container> - <ColData> - <List /> - </ColData> - <ColResult> - <Result /> - </ColResult> - </Container> - ) - } -} - -export default Vote diff --git a/src/templates/vote-page.js b/src/templates/vote-page.js index 4b1bed2..8b01324 100644 --- a/src/templates/vote-page.js +++ b/src/templates/vote-page.js @@ -1,31 +1,170 @@ -import React from 'react' +import React, { Component } from 'react' import { graphql } from 'gatsby' -import Layout from '../components/layout' -import Vote from '../components/vote' +import { DragDropContext } from 'react-beautiful-dnd' import styled from 'styled-components' +import List from '../components/list' +import Result from '../components/result' const FullWidth = styled.div` width: 100%; padding: 1em; ` -export default ({ data }) => { - // const state = data.statesYaml - return ( - <FullWidth> - <div> - <h1>Vote page</h1> - </div> - - <Vote /> - </FullWidth> - ) +const Container = styled.div` + display: flex; + flex-flow: column nowrap; + + @media screen and (min-width: 50em) { + flex-flow: row nowrap; + } +` + +const ColData = styled.div` + width: 15em; + padding: 0 0.5em 0.5em; + + @media screen and (min-width: 50em) { + width: 15em; + } +` + +const ColResult = styled.div` + width: 100%; + + @media screen and (min-width: 50em) { + width: calc(100% - 15em); + } +` + +// Cells / candidate preferences +const initialData = { + 'dingo-party-bob-doggy': { + given: 'Bob', + surname: 'Doggy', + id: 'dingo-party-bob-doggy', + partyId: 'dpa', + description: 'Some desc here blah', + order: 1, + }, + 'dingo-party-frank-kangaroo': { + given: 'Frank', + surname: 'Kangaroo', + id: 'dingo-party-frank-kangaroo', + partyId: 'dpa', + description: 'Some desc here blah', + order: 2, + }, + 'akp-sue-koala': { + given: 'Sue', + surname: 'Koala', + id: 'dingo-party-sue-koala', + partyId: 'akp', + description: 'Some desc here blah', + order: 3, + }, + 'akp-marg-koala': { + given: 'Marg', + surname: 'Koala', + id: 'dingo-party-marg-koala', + partyId: 'akp', + description: 'Some desc here blah', + order: 4, + }, + 'akp-francois-budgie': { + given: 'Francois', + surname: 'Budgie', + id: 'dingo-party-francois-budgie', + partyId: 'akp', + description: 'Some desc here blah', + order: 5, + }, +} + +// Columns +const initialPartyData = { + akp: { + name: 'Australian Koala Party', + candidates: ['akp-francois-budgie', 'akp-marg-koala', 'akp-sue-koala'], + }, + dpa: { + name: 'The dingo party of Australia', + candidates: ['dingo-party-bob-doggy', 'dingo-party-frank-kangaroo'], + }, } -export const query = graphql` - query($slug: String!) { - statesYaml(fields: { slug: { eq: $slug } }) { - name +const initialOrder = [ + 'dingo-party-bob-doggy', + 'dingo-party-frank-kangaroo', + 'akp-sue-koala', + 'akp-francois-budgie', + 'akp-marg-koala', +] + +export default class App extends Component { + constructor() { + super() + this.state = { + data: initialData, + partyData: initialPartyData, + order: initialOrder, } + this.onDragEnd = this.onDragEnd.bind(this) } -` + + onDragEnd(result) { + const { source, destination, draggableId } = result + + if (!destination) return + if (source.index === destination.index) return + + const orderedData = { ...this.state.data } + const newOrder = Array.from(this.state.order) + newOrder.splice(source.index, 1) + newOrder.splice(destination.index, 0, draggableId) + + // Update order in data + newOrder.map((val, ind) => (orderedData[val].order = ind + 1)) + + const newState = { + ...this.state, + data: { ...orderedData }, + order: [...newOrder], + } + + this.setState(newState) + } + + render() { + return ( + <DragDropContext onDragEnd={this.onDragEnd}> + <FullWidth> + <div> + <h1>Vote page</h1> + </div> + <Container> + <ColData> + <List + voteData={this.state.data} + order={this.state.order} + /> + </ColData> + <ColResult> + <Result + voteData={this.state.data} + partyData={this.state.partyData} + /> + </ColResult> + </Container> + </FullWidth> + </DragDropContext> + ) + } +} + +// export const query = graphql` +// query($slug: String!) { +// statesYaml(fields: { slug: { eq: $slug } }) { +// name +// } +// } +// ` From eade9a38078efaa45188aa78562111bac7fc55c7 Mon Sep 17 00:00:00 2001 From: Glade <gladekettle@gmail.com> Date: Fri, 12 Apr 2019 15:14:49 +1000 Subject: [PATCH 4/7] Renamed layout.css. General styling updates --- src/components/layout.js | 20 ++++++---- src/components/list.jsx | 31 ++++++++++++--- src/components/{layout.css => reset.css} | 0 src/templates/vote-page.js | 49 +++++++++++++----------- 4 files changed, 64 insertions(+), 36 deletions(-) rename src/components/{layout.css => reset.css} (100%) diff --git a/src/components/layout.js b/src/components/layout.js index 97a5dee..cc4c46d 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -4,9 +4,9 @@ import { StaticQuery, graphql } from 'gatsby' import { Helmet } from 'react-helmet' import Header from './header' -import './layout.css' +import './reset.css' -const Layout = ({ children }) => ( +const Layout = ({ children, noColumn }) => ( <StaticQuery query={graphql` query SiteTitleQuery { @@ -27,12 +27,16 @@ const Layout = ({ children }) => ( </Helmet> <Header siteTitle={data.site.siteMetadata.title} /> <div - style={{ - margin: `0 auto`, - maxWidth: 960, - padding: `0px 1.0875rem 1.45rem`, - paddingTop: 0, - }} + style={ + noColumn + ? null + : { + margin: `0 auto`, + maxWidth: 960, + padding: `0px 1.0875rem 1.45rem`, + paddingTop: 0, + } + } > {children} <footer> diff --git a/src/components/list.jsx b/src/components/list.jsx index 008ad53..77a2b9b 100644 --- a/src/components/list.jsx +++ b/src/components/list.jsx @@ -4,26 +4,45 @@ import { Droppable, Draggable } from 'react-beautiful-dnd' const Ul = styled.ul` margin: 0; - padding: 0; + padding: 0.5em; list-style: none; + background: ${props => (props.isDragging ? 'turquoise' : 'white')}; + transition: background-color 0.25s ease; ` const Li = styled.li` + display: flex; padding: 0.25em; border: 1px solid black; - background-color: white; + background-color: ${props => (props.isDragging ? 'purple' : 'white')}; + color: ${props => (props.isDragging ? 'white' : 'black')}; + align-items: center; + transition: background-color 0.25s ease; ` +const PrefNumber = styled.span` + display: inline-block; + width: 2em; + height: 2em; + border: 2px solid black; + margin-right: 0.25em; + text-align: center; +` + +const Name = styled.span`` + const Option = ({ val, draggableId, index }) => ( <Draggable draggableId={draggableId} index={index}> - {provided => ( + {(provided, snapshot) => ( <Li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} key={draggableId} + isDragging={snapshot.isDragging} > - {index + 1} {val.surname}, {val.given} + <PrefNumber>{index + 1}</PrefNumber> + {val.surname}, {val.given} </Li> )} </Draggable> @@ -37,9 +56,9 @@ class List extends Component { render() { return ( <Droppable droppableId="basic"> - {provided => ( + {(provided, snapshopt) => ( <div ref={provided.innerRef} {...provided.droppableProps}> - <Ul> + <Ul isDragging={snapshopt.isDraggingOver}> {this.props.order.map((val, ind) => ( <Option key={val} diff --git a/src/components/layout.css b/src/components/reset.css similarity index 100% rename from src/components/layout.css rename to src/components/reset.css diff --git a/src/templates/vote-page.js b/src/templates/vote-page.js index 8b01324..20240e7 100644 --- a/src/templates/vote-page.js +++ b/src/templates/vote-page.js @@ -4,6 +4,7 @@ import { DragDropContext } from 'react-beautiful-dnd' import styled from 'styled-components' import List from '../components/list' import Result from '../components/result' +import Layout from '../components/layout' const FullWidth = styled.div` width: 100%; @@ -20,7 +21,7 @@ const Container = styled.div` ` const ColData = styled.div` - width: 15em; + width: 100%; padding: 0 0.5em 0.5em; @media screen and (min-width: 50em) { @@ -136,27 +137,31 @@ export default class App extends Component { render() { return ( - <DragDropContext onDragEnd={this.onDragEnd}> - <FullWidth> - <div> - <h1>Vote page</h1> - </div> - <Container> - <ColData> - <List - voteData={this.state.data} - order={this.state.order} - /> - </ColData> - <ColResult> - <Result - voteData={this.state.data} - partyData={this.state.partyData} - /> - </ColResult> - </Container> - </FullWidth> - </DragDropContext> + <Layout noColumn={true}> + <DragDropContext onDragEnd={this.onDragEnd}> + <FullWidth> + <div> + <h1>Vote</h1> + </div> + <Container> + <ColData> + <h2>1. Set order here</h2> + <List + voteData={this.state.data} + order={this.state.order} + /> + </ColData> + <ColResult> + <h2>2. What your vote looks like here</h2> + <Result + voteData={this.state.data} + partyData={this.state.partyData} + /> + </ColResult> + </Container> + </FullWidth> + </DragDropContext> + </Layout> ) } } From 0e483c9c6696a755f946912ffd67aab8e50cf197 Mon Sep 17 00:00:00 2001 From: Glade <gladekettle@gmail.com> Date: Fri, 12 Apr 2019 15:45:41 +1000 Subject: [PATCH 5/7] Clean code --- src/components/list.jsx | 53 ++++----------------------- src/components/option.jsx | 55 ++++++++++++++++++++++++++++ src/data/initial-data.js | 65 +++++++++++++++++++++++++++++++++ src/templates/vote-page.js | 74 +++++--------------------------------- 4 files changed, 135 insertions(+), 112 deletions(-) create mode 100644 src/components/option.jsx create mode 100644 src/data/initial-data.js diff --git a/src/components/list.jsx b/src/components/list.jsx index 77a2b9b..f2fc20e 100644 --- a/src/components/list.jsx +++ b/src/components/list.jsx @@ -1,52 +1,8 @@ import React, { Component } from 'react' import styled from 'styled-components' import { Droppable, Draggable } from 'react-beautiful-dnd' - -const Ul = styled.ul` - margin: 0; - padding: 0.5em; - list-style: none; - background: ${props => (props.isDragging ? 'turquoise' : 'white')}; - transition: background-color 0.25s ease; -` - -const Li = styled.li` - display: flex; - padding: 0.25em; - border: 1px solid black; - background-color: ${props => (props.isDragging ? 'purple' : 'white')}; - color: ${props => (props.isDragging ? 'white' : 'black')}; - align-items: center; - transition: background-color 0.25s ease; -` - -const PrefNumber = styled.span` - display: inline-block; - width: 2em; - height: 2em; - border: 2px solid black; - margin-right: 0.25em; - text-align: center; -` - -const Name = styled.span`` - -const Option = ({ val, draggableId, index }) => ( - <Draggable draggableId={draggableId} index={index}> - {(provided, snapshot) => ( - <Li - ref={provided.innerRef} - {...provided.draggableProps} - {...provided.dragHandleProps} - key={draggableId} - isDragging={snapshot.isDragging} - > - <PrefNumber>{index + 1}</PrefNumber> - {val.surname}, {val.given} - </Li> - )} - </Draggable> -) +import propTypes from 'prop-types' +import Option from './option' class List extends Component { constructor() { @@ -76,4 +32,9 @@ class List extends Component { } } +List.propTypes = { + voteData: propTypes.object.isRequired, + order: propTypes.array.isRequired, +} + export default List diff --git a/src/components/option.jsx b/src/components/option.jsx new file mode 100644 index 0000000..8180172 --- /dev/null +++ b/src/components/option.jsx @@ -0,0 +1,55 @@ +import styled from 'styled-components' +import { Draggable } from 'react-beautiful-dnd' +import propTypes from 'prop-types' + +const Ul = styled.ul` + margin: 0; + padding: 0.5em; + list-style: none; + background: ${props => (props.isDragging ? 'turquoise' : 'white')}; + transition: background-color 0.25s ease; +` + +const Li = styled.li` + display: flex; + padding: 0.25em; + border: 1px solid black; + background-color: ${props => (props.isDragging ? 'purple' : 'white')}; + color: ${props => (props.isDragging ? 'white' : 'black')}; + align-items: center; + transition: background-color 0.25s ease; +` + +const PrefNumber = styled.span` + display: inline-block; + width: 2em; + height: 2em; + border: 2px solid black; + margin-right: 0.25em; + text-align: center; +` + +const Option = ({ val, draggableId, index }) => ( + <Draggable draggableId={draggableId} index={index}> + {(provided, snapshot) => ( + <Li + ref={provided.innerRef} + {...provided.draggableProps} + {...provided.dragHandleProps} + key={draggableId} + isDragging={snapshot.isDragging} + > + <PrefNumber>{index + 1}</PrefNumber> + {val.surname}, {val.given} + </Li> + )} + </Draggable> +) + +Option.propTypes = { + val: propTypes.object.isRequired, + draggableId: propTypes.string, + index: propTypes.number, +} + +export default Option diff --git a/src/data/initial-data.js b/src/data/initial-data.js new file mode 100644 index 0000000..9d9311a --- /dev/null +++ b/src/data/initial-data.js @@ -0,0 +1,65 @@ +// Cells / candidate preferences +const initialCandidateData = { + 'dingo-party-bob-doggy': { + given: 'Bob', + surname: 'Doggy', + id: 'dingo-party-bob-doggy', + partyId: 'dpa', + description: 'Some desc here blah', + order: 1, + }, + 'dingo-party-frank-kangaroo': { + given: 'Frank', + surname: 'Kangaroo', + id: 'dingo-party-frank-kangaroo', + partyId: 'dpa', + description: 'Some desc here blah', + order: 2, + }, + 'akp-sue-koala': { + given: 'Sue', + surname: 'Koala', + id: 'dingo-party-sue-koala', + partyId: 'akp', + description: 'Some desc here blah', + order: 3, + }, + 'akp-marg-koala': { + given: 'Marg', + surname: 'Koala', + id: 'dingo-party-marg-koala', + partyId: 'akp', + description: 'Some desc here blah', + order: 4, + }, + 'akp-francois-budgie': { + given: 'Francois', + surname: 'Budgie', + id: 'dingo-party-francois-budgie', + partyId: 'akp', + description: 'Some desc here blah', + order: 5, + }, +} + +// Columns +const initialPartyData = { + akp: { + name: 'Australian Koala Party', + candidates: ['akp-francois-budgie', 'akp-marg-koala', 'akp-sue-koala'], + }, + dpa: { + name: 'The dingo party of Australia', + candidates: ['dingo-party-bob-doggy', 'dingo-party-frank-kangaroo'], + }, +} + +const initialOrderData = [ + 'dingo-party-bob-doggy', + 'dingo-party-frank-kangaroo', + 'akp-sue-koala', + 'akp-francois-budgie', + 'akp-marg-koala', +] + +export { initialOrderData, initialCandidateData, initialPartyData } diff --git a/src/templates/vote-page.js b/src/templates/vote-page.js index 20240e7..b599b6e 100644 --- a/src/templates/vote-page.js +++ b/src/templates/vote-page.js @@ -3,6 +3,11 @@ import { graphql } from 'gatsby' import { DragDropContext } from 'react-beautiful-dnd' import styled from 'styled-components' import List from '../components/list' +import { + initialCandidateData, + initialPartyData, + initialOrderData, +} from '../data/initial-data' import Result from '../components/result' import Layout from '../components/layout' @@ -37,77 +42,13 @@ const ColResult = styled.div` } ` -// Cells / candidate preferences -const initialData = { - 'dingo-party-bob-doggy': { - given: 'Bob', - surname: 'Doggy', - id: 'dingo-party-bob-doggy', - partyId: 'dpa', - description: 'Some desc here blah', - order: 1, - }, - 'dingo-party-frank-kangaroo': { - given: 'Frank', - surname: 'Kangaroo', - id: 'dingo-party-frank-kangaroo', - partyId: 'dpa', - description: 'Some desc here blah', - order: 2, - }, - 'akp-sue-koala': { - given: 'Sue', - surname: 'Koala', - id: 'dingo-party-sue-koala', - partyId: 'akp', - description: 'Some desc here blah', - order: 3, - }, - 'akp-marg-koala': { - given: 'Marg', - surname: 'Koala', - id: 'dingo-party-marg-koala', - partyId: 'akp', - description: 'Some desc here blah', - order: 4, - }, - 'akp-francois-budgie': { - given: 'Francois', - surname: 'Budgie', - id: 'dingo-party-francois-budgie', - partyId: 'akp', - description: 'Some desc here blah', - order: 5, - }, -} - -// Columns -const initialPartyData = { - akp: { - name: 'Australian Koala Party', - candidates: ['akp-francois-budgie', 'akp-marg-koala', 'akp-sue-koala'], - }, - dpa: { - name: 'The dingo party of Australia', - candidates: ['dingo-party-bob-doggy', 'dingo-party-frank-kangaroo'], - }, -} - -const initialOrder = [ - 'dingo-party-bob-doggy', - 'dingo-party-frank-kangaroo', - 'akp-sue-koala', - 'akp-francois-budgie', - 'akp-marg-koala', -] - export default class App extends Component { constructor() { super() this.state = { - data: initialData, + data: initialCandidateData, partyData: initialPartyData, - order: initialOrder, + order: initialOrderData, } this.onDragEnd = this.onDragEnd.bind(this) } @@ -166,6 +107,7 @@ export default class App extends Component { } } +// To Do - Wire in live data // export const query = graphql` // query($slug: String!) { // statesYaml(fields: { slug: { eq: $slug } }) { From 4b4cbaa554f8507a8118165cfb982edab1e707f3 Mon Sep 17 00:00:00 2001 From: Glade <gladekettle@gmail.com> Date: Fri, 12 Apr 2019 15:51:51 +1000 Subject: [PATCH 6/7] Cleaned code --- gatsby-node.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gatsby-node.js b/gatsby-node.js index bbac3b5..d2dfa28 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -61,7 +61,7 @@ exports.createPages = ({ graphql, actions }) => { }) }) - // Temporary Vote page creation before data + // Temporary Vote page creation before data is available createPage({ path: 'vote', component: path.resolve(`./src/templates/vote-page.js`), From 8f70610cd92e86e0b34298e174eeab47aeea5008 Mon Sep 17 00:00:00 2001 From: Glade <gladekettle@gmail.com> Date: Sat, 13 Apr 2019 15:46:51 +1000 Subject: [PATCH 7/7] Cleaned code - Added React import to jsx - Fix jsx compile error --- src/components/list.jsx | 52 +++++++++++++++++++-------------------- src/components/option.jsx | 9 +------ src/components/result.jsx | 4 +-- 3 files changed, 28 insertions(+), 37 deletions(-) diff --git a/src/components/list.jsx b/src/components/list.jsx index f2fc20e..dd20b0e 100644 --- a/src/components/list.jsx +++ b/src/components/list.jsx @@ -4,33 +4,33 @@ import { Droppable, Draggable } from 'react-beautiful-dnd' import propTypes from 'prop-types' import Option from './option' -class List extends Component { - constructor() { - super() - } +const Ul = styled.ul` + margin: 0; + padding: 0.5em; + list-style: none; + background: ${props => (props.isDragging ? 'turquoise' : 'white')}; + transition: background-color 0.25s ease; +` - render() { - return ( - <Droppable droppableId="basic"> - {(provided, snapshopt) => ( - <div ref={provided.innerRef} {...provided.droppableProps}> - <Ul isDragging={snapshopt.isDraggingOver}> - {this.props.order.map((val, ind) => ( - <Option - key={val} - draggableId={val} - index={ind} - val={this.props.voteData[val]} - /> - ))} - {provided.placeholder} - </Ul> - </div> - )} - </Droppable> - ) - } -} +const List = ({ order, voteData }) => ( + <Droppable droppableId="basic"> + {(provided, snapshopt) => ( + <div ref={provided.innerRef} {...provided.droppableProps}> + <Ul isDragging={snapshopt.isDraggingOver}> + {order.map((val, ind) => ( + <Option + key={val} + draggableId={val} + index={ind} + val={voteData[val]} + /> + ))} + {provided.placeholder} + </Ul> + </div> + )} + </Droppable> +) List.propTypes = { voteData: propTypes.object.isRequired, diff --git a/src/components/option.jsx b/src/components/option.jsx index 8180172..c37b685 100644 --- a/src/components/option.jsx +++ b/src/components/option.jsx @@ -1,15 +1,8 @@ +import React from 'react' import styled from 'styled-components' import { Draggable } from 'react-beautiful-dnd' import propTypes from 'prop-types' -const Ul = styled.ul` - margin: 0; - padding: 0.5em; - list-style: none; - background: ${props => (props.isDragging ? 'turquoise' : 'white')}; - transition: background-color 0.25s ease; -` - const Li = styled.li` display: flex; padding: 0.25em; diff --git a/src/components/result.jsx b/src/components/result.jsx index 246dbce..47a6ba8 100644 --- a/src/components/result.jsx +++ b/src/components/result.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import styled from 'styled-components' import propTypes from 'prop-types' import Candidate from './candidate' @@ -93,8 +93,6 @@ const Arrow = styled.span` const Result = ({ voteData, partyData }) => ( <VoteContainer> - {console.log(partyData)} - {console.log(Object.keys(partyData))} <Inner style={{ width: `${(Object.keys(partyData).length + 1) * 10}em` }} >