From d3b1922a7f2f13855c108c3dcd55956af9cb2153 Mon Sep 17 00:00:00 2001
From: "Luis S. Ruisinger" <ge42deg@mytum.de>
Date: Sun, 19 Jun 2022 14:04:06 +0200
Subject: [PATCH] [WIP]: Adding style to frontend

- better responsive behavior for 2560 x 1440 resolution
---
 frontend/src/components/ItemModel.vue | 160 +++++++++++++++++++++++---
 frontend/src/styling/navbar.scss      |  10 +-
 2 files changed, 152 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/ItemModel.vue b/frontend/src/components/ItemModel.vue
index cb4e4ff..34ac7fa 100644
--- a/frontend/src/components/ItemModel.vue
+++ b/frontend/src/components/ItemModel.vue
@@ -72,7 +72,12 @@
   </body>
 </template>
 
+
+
+
+
 <script>
+
 import api from '../Api';
 
 const Items = {
@@ -165,6 +170,11 @@ const Items = {
 export default Items
 </script>
 
+
+
+
+
+
 <style lang="scss">
 
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
@@ -281,10 +291,11 @@ body{
 .item-section{
   z-index: 2;
   position: absolute;
-  font-size: 20px;
   top: 80%;
   left: 50%;
-  margin-left: 50px;
+
+  font-size: 20px;
+  margin-left: 30px;
 }
 
 .item-list{
@@ -292,9 +303,9 @@ body{
   align-self: center;
   position: relative;
   display: grid;
-
   top: -60vh;
   left: -44.33vw;
+
   row-gap: 75px;
   column-gap: 340px;
 
@@ -305,21 +316,24 @@ body{
     margin-top: 0;
     font-family: Montserrat, sans-serif;
     list-style: none;
-    padding: 100px;
-    width: 300px;
     background: darkslategrey;
     box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.6);
     display: flex;
+
+    padding: 100px;
+    width: 300px;
   }
 
   .item-name{
     z-index: 2;
     position: relative;
+
     left: -20px;
   }
 
   .item-name-fame{
     z-index: 2;
+
     letter-spacing: 4px;
     font-size: 30px;
   }
@@ -328,46 +342,51 @@ body{
     content:'';
     display:block;
     border-bottom:2px solid #000;
-    top: 16px;
     height:0;
-    width:250px;
     position:relative;
+
+    top: 16px;
+    width:250px;
   }
 
   .item-information-frame{
-    letter-spacing: 2px;
     position: relative;
+
+    letter-spacing: 2px;
     top: 32px;
   }
 
   .view{
     position: relative;
-    top: -60px;
-    left: -2.5vh;
     color: white;
+
+    top: -60px;
+    left: -52px;
   }
 
   .destroy{
     display: block;
     position: relative;
-    height: 50px;
-    width: 2px;
-    top: 140px;
     left: 0;
     border-radius: 1px;
     border: solid black 1px;
     transform: rotate(45deg);
+
+    height: 50px;
+    width: 2px;
+    top: 140px;
   }
 
   .destroy:after{
     content: '';
-    height: 50px;
-    width: 2px;
     border-radius: 1px;
     border: solid black 1px;
     position: fixed;
-    top: -2px;
     transform: rotate(-90deg);
+
+    height: 50px;
+    width: 2px;
+    top: -2px;
   }
 
   .destroy:hover{
@@ -402,6 +421,115 @@ body{
   }
 }
 
+/* responsive */
+
+@media (max-height: 1440px) and (min-width: 720px) {
+
+  .item-section{
+
+    font-size: 40/3 px;
+    margin-left: 80px;
+  }
+
+  .item-list{
+    z-index: 2;
+    align-self: center;
+    position: relative;
+    display: grid;
+    top: -60vh;
+    left: -44.33vw;
+
+    row-gap: 50px;
+    column-gap: 230px;
+    grid-template-columns: repeat(4, 2vh);
+
+    .item{
+      width: 200px;
+      height: 200px;
+    }
+
+    .item-name{
+      left: -30px;
+    }
+
+    .item-name-fame{
+      position: relative;
+      letter-spacing: 4px;
+      font-size: 12px;
+      top: -20px;
+    }
+
+    .item-name-fame:after{
+      content:'';
+      display:block;
+      border-bottom:2px solid #000;
+      height:0;
+      position:relative;
+
+      top: 8px;
+      width:170px;
+    }
+
+    .item-information-frame{
+
+      font-size: 8px;
+
+      letter-spacing: 1px;
+      top: -5px;
+    }
+
+    .view{
+      position: relative;
+      color: white;
+
+      top: -50px;
+      left: -52px;
+    }
+
+    .destroy{
+      display: block;
+      position: relative;
+      left: -10px;
+      border-radius: 1px;
+      border: solid black 1px;
+      transform: rotate(45deg);
+
+      height: 35px;
+      width: 2px;
+      top: 50px;
+    }
+
+    .destroy:after{
+      content: '';
+      border-radius: 1px;
+      border: solid black 1px;
+      position: fixed;
+      transform: rotate(-90deg);
+
+      height: 35px;
+      width: 2px;
+      top: -2px;
+    }
+
+    .destroy:hover{
+      cursor: pointer;
+    }
+  }
+
+  @media (min-width: 1440px) {
+
+    .item-section{
+
+      font-size: 40/3 px;
+      margin-left: 24px;
+    }
+
+    .item-list{
+      grid-template-columns: repeat(9, 2vh)
+    }
+  }
+}
+
 
 
 </style>
\ No newline at end of file
diff --git a/frontend/src/styling/navbar.scss b/frontend/src/styling/navbar.scss
index 8325a48..15b39f9 100644
--- a/frontend/src/styling/navbar.scss
+++ b/frontend/src/styling/navbar.scss
@@ -8,7 +8,7 @@
   width: 100vw;
   padding: 0 5vw;
   color: black;
-  z-index: 3;
+  z-index: 4;
 
   a {
     text-decoration: none;
@@ -122,7 +122,7 @@
       align-items: center;
       padding: 5vh 0;
       width: 100vw;
-      height: 100vh;
+      height: 120vh;
       font-weight: bolder;
       letter-spacing: 0.25vh;
       color: white;
@@ -145,6 +145,12 @@
       }
     }
 
+    .menu-btn:checked{
+      body{
+        overflow: hidden;
+      }
+    }
+
     .menu-btn:checked ~ .nav-links {
       opacity: 1;
       clip-path: circle(100% at center);