From 10da2d6ba06baa2372faf1a149f488488ef1abb7 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Sun, 24 Sep 2023 11:27:58 +0200
Subject: [PATCH] start mobile optimization

---
 src/webapp/main/src/components/noseatplan.vue |  2 +-
 .../notifications/notifications.vue           |  2 ++
 .../src/components/notifications/popups.vue   |  2 ++
 .../seatplan/userApp/userWindow.vue           |  4 ++-
 .../main/src/components/sideCartView.vue      | 31 +++++++++++++------
 5 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/webapp/main/src/components/noseatplan.vue b/src/webapp/main/src/components/noseatplan.vue
index aa8407a..f3f5dad 100644
--- a/src/webapp/main/src/components/noseatplan.vue
+++ b/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>
diff --git a/src/webapp/main/src/components/notifications/notifications.vue b/src/webapp/main/src/components/notifications/notifications.vue
index 7c45b01..1bdac65 100644
--- a/src/webapp/main/src/components/notifications/notifications.vue
+++ b/src/webapp/main/src/components/notifications/notifications.vue
@@ -122,6 +122,8 @@
     }
 </script>
 
+<!-- TODO: Optimize for mobile -->
+
 <style scoped>
     .message-box {
         position: fixed;
diff --git a/src/webapp/main/src/components/notifications/popups.vue b/src/webapp/main/src/components/notifications/popups.vue
index 74bc425..792fb3d 100644
--- a/src/webapp/main/src/components/notifications/popups.vue
+++ b/src/webapp/main/src/components/notifications/popups.vue
@@ -170,6 +170,8 @@
     }
 </script>
 
+<!-- TODO: optimize for mobile -->
+
 <style scoped>
     #popup-backdrop {
         position: fixed;
diff --git a/src/webapp/main/src/components/seatplan/userApp/userWindow.vue b/src/webapp/main/src/components/seatplan/userApp/userWindow.vue
index 3781a5e..800c2b5 100644
--- a/src/webapp/main/src/components/seatplan/userApp/userWindow.vue
+++ b/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;
diff --git a/src/webapp/main/src/components/sideCartView.vue b/src/webapp/main/src/components/sideCartView.vue
index e22f4f1..4a3300f 100644
--- a/src/webapp/main/src/components/sideCartView.vue
+++ b/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>
\ No newline at end of file