From 44451dcc05d6f5a34baae0b7e5590d2e1a1db3c7 Mon Sep 17 00:00:00 2001 From: Andreas Schaafsma Date: Mon, 11 Jul 2022 11:44:38 +0100 Subject: [PATCH] redesign --- app/src/App.css | 100 ++++++++++++++----------- app/src/Root.hx | 53 +++++++------ app/src/components/Header.css | 22 ++---- app/src/components/Header.hx | 22 +----- app/src/components/HomeContent.hx | 27 +++---- app/src/components/ProjectsContent.hx | 95 +++++++++++++++++++++++ app/src/components/sidebar/Sidebar.css | 13 ---- app/src/components/sidebar/Sidebar.hx | 4 +- 8 files changed, 201 insertions(+), 135 deletions(-) create mode 100644 app/src/components/ProjectsContent.hx diff --git a/app/src/App.css b/app/src/App.css index 55ff397..e8b3fc4 100644 --- a/app/src/App.css +++ b/app/src/App.css @@ -1,60 +1,72 @@ *{ - /* margin: 0; */ - /* padding: 0; */ + font-family: Helvetica, sans-serif; } - -html, body, #pagewrapper, #root{ - height: 100vh; - margin: 0 0 0 0; - padding: 0 0 0 0; - overflow: auto; -} - - -.flex-column{ - display: flex; - flex-direction: column; -} -.flex-row{ - display: flex; - flex-direction: row; -} - -#flex{ - display: flex; +html, body{ + margin: 0; + padding: 0; + background-color: black; + color: white; + min-height: 100vh; height:100%; + width:100%; } -body { - font-family: 'Terminus', sans-serif; - background-color: #000; +/* SET UP GRID */ +#pagewrapper{ + display:grid; + grid-template-columns: 1fr auto 1fr; + grid-template-rows: auto auto; +} +header{ + grid-column: 2; + grid-row: 1; +} +nav{ + grid-column: 1; + grid-row: 2; +} +main{ + grid-column: 2; + grid-row: 2; } +/* Now do other shit */ -h1 { - /* margin: 10px; */ +nav{ + color: white; + font-size: 32pt; + font-weight: bold; + font-style: oblique; + text-align: right; + margin-right: 8pt; + margin: 0px 8px 0px 0px; + line-height: 30pt; +} +nav .active{ + font-style: oblique; +} +nav a{ + text-decoration: none; + color: white; } main{ - display: block; - /* margin-left: 100px; */ - /* margin-right:100px; */ - background-color: #333; - color: lime; - box-sizing: border-box; - padding: 10px; - width: 100%; - height:100%; -} -ul{ - align-self: left; + background-color: #233; + padding: 16px; + color: #eee; + min-width: 40vw; + max-width: 800px; } -a, a:visited, a:hover { - /* text-decoration: none; */ - color: inherit; +main h1{ + margin: 0px; } -a.selected, a.selected:visited{ - color:red; +main p{ + margin-top: 0px; +} + +.active +{ + color: #444 } \ No newline at end of file diff --git a/app/src/Root.hx b/app/src/Root.hx index 620c3c2..4fdb259 100644 --- a/app/src/Root.hx +++ b/app/src/Root.hx @@ -2,6 +2,7 @@ import com.Foo; import com.Foo2; import components.Header; import components.HomeContent; +import components.ProjectsContent; import components.sidebar.Sidebar; import react.ReactMacro.jsx; import react.ReactComponent; @@ -10,6 +11,7 @@ import react.router.ReactRouter; import react.router.Route.RouteRenderProps; import react.router.Route; import react.router.Redirect; +import react.router.NavLink; private typedef RootState = { @@ -46,31 +48,38 @@ class Root extends react.ReactComponentOf { override function render() { return jsx(' -
+
-
- <$Sidebar/> -
- <$Route exact="true" path="/"> - <$Redirect to="/home" /> - - <$Route path="/home"> - - - <$Route path="/projects"> -

Projects

- - <$Route path="/links"> -

Links

- - <$Route path="/gameservers"> -

Game Servers

-

