Tabs are cool

src/components/AdminPage.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <h1>Admin-side</h1>
+    <div class="tab-container">
+      <div
+        class="tab"
+        @click="changeTab(0)"
+        :class="chosenTab == 0 ? 'active' : null"
+      >
+        Registrering
+      </div>
+      <div
+        class="tab"
+        @click="changeTab(1)"
+        :class="chosenTab == 1 ? 'active' : null"
+      >
+        Virtuelt lotteri
+      </div>
+    </div>
+    <div class="tab-elements">
+      <RegisterPage :class="chosenTab == 0 ? null : 'hide'" />
+      <VirtualLotteryRegistrationPage :class="chosenTab == 1 ? null : 'hide'" />
+    </div>
+  </div>
+</template>
+
+<script>
+import RegisterPage from "@/components/RegisterPage";
+import VirtualLotteryRegistrationPage from "@/components/VirtualLotteryRegistrationPage";
+
+export default {
+  components: {
+    RegisterPage,
+    VirtualLotteryRegistrationPage
+  },
+  data() {
+    return {
+      chosenTab: 0
+    };
+  },
+  methods: {
+    changeTab: function(num) {
+      this.chosenTab = num;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  text-align: center;
+}
+.hide {
+  display: none;
+}
+
+.tab-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 25px;
+  border-bottom: 1px solid #333333;
+}
+
+.tab {
+  cursor: pointer;
+  /* height: 60px; */
+  font-size: 1.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  margin: 0 15px;
+  border: 1px solid #333333;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  background: #00000008;
+  border-bottom: 1px solid #333333;
+  margin-bottom: -1px;
+
+  &.active {
+    border-bottom: 1px solid white;
+    background: white;
+  }
+}
+</style>

src/components/VirtualLotteryRegistrationPage.vue

@@ -8,12 +8,12 @@
           >Trekker {{ currentWinners }} av {{ numberOfWinners }} vinnere.
           {{ secondsLeft }} sekunder av {{ drawTime }} igjen</span
         >
-        <button class="vin-button" @click="stopDraw">
+        <button class="vin-button no-margin" @click="stopDraw">
           Stopp trekning
         </button>
       </div>
       <div class="draw-container" v-if="!drawingWinner">
-        <button class="vin-button" @click="drawWinner">
+        <button class="vin-button no-margin" @click="drawWinner">
           Trekk vinnere
         </button>
         <input type="number" v-model="numberOfWinners" />
@@ -268,6 +268,7 @@ export default {
 
 .draw-container {
   display: flex;
+  justify-content: space-around;
 }
 
 .draw-winner-container,

src/routes/vinlottisRouter.js

@@ -7,6 +7,8 @@ import LoginPage from "@/components/LoginPage";
 import RegisterPage from "@/components/RegisterPage";
 import CreatePage from "@/components/CreatePage";
 
+import AdminPage from "@/components/AdminPage";
+
 import VirtualLotteryRegistrationPage from "@/components/VirtualLotteryRegistrationPage";
 import VirtualLotteryPage from "@/components/VirtualLotteryPage";
 
@@ -31,17 +33,13 @@ const routes = [
     path: "/login",
     component: LoginPage
   },
-  {
-    path: "/update",
-    component: RegisterPage
-  },
   {
     path: "/create",
     component: CreatePage
   },
   {
-    path: "/virtual-register",
+    path: "/admin",
-    component: VirtualLotteryRegistrationPage
+    component: AdminPage
   },
   {
     path: "/virtual",

src/styles/global.scss

@@ -140,6 +140,10 @@ textarea {
   }
 }
 
+.no-margin {
+  margin: 0 !important;
+}
+
 .ballot-element {
   margin: 20px 0;
   -webkit-mask-image: url(/../../public/assets/images/lodd.svg);