jcreek/SelectionWheel
1
0
Fork 0
mirror of https://github.com/jcreek/SelectionWheel.git synced 2026-07-12 18:53:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10 from jcreek/5-add-nicer-styling-overall

Browse Source 
5 add nicer styling overall
This commit is contained in:
Josh Creek
2022-10-08 16:27:07 +01:00
committed by GitHub
parent 43edb4062d f5c404f58b
commit b5e578acdc
7 changed files with 425 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.ts
+22 -4
View File
@@ -4,6 +4,7 @@ import loadServiceWorker from './loadServiceWorker';
require('./assets/favicon.ico'); require('./assets/favicon.ico');
require('./assets/android-chrome-192x192.png'); require('./assets/android-chrome-192x192.png');
require('./assets/android-chrome-512x512.png'); require('./assets/android-chrome-512x512.png');
require('./styles/main.scss');
const padding = { const padding = {
top: 20, top: 20,
@@ -11,8 +12,11 @@ const padding = {
bottom: 0, bottom: 0,
left: 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; const r = Math.min(w, h) / 2;
let rotation = 0; let rotation = 0;
let oldrotation = 0; let oldrotation = 0;
@@ -76,8 +80,8 @@ function drawWheel() {
.select('#chart') .select('#chart')
.append('svg') .append('svg')
.data([data]) .data([data])
.attr('width', w + padding.left + padding.right) .attr('preserveAspectRatio', 'xMinYMin meet')
.attr('height', h + padding.top + padding.bottom); .attr('viewBox', `0 0 ${w + padding.left + padding.right} ${h + padding.top + padding.bottom}`);
const container = svg const container = svg
.append('g') .append('g')
.attr('class', 'chartholder') .attr('class', 'chartholder')
@@ -171,6 +175,10 @@ function drawWheel() {
makeArrowAndCircle(svg, container); makeArrowAndCircle(svg, container);
} }
function startOver() {
stopSpinning();
}
function startSpinning() { function startSpinning() {
const textArea = <HTMLInputElement>document.getElementById('input-lines'); const textArea = <HTMLInputElement>document.getElementById('input-lines');
const inputData = textArea.value.trim() const inputData = textArea.value.trim()
@@ -192,9 +200,19 @@ function startSpinning() {
// Make the elements // Make the elements
const chartElement = document.createElement('div'); const chartElement = document.createElement('div');
chartElement.setAttribute('id', 'chart'); 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); document.getElementById('spinner-container').appendChild(chartElement);
const questionElement = document.createElement('div'); const questionElement = document.createElement('div');
questionElement.setAttribute('id', 'question'); questionElement.setAttribute('id', 'question');
questionElement.setAttribute('class', 'spinner-items');
const h1Element = document.createElement('h1'); const h1Element = document.createElement('h1');
questionElement.appendChild(h1Element); questionElement.appendChild(h1Element);
document.getElementById('spinner-container').appendChild(questionElement); document.getElementById('spinner-container').appendChild(questionElement);
src/loadServiceWorker.ts
+1 -1
View File
@@ -2,7 +2,7 @@ export default function loadServiceWorker() {
let deferredPrompt; let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => { window.addEventListener('beforeinstallprompt', (e) => {
const installApp = document.getElementById('install-offline-app'); const installApp = document.getElementById('install-app-btn-container');
installApp.addEventListener('click', async () => { installApp.addEventListener('click', async () => {
if (deferredPrompt !== null) { if (deferredPrompt !== null) {
src/privacy.html
+115
View File
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EZ2WT7NQMK"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-EZ2WT7NQMK');
</script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A fun and simple selection wheel - input names and get click to select them at random.">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="manifest" href="<%= require('../src/assets/manifest.webmanifest') %>" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="topbar-container">
<div class="topbar-items"><h1><a href="/">Selection Wheel</a></h1></div>
<p id="install-app-btn-container" class="topbar-items">
<button id="install-offline-app" class="button button-black" role="button">
<span>Install the app (you can even use it offline!)</span>
</button>
</p>
</header>
<div id="privacy-container">
<h1>Privacy Policy</h1>
<p>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.</p>
<h2>What data do we collect?</h2>
<p>None.</p>
<h2>How do we collect your data?</h2>
<p>I don't.</p>
<h2>How will we use your data?</h2>
<p>I won't.</p>
<h2>How do we store your data?</h2>
<p>I don't.</p>
<h2>Marketing</h2>
<p>I don't market anything to you.</p>
<h2>What are your data protection rights?</h2>
<p>I would like to make sure you are fully aware of all of your data protection rights. Every user is entitled to
the following:</p>
<ul>
<li>
<p>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.</p>
</li>
<li>
<p>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.</p>
</li>
<li>
<p>The right to erasure - You have the right to request that we erase your personal data, under
certain conditions.</p>
</li>
<li>
<p>The right to restrict processing - You have the right to request that we restrict the processing
of your personal data, under certain conditions.</p>
</li>
<li>
<p>The right to object to processing - You have the right to object to our processing of your
personal data, under certain conditions.</p>
</li>
<li>
<p>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.</p>
</li>
</ul>
<p>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 <a href="https://www.twitter.com/jcreek23">Twitter</a>.</p>
<h2 >What are cookies?</h2>
<p>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</p>
<p>For further information, visit <a href="https://allaboutcookies.org">allaboutcookies.org</a>.</p>
<h2 >How do we use cookies?</h2>
<p>I don't.</p>
<h2>What types of cookies do we use?</h2>
<p>None.</p>
<h2>How to manage your cookies</h2>
<p>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.</p>
<h2></h2>Privacy policies of other websites</h2>
<p>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.</p>
<h2></h2>Changes to our privacy policy</h2>
<p>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.</p>
<h2>How to contact us</h2>
<p>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 <a href="https://www.twitter.com/jcreek23">Twitter</a>.</p>
<h2>How to contact the appropriate authorities</h2>
<p>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.</p>
</div>
<footer class="footer-container">
<hr>
<span class="footer-items">Copyright &copy; 2022 Josh Creek</span>
<span> | </span>
<span class="footer-items"><a href="/privacy-policy.html">Privacy Policy</a></span>
</footer>
</body>
</html>
src/serviceWorker.js
+8 -1
View File
@@ -1,6 +1,6 @@
import { precacheAndRoute } from 'workbox-precaching'; import { precacheAndRoute } from 'workbox-precaching';
import * as navigationPreload from 'workbox-navigation-preload'; 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'; import { registerRoute, NavigationRoute, Route } from 'workbox-routing';
// Precache the manifest // Precache the manifest
@@ -20,3 +20,10 @@ const imageAssetRoute = new Route(({ request }) => request.destination === 'imag
registerRoute(navigationRoute); registerRoute(navigationRoute);
registerRoute(imageAssetRoute); registerRoute(imageAssetRoute);
registerRoute(
({ url }) => url.origin === 'https://fonts.googleapis.com',
new StaleWhileRevalidate({
cacheName: 'google-fonts-stylesheets',
}),
);
src/styles/main.scss
+248 -21
View File
@@ -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{ text{
font-family:Helvetica, Arial, sans-serif; font-family: Arial, sans-serif;
font-size:11px; font-size:35px;
pointer-events:none; pointer-events:none;
} }
#chart{ #chart{
position:absolute; max-width:800px;
width:500px; margin-left: auto;
height:500px; margin-right: auto;
top:0;
left:0;
}
#question{
position: absolute;
width:400px;
height:500px;
top:0;
left:520px;
} }
#question h1{ #question h1{
font-size: 50px; font-size: 50px;
font-weight: bold; font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: Arial, sans-serif;
position: absolute;
padding: 0;
margin: 0;
top:50%;
-webkit-transform:translate(0,-50%); -webkit-transform:translate(0,-50%);
transform:translate(0,-50%); transform:translate(0,-50%);
text-align: center;
} }
#install-offline-app { #install-app-btn-container {
display: none; 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;
} }
src/template.html
+25 -7
View File
@@ -18,19 +18,37 @@
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="manifest" href="<%= require('../src/assets/manifest.webmanifest') %>" /> <link rel="manifest" href="<%= require('../src/assets/manifest.webmanifest') %>" />
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<header class="topbar-container">
<div class="topbar-items"><h1><a href="/">Selection Wheel</a></h1></div>
<p id="install-app-btn-container" class="topbar-items">
<button id="install-offline-app" class="button button-black" role="button">
<span>Install the app (you can even use it offline!)</span>
</button>
</p>
</header>
<div id="spinner-container"> <div id="spinner-container">
</div> </div>
<textarea id="input-lines" rows="15" cols="60" name="text" <div id="input-container">
<textarea id="input-lines" class="input-items" rows="15" cols="60" name="text"
placeholder="Enter names to be shuffled, one per line. Leave this area empty in order to use a default set of generated names."></textarea> placeholder="Enter names to be shuffled, one per line. Leave this area empty in order to use a default set of generated names."></textarea>
<button id="startSpinning">Start spinning</button> <button id="startSpinning" class="input-items button button-green" role="button">Start spinning</button>
</div>
<p id="install-app-btn-container"> <footer class="footer-container">
<button id="install-offline-app" class="btn btn-secondary btn-xs"> <hr>
<span>Install the app (you can even use it offline!)</span> <span class="footer-items">Copyright &copy; 2022 Josh Creek</span>
</button> <span> | </span>
</p> <span class="footer-items"><a href="/privacy-policy.html">Privacy Policy</a></span>
</footer>
</body> </body>
</html> </html>
webpack.common.js
+6
View File
@@ -86,6 +86,12 @@ module.exports = {
filename: 'index.html', filename: 'index.html',
template: 'src/template.html', template: 'src/template.html',
}), }),
new HtmlWebpackPlugin({
inject: 'body',
title: 'Privacy Policy',
filename: 'privacy-policy.html',
template: 'src/privacy.html',
}),
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]), new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]),
new WebpackManifestPlugin(options), new WebpackManifestPlugin(options),
], ],