some styling of event settings

src/webapp/src/components/settings/settings.vue

@@ -8,7 +8,7 @@
 -->
 
 <template>
-    <div>
+    <div class="settings-wrapper">
         <table class="settings-toggles">
             <tr class="settings-option" v-for="setting in settings">
                 <td class="info-wrapper">
@@ -68,8 +68,17 @@
 </script>
 
 <style scoped>
+.settings-wrapper {
+    width: 100%;
+    display: flex;
+    text-align: justify;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
 .settings-toggles {
-    width: 80%;
+    width: 70%;
 }
 
 .info-wrapper {
@@ -87,6 +96,7 @@
 }
 
 .info-box {
+    text-align: center;
     display: none;
     position: absolute;
     z-index: 10;

src/webapp/src/views/404.vue

@@ -41,4 +41,8 @@
     .small {
         font-style: italic;
     }
+    
+    nav {
+        display: initial;
+    }
 </style>

src/webapp/src/views/AccountView.vue

@@ -3,3 +3,10 @@
         <h1>Account</h1>
     </div>
 </template>
+
+
+<style>
+    nav {
+        display: initial;
+    }
+</style>

src/webapp/src/views/CartView.vue

@@ -133,3 +133,10 @@
         }
     }
 </script>
+
+
+<style>
+    nav {
+        display: initial;
+    }
+</style>

src/webapp/src/views/LoginView.vue

@@ -77,4 +77,8 @@
         padding: 5px 10px;
         margin-top: 2%;
     }
+
+    nav {
+        display: initial;
+    }
 </style>

src/webapp/src/views/OrderView.vue

@@ -100,3 +100,10 @@
         }
     };
 </script>
+
+
+<style>
+    nav {
+        display: initial;
+    }
+</style>

src/webapp/src/views/PaymentView.vue

@@ -62,3 +62,10 @@
         margin-right: auto
     }
 </style>
+
+
+<style>
+    nav {
+        display: initial;
+    }
+</style>

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

@@ -10,45 +10,57 @@
 <template>
     <div class="details">
         <h2>{{ event.name }}</h2>
-        <div class="general-settings">
+        <div class="category-wrapper">
             <p>Event Description</p>
             <textarea v-model="event.description" class="big-text" cols="70" rows="3" placeholder="Event description..."></textarea>
-            <p>Event location</p>
+            <table class="category">
+                <tr>
+                    <td>Event location</td>
+                    <td>
                         <select v-model="event.location" class="small-text">
                             <option value="TestLocation">TestLocation</option>
                         </select>
-            <p>Event date</p>
+                    </td>
-            <input v-model="event.date" class="small-text" type="date"><br>
+                </tr>
-            <p>Ticket editor</p>
+                <tr>
+                    <td>Event date</td>
+                    <td><input v-model="event.date" class="small-text" type="date"></td>
+                </tr>
+                <tr>
+                    <td>Ticket editor</td>
                     <router-link to="/admin/ticketEditor">Edit ticket layout</router-link>
+                </tr>
+            </table>
         </div>
         <div class="ticket-settings">
             <h3>Ticket Settings</h3>
             <p>The foreground and background colours of the seats are used to show the customer to which category the seats belong.</p>
+            <div class="category-wrapper">
                 <table class="category" v-for="category in event.categories">
                     {{ category.name }}
                     <tr v-for="price in category.price">
                         <td>
-                        {{ price.name }}:
+                            <div class="category-details">{{ price.name }}:</div>
                         </td>
                         <td>
                             <input type="number" v-model="price.price">
                         </td>
                     </tr>
                     <tr>
-                    <td>Foreground colour</td>
+                        <td><div class="category-details">Foreground colour:</div></td>
                         <td>
                             <input type="text" data-coloris v-model="category.fg" onkeydown="return false;">
                         </td>
                     </tr>
                     <tr>
-                    <td>Background colour</td>
+                        <td><div class="category-details">Background colour:</div></td>
                         <td>
                             <input type="text" data-coloris v-model="category.bg" onkeydown="return false;">
                         </td>
                     </tr>
                 </table>
             </div>
+        </div>
         <div class="special-settings">
             <h3>General Settings</h3>
             <p>Currency codes used must be valid ISO 4217 codes. Read more on <a href="https://libreevent.janishutz.com/docs/admin-panel/events#currency">this page</a> of the documentation <!-- https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes"--></p>
@@ -70,8 +82,21 @@
         width: 100%;
     }
 
-    .category {
+    .category-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
         width: 100%;
+        flex-direction: column;
+    }
+
+    .category {
+        width: 50%;
+        text-align: justify;
+    }
+
+    .category-details {
+        margin-left: 7%;;
     }
 </style>
 
@@ -87,7 +112,7 @@
         },
         created () {
             if ( !sessionStorage.getItem( 'selectedTicket' ) ) {
-                this.$router.push( '/tickets' );
+                this.$router.push( '/admin/events' );
             }
             this.eventID = sessionStorage.getItem( 'selectedTicket' );
         },

src/webapp/src/views/admin/page/StartPageEditorView.vue

@@ -0,0 +1,29 @@
+<!--
+*				libreevent - StartPageEditorView.vue
+*
+*	Created by Janis Hutz 05/12/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
+<template>
+    <div>
+        <h2>Page editor</h2>
+    </div>
+</template>
+
+<script>
+    export default {
+        data () {
+            return {
+                formData: {}
+            }
+        },
+        methods: {
+            setup () {
+                
+            }
+        }
+    };
+</script>