start mobile optimization

src/webapp/main/src/components/noseatplan.vue

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

src/webapp/main/src/components/notifications/notifications.vue

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

src/webapp/main/src/components/notifications/popups.vue

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

src/webapp/main/src/components/seatplan/userApp/userWindow.vue

@@ -42,7 +42,7 @@
             <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>
         </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>
         <popups ref="popups" size="normal" @data="data => { reserveTicket( data ) }"
             @ticket="data => { standingTicketHandling( data ) }"></popups>
@@ -505,6 +505,8 @@
     }
 </script>
 
+<!-- TODO: Optimize as well -->
+
 <style scoped>
     .parent {
         height: 80vh;

src/webapp/main/src/components/sideCartView.vue

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