From eb449b0e62411fdb8b9f6332aecc9a22e7beb895 Mon Sep 17 00:00:00 2001 From: Josh Creek Date: Sat, 8 Oct 2022 16:20:26 +0100 Subject: [PATCH 1/5] feat(#5): Improve styling and responsiveness --- src/index.ts | 15 ++- src/loadServiceWorker.ts | 2 +- src/styles/main.scss | 269 ++++++++++++++++++++++++++++++++++++--- src/template.html | 32 ++++- 4 files changed, 285 insertions(+), 33 deletions(-) diff --git a/src/index.ts b/src/index.ts index 4f53ff0..5614fc7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,6 +4,7 @@ import loadServiceWorker from './loadServiceWorker'; require('./assets/favicon.ico'); require('./assets/android-chrome-192x192.png'); require('./assets/android-chrome-512x512.png'); +require('./styles/main.scss'); const padding = { top: 20, @@ -11,8 +12,11 @@ const padding = { bottom: 0, left: 0, }; -const w = 500 - padding.left - padding.right; -const h = 500 - padding.top - padding.bottom; + +const baseSpinnerSizePx = 800; + +const w = baseSpinnerSizePx - padding.left - padding.right; +const h = baseSpinnerSizePx - padding.top - padding.bottom; const r = Math.min(w, h) / 2; let rotation = 0; let oldrotation = 0; @@ -76,8 +80,8 @@ function drawWheel() { .select('#chart') .append('svg') .data([data]) - .attr('width', w + padding.left + padding.right) - .attr('height', h + padding.top + padding.bottom); + .attr('preserveAspectRatio', 'xMinYMin meet') + .attr('viewBox', `0 0 ${w + padding.left + padding.right} ${h + padding.top + padding.bottom}`); const container = svg .append('g') .attr('class', 'chartholder') @@ -192,9 +196,12 @@ function startSpinning() { // Make the elements const chartElement = document.createElement('div'); chartElement.setAttribute('id', 'chart'); + chartElement.setAttribute('class', 'spinner-items'); + document.getElementById('spinner-container').appendChild(chartElement); document.getElementById('spinner-container').appendChild(chartElement); const questionElement = document.createElement('div'); questionElement.setAttribute('id', 'question'); + questionElement.setAttribute('class', 'spinner-items'); const h1Element = document.createElement('h1'); questionElement.appendChild(h1Element); document.getElementById('spinner-container').appendChild(questionElement); diff --git a/src/loadServiceWorker.ts b/src/loadServiceWorker.ts index 323c629..dd378ce 100644 --- a/src/loadServiceWorker.ts +++ b/src/loadServiceWorker.ts @@ -2,7 +2,7 @@ export default function loadServiceWorker() { let deferredPrompt; window.addEventListener('beforeinstallprompt', (e) => { - const installApp = document.getElementById('install-offline-app'); + const installApp = document.getElementById('install-app-btn-container'); installApp.addEventListener('click', async () => { if (deferredPrompt !== null) { diff --git a/src/styles/main.scss b/src/styles/main.scss index 9bca362..9c9aa39 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,34 +1,261 @@ +body { + margin: 0; + font-family: Arial, sans-serif; +} + +.topbar-container { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-around; + align-items: flex-start; + align-content: flex-start; + background-color: #ff8800; + margin-bottom: 25px; + gap: 5px; +} + +.topbar-container h1 { + color: white; + font-family: 'Fuzzy Bubbles', cursive; + font-weight: 700; + margin-block-start: 0.2em; + margin-block-end: 0.2em; + + a { + color: white; + } + + a:link { + text-decoration: none; + } +} +.topbar-container p { + margin-block-start: 0.2em; + margin-block-end: 0.2em; +} + +.topbar-items:nth-child(1) { + display: block; + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + align-self: flex-start; + order: 0; +} + +.topbar-items:nth-child(2) { + display: block; + flex-grow: 0; + flex-shrink: 1; + flex-basis: 200px; + align-self: center; + order: 0; +} + +#input-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + align-content: center; + gap: 25px; +} + +.input-items:nth-child(1) { + display: block; + flex-grow: 0; + flex-shrink: 1; + flex-basis: 500px; + align-self: auto; + order: 0; +} + +.input-items:nth-child(2) { + display: block; + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + align-self: center; + order: 0; +} + +#input-lines { + max-width: 100%; +} + +#start-over { + position: absolute; + top: 100px; + left: auto; +} + +#spinner-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + align-content: center; +} + +.spinner-items:nth-child(1) { + display: block; + flex-grow: 0; + flex-shrink: 1; + flex-basis: 800px; + align-self: auto; + order: 0; +} + +.spinner-items:nth-child(2) { + display: block; + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + align-self: auto; + order: 0; + width: 100%; +} + text{ - font-family:Helvetica, Arial, sans-serif; - font-size:11px; + font-family: Arial, sans-serif; + font-size:35px; pointer-events:none; } -#chart{ - position:absolute; - width:500px; - height:500px; - top:0; - left:0; -} -#question{ - position: absolute; - width:400px; - height:500px; - top:0; - left:520px; +#chart{ + max-width:800px; + margin-left: auto; + margin-right: auto; } + #question h1{ font-size: 50px; font-weight: bold; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - position: absolute; - padding: 0; - margin: 0; - top:50%; + font-family: Arial, sans-serif; -webkit-transform:translate(0,-50%); transform:translate(0,-50%); + text-align: center; } -#install-offline-app { +#install-app-btn-container { display: none; +} + +.footer-container { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + text-align: center; + color: #423E37; + padding-bottom: 10px; + background-color: white; +} + +.footer-container hr { + max-width: 500px; + border-top: 0.5px solid #423E37; + margin-left: auto; + margin-right: auto; +} + +.footer-container a, #privacy-container a { + color: #423E37; +} + +.footer-container a:hover, #privacy-container a:hover { + color: #81796c; +} + +#privacy-container { + margin-left: auto; + margin-right: auto; + max-width: 800px; + margin-bottom: 50px; +} + +/* Buttons */ + +.button { + appearance: none; + border: 1px solid rgba(27, 31, 35, .15); + border-radius: 6px; + box-shadow: rgba(27, 31, 35, .1) 0 1px 0; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-block; + font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + font-size: 14px; + font-weight: 600; + line-height: 20px; + padding: 6px 16px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: middle; + white-space: nowrap; +} + +.button:focus:not(:focus-visible):not(.focus-visible) { + box-shadow: none; + outline: none; +} + +.button:disabled { + border-color: rgba(27, 31, 35, .1); + color: rgba(255, 255, 255, .8); + cursor: default; +} + +.button:focus { + outline: none; +} + +.button-green { + background-color: #2ea44f; +} + +.button-green:hover { + background-color: #2c974b; +} + +.button-green:focus { + box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px; + outline: none; +} + +.button-green:disabled { + background-color: #94d3a2; +} + +.button-green:active { + background-color: #298e46; + box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset; +} + +.button-black { + background-color: #423E37; +} + +.button-black:hover { + background-color: #2e2b26; +} + +.button-blue { + background-color: #388697; +} + +.button-blue:hover { + background-color: #275d69; +} + +.button-white { + background-color: #FFFFFF; + color: black; } \ No newline at end of file diff --git a/src/template.html b/src/template.html index 9cc7394..5c7f539 100644 --- a/src/template.html +++ b/src/template.html @@ -18,19 +18,37 @@ <%= htmlWebpackPlugin.options.title %> + + + + +
+

Selection Wheel

+

+ +

+
+ + +
- - + + -

- -

+ \ No newline at end of file From 797d04c40342516493c85fa163f63b009995cc2f Mon Sep 17 00:00:00 2001 From: Josh Creek Date: Sat, 8 Oct 2022 16:20:46 +0100 Subject: [PATCH 2/5] feat(*): Add privacy policy --- src/privacy.html | 115 ++++++++++++++++++++++++++++++++++++++++++++++ webpack.common.js | 6 +++ 2 files changed, 121 insertions(+) create mode 100644 src/privacy.html diff --git a/src/privacy.html b/src/privacy.html new file mode 100644 index 0000000..ec20e79 --- /dev/null +++ b/src/privacy.html @@ -0,0 +1,115 @@ + + + + + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + + + + + + +
+

Selection Wheel

+

+ +

+
+ +
+

Privacy Policy

+

This Website stores none of your information remotely. The only information stored locally is a saved list of your input names, on your own device.

+

What data do we collect?

+

None.

+

How do we collect your data?

+

I don't.

+

How will we use your data?

+

I won't.

+

How do we store your data?

+

I don't.

+

Marketing

+

I don't market anything to you.

+

What are your data protection rights?

+

I would like to make sure you are fully aware of all of your data protection rights. Every user is entitled to + the following:

+
    +
  • +

    The right to access - You have the right to request copies of your personal data. We may + charge you a small fee for this service.

    +
    • +
  • +

    The right to rectification - You have the right to request that we correct any information you + believe is inaccurate. You also have the right to request we complete the information you + believe is incomplete.

    +
    • +
  • +

    The right to erasure - You have the right to request that we erase your personal data, under + certain conditions.

    +
    • +
  • +

    The right to restrict processing - You have the right to request that we restrict the processing + of your personal data, under certain conditions.

    +
    • +
  • +

    The right to object to processing - You have the right to object to our processing of your + personal data, under certain conditions.

    +
    • +
  • +

    The right to data portability - You have the right to request that we transfer the data that we + have collected to another organization, or directly to you, under certain conditions.

    +
    • +
+

If you make a request, I have one month to respond to you. If you would like to exercise any of these rights, + please contact me via Twitter.

+

What are cookies?

+

Cookies are text files placed on your computer to collect standard Internet log information and visitor behavior + information. When you visit our websites, we may collect information from you automatically through cookies or + similar technology

+

For further information, visit allaboutcookies.org.

+

How do we use cookies?

+

I don't.

+

What types of cookies do we use?

+

None.

+

How to manage your cookies

+

You can set your browser not to accept cookies, and the above website tells you how to remove cookies from your + browser. However, in a few cases, some of our website features may not function as a result.

+

Privacy policies of other websites +

This website contains links to other websites. My privacy policy applies only to this website, so if you click on + a link to another website, you should read their privacy policy.

+

Changes to our privacy policy +

I keep my privacy policy under regular review and places any updates on this web page. This privacy policy was + last updated on 8th October 2022.

+

How to contact us

+

If you have any questions about this privacy policy, the data I hold on you, or you would like to exercise one of + your data protection rights, please do not hesitate to contact me via Twitter.

+

How to contact the appropriate authorities

+

Should you wish to report a complaint or if you feel that I have not addressed your concern in a satisfactory + manner, you may contact the Information Commissioner's Office.

+
+ + + + + \ No newline at end of file diff --git a/webpack.common.js b/webpack.common.js index 653ebb9..c964080 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -86,6 +86,12 @@ module.exports = { filename: 'index.html', template: 'src/template.html', }), + new HtmlWebpackPlugin({ + inject: 'body', + title: 'Selection Wheel - the funnest way to make decisions', + filename: 'privacy-policy.html', + template: 'src/privacy.html', + }), new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]), new WebpackManifestPlugin(options), ], From 29b48227320c466e399e7297fe7edca70bcabac6 Mon Sep 17 00:00:00 2001 From: Josh Creek Date: Sat, 8 Oct 2022 16:21:00 +0100 Subject: [PATCH 3/5] feat(#5): Add Google font caching --- src/serviceWorker.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/serviceWorker.js b/src/serviceWorker.js index 8e30409..c9b8a4c 100644 --- a/src/serviceWorker.js +++ b/src/serviceWorker.js @@ -1,6 +1,6 @@ import { precacheAndRoute } from 'workbox-precaching'; import * as navigationPreload from 'workbox-navigation-preload'; -import { NetworkFirst, CacheFirst } from 'workbox-strategies'; +import { NetworkFirst, CacheFirst, StaleWhileRevalidate } from 'workbox-strategies'; import { registerRoute, NavigationRoute, Route } from 'workbox-routing'; // Precache the manifest @@ -20,3 +20,10 @@ const imageAssetRoute = new Route(({ request }) => request.destination === 'imag registerRoute(navigationRoute); registerRoute(imageAssetRoute); + +registerRoute( + ({ url }) => url.origin === 'https://fonts.googleapis.com', + new StaleWhileRevalidate({ + cacheName: 'google-fonts-stylesheets', + }), +); From c7f6d43bdcce867db9127e15a89b975557d1d3e7 Mon Sep 17 00:00:00 2001 From: Josh Creek Date: Sat, 8 Oct 2022 16:21:30 +0100 Subject: [PATCH 4/5] feat(#7): Add start over button --- src/index.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/index.ts b/src/index.ts index 5614fc7..84b19ad 100644 --- a/src/index.ts +++ b/src/index.ts @@ -175,6 +175,10 @@ function drawWheel() { makeArrowAndCircle(svg, container); } +function startOver() { + stopSpinning(); +} + function startSpinning() { const textArea = document.getElementById('input-lines'); const inputData = textArea.value.trim() @@ -198,6 +202,13 @@ function startSpinning() { chartElement.setAttribute('id', 'chart'); chartElement.setAttribute('class', 'spinner-items'); document.getElementById('spinner-container').appendChild(chartElement); + const startOverElement = document.createElement('button'); + startOverElement.setAttribute('id', 'start-over'); + startOverElement.setAttribute('class', 'button button-blue'); + startOverElement.setAttribute('role', 'button'); + startOverElement.onclick = startOver; + startOverElement.textContent = 'Start over'; + chartElement.appendChild(startOverElement); document.getElementById('spinner-container').appendChild(chartElement); const questionElement = document.createElement('div'); questionElement.setAttribute('id', 'question'); From f5c404f58baec941dfbabad423a7bc2e8b0b33c4 Mon Sep 17 00:00:00 2001 From: Josh Creek Date: Sat, 8 Oct 2022 16:26:01 +0100 Subject: [PATCH 5/5] feat(#5): Change privacy policy title --- webpack.common.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.common.js b/webpack.common.js index c964080..d1977a8 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -88,7 +88,7 @@ module.exports = { }), new HtmlWebpackPlugin({ inject: 'body', - title: 'Selection Wheel - the funnest way to make decisions', + title: 'Privacy Policy', filename: 'privacy-policy.html', template: 'src/privacy.html', }),