Merge remote-tracking branch 'origin/frontend-better'

master
Wilco Kruijer 5 years ago
commit 738356e209
  1. 825
      frontend/package-lock.json
  2. 1
      frontend/package.json
  3. 38
      frontend/src/App.css
  4. 38
      frontend/src/App.sass
  5. 2
      frontend/src/App.tsx
  6. 2
      frontend/src/components/Lobby.tsx
  7. 16
      frontend/src/css/lobby.css
  8. 14
      frontend/src/css/lobby.sass
  9. 55
      frontend/src/index.css
  10. 53
      frontend/src/index.sass
  11. 2
      frontend/src/index.tsx

File diff suppressed because it is too large Load Diff

@ -11,6 +11,7 @@
"@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5",
"antd": "^3.26.9",
"node-sass": "^4.13.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.1",

@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@ -0,0 +1,38 @@
.App
text-align: center
.App-logo
height: 40vmin
pointer-events: none
@media (prefers-reduced-motion: no-preference)
.App-logo
animation: App-logo-spin infinite 20s linear
.App-header
background-color: #282c34
min-height: 100vh
display: flex
flex-direction: column
align-items: center
justify-content: center
font-size: calc(10px + 2vmin)
color: white
.App-link
color: #61dafb
@keyframes App-logo-spin
from
transform: rotate(0deg)
to
transform: rotate(360deg)

@ -1,5 +1,5 @@
import React, {useEffect, useRef, useState} from 'react';
import './App.css';
import './App.sass';
import logo from "./via-logo.svg"
import {Row} from "antd"
import socket from "./util/socket";

@ -1,7 +1,7 @@
import React, {useEffect, useState} from 'react';
import {Card, Col, InputNumber, Row} from "antd"
import socket, {emit} from "../util/socket";
import "../css/lobby.css";
import "../css/lobby.sass";
import beer from "../img/beer.png"
import {NumberParam, useQueryParam} from 'use-query-params';

@ -1,16 +0,0 @@
#centurion-title {
font-size: 3.5rem;
text-align: center;
min-height: inherit;
}
.hints {
font-size: 2rem;
text-align: center;
}
.control {
font-size: 1.3rem;
margin-top: 10em;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

@ -0,0 +1,14 @@
#centurion-title
font-size: 3.5rem
text-align: center
min-height: inherit
.hints
font-size: 2rem
text-align: center
.control
font-size: 1.3rem
margin-top: 10em
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)

@ -1,55 +0,0 @@
@import '~antd/dist/antd.css';
@font-face {
font-family: 'SourceSansPro';
src: local('SourceSansPro'), url(./SourceSansPro.otf) format('opentype');
}
:root {
--footer-height: 4.5em;
--content-height: calc(100vh - var(--footer-height));
}
body {
font-family: 'SourceSansPro', sans-serif;
background-color: #e5e5e5;
}
.feed {
max-height: var(--content-height);
overflow: hidden;
padding: 0.5em;
}
.feed-item {
background-color: whitesmoke;
padding: 0.5em;
margin-bottom: 1em;
min-height: 5em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 2px;
}
.content {
padding: 1rem;
height: var(--content-height)
}
.via-logo {
width: auto;
height: 4em;
}
.sider {
text-align: center;
}
h1 {
min-height: 3em;
}
footer {
border-top: 1px solid lightgray;
padding: 0.25em 0.5em;
height: 4.5em;
}

@ -0,0 +1,53 @@
@import '~antd/dist/antd.css'
@font-face
font-family: 'SourceSansPro'
src: local('SourceSansPro'), url('./SourceSansPro.otf') format('opentype')
$footer-height: 4.5em
$content-height: calc(100vh - $footer-height)
body
font-family: 'SourceSansPro', sans-serif
background-color: #e5e5e5
.feed
max-height: $content-height
overflow: hidden
padding: 0.5em
.feed-item
background-color: whitesmoke
padding: 0.5em
margin-bottom: 1em
min-height: 5em
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
border-radius: 2px
.content
padding: 1rem
height: $content-height
.via-logo
width: auto
height: 4em
.sider
text-align: center
h1
min-height: 3em
footer
border-top: 1px solid lightgray
padding: 0.25em 0.5em
height: 4.5em

@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './index.sass';
import App from './App';
ReactDOM.render(<App/>, document.getElementById('root'));

Loading…
Cancel
Save