make admin panel mobile-compatible

src/webapp/src/views/admin/AdminView.vue

@@ -12,17 +12,20 @@
         <div class="top-bar">
             <h1>Admin panel</h1>
         </div>
-        <button class="hideNav">&#9776</button>
+        <button class="hideNav navHidden" @click="navMenu( 'toggle' );">&#9776</button>
         <nav class="side-nav">
+            <div class="side-nav-wrapper">
                 <img src="@/assets/logo.png" alt="libreevent logo" style="width: 80%; margin-left: 10%; margin-bottom: 5%;">
-            <router-link to="/admin" class="admin-menu">Home</router-link>
+                <router-link to="/admin" class="admin-menu" @click="navMenu( 'hide' )">Home</router-link>
-            <router-link to="/admin/pages" class="admin-menu">Pages</router-link>
+                <router-link to="/admin/pages" class="admin-menu" @click="navMenu( 'hide' )">Pages</router-link>
-            <router-link to="/admin/events" class="admin-menu">Events</router-link>
+                <router-link to="/admin/events" class="admin-menu" @click="navMenu( 'hide' )">Events</router-link>
-            <router-link to="/admin/locations" class="admin-menu">Locations</router-link>
+                <router-link to="/admin/locations" class="admin-menu" @click="navMenu( 'hide' )">Locations</router-link>
-            <router-link to="/admin/plugins" class="admin-menu">Plugins</router-link>
+                <router-link to="/admin/plugins" class="admin-menu" @click="navMenu( 'hide' )">Plugins</router-link>
-            <router-link to="/admin/settings" class="admin-menu">Settings</router-link>
+                <router-link to="/admin/settings" class="admin-menu" @click="navMenu( 'hide' )">Settings</router-link>
                 <button to="/admin/login" class="admin-menu" @click="logout()">Logout</button>
+            </div>
         </nav>
+        <div class="backdrop" @click="navMenu( 'hide' )"></div>
         <div class="main-view">
             <router-view v-slot="{ Component, route }">
                 <transition :name="route.meta.transition || 'fade'" mode="out-in">
@@ -34,6 +37,102 @@
 </template>
 
 <style scoped>
+    .admin-wrapper {
+        display: block;
+        height: 100%;
+    }
+
+    .top-bar {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 10vh;
+    }
+
+    .main-view {
+        grid-area: main;
+        height: 90vh;
+        width: 100vw;
+        min-height: 80vh;
+        overflow: scroll;
+    }
+
+    .backdrop {
+        width: 100vw;
+        height: 100vh;
+        z-index: 1;
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background-color: rgba( 0, 0, 0, 0.7 );
+    }
+
+    .side-nav {
+        position: fixed;
+        display: none;
+        height: 100vh;
+        top: 0;
+        width: 30vw;
+        padding: 0;
+        margin: 0;
+        background-color: var( --accent-background );
+        z-index: 3;
+    }
+
+    .side-nav-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        overflow: scroll;
+        height: 100%;
+    }
+
+    .admin-menu {
+        padding: 4% 0%;
+        width: 100%;
+        background-color: rgba( 0, 0, 0, 0 );
+        color: var( --secondary-color );
+        cursor: pointer;
+        font-family: Avenir, Helvetica, Arial, sans-serif;
+        font-weight: bold;
+        text-decoration: none;
+        transition: 1s;
+        font-size: 100%;
+        border-style: none;
+    }
+
+    nav a.router-link-exact-active {
+        background-color: var( --accent-background-hover );
+    }
+
+    .admin-menu:hover {
+        background-color: var( --accent-background-hover );
+        transition: 0.4s;
+    }
+
+    .hideNav {
+        border: none;
+        font-size: 300%;
+        color: var( --secondary-color );
+        width: fit-content;
+        background-color: rgba( 0, 0, 0, 0 );
+        position: fixed;
+        cursor: pointer;
+        top: 1vw;
+        left: 2vw;
+        z-index: 5;
+    }
+
+    .navHidden {
+        color: var( --primary-color );
+    }
+
+    @media only screen and (min-width: 1299px) {
+        .hideNav, .backdrop {
+            display: none;
+        }
+
         .admin-wrapper {
             display: grid;
             grid-template-areas:
@@ -66,6 +165,7 @@
         }
 
         .side-nav {
+            position: initial;
             grid-area: sidebar;
             display: flex;
             flex-direction: column;
@@ -100,20 +200,6 @@
             background-color: var( --accent-background-hover );
             transition: 0.4s;
         }
-
-    .hideNav {
-        border: none;
-        font-size: 300%;
-        color: var( --secondary-color );
-        width: fit-content;
-        background-color: rgba( 0, 0, 0, 0 );
-        position: fixed;
-    }
-
-    @media only screen and (min-width: 1299px) {
-        .hideNav {
-            display: none;
-        }
     }
 </style>
 
@@ -144,6 +230,23 @@
                         this.$router.push( '/admin/login' );
                     } );
                 }
+            },
+            navMenu ( action ) {
+                if ( screen.width < 1300 ) {
+                    if ( action === 'toggle' ) {
+                        $( '.side-nav' ).toggle( 300 );
+                        $( '.hideNav' ).toggleClass( 'navHidden' );
+                        $( '.backdrop' ).toggle( 300 );
+                    } else if ( action === 'show' ) {
+                        $( '.backdrop' ).show( 300 );
+                        $( '.side-nav' ).show( 300 );
+                        $( '.hideNav' ).removeClass( 'navHidden' );
+                    } else {
+                        $( '.side-nav' ).hide( 300 );
+                        $( '.backdrop' ).hide( 300 );
+                        $( '.hideNav' ).addClass( 'navHidden' );
+                    }
+                }
             }
         }
     };

src/webapp/src/views/admin/events/EventsDetailsView.vue

@@ -16,6 +16,7 @@
                 <option value="TestLocation">TestLocation</option>
             </select><br>
             <input v-model="event.date" class="small-text" type="date"><br>
+            <router-link to="/admin/ticketEditor">Edit ticket layout</router-link>
         </div>
         <div class="ticket-settings">
             <h3>Ticket Settings</h3>

src/webapp/src/views/admin/events/TicketEditorView.vue

@@ -1,6 +1,7 @@
 <template>
     <div id="ticketEditor">
         <h1>Ticket Editor</h1>
+        <router-link to="/admin/events/view">Back to event settings</router-link>
         <div id="editor">Loading editor...</div>
     </div>
 </template>