From eb64bcb7db47583e097bf5ca8351f54f472390c9 Mon Sep 17 00:00:00 2001
From: Thor-Herman Van Eggelen <theggele@stud.ntnu.no>
Date: Sat, 12 Sep 2020 17:34:38 +0200
Subject: [PATCH] Artpage basic styling #7
---
frontend/src/Components/App.tsx | 2 +-
frontend/src/Components/ArtPage.tsx | 18 ++++++----
frontend/src/Components/DropDown.tsx | 2 +-
frontend/src/Components/ExhibitionPiece.tsx | 19 +++++++---
frontend/src/Components/MainPage.css | 17 ---------
frontend/src/Components/MainPage.tsx | 2 +-
frontend/src/Components/usePoetry.tsx | 6 ++--
frontend/src/{Components => Style}/App.css | 0
frontend/src/Style/ArtPage.css | 39 +++++++++++++++++++++
frontend/src/Style/MainPage.css | 7 ++++
10 files changed, 77 insertions(+), 35 deletions(-)
delete mode 100644 frontend/src/Components/MainPage.css
rename frontend/src/{Components => Style}/App.css (100%)
create mode 100644 frontend/src/Style/ArtPage.css
create mode 100644 frontend/src/Style/MainPage.css
diff --git a/frontend/src/Components/App.tsx b/frontend/src/Components/App.tsx
index 94ada66..31398c6 100644
--- a/frontend/src/Components/App.tsx
+++ b/frontend/src/Components/App.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import MainPage from './MainPage';
-import './App.css';
+import '../Style/App.css';
const App = () => {
return (
diff --git a/frontend/src/Components/ArtPage.tsx b/frontend/src/Components/ArtPage.tsx
index e0f22c1..6cbd55d 100644
--- a/frontend/src/Components/ArtPage.tsx
+++ b/frontend/src/Components/ArtPage.tsx
@@ -3,8 +3,8 @@ import ExhibitionPiece from './ExhibitionPiece';
import FavoriteButton from './FavoriteButton';
import DropDown from './DropDown';
import NavButton from './NavButton';
+import '../Style/ArtPage.css';
-;
type props = {
pageId: number; // The id of the page
@@ -18,12 +18,16 @@ class ArtPage extends React.Component<props> {
render() {
return (
- <div className={"artpage"}>
- <FavoriteButton />
- <DropDown />
- <ExhibitionPiece artId={this.props.pageId} />
- <NavButton />
- <NavButton />
+ <div className={'artpage'}>
+ <FavoriteButton/>
+ <DropDown/>
+ <ExhibitionPiece artId={this.props.pageId}/>
+ <div className={'navbutton left'}>
+ <NavButton/>
+ </div>
+ <div className={'navbutton right'}>
+ <NavButton/>
+ </div>
</div>
);
}
diff --git a/frontend/src/Components/DropDown.tsx b/frontend/src/Components/DropDown.tsx
index ce3aefc..8ffd481 100644
--- a/frontend/src/Components/DropDown.tsx
+++ b/frontend/src/Components/DropDown.tsx
@@ -1,7 +1,7 @@
import React from 'react';
const DropDown = () => {
- return <div>DropDown</div>
+ return <div className={"dropdown"}>DropDown</div>
};
export default DropDown;
\ No newline at end of file
diff --git a/frontend/src/Components/ExhibitionPiece.tsx b/frontend/src/Components/ExhibitionPiece.tsx
index 38ba99d..64fd719 100644
--- a/frontend/src/Components/ExhibitionPiece.tsx
+++ b/frontend/src/Components/ExhibitionPiece.tsx
@@ -1,8 +1,9 @@
import React, { useEffect, useState } from 'react';
import usePoetry from './usePoetry';
+import { render } from 'react-dom';
const SVGs = [ // Collection of Artworks that will be displayed
- <svg viewBox={"50 50 200 80"}>
+ <svg viewBox={"0 0 200 80"}>
<rect width={"200"} height={80} fill={"blue"} />
</svg>,
// TODO: ADD SVGS IN HERE
@@ -15,17 +16,25 @@ type props = {
const ExhibitionPiece = (props: props) => {
const [title, poem, author] = usePoetry(props.artId-1); // Calls on the usePoetry hook to retrieve the poem corresponding to Id
+ const renderPoems = () => {
+ if (poem != null)
+ return poem.map(line => <p>{line}</p>)
+ return <p>Loading...</p>
+ }
+
return (
<div className={'exhibition-piece'}>
- <div>
+ <div className={"title"}>
{title}
+ </div>
+ <div className={"author"}>
{author}
</div>
- <div>
+ <div className={"svg-artwork"}>
{SVGs[props.artId-1]}
</div>
- <div>
- {poem}
+ <div className={"poem"}>
+ {renderPoems()}
</div>
</div>
);
diff --git a/frontend/src/Components/MainPage.css b/frontend/src/Components/MainPage.css
deleted file mode 100644
index cd7462d..0000000
--- a/frontend/src/Components/MainPage.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.main-page {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- grid-template-rows: 1fr 15fr 1fr;
- height: 100vh;
-}
-
-.header {
- grid-row: 1 / 2;
- grid-column: 1 / -1;
- background-color: grey;
-}
-
-.body {
- grid-row: 2 / 3;
- grid-column: 1 / -1;
-}
\ No newline at end of file
diff --git a/frontend/src/Components/MainPage.tsx b/frontend/src/Components/MainPage.tsx
index b3f81d9..420baea 100644
--- a/frontend/src/Components/MainPage.tsx
+++ b/frontend/src/Components/MainPage.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import './MainPage.css';
+import '../Style/MainPage.css';
import ExhibitionPiece from './ExhibitionPiece';
import LandingPage from './LandingPage';
import ArtPage from './ArtPage';
diff --git a/frontend/src/Components/usePoetry.tsx b/frontend/src/Components/usePoetry.tsx
index f02531d..db327c8 100644
--- a/frontend/src/Components/usePoetry.tsx
+++ b/frontend/src/Components/usePoetry.tsx
@@ -22,8 +22,8 @@ type dataResponse = {
const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. Enter id and it will retrieve the corresponding poem
const [poem, setPoem] = useState<Array<string> | null>(null); // The poem itself. Initialized as null
- const [title, setTitle] = useState("");
- const [author, setAuthor] = useState("");
+ const [title, setTitle] = useState("Loading...");
+ const [author, setAuthor] = useState("Loading...");
useEffect(() => { // Will run every time the Id changes
fetch(`https://poetrydb.org/author,poemcount,linecount/${poets[poetId]};1;4`) // GET request to poetryDb
@@ -35,6 +35,6 @@ const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. En
});
}, [poetId]);
- return [title, poem, author];
+ return [title, poem, author] as const;
}
export default usePoetry;
\ No newline at end of file
diff --git a/frontend/src/Components/App.css b/frontend/src/Style/App.css
similarity index 100%
rename from frontend/src/Components/App.css
rename to frontend/src/Style/App.css
diff --git a/frontend/src/Style/ArtPage.css b/frontend/src/Style/ArtPage.css
new file mode 100644
index 0000000..f8c2bdc
--- /dev/null
+++ b/frontend/src/Style/ArtPage.css
@@ -0,0 +1,39 @@
+.artpage {
+ display: grid;
+ grid-template-columns: 1fr 2fr 1fr;
+ grid-template-rows: 1fr 10fr 1fr;
+ height: 100vh;
+}
+
+.exhibition-piece {
+ display: flex;
+ grid-row: 2 / 3;
+ grid-column: 2 / 3;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+
+.dropdown {
+ grid-row: 1 / 2;
+ grid-column: 3 / 4;
+ display: flex;
+ flex-direction: row-reverse;
+ margin-right: 2rem;
+ margin-top: 1rem;
+}
+
+.navbutton {
+ grid-row: 3 / 4;
+ display: flex;
+}
+
+.navbutton.left {
+ grid-column: 1 / 2;
+ flex-direction: row-reverse;
+ margin-right: 10rem;
+}
+.navbutton.right {
+ grid-column: 3 / 4;
+ margin-left: 10rem;
+}
\ No newline at end of file
diff --git a/frontend/src/Style/MainPage.css b/frontend/src/Style/MainPage.css
new file mode 100644
index 0000000..c3f53d6
--- /dev/null
+++ b/frontend/src/Style/MainPage.css
@@ -0,0 +1,7 @@
+.main-page {
+ height: 100vh;
+}
+
+.header {
+ background-color: grey;
+}
\ No newline at end of file
--
GitLab