From fd52f4bc9248b0d0966898009ffe6b7ef3541bf7 Mon Sep 17 00:00:00 2001
From: edvardds <edvardds@stud.ntnu.no>
Date: Wed, 23 Sep 2020 19:27:26 +0200
Subject: [PATCH] changed the position of navbuttons
---
frontend/src/Components/MainPage.tsx | 3 ---
frontend/src/Components/NavButton.tsx | 1 -
frontend/src/Style/ArtPage.css | 9 ++++++-
frontend/src/Style/LandingPage.css | 35 ++++++++++++++++-----------
4 files changed, 29 insertions(+), 19 deletions(-)
diff --git a/frontend/src/Components/MainPage.tsx b/frontend/src/Components/MainPage.tsx
index 49a3d2d..57075c6 100644
--- a/frontend/src/Components/MainPage.tsx
+++ b/frontend/src/Components/MainPage.tsx
@@ -41,9 +41,6 @@ class MainPage extends React.Component<props, state> {
render() {
return (
<div className={'main-page'}>
- <div className={'header'}>
- Header
- </div>
<div className={'body'}>
<PageContext.Provider value={{
changePage: this.changePage,
diff --git a/frontend/src/Components/NavButton.tsx b/frontend/src/Components/NavButton.tsx
index cde5bf0..03d86be 100644
--- a/frontend/src/Components/NavButton.tsx
+++ b/frontend/src/Components/NavButton.tsx
@@ -23,7 +23,6 @@ const NavButton = (props: props) => {
style={{ width: '4rem', height: '4rem' }}
onClick={onClick}
/>
- // <button onClick={onClick}>{props.direction}</button>
)
};
diff --git a/frontend/src/Style/ArtPage.css b/frontend/src/Style/ArtPage.css
index 14a0749..e9ee5d8 100644
--- a/frontend/src/Style/ArtPage.css
+++ b/frontend/src/Style/ArtPage.css
@@ -3,10 +3,15 @@
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 10fr 1fr;
height: 100vh;
+ grid-template-areas:
+ "favorite . dropdown"
+ "left exhibition right"
+ ". . ." ;
}
.exhibition-piece {
display: flex;
+ grid-area: exhibition;
grid-row: 2 / 3;
grid-column: 2 / 3;
align-items: center;
@@ -58,11 +63,13 @@
.navbutton.left {
grid-column: 1 / 2;
+ grid-area: left;
flex-direction: row-reverse;
margin-right: 10rem;
}
.navbutton.right {
grid-column: 3 / 4;
+ grid-area: right;
margin-left: 10rem;
}
@@ -71,4 +78,4 @@
width: 5rem;
height: 2rem;
margin-bottom: 3rem;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/Style/LandingPage.css b/frontend/src/Style/LandingPage.css
index dc29b44..7695dfb 100644
--- a/frontend/src/Style/LandingPage.css
+++ b/frontend/src/Style/LandingPage.css
@@ -1,13 +1,12 @@
.landing-page {
- display: grid;
- grid-template-columns: 1fr 2fr 1fr;
- grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
- gap: 0px 0px;
- grid-template-areas:
- ". Title ."
- ". welcome-svg ."
- ". welcome-svg ."
- "navbutton-left welcome-p navbutton-right";
+ display: grid;
+ grid-template-columns: 1fr 2fr 1fr;
+ grid-template-rows: 1fr 10fr 1fr;
+ height: 100vh;
+ grid-template-areas:
+ ". Title ."
+ "left welcomesvg right"
+ ". welcomep ." ;
}
.title {
@@ -17,18 +16,18 @@
}
.welcome-svg {
- grid-area: welcome-svg;
+ grid-area: welcomesvg;
place-self: center;
}
.favorites {
- grid-area: welcome-p;
+ grid-area: welcomep;
padding-top: 7rem;
padding-left: 3rem;
}
.welcome-p {
- grid-area: welcome-p;
+ grid-area: welcomep;
text-align: left;
margin: 25px 50px 100px;
font-family: Arial, Helvetica, sans-serif;
@@ -36,9 +35,17 @@
}
.navbutton.left {
- grid-area: navbutton-left;
+ grid-area: left;
+ place-self: center;
+ position: fixed;
+ top: 50%;
+ left: 5%;
}
.navbutton.right {
- grid-area: navbutton-right;
+ grid-area: right;
+ place-self: center;
+ position: fixed;
+ top: 50%;
+ right: 5%;
}
--
GitLab