Skip to content
Snippets Groups Projects
Commit 0aedb6dc authored by Daniel's avatar Daniel
Browse files

small design fixes

parent af855b93
No related branches found
No related tags found
No related merge requests found
Pipeline #223592 passed
...@@ -2,16 +2,15 @@ FROM node:18-alpine ...@@ -2,16 +2,15 @@ FROM node:18-alpine
WORKDIR /app WORKDIR /app
RUN npm create vite@latest sorting-visualizer -- --template react &&\ RUN apk update && apk add --no-cache bash findutils &&\
apk update && apk add --no-cache bash findutils &&\
rm -rf /var/cache/apk/* rm -rf /var/cache/apk/*
WORKDIR /app/sorting-visualizer WORKDIR /app/sorting-visualizer
RUN rm -rf src/App.css src/App.jsx src/assets src/index.css
COPY package-lock.json . COPY package-lock.json .
COPY package.json . COPY package.json .
RUN npm install RUN npm install
RUN rm -rf src/App.css src/App.jsx src/assets src/index.css
COPY src src/ COPY src src/
COPY index.html . COPY index.html .
......
...@@ -20,7 +20,6 @@ body { ...@@ -20,7 +20,6 @@ body {
.sorted { .sorted {
background-color: deeppink; background-color: deeppink;
animation: ScaleAnimation 0.5s ease-in-out; animation: ScaleAnimation 0.5s ease-in-out;
} }
.finished { .finished {
...@@ -30,7 +29,6 @@ body { ...@@ -30,7 +29,6 @@ body {
margin: 2px; margin: 2px;
display: inline-block; display: inline-block;
animation: GreenScaleAnimation 1s ease-in; animation: GreenScaleAnimation 1s ease-in;
} }
.range-slider { .range-slider {
...@@ -45,13 +43,11 @@ body { ...@@ -45,13 +43,11 @@ body {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
#startButton { #startButton {
height: 78%; height: 78%;
width: 85px; width: 85px;
font-size: 12px;
margin: 10px; margin: 10px;
background: #1abc9c; background: #1abc9c;
text-align: center; text-align: center;
...@@ -60,10 +56,9 @@ body { ...@@ -60,10 +56,9 @@ body {
border-radius: 5px; border-radius: 5px;
border: none; border: none;
color: white; color: white;
font-size: 14px; font-size: 16px;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-weight: bold; font-weight: bold;
} }
button:active { button:active {
...@@ -73,14 +68,13 @@ button:active { ...@@ -73,14 +68,13 @@ button:active {
.Label { .Label {
margin: 10px; margin: 10px;
font-size: 15px; font-size: 16px;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-weight: bold; font-weight: normal;
color: white; color: white;
} }
.DivArray { .DivArray {
transform: rotate(180deg);
transform: scaleY(-1); transform: scaleY(-1);
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
...@@ -94,7 +88,7 @@ button:active { ...@@ -94,7 +88,7 @@ button:active {
background-color: #34495e; background-color: #34495e;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
margin-top: 15px; margin-top: 3px;
} }
...@@ -115,14 +109,16 @@ button:active { ...@@ -115,14 +109,16 @@ button:active {
border: none; border: none;
border-radius: 0px; border-radius: 0px;
color: white; color: white;
fontSize: 14px; font-size: 16px;
fontWeight: normal; font-weight: normal;
padding: 0; padding: 0;
height: 100%; height: 100%;
display: flex; display: flex;
alignItems: center;
place-items: center; place-items: center;
margin-inline: 10px; margin-inline: 10px;
justify-content: center;
width: 195px;
transition: none;
} }
#dropdown:hover { #dropdown:hover {
......
...@@ -6,7 +6,6 @@ import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css'; ...@@ -6,7 +6,6 @@ import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
import {Dropdown} from 'react-bootstrap'; import {Dropdown} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
function SortingVisualizer() { function SortingVisualizer() {
const moduloFive = ((window.innerWidth / 45)).toFixed(0) % 5; const moduloFive = ((window.innerWidth / 45)).toFixed(0) % 5;
...@@ -95,7 +94,7 @@ function SortingVisualizer() { ...@@ -95,7 +94,7 @@ function SortingVisualizer() {
<> <>
<div className='Container'> <div className='Container'>
<div id='ToolBar'> <div id='ToolBar'>
<div className="Label">How many Bars?</div> <div className="Label">How many bars?</div>
<SliderWithInputFormControl style={{className: 'range-slider'}}/> <SliderWithInputFormControl style={{className: 'range-slider'}}/>
<input type='number' max={100} min={0} disabled={sorting} <input type='number' max={100} min={0} disabled={sorting}
onChange={changeEvent => { onChange={changeEvent => {
...@@ -106,6 +105,8 @@ function SortingVisualizer() { ...@@ -106,6 +105,8 @@ function SortingVisualizer() {
}} defaultValue={BarNumber} }} defaultValue={BarNumber}
value={BarNumber} style={{ value={BarNumber} style={{
width: '42px', width: '42px',
fontfamily: 'Arial sans-serif',
fontSize:'16px',
margin: '10px', margin: '10px',
borderRadius: '5px', borderRadius: '5px',
border: 'none', border: 'none',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment