From b3b09dfaa2c087e987df62cc30f57bef08a8191e Mon Sep 17 00:00:00 2001
From: tommy <tommyew7@gmail.com>
Date: Thu, 24 Sep 2020 13:26:33 +0200
Subject: [PATCH] Mobile responsiveness
---
frontend/src/Components/LandingPage.tsx | 2 +
frontend/src/SVGs.tsx | 2 +-
frontend/src/Style/LandingPage.css | 87 +++++++++++++++++++++++--
frontend/src/Style/MainPage.css | 22 +++++++
4 files changed, 105 insertions(+), 8 deletions(-)
diff --git a/frontend/src/Components/LandingPage.tsx b/frontend/src/Components/LandingPage.tsx
index 4645a7f..2e3bc0d 100644
--- a/frontend/src/Components/LandingPage.tsx
+++ b/frontend/src/Components/LandingPage.tsx
@@ -45,12 +45,14 @@ class LandingPage extends React.Component<props, state> {
<p>Favorites</p>
<ul>{this.state.favorites}</ul>
</div>
+ <div className={'flex2'}>
<div className={'navbutton left'}>
<NavButton direction={"left"}/>
</div>
<div className={'navbutton right'}>
<NavButton direction={"right"}/>
</div>
+ </div>
</div>
);
}
diff --git a/frontend/src/SVGs.tsx b/frontend/src/SVGs.tsx
index 0832b24..1338ecd 100644
--- a/frontend/src/SVGs.tsx
+++ b/frontend/src/SVGs.tsx
@@ -1,7 +1,7 @@
import React from "react";
export default [ // Collection of Artworks that will be displayed
- <svg viewBox={"0 0 200 80"}>
+ <svg>
<rect width={"200"} height={80} fill={"blue"} />
</svg>,
<svg viewBox={"0 0 200 80"}>
diff --git a/frontend/src/Style/LandingPage.css b/frontend/src/Style/LandingPage.css
index 7695dfb..a0a6f9a 100644
--- a/frontend/src/Style/LandingPage.css
+++ b/frontend/src/Style/LandingPage.css
@@ -15,9 +15,9 @@
font-family: Arial, Helvetica, sans-serif;
}
-.welcome-svg {
+.welcome-svg {
grid-area: welcomesvg;
- place-self: center;
+ place-self: center;
}
.favorites {
@@ -43,9 +43,82 @@
}
.navbutton.right {
- grid-area: right;
- place-self: center;
- position: fixed;
- top: 50%;
- right: 5%;
+ grid-area: navbutton-right;
+}
+
+.flex2 {
+
+}
+
+@media (orientation: portrait){
+ .title {
+ font-size: xx-large;
+ }
+
+ .landing-page {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .favorites {
+ font-size: large;
+ padding: 0;
+ }
+
+ .welcome-p {
+ margin: 0px;
+ margin-bottom: 10px;
+ font-size: large;
+ }
+
+ .navbutton.right {
+ }
+
+ .navbutton.left {
+ }
+
+ .flex2 {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ }
+}
+/**
+@media (orientation: portrait){
+ .title {
+ font-size: xx-large;
+ }
+
+ .landing-page {
+ grid-template-columns: 1fr;
+ grid-template-rows: 0.5fr 1fr 1fr 1fr;
+ grid-template-areas:
+ ". Title ."
+ ". welcome-svg ."
+ ". welcome-p ."
+ ". navbuttons .";
+ justify-content: start;
+ }
+
+ .favorites {
+ padding-top: 10rem;
+ font-size: large;
+ }
+
+ .welcome-p {
+ margin: 0px;
+ margin-bottom: 10px;
+ font-size: large;
+ }
+
+ .navbutton.right {
+ grid-area: navbuttons;
+ place-self: center;
+ }
+
+ .navbutton.left {
+ grid-area: navbuttons;
+ }
}
+**/
\ No newline at end of file
diff --git a/frontend/src/Style/MainPage.css b/frontend/src/Style/MainPage.css
index c3f53d6..17ba418 100644
--- a/frontend/src/Style/MainPage.css
+++ b/frontend/src/Style/MainPage.css
@@ -4,4 +4,26 @@
.header {
background-color: grey;
+}
+
+.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;
+}
+
+.navbutton button {
+ font-size: large;
+ width: 5rem;
+ height: 2rem;
+ margin-bottom: 3rem;
}
\ No newline at end of file
--
GitLab