Merge pull request #37 from cato447/page-navigation

Added routing to frontend

frontend/src/App.vue

@@ -1,17 +1,41 @@
-<template>
-  <div id="app">
-    <ItemModel/>
-  </div>
-</template>
 <script>
 import ItemModel from "@/components/ItemModel";
-export default {
+import LoginPage from "@/components/LoginPage";
-  components: {
+import Custom404Page from "@/components/Custom404Page";
-    ItemModel
+
+const routes = {
+  '/': ItemModel,
+  '/login': LoginPage
 }
-};
+
+export default {
+  data() {
+    return {
+      currentPath: window.location.hash
+    }
+  },
+  computed: {
+    currentView() {
+      return routes[this.currentPath.slice(1) || '/'] || Custom404Page
+    }
+  },
+  mounted() {
+    window.addEventListener('hashchange', () => {
+      this.currentPath = window.location.hash
+    })
+  }
+}
+
+
+
 </script>
 
+<template>
+  <component :is="currentView" />
+</template>
+
+
+
 <style>
 [v-cloak] {
   display: none;

frontend/src/components/ItemModel.vue

@@ -15,8 +15,6 @@
             <a>Storage</a>
           </div>
 
-          <span class="divider"></span>
-
           <input type="checkbox" class="menu-btn" id="menu-btn">
           <label for="menu-btn" class="menu-icon">
             <span class="menu-icon__line"></span>
@@ -24,29 +22,24 @@
 
           <ul class="nav-links">
             <li class="nav-link">
-              <router-link to="/">Home</router-link>
+              <a href="/#/login">Sign up</a>
-            </li>
-            <li class="nav-link">
-              <router-link to="/profile">Profile</router-link>
-            </li>
-            <li class="nav-link">
-              <router-link to="/recipes">Recipes</router-link>
-            </li>
-            <li class="nav-link">
-              <router-link to="/shoppinglist">Shoppinglist</router-link>
             </li>
           </ul>
         </div>
 
+        <div class="nav-background"/>
+
         <!-- input field -->
 
+        <div class="field-header-box">
           <div class="inputField-header">
-          <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder=" " v-model="newItem"
+            <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder="Add here..." v-model="newItem"
                    @keyup.enter="addItem"/>
             <label for="inputTextField" class="formLabel">
               Add here ...
             </label>
           </div>
+        </div>
 
         <!-- response element -->
 
@@ -201,7 +194,7 @@ export default Items
 body{
   margin: 0;
   padding: 0;
-  background-color:darkcyan;
+  background-color: #213737;
 }
 
 .main {
@@ -212,23 +205,45 @@ body{
   justify-content: center;
   align-items: center;
   font-size: 1.25vh;
-  background-color: darkcyan;
+  background-color: #213737;
+}
+
+/* navbar-background */
+
+.nav-background{
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  background: #213737;
+  width: 100vw;
+  height: 15vh;
 }
 
 /* input field styling */
 
-.inputField-header {
+.field-header-box{
   z-index: 3;
   position: fixed;
+  width: 100vw;
+  height: 5vh;
+  left: 0;
+  top: 10vh;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+}
+
+.inputField-header {
+  position: relative;
+  z-index: 5;
   width: 20vh;
-  left: 50%;
+  height: 3vh;
-  transform: translateX(-50%);
 }
 
 .newItemName {
   z-index: 3;
   position: relative;
-  top: -65.5vh; // 0,65 of height
   left: 0;
   width: 100%;
   height: 100%;
@@ -236,11 +251,11 @@ body{
   border-radius: 0.4411764705882353vh; // times 2 of border
   font-family: inherit;
   font-size: inherit;
-  color: black;
+  color: white;
   outline: none;
   padding: 0.5vh;// size of font
   box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); // 0.5 size of font and 1.5 size of font
-  background: darkcyan;
+  background: #213737;
 }
 
 .newItemName:hover {
@@ -293,9 +308,11 @@ body{
   position: absolute;
   top: 80%;
   left: 50%;
-
+  width: 0;
+  height: 0;
   font-size: 20px;
   margin-left: 30px;
+  border: 1px solid black;
 }
 
 .item-list{
@@ -317,9 +334,7 @@ body{
     font-family: Montserrat, sans-serif;
     list-style: none;
     background: darkslategrey;
-    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.6);
     display: flex;
-
     padding: 100px;
     width: 300px;
   }
@@ -394,21 +409,25 @@ body{
   }
 }
 
-@media (max-width: 2299px) {
+@media (max-width: 2100px) {
   .item-list{
-    grid-template-columns: repeat(4, 2vh);
+    grid-template-columns: repeat(7, 2vh);
+  }
+
+  .item{
+    right: 4.1vw;
   }
 }
 
 @media (min-width: 2100px) {
   .item-list{
-    grid-template-columns: repeat(5, 2vh);
+    grid-template-columns: repeat(8, 2vh);
   }
 }
 
 @media (min-width: 2560px) {
   .item-list{
-    grid-template-columns: repeat(6, 2vh);
+    grid-template-columns: repeat(8, 2vh);
   }
 }
 
@@ -441,7 +460,6 @@ body{
 
     row-gap: 50px;
     column-gap: 230px;
-    grid-template-columns: repeat(4, 2vh);
 
     .item{
       width: 200px;
@@ -515,21 +533,6 @@ body{
       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>

frontend/src/components/LoginPage.vue

@@ -0,0 +1,626 @@
+<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>Login</a>
+        </div>
+
+        <input id="menu-btn" class="menu-btn" type="checkbox">
+        <label class="menu-icon" for="menu-btn">
+          <span class="menu-icon__line"></span>
+        </label>
+
+        <ul class="nav-links">
+          <li class="nav-link">
+            <a href="/">Storage</a>
+          </li>
+        </ul>
+      </header>
+
+      <section>
+        <div class="container">
+
+          <div id="user-sign-in" class="user-login">
+            <div class="site-background"/>
+            <div class="form-background">
+              <form>
+
+                <h2>Sign In</h2>
+                <input placeholder="Username" type="text">
+                <input placeholder="Password" type="password">
+                <input class="login-btn-apple" type="submit" value="Login Apple">
+                <input class="login-btn" type="submit" value="Login">
+                <p class="signup">Don't have an account?
+                    <a href="#/login" v-on:click="isSignUp = !isSignUp">Sign up</a>
+                </p>
+
+              </form>
+            </div>
+          </div>
+
+          <div :style="{'display': isSignUp ? 'none' : ''}" class="user-signup">
+            <div class="site-background"/>
+            <div class="form-background">
+              <form>
+
+                <h2>Create Account</h2>
+                <input placeholder="Username" type="text">
+                <input placeholder="Email Address" type="text">
+                <input placeholder="Create Password" type="password">
+                <input placeholder="Confirm Password" type="password">
+                <input type="submit" value="Sign Up" class="submit">
+                <p class="signup">Have an account?
+                  <br>
+                  <a href="#/login" v-on:click="isSignUp = !isSignUp">Sign in</a>
+                </p>
+
+              </form>
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+    </div>
+
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"
+          type='text/css'/>
+  </div>
+
+</template>
+
+
+<script>
+
+export default {
+  name: "LoginPage",
+  data() {
+    return {
+      isSignUp: true
+    }
+  }
+}
+
+
+</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;
+  list-style: none;
+}
+
+.main {
+  font-family: 'Montserrat', sans-serif;
+  height: 100vh;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  background: #213737;
+}
+
+.logo {
+  left: -3vh;
+  top: 1vh;
+}
+
+.logo a {
+  color: white;
+}
+
+.menu-icon {
+  left: 3vh;
+  top: 1vh;
+
+  &__line, &__line:before, &__line::after {
+    background-color: white;
+  }
+}
+
+/* login / signin styling */
+
+section {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+
+  .container {
+    position: relative;
+    width: 2800px;
+    height: 1700px;
+    background: white;
+    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
+  }
+
+  .user-login {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+
+    .site-background {
+      position: relative;
+      width: 50%;
+      height: 100%;
+      transition: 0.5s;
+      //background: url('../ressouce/5008bf96009ea69ba157815061bce4f2.png');
+      background: brown;
+    }
+
+    .form-background {
+      position: relative;
+      width: 50%;
+      height: 100%;
+      background: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 160px;
+    }
+
+    h2 {
+      position: relative;
+      font-size: 60px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 8px;
+      text-align: center;
+      width: 100%;
+      margin-bottom: 20px;
+      color: black;
+      top: -30px;
+    }
+
+    h2:after {
+      content: '';
+      display: block;
+      border-bottom: 4px solid #000;
+      height: 0;
+      position: relative;
+      top: 50px;
+
+    }
+
+    input {
+      position: relative;
+      width: 100%;
+      padding: 40px;
+      background: lightgrey;
+      border: none;
+      outline: none;
+      box-shadow: none;
+      font-size: 1vh;
+      letter-spacing: 4px;
+      margin: 20px 0;
+      top: 50px;
+      color: black;
+    }
+
+    input[type="submit"] {
+      cursor: pointer;
+      max-width: 520px;
+      transition: 0.5s;
+      background-color: darkslategrey;
+      color: white;
+    }
+
+    .login-btn {
+      position: relative;
+      left: 40px;
+      box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
+    }
+
+    .login-btn-apple {
+      box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
+    }
+
+    .login-btn:hover, .login-btn-apple:hover {
+      background: brown;
+      color: black;
+    }
+
+    .signup {
+      text-align: center;
+      justify-content: right;
+      display: flex;
+      position: relative;
+      margin-top: 550px;
+      top: 50px;
+      font-size: 40px;
+      text-transform: uppercase;
+      letter-spacing: 4px;
+      //border: 1px solid black;
+    }
+
+    a {
+      font-weight: 600;
+      text-decoration: none;
+      color: darkslategrey;
+      letter-spacing: 2px;
+      font-size: 50px;
+      transition: color 0.5s ease-in-out;
+      //border: 1px solid black;
+      width: 100%;
+      text-align: left;
+      justify-content: center;
+      display: flex;
+      left: 30%;
+      top: -8px;
+    }
+
+    a:hover{
+      color: brown;
+    }
+  }
+
+  .user-signup {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: display 0.5s ease-in-out;
+
+    .site-background {
+      position: relative;
+      width: 50%;
+      height: 100%;
+      left: 50%;
+      transition: 0.5s;
+      //background: url('../ressouce/5008bf96009ea69ba157815061bce4f2.png');
+      background: brown;
+    }
+
+    .form-background {
+      position: relative;
+      width: 50%;
+      height: 100%;
+      background: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 160px;
+      top: -100%;
+    }
+
+    h2 {
+      position: relative;
+      font-size: 60px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 8px;
+      text-align: center;
+      width: 100%;
+      margin-bottom: 20px;
+      color: black;
+      top: 150px;
+    }
+
+    h2:after {
+      content: '';
+      display: block;
+      border-bottom: 4px solid #000;
+      height: 0;
+      position: relative;
+      top: 50px;
+
+    }
+
+    input {
+      position: relative;
+      width: 100%;
+      padding: 40px;
+      background: lightgrey;
+      border: none;
+      outline: none;
+      box-shadow: none;
+      font-size: 40px;
+      letter-spacing: 4px;
+      margin: 20px 0;
+      top: 230px;
+      color: black;
+    }
+
+    .submit{
+      box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
+    }
+
+    .submit:hover{
+      background: brown;
+      color: black;
+    }
+
+    input[type="submit"] {
+      cursor: pointer;
+      max-width: 520px;
+      transition: 0.5s;
+      background-color: darkslategrey;
+      color: white;
+      left: 51.8%;
+    }
+
+    .signup {
+      text-align: center;
+      justify-content: left;
+      display: flex;
+      position: relative;
+      margin-top: 560px;
+      font-size: 20px;
+      text-transform: uppercase;
+      letter-spacing: 4px;
+      top: -130px;
+      //border: 1px solid black;
+    }
+
+    a {
+      text-align: center;
+      justify-content: center;
+      display: flex;
+      width: 100%;
+      font-weight: 600;
+      text-decoration: none;
+      color: darkslategrey;
+      letter-spacing: 2px;
+      font-size: 50px;
+      top: -10px;
+      left: 30%;
+      transition: color 0.5s ease-in-out;
+      //border: 1px solid black;
+    }
+
+    a:hover{
+      color: brown;
+    }
+  }
+}
+
+@media (max-device-height: 1440px) {
+
+  /* login / signin styling */
+
+  section {
+    padding: 52px;
+
+    .container {
+      width: 1800px;
+      height: 1200px;
+      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
+    }
+
+    .user-login {
+
+      .form-background {
+        padding: 106px;
+      }
+
+      h2 {
+        font-size: 40px;
+        letter-spacing: 6px;
+        margin-bottom: 14px;
+        top: -40px;
+      }
+
+      h2:after {
+        border-bottom: 4px solid #000;
+        top: 26px;
+
+      }
+
+      input {
+        padding: 26px;
+        letter-spacing: 4px;
+        margin: 14px 0;
+        top: -4px;
+      }
+
+      input[type="submit"] {
+        max-width: 330px;
+      }
+
+      .login-btn {
+        left: 28px;
+      }
+
+      .signup {
+        margin-top: 400px;
+        letter-spacing: 2px;
+        font-size: 20px;
+        top: 20px;
+        justify-content: center;
+      }
+
+      a {
+        letter-spacing: 4px;
+        font-size: 40px;
+        top: 50px;
+        width: 100%;
+        left: 0;
+      }
+    }
+
+    .user-signup {
+
+      .form-background {
+        padding: 106px;
+      }
+
+      h2 {
+        font-size: 40px;
+        letter-spacing: 6px;
+        margin-bottom: 140px;
+        top: 120px;
+      }
+
+      h2:after {
+        border-bottom: 4px solid #000;
+        top: 26px;
+
+      }
+
+      input {
+        padding: 26px;
+        font-size: 26px;
+        letter-spacing: 4px;
+        margin: 14px 0;
+        top: 27px;
+      }
+
+      input[type="submit"] {
+        max-width: 330px;
+        left: 52%;
+      }
+
+      .signup {
+        margin-top: 374px;
+        letter-spacing: 2px;
+        top: -154px;
+        font-size: 20px;
+        justify-content: center;
+      }
+
+      a {
+        letter-spacing: 4px;
+        width: 100%;
+        left: 0;
+        font-size: 40px;
+        top: 50px;
+      }
+    }
+  }
+}
+
+@media (max-device-height: 1080px) {
+
+  /* login / signin styling */
+
+  section {
+    padding: 40px;
+
+    .container {
+      width: 1500px;
+      height: 900px;
+      box-shadow: 0 7.5px 25px rgba(0, 0, 0, 0.6);
+    }
+
+    .user-login {
+
+      .form-background {
+        padding: 80px;
+      }
+
+      h2 {
+        font-size: 30px;
+        letter-spacing: 4px;
+        margin-bottom: 10px;
+        top: -25px;
+      }
+
+      h2:after {
+        border-bottom: 2px solid #000;
+        top: 25px;
+
+      }
+
+      input {
+        padding: 12px;
+        font-size: 12px;
+        letter-spacing: 2px;
+        margin: 10px 0;
+        top: 15px;
+      }
+
+      input[type="submit"] {
+        max-width: 285px;
+      }
+
+      .login-btn {
+        left: 20px;
+      }
+
+      .signup {
+        position: relative;
+        margin-top: 300px;
+        letter-spacing: 2px;
+        font-size: 0.05vh;
+        align-content: center;
+      }
+
+      a {
+        letter-spacing: 1px;
+        align-content: center;
+        font-size: 40px;
+      }
+    }
+
+    .user-signup {
+
+      .form-background {
+        padding: 80px;
+      }
+
+      h2 {
+        font-size: 30px;
+        letter-spacing: 4px;
+        margin-bottom: 10px;
+        top: 50px;
+      }
+
+      h2:after {
+        border-bottom: 2px solid #000;
+        top: 25px;
+
+      }
+
+      input {
+        padding: 12px;
+        font-size: 12px;
+        letter-spacing: 2px;
+        margin: 10px 0;
+        top: 90px;
+      }
+
+      input[type="submit"] {
+        max-width: 260px;
+        left: 55.8%;
+      }
+
+      .signup {
+        margin-top: 280px;
+        letter-spacing: 2px;
+        top: -60px;
+        font-size: 30px;
+      }
+
+      a {
+        letter-spacing: 2px;
+        font-size: 40px;
+        align-content: center;
+      }
+    }
+  }
+}
+
+</style>

frontend/src/styling/navbar.scss

@@ -18,8 +18,6 @@
   }
 
   .nav-links {
-    display: flex;
-    list-style: none;
 
     a {
       margin: 0.2vh;
@@ -30,17 +28,11 @@
     a:hover {
       font-size: 3vh;
       transition: all 300ms;
+      color: brown;
     }
   }
 }
 
-.divider{
-  flex-grow: 1;
-  border-bottom: 0.1vh solid black;
-  margin: 5px;
-
-}
-
 .menu-icon {
   position: relative;
   padding: 0.5vh 0.5vh;
@@ -81,6 +73,7 @@
 }
 
 .logo{
+  position: relative;
   padding: 0.5vh 0.5vh;
 }
 
@@ -118,8 +111,9 @@
       left: 0;
       opacity: 0;
       flex-direction: column;
-      justify-content: space-evenly;
+      justify-content: center;
       align-items: center;
+      display: flex;
       padding: 5vh 0;
       width: 100vw;
       height: 120vh;
@@ -127,9 +121,8 @@
       letter-spacing: 0.25vh;
       color: white;
       background: #272727;
-
+      align-content: center;
-      transition: opacity 0.8s 0.5s,
+      transition: opacity 0.8s 0.5s, clip-path 1s 0.5s;
-      clip-path 1s 0.5s;
       clip-path: circle(9.615384615384615vh at top right);
 
       .nav-links {
@@ -137,6 +130,8 @@
         transform: translateX(100%);
         width: 100%;
         text-align: center;
+        justify-content: center;
+        display: grid;
 
         a {
           display: block;
@@ -156,9 +151,21 @@
       clip-path: circle(100% at center);
 
       .nav-link {
+        justify-content: center;
+        align-content: center;
+        display: flex;
         opacity: 1;
         transform: translateX(0);
       }
+
+      a {
+        position: relative;
+        align-content: center;
+        justify-content: center;
+        display: flex;
+        right: -0.2vh;
+        top: -11.5vh;
+      }
     }
 
     .menu-btn:checked ~ .menu-icon {
@@ -179,6 +186,19 @@
       }
     }
   }
+
+  .logo{
+    a {
+      position: absolute;
+      left: 0;
+      font-size: 4vh;
+      top: -0.68vh;
+    }
+    a:hover{
+      font-size: 4vh;
+      cursor: default;
+    }
+  }
 }
 
 @keyframes openButtonBefore {