small bugfixes

src/webapp/src/router/mainRoutes.js

@@ -104,7 +104,11 @@ export default [
     { 
         path: '/:pathMatch(.*)*', 
         name: 'NotFound', 
-        component: () => import( '@/views/404.vue')
+        component: () => import( '@/views/404.vue' ),
+        meta: {
+            title: '404 - Page not found :: libreevent',
+            transition: 'scale',
+        }
     },
     {
         path: '/admin/seatplan',

src/webapp/src/views/404.vue

@@ -12,7 +12,7 @@
         <h1 class="code">404</h1>
         <h2 class="message">The page you are looking for was not found on the server!</h2>
         <router-link to="/">Return to home page</router-link>
-        <a href="https://libreevent.janishutz.com/docs/errors#404">More information on this error</a>
+        <a href="https://libreevent.janishutz.com/docs/errors#404" target="_blank">More information on this error</a>
     </div>
 </template>
 

src/webapp/src/views/OrderView.vue

@@ -11,8 +11,8 @@
     <div class="order">
         <h1>Order tickets</h1>
         <div class="order-app" v-if="events">
-            <ul v-for="event in events">
-                <li>
+            <ul>
+                <li v-for="event in events">
                     <router-link to="/tickets/details" class="ticket" @click="setActiveTicket( event.eventID );">
                         <div class="ticket-name">
                             <h3>{{ event.name }}</h3>

src/webapp/src/views/admin/SettingsView.vue

@@ -13,12 +13,14 @@
         <!-- TODO: Move to per event settings -->
         <table class="settings-toggles">
             <tr class="settings-option" v-for="setting in settings">
-                <td class="info-wrapper" @mouseenter="showInfo( setting.id )" @mouseleave="hideInfo( setting.id )">
+                <td class="info-wrapper">
                     {{ setting.display }}
-                    <span class="material-symbols-outlined info-icon">info</span>
-                    <div class="info-box" :id="setting.id">
-                        <div class="info-box-container">
-                            {{ setting.tooltip }}
+                    <div class="info-container" @mouseenter="showInfo( setting.id )" @mouseleave="hideInfo( setting.id )">
+                        <span class="material-symbols-outlined info-icon">info</span>
+                        <div class="info-box" :id="setting.id">
+                            <div class="info-box-container">
+                                {{ setting.tooltip }}
+                            </div>
                         </div>
                     </div>
                 </td> 
@@ -78,6 +80,10 @@
     position: relative;
 }
 
+.info-container {
+    display: inline;
+}
+
 .info-icon {
     font-size: 100%;
     cursor: default;