jcreek/SelectionWheel
1
0
Fork 0
mirror of https://github.com/jcreek/SelectionWheel.git synced 2026-07-13 03:03:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(#5): Improve styling and responsiveness

Browse Source
This commit is contained in:
Josh Creek
2022-10-08 16:20:26 +01:00
parent 43edb4062d
commit eb449b0e62
4 changed files with 285 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.ts
+11 -4
View File
@@ -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);