Merge branch 'master' of github.com:KevinMidboe/vinlottis

frontend/ui/Attendees.vue

@@ -20,9 +20,13 @@
       </div>
 
       <div v-if="admin" class="attendee-admin">
-        <button class="vin-button small" @click="editingAttendee = editingAttendee == attendee ? false : attendee">
+        <button class="vin-button edit small" @click="editingAttendee = editingAttendee == attendee ? false : attendee">
           {{ editingAttendee == attendee ? "Lukk" : "Rediger" }}
         </button>
+
+        <button class="vin-button small danger" @click="deleteAttendee(attendee)">
+          Slett deltaker
+        </button>
       </div>
 
       <div v-if="editingAttendee == attendee" class="attendee-edit">

frontend/ui/Banner.vue

@@ -5,15 +5,27 @@
       <img src="/public/assets/images/knowit.svg" alt="knowit logo" />
     </router-link>
 
-    <a class="menu-toggle-container" aria-label="show-menu" @click="toggleMenu" :class="isOpen ? 'open' : 'collapsed'">
+    <a
+      class="menu-toggle-container"
+      aria-label="show-menu"
+      @click="toggleMenu"
+      :class="isOpen ? 'open' : 'collapsed'"
+    >
       <span class="menu-toggle"></span>
       <span class="menu-toggle"></span>
       <span class="menu-toggle"></span>
     </a>
 
     <nav class="menu" :class="isOpen ? 'open' : 'collapsed'">
-      <router-link v-for="(route, index) in routes" :key="index" :to="route.route" class="menu-item-link">
-        <a @click="toggleMenu" class="single-route" :class="isOpen ? 'open' : 'collapsed'">{{ route.name }}</a>
+      <router-link
+        v-for="(route, index) in routes"
+        :key="index"
+        :to="route.route"
+        class="menu-item-link"
+      >
+        <a @click="toggleMenu" class="single-route" :class="isOpen ? 'open' : 'collapsed'">{{
+          route.name
+        }}</a>
         <i class="icon icon--arrow-right"></i>
       </router-link>
     </nav>
@@ -42,14 +54,14 @@ export default {
       minutes: 0,
       seconds: 0,
       distance: 0,
-      interval: null
+      interval: null,
     };
   },
   props: {
     routes: {
       required: true,
-      type: Array
-    }
+      type: Array,
+    },
   },
   mounted() {
     this.initialize(), this.countdown();
@@ -66,7 +78,7 @@ export default {
         return true;
       }
       return false;
-    }
+    },
   },
   methods: {
     toggleMenu() {
@@ -118,8 +130,8 @@ export default {
         this.initialize();
       }
       this.interval = setTimeout(this.countdown, 500);
-    }
-  }
+    },
+  },
 };
 </script>
 

frontend/ui/Footer.vue

@@ -4,7 +4,7 @@
       <li>
         <a href="https://github.com/KevinMidboe/vinlottis" class="github">
           <span>Utforsk koden på github</span>
-          <img src="/public/assets/images/logo-github.png" alt="github logo">
+          <img src="/public/assets/images/logo-github.png" alt="github logo" />
         </a>
       </li>
 
@@ -16,15 +16,15 @@
     </ul>
 
     <router-link to="/" class="company-logo">
-      <img src="/public/assets/images/knowit.svg" alt="knowit logo">
+      <img src="/public/assets/images/knowit.svg" alt="knowit logo" />
     </router-link>
   </footer>
 </template>
 
 <script>
 export default {
-  name: 'WineFooter'
-}
+  name: "WineFooter",
+};
 </script>
 
 <style lang="scss" scoped>
@@ -57,7 +57,6 @@ footer {
     display: flex;
     align-items: center;
 
-
     img {
       margin-left: 0.5rem;
       height: 30px;
@@ -74,7 +73,7 @@ footer {
     }
   }
 
-  .company-logo{
+  .company-logo {
     margin-right: 5em;
 
     img {
@@ -93,5 +92,4 @@ footer {
     }
   }
 }
-
-</style>
+</style>

frontend/ui/FooterUnbranded.vue

@@ -0,0 +1,103 @@
+<template>
+  <footer>
+    <a href="https://github.com/KevinMidboe/vinlottis" class="github">
+      <span>Utforsk koden på github</span>
+      <img src="/public/assets/images/logo-github.png" alt="github logo" />
+    </a>
+
+    <a href="mailto:questions@vinlottis.no" class="mail">
+      <span class="vin-link">questions@vinlottis.no</span>
+    </a>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "WineFooter",
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/variables.scss";
+@import "@/styles/media-queries.scss";
+
+footer {
+  width: 100%;
+  height: 75px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f4f4f4;
+  position: fixed;
+  bottom: 0;
+
+  > *:first-of-type {
+    margin-left: 0.5rem;
+  }
+  > *:last-of-type {
+    margin-right: 0.5rem;
+  }
+
+  @include desktop {
+    > *:first-of-type {
+      margin-left: 4rem;
+    }
+    > *:last-of-type {
+      margin-right: 4rem;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin-left: 5rem;
+
+    li:not(:first-of-type) {
+      margin-top: 0.75rem;
+    }
+  }
+
+  a {
+    color: $matte-text-color;
+  }
+
+  .github {
+    display: flex;
+    align-items: center;
+
+    img {
+      margin-left: 0.5rem;
+      height: 30px;
+    }
+  }
+
+  .mail {
+    display: flex;
+    align-items: center;
+
+    img {
+      margin-left: 0.5rem;
+      height: 23px;
+    }
+  }
+
+  .company-logo {
+    margin-right: 5em;
+
+    img {
+      width: 100px;
+    }
+  }
+
+  @include mobile {
+    $margin: 1rem;
+    ul {
+      margin-left: $margin;
+    }
+
+    .company-logo {
+      margin-right: $margin;
+    }
+  }
+}
+</style>