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">
-            <img src="@/assets/logo.png" alt="libreevent logo" style="width: 80%; margin-left: 10%; margin-bottom: 5%;">
+            <div class="side-nav-wrapper">
-            <router-link to="/admin" class="admin-menu">Home</router-link>
+                <img src="@/assets/logo.png" alt="libreevent logo" style="width: 80%; margin-left: 10%; margin-bottom: 5%;">
-            <router-link to="/admin/pages" class="admin-menu">Pages</router-link>
+                <router-link to="/admin" class="admin-menu" @click="navMenu( 'hide' )">Home</router-link>
-            <router-link to="/admin/events" class="admin-menu">Events</router-link>
+                <router-link to="/admin/pages" class="admin-menu" @click="navMenu( 'hide' )">Pages</router-link>
-            <router-link to="/admin/locations" class="admin-menu">Locations</router-link>
+                <router-link to="/admin/events" class="admin-menu" @click="navMenu( 'hide' )">Events</router-link>
-            <router-link to="/admin/plugins" class="admin-menu">Plugins</router-link>
+                <router-link to="/admin/locations" class="admin-menu" @click="navMenu( 'hide' )">Locations</router-link>
-            <router-link to="/admin/settings" class="admin-menu">Settings</router-link>
+                <router-link to="/admin/plugins" class="admin-menu" @click="navMenu( 'hide' )">Plugins</router-link>
-            <button to="/admin/login" class="admin-menu" @click="logout()">Logout</button>
+                <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">
@@ -35,47 +38,54 @@
 
 <style scoped>
     .admin-wrapper {
-        display: grid;
+        display: block;
-        grid-template-areas:
-        'sidebar top top top'
-        'sidebar main main main'
-        'sidebar main main main'
-        'sidebar main main main'
-        'sidebar main main main'
-        'sidebar main main main'
-        'sidebar main main main'
-        'sidebar main main main'
-        'sidebar main main main';
         height: 100%;
     }
 
     .top-bar {
-        grid-area: top;
         display: flex;
         justify-content: center;
         align-items: center;
-        height: 100%;
+        height: 10vh;
     }
 
     .main-view {
         grid-area: main;
-        height: 100%;
+        height: 90vh;
-        width: 80vw;
+        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 {
-        grid-area: sidebar;
+        position: fixed;
-        display: flex;
+        display: none;
-        flex-direction: column;
+        height: 100vh;
-        height: 100%;
+        top: 0;
-        width: 20vw;
+        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 {
@@ -108,12 +118,88 @@
         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 {
+        .hideNav, .backdrop {
             display: none;
         }
+
+        .admin-wrapper {
+            display: grid;
+            grid-template-areas:
+            'sidebar top top top'
+            'sidebar main main main'
+            'sidebar main main main'
+            'sidebar main main main'
+            'sidebar main main main'
+            'sidebar main main main'
+            'sidebar main main main'
+            'sidebar main main main'
+            'sidebar main main main';
+            height: 100%;
+        }
+
+        .top-bar {
+            grid-area: top;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+        }
+
+        .main-view {
+            grid-area: main;
+            height: 100%;
+            width: 80vw;
+            min-height: 80vh;
+            overflow: scroll;
+        }
+
+        .side-nav {
+            position: initial;
+            grid-area: sidebar;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            width: 20vw;
+            padding: 0;
+            margin: 0;
+            background-color: var( --accent-background );
+            justify-content: center;
+            overflow: scroll;
+        }
+
+        .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;
+        }
     }
 </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>