From f97d8ab0ec547730dc4bbd375406ee861f0c74e1 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Fri, 23 Jun 2023 18:28:54 +0200
Subject: [PATCH] some styling of event settings

---
 .../src/components/settings/settings.vue      | 14 ++-
 src/webapp/src/views/404.vue                  |  4 +
 src/webapp/src/views/AccountView.vue          |  9 +-
 src/webapp/src/views/CartView.vue             |  7 ++
 src/webapp/src/views/LoginView.vue            |  4 +
 src/webapp/src/views/OrderView.vue            |  7 ++
 src/webapp/src/views/PaymentView.vue          |  7 ++
 .../views/admin/events/EventsDetailsView.vue  | 93 ++++++++++++-------
 .../views/admin/page/StartPageEditorView.vue  | 29 ++++++
 9 files changed, 137 insertions(+), 37 deletions(-)
 create mode 100644 src/webapp/src/views/admin/page/StartPageEditorView.vue

diff --git a/src/webapp/src/components/settings/settings.vue b/src/webapp/src/components/settings/settings.vue
index 599a451..413c89f 100644
--- a/src/webapp/src/components/settings/settings.vue
+++ b/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;
diff --git a/src/webapp/src/views/404.vue b/src/webapp/src/views/404.vue
index a58c6dc..c0cbaf8 100644
--- a/src/webapp/src/views/404.vue
+++ b/src/webapp/src/views/404.vue
@@ -41,4 +41,8 @@
     .small {
         font-style: italic;
     }
+    
+    nav {
+        display: initial;
+    }
 </style>
diff --git a/src/webapp/src/views/AccountView.vue b/src/webapp/src/views/AccountView.vue
index cecaa72..e41aa66 100644
--- a/src/webapp/src/views/AccountView.vue
+++ b/src/webapp/src/views/AccountView.vue
@@ -2,4 +2,11 @@
     <div>
         <h1>Account</h1>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+
+<style>
+    nav {
+        display: initial;
+    }
+</style>
\ No newline at end of file
diff --git a/src/webapp/src/views/CartView.vue b/src/webapp/src/views/CartView.vue
index 89a86ee..f731860 100644
--- a/src/webapp/src/views/CartView.vue
+++ b/src/webapp/src/views/CartView.vue
@@ -133,3 +133,10 @@
         }
     }
 </script>
+
+
+<style>
+    nav {
+        display: initial;
+    }
+</style>
\ No newline at end of file
diff --git a/src/webapp/src/views/LoginView.vue b/src/webapp/src/views/LoginView.vue
index ee08242..6b45748 100644
--- a/src/webapp/src/views/LoginView.vue
+++ b/src/webapp/src/views/LoginView.vue
@@ -77,4 +77,8 @@
         padding: 5px 10px;
         margin-top: 2%;
     }
+
+    nav {
+        display: initial;
+    }
 </style>
\ No newline at end of file
diff --git a/src/webapp/src/views/OrderView.vue b/src/webapp/src/views/OrderView.vue
index e25be19..753c20a 100644
--- a/src/webapp/src/views/OrderView.vue
+++ b/src/webapp/src/views/OrderView.vue
@@ -100,3 +100,10 @@
         }
     };
 </script>
+
+
+<style>
+    nav {
+        display: initial;
+    }
+</style>
diff --git a/src/webapp/src/views/PaymentView.vue b/src/webapp/src/views/PaymentView.vue
index c9031f4..b5c0d2f 100644
--- a/src/webapp/src/views/PaymentView.vue
+++ b/src/webapp/src/views/PaymentView.vue
@@ -62,3 +62,10 @@
         margin-right: auto
     }
 </style>
+
+
+<style>
+    nav {
+        display: initial;
+    }
+</style>
\ No newline at end of file
diff --git a/src/webapp/src/views/admin/events/EventsDetailsView.vue b/src/webapp/src/views/admin/events/EventsDetailsView.vue
index 9d2ad5f..2e2d193 100644
--- a/src/webapp/src/views/admin/events/EventsDetailsView.vue
+++ b/src/webapp/src/views/admin/events/EventsDetailsView.vue
@@ -10,44 +10,56 @@
 <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>
-            <select v-model="event.location" class="small-text">
-                <option value="TestLocation">TestLocation</option>
-            </select>
-            <p>Event date</p>
-            <input v-model="event.date" class="small-text" type="date"><br>
-            <p>Ticket editor</p>
-            <router-link to="/admin/ticketEditor">Edit ticket layout</router-link>
+            <table class="category">
+                <tr>
+                    <td>Event location</td>
+                    <td>
+                        <select v-model="event.location" class="small-text">
+                            <option value="TestLocation">TestLocation</option>
+                        </select>
+                    </td>
+                </tr>
+                <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>
-            <table class="category" v-for="category in event.categories">
-                {{ category.name }}
-                <tr v-for="price in category.price">
-                    <td>
-                        {{ price.name }}:
-                    </td>
-                    <td>
-                        <input type="number" v-model="price.price">
-                    </td>
-                </tr>
-                <tr>
-                    <td>Foreground colour</td>
-                    <td>
-                        <input type="text" data-coloris v-model="category.fg" onkeydown="return false;">
-                    </td>
-                </tr>
-                <tr>
-                    <td>Background colour</td>
-                    <td>
-                        <input type="text" data-coloris v-model="category.bg" onkeydown="return false;">
-                    </td>
-                </tr>
-            </table>
+            <div class="category-wrapper">
+                <table class="category" v-for="category in event.categories">
+                    {{ category.name }}
+                    <tr v-for="price in category.price">
+                        <td>
+                            <div class="category-details">{{ price.name }}:</div>
+                        </td>
+                        <td>
+                            <input type="number" v-model="price.price">
+                        </td>
+                    </tr>
+                    <tr>
+                        <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><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>
@@ -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' );
         },
diff --git a/src/webapp/src/views/admin/page/StartPageEditorView.vue b/src/webapp/src/views/admin/page/StartPageEditorView.vue
new file mode 100644
index 0000000..8941587
--- /dev/null
+++ b/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>