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..d2dfa28 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 is available + 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..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", @@ -828,6 +849,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 +1881,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 +3134,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 +3904,19 @@ } } }, + "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", + "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 +4028,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 +6184,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -6124,11 +6203,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 +6222,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 +6336,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -6262,6 +6347,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6274,17 +6360,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 +6390,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -6373,7 +6463,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -6383,6 +6474,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -6458,7 +6550,8 @@ }, "safe-buffer": { "version": "5.1.1", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -6488,6 +6581,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 +6599,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6543,11 +6638,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 +7103,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 +9762,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", @@ -12217,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", @@ -12294,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": { @@ -12384,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": { @@ -12433,11 +12574,62 @@ } } }, + "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", "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", @@ -13147,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" @@ -14261,6 +14453,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 +14518,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", @@ -14660,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", @@ -15287,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 a2fad0c..e6c98a5 100644 --- a/package.json +++ b/package.json @@ -5,21 +5,25 @@ "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", "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-helmet": "^5.2.0" + "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" }, "keywords": [ "gatsby" 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/layout.css b/src/components/layout.css deleted file mode 100644 index 68aa933..0000000 --- a/src/components/layout.css +++ /dev/null @@ -1,624 +0,0 @@ -html { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; -} -body { - margin: 0; -} -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; -} -audio, -canvas, -progress, -video { - display: inline-block; -} -audio:not([controls]) { - display: none; - height: 0; -} -progress { - vertical-align: baseline; -} -[hidden], -template { - display: none; -} -a { - background-color: transparent; - -webkit-text-decoration-skip: objects; -} -a:active, -a:hover { - outline-width: 0; -} -abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; -} -b, -strong { - font-weight: inherit; - font-weight: bolder; -} -dfn { - font-style: italic; -} -h1 { - font-size: 2em; - margin: 0.67em 0; -} -mark { - background-color: #ff0; - color: #000; -} -small { - font-size: 80%; -} -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sub { - bottom: -0.25em; -} -sup { - top: -0.5em; -} -img { - border-style: none; -} -svg:not(:root) { - overflow: hidden; -} -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} -figure { - margin: 1em 40px; -} -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} -button, -input, -optgroup, -select, -textarea { - font: inherit; - margin: 0; -} -optgroup { - font-weight: 700; -} -button, -input { - overflow: visible; -} -button, -select { - text-transform: none; -} -[type='reset'], -[type='submit'], -button, -html [type='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; -} -[type='button']:-moz-focusring, -[type='reset']:-moz-focusring, -[type='submit']:-moz-focusring, -button:-moz-focusring { - outline: 1px dotted ButtonText; -} -fieldset { - 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; -} -textarea { - overflow: auto; -} -[type='checkbox'], -[type='radio'] { - box-sizing: border-box; - padding: 0; -} -[type='number']::-webkit-inner-spin-button, -[type='number']::-webkit-outer-spin-button { - height: auto; -} -[type='search'] { - -webkit-appearance: textfield; - outline-offset: -2px; -} -[type='search']::-webkit-search-cancel-button, -[type='search']::-webkit-search-decoration { - -webkit-appearance: none; -} -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} -html { - font: 112.5%/1.45em georgia, serif; - box-sizing: border-box; - overflow-y: scroll; -} -* { - box-sizing: inherit; -} -*:before { - box-sizing: inherit; -} -*:after { - 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'; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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%; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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; -} -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; -} -b { - font-weight: bold; -} -strong { - font-weight: bold; -} -dt { - font-weight: bold; -} -th { - font-weight: bold; -} -li { - margin-bottom: calc(1.45rem / 2); -} -ol li { - padding-left: 0; -} -ul li { - padding-left: 0; -} -li > ol { - 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); -} -blockquote *:last-child { - margin-bottom: 0; -} -li *:last-child { - margin-bottom: 0; -} -p *:last-child { - margin-bottom: 0; -} -li > p { - margin-bottom: calc(1.45rem / 2); -} -code { - font-size: 0.85rem; - line-height: 1.45rem; -} -kbd { - font-size: 0.85rem; - line-height: 1.45rem; -} -samp { - font-size: 0.85rem; - line-height: 1.45rem; -} -abbr { - 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; -} -abbr[title] { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; - text-decoration: none; -} -thead { - 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); -} -th:first-child, -td:first-child { - padding-left: 0; -} -th:last-child, -td:last-child { - 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; -} -pre code { - background: none; - line-height: 1.42; -} -code:before, -code:after, -tt:before, -tt:after { - letter-spacing: -0.2em; - content: ' '; -} -pre code:before, -pre code:after, -pre tt:before, -pre tt:after { - content: ''; -} -@media only screen and (max-width: 480px) { - html { - font-size: 100%; - } -} diff --git a/src/components/layout.js b/src/components/layout.js index f1b6a12..cc4c46d 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -1,44 +1,56 @@ 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' +import './reset.css' -const Layout = ({ children }) => ( - ( - <> -
-
- {children} -
- © 2018, Built with Gatsby -
-
- - )} - /> +const Layout = ({ children, noColumn }) => ( + ( + <> + + + +
+
+ {children} +
+ © 2018, Built with{' '} + Gatsby +
+
+ + )} + /> ) Layout.propTypes = { - children: PropTypes.node.isRequired, + children: PropTypes.node.isRequired, } export default Layout diff --git a/src/components/list.jsx b/src/components/list.jsx new file mode 100644 index 0000000..dd20b0e --- /dev/null +++ b/src/components/list.jsx @@ -0,0 +1,40 @@ +import React, { Component } from 'react' +import styled from 'styled-components' +import { Droppable, Draggable } from 'react-beautiful-dnd' +import propTypes from 'prop-types' +import Option from './option' + +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 List = ({ order, voteData }) => ( + + {(provided, snapshopt) => ( +
+
    + {order.map((val, ind) => ( +
+
+ )} + +) + +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..c37b685 --- /dev/null +++ b/src/components/option.jsx @@ -0,0 +1,48 @@ +import React from 'react' +import styled from 'styled-components' +import { Draggable } from 'react-beautiful-dnd' +import propTypes from 'prop-types' + +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 }) => ( + + {(provided, snapshot) => ( +
  • + {index + 1} + {val.surname}, {val.given} +
    • + )} +     +) + +Option.propTypes = { + val: propTypes.object.isRequired, + draggableId: propTypes.string, + index: propTypes.number, +} + +export default Option diff --git a/src/components/reset.css b/src/components/reset.css new file mode 100644 index 0000000..22f9700 --- /dev/null +++ b/src/components/reset.css @@ -0,0 +1,624 @@ +html { + font-family: 'Roboto', sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +body { + margin: 0; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { + display: block; +} +audio, +canvas, +progress, +video { + display: inline-block; +} +audio:not([controls]) { + display: none; + height: 0; +} +progress { + vertical-align: baseline; +} +[hidden], +template { + display: none; +} +a { + background-color: transparent; + -webkit-text-decoration-skip: objects; +} +a:active, +a:hover { + outline-width: 0; +} +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} +b, +strong { + font-weight: inherit; + font-weight: bolder; +} +dfn { + font-style: italic; +} +h1 { + font-size: 2em; + margin: 0.67em 0; +} +mark { + background-color: #ff0; + color: #000; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +img { + border-style: none; +} +svg:not(:root) { + overflow: hidden; +} +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +figure { + margin: 1em 40px; +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} +button, +input, +optgroup, +select, +textarea { + font: inherit; + margin: 0; +} +optgroup { + font-weight: 700; +} +button, +input { + overflow: visible; +} +button, +select { + text-transform: none; +} +[type='reset'], +[type='submit'], +button, +html [type='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; +} +[type='button']:-moz-focusring, +[type='reset']:-moz-focusring, +[type='submit']:-moz-focusring, +button:-moz-focusring { + outline: 1px dotted ButtonText; +} +fieldset { + 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; +} +textarea { + overflow: auto; +} +[type='checkbox'], +[type='radio'] { + box-sizing: border-box; + padding: 0; +} +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + height: auto; +} +[type='search'] { + -webkit-appearance: textfield; + outline-offset: -2px; +} +[type='search']::-webkit-search-cancel-button, +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} +html { + font: 112.5%/1.45em georgia, serif; + box-sizing: border-box; + overflow-y: scroll; +} +* { + box-sizing: inherit; +} +*:before { + box-sizing: inherit; +} +*:after { + 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'; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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%; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +b { + font-weight: bold; +} +strong { + font-weight: bold; +} +dt { + font-weight: bold; +} +th { + font-weight: bold; +} +li { + margin-bottom: calc(1.45rem / 2); +} +ol li { + padding-left: 0; +} +ul li { + padding-left: 0; +} +li > ol { + 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); +} +blockquote *:last-child { + margin-bottom: 0; +} +li *:last-child { + margin-bottom: 0; +} +p *:last-child { + margin-bottom: 0; +} +li > p { + margin-bottom: calc(1.45rem / 2); +} +code { + font-size: 0.85rem; + line-height: 1.45rem; +} +kbd { + font-size: 0.85rem; + line-height: 1.45rem; +} +samp { + font-size: 0.85rem; + line-height: 1.45rem; +} +abbr { + 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; +} +abbr[title] { + border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); + cursor: help; + text-decoration: none; +} +thead { + 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); +} +th:first-child, +td:first-child { + padding-left: 0; +} +th:last-child, +td:last-child { + 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; +} +pre code { + background: none; + line-height: 1.42; +} +code:before, +code:after, +tt:before, +tt:after { + letter-spacing: -0.2em; + content: ' '; +} +pre code:before, +pre code:after, +pre tt:before, +pre tt:after { + content: ''; +} +@media only screen and (max-width: 480px) { + html { + font-size: 100%; + } +} diff --git a/src/components/result.jsx b/src/components/result.jsx new file mode 100644 index 0000000..47a6ba8 --- /dev/null +++ b/src/components/result.jsx @@ -0,0 +1,154 @@ +import React from 'react' +import styled from 'styled-components' +import propTypes from 'prop-types' +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 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 Result = ({ voteData, partyData }) => ( + + + + + + 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) + + + {Object.keys(partyData).map((val, ind) => ( + + {val} {partyData[val].name} + + ))} + + + + + <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). + + + {Object.keys(partyData).map((val, ind) => ( + + {val} + {/* {partyData[val].name} */} + {val} + {/*Loop over Candidate Data later */} + {partyData[val].candidates.map((cVal, c) => ( + + ))} + + ))} + + + +) + +Result.propTypes = { + voteData: propTypes.object.isRequired, + partyData: propTypes.object.isRequired, +} + +export default Result 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/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..b599b6e --- /dev/null +++ b/src/templates/vote-page.js @@ -0,0 +1,117 @@ +import React, { Component } from 'react' +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' + +const FullWidth = styled.div` + width: 100%; + padding: 1em; +` + +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: 100%; + 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); + } +` + +export default class App extends Component { + constructor() { + super() + this.state = { + data: initialCandidateData, + partyData: initialPartyData, + order: initialOrderData, + } + 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 ( + + + +
    +

    Vote

    +
    + + +

    1. Set order here

    + +     + +

    2. What your vote looks like here

    + +     +     +     +     +     + ) + } +} + +// To Do - Wire in live data +// export const query = graphql` +// query($slug: String!) { +// statesYaml(fields: { slug: { eq: $slug } }) { +// name +// } +// } +// `