some styling of event settings

This commit is contained in:
2023-06-23 18:28:54 +02:00
parent ea547fa6ef
commit f97d8ab0ec
9 changed files with 137 additions and 37 deletions

View File

@@ -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;

View File

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

View File

@@ -2,4 +2,11 @@
<div>
<h1>Account</h1>
</div>
</template>
</template>
<style>
nav {
display: initial;
}
</style>

View File

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

View File

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

View File

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

View File

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

View File

@@ -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' );
},

View File

@@ -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>