From 0fcbfb890741cf89a417b43f67b4bdbaaf4782be Mon Sep 17 00:00:00 2001
From: edvardds <edvardds@stud.ntnu.no>
Date: Mon, 28 Sep 2020 15:21:09 +0200
Subject: [PATCH] Changed responsivenes on artpage
---
frontend/package-lock.json | 22 +++++
frontend/src/Components/FavoriteButton.tsx | 4 +-
frontend/src/Components/NavButton.tsx | 2 +-
frontend/src/Style/ArtPage.css | 101 ++++++++++++++++++---
frontend/src/Style/DropDown.css | 12 +--
frontend/src/Style/MainPage.css | 4 +-
6 files changed, 119 insertions(+), 26 deletions(-)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3715f87..c0a578e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -3725,6 +3725,11 @@
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
"integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
},
+ "@types/node": {
+ "version": "12.12.62",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.62.tgz",
+ "integrity": "sha512-qAfo81CsD7yQIM9mVyh6B/U47li5g7cfpVQEDMfQeF8pSZVwzbhwU3crc0qG4DmpsebpJPR49AKOExQyJ05Cpg=="
+ },
"@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -3740,6 +3745,23 @@
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
},
+ "@types/react": {
+ "version": "16.9.49",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.49.tgz",
+ "integrity": "sha512-DtLFjSj0OYAdVLBbyjhuV9CdGVHCkHn2R+xr3XkBvK2rS1Y1tkc14XSGjYgm5Fjjr90AxH9tiSzc1pCFMGO06g==",
+ "requires": {
+ "@types/prop-types": "*",
+ "csstype": "^3.0.2"
+ }
+ },
+ "@types/react-dom": {
+ "version": "16.9.8",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",
+ "integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==",
+ "requires": {
+ "@types/react": "*"
+ }
+ },
"@types/react-router": {
"version": "5.1.8",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.8.tgz",
diff --git a/frontend/src/Components/FavoriteButton.tsx b/frontend/src/Components/FavoriteButton.tsx
index 8b61b7f..bc1ce44 100644
--- a/frontend/src/Components/FavoriteButton.tsx
+++ b/frontend/src/Components/FavoriteButton.tsx
@@ -28,10 +28,10 @@ const FavoriteButton = (props: props) => {
<img
src={isFavorite ? active : inactive}
alt={"favorite-active"}
- style={{width: '4rem', height: '4rem'}}
+ style={{width: '10vh', height: '10vh'}}
onClick={toggleFavorite}
/>
</div>)
};
-export default FavoriteButton;
\ No newline at end of file
+export default FavoriteButton;
diff --git a/frontend/src/Components/NavButton.tsx b/frontend/src/Components/NavButton.tsx
index c80a4a6..442c427 100644
--- a/frontend/src/Components/NavButton.tsx
+++ b/frontend/src/Components/NavButton.tsx
@@ -20,7 +20,7 @@ const NavButton = (props: props) => {
<img
src={props.direction === "right" ? rightarrow : leftarrow}
alt={props.direction}
- style={{ width: '4rem', height: '4rem' }}
+ style={{ width: '10vh', height: '10vh' }}
onClick={onClick}
/>
)
diff --git a/frontend/src/Style/ArtPage.css b/frontend/src/Style/ArtPage.css
index 87a53f9..e7029b0 100644
--- a/frontend/src/Style/ArtPage.css
+++ b/frontend/src/Style/ArtPage.css
@@ -1,62 +1,87 @@
.artpage {
display: grid;
- grid-template-columns: 1fr 2fr 1fr;
- grid-template-rows: 1fr 11fr;
+ grid-template-columns: 1fr 10fr 1fr;
+ grid-template-rows: 1fr 20fr;
height: 100vh;
grid-template-areas:
- "favorite . dropdown"
+ "favorite exhibition setings"
"left exhibition right";
}
+@viewport {
+ width: 100vw;
+}
+
+
.exhibition-piece {
display: flex;
grid-area: exhibition;
- grid-row: 2 / 3;
- grid-column: 2 / 3;
align-items: center;
justify-content: center;
flex-direction: column;
}
.exhibition-piece-title {
+ grid-area: exhibitiontitle;
text-align: center;
+ font-size: 4vh;
+}
+
+.author{
+ font-size: 2.5vh;
}
-svg {
- margin-top: 5%;
- border: 1px solid black;
+.poem {
+ font-size: 2.7vh;
+}
+
+svg{
+ border: 0.1vw solid black;
+}
+
+.svg-artwork {
+ margin-top: 5vh;
+
+ width: 20%;
}
.dropdown {
- grid-area: dropdown;
- grid-row: 1 / 2;
- grid-column: 3 / 4;
+ grid-area: setings;
display: flex;
flex-direction: row-reverse;
- margin-right: 2rem;
- margin-top: 1rem;
+ margin-right: 2vh;
+ margin-top: 2vw;
}
+/* .settings-icon {
+ margin-right: 2vh;
+ margin-top: 2vw;
+} */
+
.favorite-button {
grid-area: favorite;
- margin-left: 2rem;
- margin-top: 1rem;
+ margin-left: 2vh;
+ margin-top: 2vw;
}
.background-one {
background-color: rgb(175, 213, 170);
+ background-size: 100% 100%;
}
.background-two {
background-color: rgb(108, 178, 209);
+ background-size: 100% 100%;
}
.background-three {
background-color: rgb(254, 200, 216);
+ background-size: 100% 100%;
}
.background-four {
background-color: rgb(255, 223, 211);
+ background-size: 100% 100%;
}
.font-arial {
@@ -71,3 +96,49 @@ svg {
font-family: "Comic Sans MS", serif;
}
+@media (orientation: portrait) {
+ .artpage{
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-rows: 1fr 20fr 1fr;
+ grid-template-areas:
+ "favorite exhibitiontitle exhibitiontitle setings"
+ "exhibition exhibition exhibition exhibition"
+ "left . . right";
+ }
+
+ .exhibition-piece-title {
+ grid-area: exhibitiontitle;
+ text-align: center;
+ font-size: 2.2vh;
+ }
+
+ .exhibition-piece {
+ font-size: 2vh;
+ }
+
+ .svg-artwork {
+ margin-top: 2%;
+ width: 22vh;
+ }
+
+ .dropdown {
+ grid-area: setings;
+ /* place-self: center; */
+ /* margin-right: rem;
+ margin-top: 1rem; */
+ }
+
+ .favorite-button {
+ grid-area: favorite;
+ place-self: center;
+ height: 10vh;
+ width: 10vh;
+ }
+
+ .dropdown-toggle {
+ margin: 1vh ;
+ font-size: 2vh;
+ }
+
+}
diff --git a/frontend/src/Style/DropDown.css b/frontend/src/Style/DropDown.css
index c5f9bb2..9449b7a 100644
--- a/frontend/src/Style/DropDown.css
+++ b/frontend/src/Style/DropDown.css
@@ -2,8 +2,8 @@
background-image: url("../Media/settings.png");
background-position: center;
background-size: contain;
- width: 3rem;
- height: 3rem;
+ width: 10vh;
+ height: 10vh;
}
.cross-icon {
@@ -12,8 +12,8 @@
background-position: center;
background-size: contain;
background-repeat: no-repeat;
- width: 3rem;
- height: 3rem;
+ width: 10vh;
+ height: 10vh;
}
.dropdown {
@@ -30,7 +30,7 @@
.dropdown-toggle {
margin: 1rem 1rem 1.5rem;
font-size: large;
-}
+}
label {
display: flex;
@@ -42,4 +42,4 @@ label {
width: 5rem;
margin-left: 1rem;
font-size: smaller;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/Style/MainPage.css b/frontend/src/Style/MainPage.css
index d08bcf8..9fd3d95 100644
--- a/frontend/src/Style/MainPage.css
+++ b/frontend/src/Style/MainPage.css
@@ -16,7 +16,7 @@
margin-left: 10rem;
}
-.navbutton button {
+.navbutton button{
font-size: large;
width: 5rem;
height: 2rem;
@@ -37,4 +37,4 @@
position: fixed;
top: 50%;
right: 5%;
-}
\ No newline at end of file
+}
--
GitLab