- -
-
+ +
+ <$Route exact="true" path="/"> + <$Redirect to="/home" /> + + <$Route path="/home"> + + + <$Route path="/projects"> + + +
'); } diff --git a/app/src/components/Header.css b/app/src/components/Header.css index f9e2b48..bdd5ad6 100644 --- a/app/src/components/Header.css +++ b/app/src/components/Header.css @@ -1,18 +1,6 @@ -header { - box-sizing: border-box; - /* width:fit-content; */ - width:100%; - /* margin: 10px; */ - padding: 10px; - background: #eee; - /* color: white; */ - /* margin-left: auto; - margin-right: auto; */ +header{ + font-size: 48pt; + font-weight: 600; + font-style: oblique; + /* text-size-adjust: auto; */ } -header nav a{ - margin-right: 10px; -} -.logo{ - font-size: 3vw; - width:fit-content; -} \ No newline at end of file diff --git a/app/src/components/Header.hx b/app/src/components/Header.hx index 33203ba..1ca6dd1 100644 --- a/app/src/components/Header.hx +++ b/app/src/components/Header.hx @@ -12,25 +12,9 @@ class Header extends ReactComponent{ } override function render() { return jsx(' -
-
- DRIVEBY! -
- -
+
+ DRIVEBY, OK? +
'); } } \ No newline at end of file diff --git a/app/src/components/HomeContent.hx b/app/src/components/HomeContent.hx index c911a8e..2d75913 100644 --- a/app/src/components/HomeContent.hx +++ b/app/src/components/HomeContent.hx @@ -74,26 +74,17 @@ class HomeContent extends ReactComponent { } return jsx('
- <$Route exact="true" path={["/home","/home/about"]}> -
-

Welcome to DRIVEBY!

+
+

WELCOME TO DRIVEBY!

- DRIVEBY! is the home of my personal projects. This includes but is not limited to:
- - Gamedev
- - Software
- - Music
- - Art
- DRIVEBY! is run and operated by Hion-V. I am comitted to bringing you best-in-class entertainment and software.
- ${lorem[0]}
+ DRIVEBY! is an entity that creates software and entertainment, but also serves as a community revolving around DRIVEBY!\'s founder Hion-V and his pals.

-
- - <$Route exact="true" path={["/home","/home/news"]}> -
-

News

- <$Overview/> -
- +

+ ${lorem[0]} + ${lorem[1]} + ${lorem[2]} +

+
'); } diff --git a/app/src/components/ProjectsContent.hx b/app/src/components/ProjectsContent.hx new file mode 100644 index 0000000..17b620f --- /dev/null +++ b/app/src/components/ProjectsContent.hx @@ -0,0 +1,95 @@ +package components; +import js.html.XMLHttpRequest; +import react.ReactMacro.jsx; +import react.ReactComponent; +import js.Browser; +import Webpack.*; +import react.router.ReactRouter; +import react.router.Route.RouteRenderProps; +import react.router.Route; +import components.blog.Overview; +import js.lib.Promise; + +class ProjectsContent extends ReactComponent { + + public function new(){ + super(); + state = { response: ["LOADING"], loaded: false } + } + static var STYLES = require('./HomeContent.css'); + + public function yeet(){ + trace(state); + } + + + //function sendRequest( image : Dynamic ) { + function sendRequest() { + + + return new js.lib.Promise( + function( resolve : Dynamic -> Void, reject ) + { + var request = new XMLHttpRequest(); + request.responseType = js.html.XMLHttpRequestResponseType.JSON; + + request.onreadystatechange = function () { + if (request.readyState == 4) { + switch (request.status) { + case 200: + setState( { response: request.response } ); + trace(request.response); + case 204: + resolve(true); + default: + trace( "Wrong response status" ); + reject( request.response); + } + } + } + + // var data = new js.html.FormData(); + // // If we had a real file, we could use `file.name` as third argument + // data.append(props.formFieldName != null ? props.formFieldName : "file", image); + request.open("GET", "https://baconipsum.com/api/?type=meat-and-filler"); + // request.send(data); + request.send(); + }); + } + + + + override public function render() { + //var _yeet = yayeet(); + var lorem = ["LOADING"]; + if(state.loaded){ + if(state.response != null) + lorem = state.response; + } + else{ + setState({ + loaded: "false" + }); + sendRequest(); + } + return jsx(' +
+
+

Projects

+

Project 1

+

+ ${lorem[0]} + ${lorem[1]} + ${lorem[2]} +

+

Project 2

+

+ ${lorem[3]} + ${lorem[4]} + ${lorem[5]} +

+
+
+ '); + } +} \ No newline at end of file diff --git a/app/src/components/sidebar/Sidebar.css b/app/src/components/sidebar/Sidebar.css index d731d88..e69de29 100644 --- a/app/src/components/sidebar/Sidebar.css +++ b/app/src/components/sidebar/Sidebar.css @@ -1,13 +0,0 @@ -#sidebar{ - display: block; - padding: 10px; - //padding-left:10px; - width: 150px; - background-color: #888; - height:100% -} -#sidebar ul, #sidebar li{ - padding: 0; - margin: 0; - list-style-type: none; -} \ No newline at end of file diff --git a/app/src/components/sidebar/Sidebar.hx b/app/src/components/sidebar/Sidebar.hx index de84c77..8765152 100644 --- a/app/src/components/sidebar/Sidebar.hx +++ b/app/src/components/sidebar/Sidebar.hx @@ -18,7 +18,7 @@ class Sidebar extends ReactComponent { override public function render() { return jsx(' - + '); } }