From 3e73fd01f9f933bd99de3f18c21c5615e1517d3f Mon Sep 17 00:00:00 2001
From: "Luis S. Ruisinger" <ge42deg@mytum.de>
Date: Tue, 7 Jun 2022 13:52:23 +0200
Subject: [PATCH] [WIP]: Add styling to itemPage

- centralizing navbar scss
- building custom 404 page
- building navbar struct MainPage
---
 frontend/src/components/Custom404Page.vue | 128 +++++++++++
 frontend/src/components/HomePage.vue      |  71 +++++++
 frontend/src/components/ItemModel.vue     | 247 +---------------------
 frontend/src/styling/navbar.scss          | 233 ++++++++++++++++++++
 4 files changed, 433 insertions(+), 246 deletions(-)
 create mode 100644 frontend/src/components/Custom404Page.vue
 create mode 100644 frontend/src/components/HomePage.vue
 create mode 100644 frontend/src/styling/navbar.scss

diff --git a/frontend/src/components/Custom404Page.vue b/frontend/src/components/Custom404Page.vue
new file mode 100644
index 0000000..9e97f38
--- /dev/null
+++ b/frontend/src/components/Custom404Page.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="main">
+    <span class="text">404</span>
+    <h1>Maybe going home helps</h1>
+    <a href="#">Home</a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Custom404Page"
+}
+</script>
+
+<style lang="scss">
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.main {
+  height: 100vh;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  align-content: space-between;
+  background-color: #213737;
+}
+
+.text {
+  cursor: default;
+  position: absolute;
+  align-self: center;
+  top: 25%;
+  right: 50%;
+  transform: translate(50%,50%);
+  text-transform: uppercase;
+  font-family: Montserrat, sans-serif;
+  font-size: 20rem;
+  font-weight: 700;
+  color: #F5F5F5;
+
+  text-shadow:
+      1px 1px 1px #919191,
+      1px 2px 1px #919191,
+      1px 3px 1px #919191,
+      1px 4px 1px #919191,
+      1px 5px 1px #919191,
+      1px 6px 1px #919191,
+      1px 7px 1px #919191,
+      1px 8px 1px #919191,
+      1px 9px 1px #919191,
+      1px 10px 1px #919191,
+      1px 18px 6px rgba(16,16,16,0.4),
+      1px 22px 10px rgba(16,16,16,0.2),
+      1px 25px 35px rgba(16,16,16,0.2),
+      1px 30px 60px rgba(16,16,16,0.4);
+}
+
+h1{
+  color: #F5F5F5;
+  position: relative;
+  font-family: "Source Code Pro", monospace;
+  font-size: 2rem;
+  top: 62rem;
+  font-weight: 400;
+}
+
+h1::before,
+h1::after{
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+h1::before{
+  background: #213737;
+  animation: shifteffect 4s steps(22) forwards;
+}
+
+h1::after{
+  width: 0.125rem;
+  background: white;
+  animation:
+      shifteffect 4s steps(22) forwards,
+      blinkeffect 600ms steps(22) infinite;
+}
+
+a{
+  font-family: Montserrat, sans-serif;
+  position: absolute;
+  top: 4%;
+  right: 5%;
+  font-size: 2.5rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: #F5F5F5;
+  transition: all 300ms;
+}
+
+a:hover{
+  cursor: pointer;
+  font-size: 3rem;
+  transition: all 300ms;
+}
+
+@keyframes shifteffect{
+  to{
+    left: 100%;
+  }
+}
+
+@keyframes blinkeffect{
+  to{
+    background: transparent;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/HomePage.vue b/frontend/src/components/HomePage.vue
new file mode 100644
index 0000000..da5be2c
--- /dev/null
+++ b/frontend/src/components/HomePage.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="main">
+
+      <div v-if="loading">
+        <h1 class="loading">Loading...</h1>
+      </div>
+      <div v-else>
+
+        <!-- navbar -->
+
+        <header class="navbar-header">
+          <div class="logo">
+            <a>Home</a>
+          </div>
+
+          <input type="checkbox" class="menu-btn" id="menu-btn">
+          <label for="menu-btn" class="menu-icon">
+            <span class="menu-icon__line"></span>
+          </label>
+
+          <ul class="nav-links">
+            <li class="nav-link">
+              <a href="#">Profile</a>
+            </li>
+            <li class="nav-link">
+              <a href="#">Storage</a>
+            </li>
+            <li class="nav-link">
+              <a href="#">Recipes</a>
+            </li>
+            <li class="nav-link">
+              <a href="#">About</a>
+            </li>
+          </ul>
+        </header>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+export default {
+  name: "HomePage"
+}
+</script>
+
+<style lang="scss">
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
+@import 'src/styling/navbar';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.main {
+  font-family: 'Montserrat', sans-serif;
+  height: 100vh;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.25rem;
+  background-color: darkcyan;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/ItemModel.vue b/frontend/src/components/ItemModel.vue
index c374292..c23cbc0 100644
--- a/frontend/src/components/ItemModel.vue
+++ b/frontend/src/components/ItemModel.vue
@@ -163,6 +163,7 @@ export default Items
 <style lang="scss">
 
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
+@import 'src/styling/navbar';
 
 *,
 *::before,
@@ -182,252 +183,6 @@ export default Items
   background-color: darkcyan;
 }
 
-/* cursor styling */
-
-.cursor {
-  width: 1rem;
-  height: 1rem;
-  border: 0.15rem solid black;
-  border-radius: 100%;
-  position: absolute;
-}
-
-/* navbar styling */
-
-.navbar-header {
-  position: fixed;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  top: 2.5rem;
-  left: 0;
-  width: 100vw;
-  padding: 0 5vw;
-  color: black;
-  z-index: 1;
-
-  a {
-    text-decoration: none;
-    color: inherit;
-    text-transform: uppercase;
-    font-size: 2rem;
-  }
-
-  .nav-links {
-    display: flex;
-    list-style: none;
-
-    a {
-      margin: 0.2rem;
-      padding: 1rem 0.5rem;
-      transition: all 300ms;
-    }
-
-    a:hover {
-      font-size: 3.5rem;
-      transition: all 300ms;
-    }
-  }
-}
-
-.menu-icon {
-  position: relative;
-  padding: 26px 10px;
-  cursor: pointer;
-  z-index: 1;
-  display: none;
-
-  &__line {
-    display: block;
-    position: relative;
-    background: black;
-    height: 2.5px;
-    width: 3rem;
-    border-radius: 4px;
-
-    &::before, &::after {
-      content: '';
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      border-radius: 4px;
-      background: black;
-      transition: background .8s ease;
-    }
-
-    &::before {
-      transform: translateY(-10px);
-    }
-
-    &::after {
-      transform: translateY(10px);
-    }
-  }
-}
-
-.menu-btn {
-  display: none;
-}
-
-
-.logo:hover {
-  cursor: default;
-}
-
-@media screen {
-
-  .navbar-header {
-
-    .menu-icon {
-      display: block;
-      font-weight: bold;
-
-      &__line {
-        animation: closedButton 1s backwards;
-        animation-direction: reverse;
-
-        &::before {
-          animation: closedButtonBefore 1s backwards;
-          animation-direction: reverse;
-        }
-
-        &::after {
-          animation: closedButtonAfter 1s backwards;
-          animation-direction: reverse;
-        }
-      }
-    }
-
-    .nav-links {
-      position: absolute;
-      top: -2.5rem;
-      left: 0;
-      opacity: 0;
-      flex-direction: column;
-      justify-content: space-evenly;
-      align-items: center;
-      padding: 10rem 0;
-      width: 100vw;
-      height: 100vh;
-      font-size: 2rem;
-      font-weight: bolder;
-      letter-spacing: 0.25rem;
-      color: white;
-      background: #272727;
-
-      transition: opacity 0.8s 0.5s,
-      clip-path 1s 0.5s;
-      clip-path: circle(200px at top right);
-
-      .nav-links {
-        opacity: 0;
-        transform: translateX(100%);
-        width: 100%;
-        text-align: center;
-
-        a {
-          display: block;
-          padding: 2rem 0;
-        }
-      }
-    }
-
-    .menu-btn:checked ~ .nav-links {
-      opacity: 1;
-      clip-path: circle(100% at center);
-
-      .nav-link {
-        opacity: 1;
-        transform: translateX(0);
-      }
-    }
-
-    .menu-btn:checked ~ .menu-icon {
-
-      .menu-icon__line {
-        background: white;
-        animation: openButton 1s forwards;
-
-        &::before {
-          background: white;
-          animation: openButtonBefore 1s forwards;
-        }
-
-        &::after {
-          background: white;
-          animation: openButtonAfter 1s forwards;
-        }
-      }
-    }
-  }
-}
-
-@keyframes openButtonBefore {
-  0% {
-    transform: translateY(-10px) rotate(0deg);
-  }
-  50% {
-    transform: translateY(0px) rotate(0deg);
-  }
-  100% {
-    transform: translateY(0px) rotate(90deg);
-  }
-}
-
-@keyframes openButton {
-  50% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(45deg);
-  }
-}
-
-@keyframes openButtonAfter {
-  0% {
-    transform: translateY(10px) rotate(0deg);
-  }
-  50% {
-    transform: translateY(0px) rotate(0deg);
-  }
-  100% {
-    transform: translateY(0px) rotate(90deg);
-  }
-}
-
-@keyframes closedButtonBefore {
-  0% {
-    transform: translateY(-10px) rotate(0deg);
-  }
-  50% {
-    transform: translateY(0px) rotate(0deg);
-  }
-  100% {
-    transform: translateY(0px) rotate(90deg);
-  }
-}
-
-@keyframes closedButton {
-  50% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(45deg);
-  }
-}
-
-@keyframes closedButtonAfter {
-  0% {
-    transform: translateY(10px) rotate(0deg);
-  }
-  50% {
-    transform: translateY(0px) rotate(0deg);
-  }
-  100% {
-    transform: translateY(0px) rotate(90deg);
-  }
-}
-
 /* input field styling */
 
 .inputField-header {
diff --git a/frontend/src/styling/navbar.scss b/frontend/src/styling/navbar.scss
new file mode 100644
index 0000000..7e2d21b
--- /dev/null
+++ b/frontend/src/styling/navbar.scss
@@ -0,0 +1,233 @@
+.navbar-header {
+  position: fixed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  top: 2.5rem;
+  left: 0;
+  width: 100vw;
+  padding: 0 5vw;
+  color: black;
+  z-index: 1;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+    text-transform: uppercase;
+    font-size: 2rem;
+  }
+
+  .nav-links {
+    display: flex;
+    list-style: none;
+
+    a {
+      margin: 0.2rem;
+      padding: 1rem 0.5rem;
+      transition: all 300ms;
+    }
+
+    a:hover {
+      font-size: 3.5rem;
+      transition: all 300ms;
+    }
+  }
+}
+
+.menu-icon {
+  position: relative;
+  padding: 26px 10px;
+  cursor: pointer;
+  z-index: 1;
+  display: none;
+
+  &__line {
+    display: block;
+    position: relative;
+    background: black;
+    height: 2.5px;
+    width: 3rem;
+    border-radius: 4px;
+
+    &::before, &::after {
+      content: '';
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      border-radius: 4px;
+      background: black;
+      transition: background .8s ease;
+    }
+
+    &::before {
+      transform: translateY(-10px);
+    }
+
+    &::after {
+      transform: translateY(10px);
+    }
+  }
+}
+
+.menu-btn {
+  display: none;
+}
+
+
+.logo:hover {
+  cursor: default;
+}
+
+@media screen {
+
+  .navbar-header {
+
+    .menu-icon {
+      display: block;
+      font-weight: bold;
+
+      &__line {
+        animation: closedButton 1s backwards;
+        animation-direction: reverse;
+
+        &::before {
+          animation: closedButtonBefore 1s backwards;
+          animation-direction: reverse;
+        }
+
+        &::after {
+          animation: closedButtonAfter 1s backwards;
+          animation-direction: reverse;
+        }
+      }
+    }
+
+    .nav-links {
+      position: absolute;
+      top: -2.5rem;
+      left: 0;
+      opacity: 0;
+      flex-direction: column;
+      justify-content: space-evenly;
+      align-items: center;
+      padding: 10rem 0;
+      width: 100vw;
+      height: 100vh;
+      font-size: 2rem;
+      font-weight: bolder;
+      letter-spacing: 0.25rem;
+      color: white;
+      background: #272727;
+
+      transition: opacity 0.8s 0.5s,
+      clip-path 1s 0.5s;
+      clip-path: circle(200px at top right);
+
+      .nav-links {
+        opacity: 0;
+        transform: translateX(100%);
+        width: 100%;
+        text-align: center;
+
+        a {
+          display: block;
+          padding: 2rem 0;
+        }
+      }
+    }
+
+    .menu-btn:checked ~ .nav-links {
+      opacity: 1;
+      clip-path: circle(100% at center);
+
+      .nav-link {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+
+    .menu-btn:checked ~ .menu-icon {
+
+      .menu-icon__line {
+        background: white;
+        animation: openButton 1s forwards;
+
+        &::before {
+          background: white;
+          animation: openButtonBefore 1s forwards;
+        }
+
+        &::after {
+          background: white;
+          animation: openButtonAfter 1s forwards;
+        }
+      }
+    }
+  }
+}
+
+@keyframes openButtonBefore {
+  0% {
+    transform: translateY(-10px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  100% {
+    transform: translateY(0px) rotate(90deg);
+  }
+}
+
+@keyframes openButton {
+  50% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(45deg);
+  }
+}
+
+@keyframes openButtonAfter {
+  0% {
+    transform: translateY(10px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  100% {
+    transform: translateY(0px) rotate(90deg);
+  }
+}
+
+@keyframes closedButtonBefore {
+  0% {
+    transform: translateY(-10px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  100% {
+    transform: translateY(0px) rotate(90deg);
+  }
+}
+
+@keyframes closedButton {
+  50% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(45deg);
+  }
+}
+
+@keyframes closedButtonAfter {
+  0% {
+    transform: translateY(10px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  100% {
+    transform: translateY(0px) rotate(90deg);
+  }
+}
\ No newline at end of file