mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 13:24:24 +00:00
start mobile optimization
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -122,6 +122,8 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- TODO: Optimize for mobile -->
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.message-box {
|
.message-box {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
@@ -170,6 +170,8 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- TODO: optimize for mobile -->
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
#popup-backdrop {
|
#popup-backdrop {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
Reference in New Issue
Block a user