diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3715f872ef5adf78fec1d19b1f0b1c456b0a6e56..c0a578ee4fbaadd285ce151fde442f95806cc6a2 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 8b61b7fd729886159e632db8db164fb3f415002a..bc1ce442884a277e012f7a0fc9ecef1229baae1a 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 c80a4a655b55d511bbd5bf8502e7d65c15a9384f..442c427a56896ae36e4dba5552f96049fb9634ea 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 87a53f9e18c06a2efb989f16fd2c3e434a13f432..e7029b0a9513d8405d6914f7fcb2f527dcbb77cb 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 c5f9bb2aa41b71934f1cf508ec6616ca7c0075ad..9449b7a7ee5e7bc1c00f6a960c282287eaf0bf0d 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 d08bcf83f4187b96bf5e9846c8d8ff3e690a0ac3..9fd3d95a0e1864faba3a6561775b553f7f6480f5 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
+}