From b1d1189f1211f8783c408ec04944e44ff62738fc Mon Sep 17 00:00:00 2001 From: Kristoffer Longva Eriksen Date: Wed, 16 Mar 2022 14:26:29 +0100 Subject: [PATCH] Added front page styling and structure --- src/client/package-lock.json | 29 ++++++++++- src/client/package.json | 2 +- src/client/src/components/list_component.js | 10 ---- src/client/src/components/manage_button.js | 10 ++++ src/client/src/components/overview_button.js | 10 ++++ src/client/src/front_page.js | 53 ++++++++++++++++++++ src/client/src/index.css | 41 ++++++++++++--- src/client/src/index.js | 6 +-- src/client/src/manage_tournament.js | 35 +++++++++++++ 9 files changed, 173 insertions(+), 23 deletions(-) delete mode 100644 src/client/src/components/list_component.js create mode 100644 src/client/src/components/manage_button.js create mode 100644 src/client/src/components/overview_button.js create mode 100644 src/client/src/front_page.js create mode 100644 src/client/src/manage_tournament.js diff --git a/src/client/package-lock.json b/src/client/package-lock.json index 4422c18..c178803 100644 --- a/src/client/package-lock.json +++ b/src/client/package-lock.json @@ -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", diff --git a/src/client/package.json b/src/client/package.json index 4c499cc..93bb508 100644 --- a/src/client/package.json +++ b/src/client/package.json @@ -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" }, diff --git a/src/client/src/components/list_component.js b/src/client/src/components/list_component.js deleted file mode 100644 index 938b48f..0000000 --- a/src/client/src/components/list_component.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; - -export default function ListElement(props) { - return ( -
- {props.name}, {props.competitors} competitors, Date: {props.date} -
- ); -} diff --git a/src/client/src/components/manage_button.js b/src/client/src/components/manage_button.js new file mode 100644 index 0000000..8039a50 --- /dev/null +++ b/src/client/src/components/manage_button.js @@ -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 ( + + ); +} diff --git a/src/client/src/components/overview_button.js b/src/client/src/components/overview_button.js new file mode 100644 index 0000000..0c64b32 --- /dev/null +++ b/src/client/src/components/overview_button.js @@ -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 ( + + ); +} diff --git a/src/client/src/front_page.js b/src/client/src/front_page.js new file mode 100644 index 0000000..9e2724f --- /dev/null +++ b/src/client/src/front_page.js @@ -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 ( + + ); +} + +function ListElement(props) { + return ( +
+
+
+ {props.name}, {props.competitors} competitors, Date: {props.date} +
+ + +
+
+ ); +} + +function Home() { + return ( + +
+ + + +
+ + ); +} + +export default function App() { + return ( + + + } /> + } /> + + + ); +} diff --git a/src/client/src/index.css b/src/client/src/index.css index de2a7cb..c69e8fa 100644 --- a/src/client/src/index.css +++ b/src/client/src/index.css @@ -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; } diff --git a/src/client/src/index.js b/src/client/src/index.js index adc181f..2f72208 100644 --- a/src/client/src/index.js +++ b/src/client/src/index.js @@ -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( - - - + , document.getElementById("root") ); diff --git a/src/client/src/manage_tournament.js b/src/client/src/manage_tournament.js new file mode 100644 index 0000000..0a24dc4 --- /dev/null +++ b/src/client/src/manage_tournament.js @@ -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 ( + +

Tournament

+

+ +

+ +

+ +

+ + + ); +}