Merge pull request #13 from KevinMidboe/feat/contact-page

Feat/contact page

frontend/App.vue

@@ -18,4 +18,5 @@ export default {
 @import './styles/normalize';
 @import './styles/icons';
 @import './styles/global';
+@import './styles/layout';
 </style>

frontend/components/Cart.vue

@@ -207,10 +207,25 @@ table.cart-inventory {
   }
 
   thead tr th {
-    border-bottom: 2px solid rgba(255,255,255,.1);
+    border-bottom: 2px solid rgba(0,0,0,.1);
 
     &:not(:last-of-type) {
-      border-right: 2px solid rgba(255,255,255,.1);
+      border-right: 2px solid rgba(0,0,0,0.1);
+    }
+  }
+
+  thead th:first-of-type {
+    border-top-left-radius: 6px;
+  }
+  thead th:last-of-type {
+    border-top-right-radius: 6px;
+  }
+  tbody tr:last-of-type {
+    td:first-of-type {
+      border-bottom-left-radius: 6px;
+    }
+    td:last-of-type {
+      border-bottom-right-radius: 6px;
     }
   }
 
@@ -276,28 +291,33 @@ table.cart-inventory--mobile {
 
 table {
   width: 100%;
-  border: 1px solid rgba(255,255,255,.1);
+  border: 1px solid rgba(0,0,0,.1);
   border-radius: 6px;
   margin-bottom: 1.5rem;
 
   font-size: 1.2em;
 
+//  background-color: white;
+  color: var(--color-background);
+
   @include mobile {
     font-size: 1.1em;
   }
 
   tr th, tr td {
-    border-bottom: 2px solid rgba(255,255,255,.1);
+    border-bottom: 2px solid rgba(0,0,0,.1);
   }
 
   th, td {
     padding: 0.75rem 1rem;
+    background-color: white;
   }
 
   th {
     text-align: left;
     vertical-align: top;
   }
+
 }
 
 .page-header {

frontend/components/Contact.vue

@@ -0,0 +1,93 @@
+<template>
+  <main role="main">
+    <div class="banner blue-background">
+      <div class="banner-content top-show col-wrap max-width">
+        <h1>Kontakt oss</h1>
+
+        <p class="margin-top--md">Har du noen problemer eller noe du lurer på? Ta kontakt under!</p>
+      </div>
+    </div>
+
+    <section class="contact max-width col-wrap">
+      <div class="container-info col-6">
+        <h3 class="margin-bottom--sm">Kontaktinfo</h3>
+        <div class="text-container accent--lg">
+          <p>
+            Epost:
+            <br>
+            kevin.midboe@gmail.com
+          </p>
+          <p>
+            Telefon:
+            <br>
+            93 40 46 42
+          </p>
+        </div>
+      </div>
+
+      <div class="container-social col-6">
+        <h3 class="margin-bottom--sm">Følg oss på sosiale medier</h3>
+        <ul>
+          <li>Email: kevin.midboe@gmail.com</li>
+          <li>Address: Schleppegrells gate 18</li>
+        </ul>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'frontend/styles/variables';
+@import 'frontend/styles/spacing';
+
+#content {
+  overflow: hidden;
+  width: 100vw;
+}
+
+.banner {
+  height: 100%;
+  width: 100%;
+
+  &.blue-background {
+    background-color: var(--color-background-blue);
+    color: black;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    padding-top: var(--space-xxxxl);
+
+    p {
+      font-size: var(--text-md);
+    }
+
+    @include mobile {
+      flex-direction: column-reverse;
+    }
+  }
+}
+
+section.contact {
+  margin: 6rem auto 0 auto;
+}
+
+img {
+  padding-top: 1.5rem;
+
+  @include mobile {
+    display: block;
+    margin: auto;
+    width: 80%;
+  }
+}
+</style>

frontend/components/ui/Button.vue

@@ -93,4 +93,10 @@ button {
   }
 }
 
+button .icon {
+  position: relative;
+  top: 2.5px;
+  right: -8px;
+}
+
 </style>

frontend/components/ui/cart.vue

@@ -27,9 +27,14 @@ export default {
       isHeaderOffScreen: false
     }
   },
