start mobile optimization

This commit is contained in:
2023-09-24 11:27:58 +02:00
parent 167f1c8037
commit 10da2d6ba0
5 changed files with 30 additions and 11 deletions

View File

@@ -1,6 +1,5 @@
<template> <template>
<div class="seatingWrapper"> <div class="seatingWrapper">
<sideCartView :cart="cart" :name="event.name" ref="cart"></sideCartView>
<div class="noseatplan"> <div class="noseatplan">
<h2>Available tickets</h2> <h2>Available tickets</h2>
<button @click="cartHandling()">Add selected tickets to cart</button> <button @click="cartHandling()">Add selected tickets to cart</button>
@@ -25,6 +24,7 @@
</div> </div>
</div> </div>
</div> </div>
<sideCartView :cart="cart" :name="event.name" ref="cart" type="false"></sideCartView>
<popups ref="popups" size="normal"></popups> <popups ref="popups" size="normal"></popups>
</div> </div>
</template> </template>

View File

@@ -122,6 +122,8 @@
} }
</script> </script>
<!-- TODO: Optimize for mobile -->
<style scoped> <style scoped>
.message-box { .message-box {
position: fixed; position: fixed;

View File

@@ -170,6 +170,8 @@
} }
</script> </script>
<!-- TODO: optimize for mobile -->
<style scoped> <style scoped>
#popup-backdrop { #popup-backdrop {
position: fixed; position: fixed;

View File

@@ -42,7 +42,7 @@
<button title="Reset zoom [=]" @click="zoom( 1 );"><span class="material-symbols-outlined">center_focus_strong</span></button> <button title="Reset zoom [=]" @click="zoom( 1 );"><span class="material-symbols-outlined">center_focus_strong</span></button>
<button title="Zoom out [-]" @click="zoom( -0.2 )"><span class="material-symbols-outlined">zoom_out</span></button> <button title="Zoom out [-]" @click="zoom( -0.2 )"><span class="material-symbols-outlined">zoom_out</span></button>
</div> </div>
<sideCartView :cart="cart" :name="event.name" ref="cart"></sideCartView> <sideCartView :cart="cart" :name="event.name" ref="cart" type="true"></sideCartView>
<notifications ref="notification" location="topright"></notifications> <notifications ref="notification" location="topright"></notifications>
<popups ref="popups" size="normal" @data="data => { reserveTicket( data ) }" <popups ref="popups" size="normal" @data="data => { reserveTicket( data ) }"
@ticket="data => { standingTicketHandling( data ) }"></popups> @ticket="data => { standingTicketHandling( data ) }"></popups>
@@ -505,6 +505,8 @@
} }
</script> </script>
<!-- TODO: Optimize as well -->
<style scoped> <style scoped>
.parent { .parent {
height: 80vh; height: 80vh;

View File

@@ -8,7 +8,7 @@
--> -->
<template> <template>
<div id="sideCartView"> <div id="sideCartView" :class="type ? 'seatplan': 'noseatplan'">
<h1>Seat plan: {{ name }}</h1> <h1>Seat plan: {{ name }}</h1>
<h2>Cart</h2> <h2>Cart</h2>
<div v-if="Object.keys( cart ).length > 0" style="height: 100%; width: 100%;"> <div v-if="Object.keys( cart ).length > 0" style="height: 100%; width: 100%;">
@@ -62,9 +62,9 @@ export default {
type: String, type: String,
default: 'CHF' default: 'CHF'
}, },
'height': { 'type': {
type: Number, type: Boolean,
default: 17 default: true
}, },
'name': { 'name': {
type: String, type: String,
@@ -94,15 +94,18 @@ export default {
<style scoped> <style scoped>
#sideCartView { #sideCartView {
position: fixed;
right: 0;
height: 100vh;
top: 90px;
width: 25vw;
background-color: var( --accent-background ); background-color: var( --accent-background );
color: var( --secondary-color ); color: var( --secondary-color );
} }
.seatplan {
width: 100%;
position: absolute;
top: calc( 90px + 80vh );
height: fit-content;
padding-bottom: 5%;
}
.tickets-table { .tickets-table {
width: 80%; width: 80%;
} }
@@ -117,4 +120,14 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@media only screen and (min-width: 999px) {
#sideCartView {
position: fixed;
right: 0;
height: 100vh;
top: 90px;
width: 25vw;
}
}
</style> </style>