Changed responsivenes on artpage

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",

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;
+export default FavoriteButton;
\ No newline at end of file

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}
     />
   )

frontend/src/Style/ArtPage.css

 .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;
+    }
+
+}

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

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