+  watch: {
+    $route(to, from) {
+      this.isHeaderOffScreen = false;
+    }
+  },
   mounted() {
     let observer = new IntersectionObserver((entry, observer) => {
-      if (this.$route.name == 'Shop') {
+      if (this.$route.path.includes('shop')) {
         const isHeaderIntersecting = entry[0].isIntersecting;
         this.isHeaderOffScreen = !isHeaderIntersecting;
       } else {
@@ -52,6 +57,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '/frontend/styles/variables';
+
 .cart {
   display: flex;
   flex-direction: row;
@@ -75,10 +82,18 @@ export default {
     top: 0.5rem;
     right: -6px;
     padding: 0.5rem;
-    padding-right: 2.5rem;
+    padding-right: 1.5rem;
     background-color: var(--color-background);
     border-radius: 6px;
     border: 0px solid !important;
+
+    .icon {
+      color: white;
+    }
+
+    @include desktop {
+      top: 1.5rem;
+    }
   }
 
   &:hover {

frontend/routes.js

@@ -29,6 +29,11 @@ let routes = [
     path: '/shop',
     component: (resolve) => require(['./components/Shop.vue'], resolve)
   },
+  {
+    name: 'Contact',
+    path: '/contact',
+    component: (resolve) => require(['./components/Contact.vue'], resolve)
+  },
   {
     name: 'admin',
     path: '/admin',

frontend/styles/global.scss

@@ -11,8 +11,7 @@ body {
   font-family: "Mabry", sans-serif; 
   background-color: #19171A;
   color: white;
-
-  margin-bottom: 2rem;
+  padding-bottom: 2rem;
 }
 
 h1,h2,h3,h4,h5 {
@@ -43,8 +42,6 @@ h3 {
   }
 }
 
-
-
 .flex {
   display: flex;
 }
@@ -79,9 +76,12 @@ h3 {
   }
 }
 
+
 .col-wrap {
   padding-left: 120px;
   padding-right: 120px;
+  box-sizing: border-box;
+
 
   @include tablet {
     padding: 0 48px;
@@ -96,6 +96,10 @@ h3 {
 .max-width {
   max-width: 1520px;
   margin: auto;
+
+  @include mobile {
+    width: 90%;
+  }
 }
 
 .top-show {
@@ -103,6 +107,10 @@ h3 {
   padding-bottom: var(--space-xxl);
   padding-top: var(--space-xxxxl);
 
+  &-md {
+    padding-top: var(--space-xxxl);
+  }
+
   &-sm {
     padding-top: var(--space-xxl);
   }

frontend/styles/layout.scss

@@ -0,0 +1,174 @@
+:root {
+    --width-1: 8.33%;
+    --width-2: 16.66%;
+    --width-3: 25%;
+    --width-4: 33.33%;
+    --width-5: 41.66%;
+    --width-6: 50%;
+    --width-7: 58.33%;
+    --width-8: 66.66%;
+    --width-9: 75%;
+    --width-10: 83.33%;
+    --width-11: 91.66%;
+    --width-12: 100%
+}
+
+.col-1 {
+    width:var(--width-1)
+}
+
+.col-2 {
+    width:var(--width-2)
+}
+
+.col-3 {
+    width:var(--width-3)
+}
+
+.col-4 {
+    width:var(--width-4)
+}
+
+.col-5 {
+    width:var(--width-5)
+}
+
+.col-6 {
+    width:var(--width-6)
+}
+
+.col-7 {
+    width:var(--width-7)
+}
+
+.col-8 {
+    width:var(--width-8)
+}
+
+.col-9 {
+    width:var(--width-9)
+}
+
+.col-10 {
+    width:var(--width-10)
+}
+
+.col-11 {
+    width:var(--width-11)
+}
+
+.col-12 {
+    width:var(--width-12)
+}
+
+.offset-1 {
+    margin-left:var(--width-1)
+}
+
+.offset-2 {
+    margin-left:var(--width-2)
+}
+
+.offset-3 {
+    margin-left:var(--width-3)
+}
+
+.offset-4 {
+    margin-left:var(--width-4)
+}
+
+.offset-5 {
+    margin-left:var(--width-5)
+}
+
+.offset-6 {
+    margin-left:var(--width-6)
+}
+
+.offset-7 {
+    margin-left:var(--width-7)
+}
+
+.offset-8 {
+    margin-left:var(--width-8)
+}
+
+.offset-9 {
+    margin-left:var(--width-9)
+}
+
+.offset-10 {
+    margin-left:var(--width-10)
+}
+
+.offset-11 {
+    margin-left:var(--width-11)
+}
+
+.offset-12 {
+    margin-left:var(--width-12)
+}
+
+.col-wrap {
+    padding-left: 120px;
+    padding-right:120px
+}
+
+@media (max-width: 1280px) {
+    .col-wrap {
+        padding-left: 64px;
+        padding-right:64px
+    }
+}
+
+@media (max-width: 992px) {
+    .col-wrap {
+        padding-left: 48px;
+        padding-right:48px
+    }
+}
+
+@media (max-width: 768px) {
+    .col-wrap {
+        padding-left: 32px;
+        padding-right:32px
+    }
+}
+
+@media (max-width: 520px) {
+    .col-wrap {
+        padding-left: 12px;
+        padding-right: 12px
+    }
+}
+
+.col-wrap [class*="col-"] {
+    float: left;
+    padding-left: 32px;
+    padding-right: 32px;
+    box-sizing: border-box
+}
+
+@media (max-width: 992px) {
+    .col-wrap [class*="col-"] {
+        padding-left: 16px;
+        padding-right:16px
+    }
+}
+
+@media (max-width: 520px) {
+    .col-wrap [class*="col-"] {
+        padding-left: 8px;
+        padding-right:8px
+    }
+}
+/*
+.col-wrap::after {
+    content: "";
+    visibility: hidden;
+    display: block;
+    height: 0;
+    clear:both
+}
+*/
+