felixalb
/
asura-tmdb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added front page styling and structure

This commit is contained in:
Kristoffer Longva Eriksen 2022-03-16 14:26:29 +01:00
parent d72640ab4a
commit b1d1189f12
9 changed files with 173 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/client/package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "frontend",
"version": "0.1.0",
"name": "tournament-server",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -5494,6 +5494,14 @@
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
},
"history": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
"requires": {
"@babel/runtime": "^7.7.6"
}
},
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -9177,6 +9185,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
"react-router": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
"integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
"requires": {
"history": "^5.2.0"
}
},
"react-router-dom": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
"integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
"requires": {
"history": "^5.2.0",
"react-router": "6.2.2"
}
},
"react-scripts": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",

2
src/client/package.json
View File

@ -1,5 +1,4 @@
{
"name": "tournament-server",
"version": "1.0.0",
"description": "DCST1008 Project - Server - Asura Tournament Management System",
@ -8,6 +7,7 @@
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},

10
src/client/src/components/list_component.js
View File

@ -1,10 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
export default function ListElement(props) {
return (
<div className="ListElement">
{props.name}, {props.competitors} competitors, Date: {props.date}
</div>
);
}

10
src/client/src/components/manage_button.js Normal file
View File

@ -0,0 +1,10 @@
import React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
export default function Manage_Button(props) {
return (
<button className="Manage_Button">
<Link to="/tournament/manage">Manage Tournament</Link>
</button>
);
}

10
src/client/src/components/overview_button.js Normal file
View File

@ -0,0 +1,10 @@
import React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
export default function Overview_Button(props) {
return (
<button className="Overview_Button">
<Link to="/tournament">View Tournament</Link>
</button>
);
}

53
src/client/src/front_page.js Normal file
View File

@ -0,0 +1,53 @@
import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import Manage_Button from "./components/manage_button";
import Tournament_Manager from "./manage_tournament.js";
function Overview_Button(props) {
return (
<button className="Overview_Button">
<Link to="/tournament">View Tournament</Link>
</button>
);
}
function ListElement(props) {
return (
<div>
<div className="ListElement">
<div className="tournamentDetails">
{props.name}, {props.competitors} competitors, Date: {props.date}
</div>
<Manage_Button />
<Overview_Button />
</div>
</div>
);
}
function Home() {
return (
<React.StrictMode>
<div id="tournamentList">
<ListElement name="Weekend Warmup" competitors="16" date="29.04.2022" />
<ListElement
name="Saturday Showdown"
competitors="8"
date="30.04.2022"
/>
<ListElement name="Sunday Funday" competitors="64" date="01.05.2022" />
</div>
</React.StrictMode>
);
}
export default function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/tournament/manage" element={<Tournament_Manager />} />
</Routes>
</Router>
);
}

41
src/client/src/index.css
View File

@ -1,3 +1,8 @@
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@ -13,13 +18,37 @@ code {
monospace;
}
#tournamentList {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto auto;
margin-top: 25vh;
width: 80vw;
}
.ListElement {
background-color: #073b4c;
width: 800px;
height: 45px;
position: relative;
top: 250px;
left: 100px;
margin-bottom: 10px;
width: 100%;
height: 7vh;
display: grid;
grid-template-columns: 4fr 1fr 1fr;
margin-bottom: 5vh;
}
.Manage_Button {
background-color: #ef476f;
display: inline;
width: 100%;
height: 100%;
color: #eeeeee;
padding-left: 5vh;
}
.Overview_Button {
background-color: #118ab2;
display: inline;
width: 100%;
height: 100%;
color: #eeeeee;
}

6
src/client/src/index.js
View File

@ -1,13 +1,11 @@
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import ListElement from "./components/list_component";
import App from "./front_page.js";
ReactDOM.render(
<React.StrictMode>
<ListElement name="Weekend Warmup" competitors="16" date="29.04.2022" />
<ListElement name="Saturday Showdown" competitors="8" date="30.04.2022" />
<ListElement name="Sunday Funday" competitors="64" date="01.05.2022" />
<App />
</React.StrictMode>,
document.getElementById("root")
);

35
src/client/src/manage_tournament.js Normal file
View File

@ -0,0 +1,35 @@
import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
export default function Tournament_Manager() {
return (
<React.Fragment>
<h1 className="pageHeader">Tournament</h1>
<br></br>
<input
className="Manage_Input"
type="text"
id="new_ame"
placeholder="Edit Name"
></input>
<br></br>
<input
className="Manage_Input"
type="text"
id="new_description"
placeholder="Edit Name"
></input>
<br></br>
<input
className="Manage_Input"
type="image"
id="new_image"
placeholder="Edit Image"
></input>
<br></br>
<button>
<Link to="/">Save and Exit</Link>
</button>
</React.Fragment>
);
}