mobile optimize popups and notifications

src/server/backend/helperRoutes.js

@@ -22,6 +22,11 @@ module.exports = ( app, settings ) => {
     } );
 
     app.get( '/startPage/assets/:image', ( req, res ) => {
-        res.sendFile( path.join( __dirname + '/../assets/' + settings.startPage + '/assets/' + req.param.image  ) );
+        res.sendFile( path.join( __dirname + '/../assets/' + settings.startPage + '/assets/' + req.params.image  ) );
+    } );
+
+    app.get( '/startPage/preview/:template', ( req, res ) => {
+        // TODO: only allow when logged in
+        res.sendFile( path.join( __dirname + '/../ui/home/templates/' + req.params.template + '/index.html' ) );
     } );
 };

src/server/data/seatplan.json

@@ -1 +1 @@
-{"test2":{"draft":{"seatInfo":{"data":{"1":{"0":22,"1":22,"2":22,"3":22,"4":22,"5":22,"6":22,"7":22,"8":22,"9":22,"10":22,"11":22,"12":22,"13":22,"14":22,"15":22}},"count":352},"data":{"1":{"x":296.892,"y":13.495,"h":560.66,"w":728.735,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"seat","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1"},"2":{"x":357.007,"y":660.033,"h":117.775,"w":601.145,"active":false,"draggable":true,"resizable":true,"id":2,"origin":3,"shape":"rectangular","type":"stage","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"1"},"3":{"x":517.721,"y":669.847,"h":80.971,"w":304.253,"active":false,"draggable":true,"resizable":true,"id":3,"origin":1,"shape":"rectangular","type":"text","startingRow":1,"seatNumberingPosition":2,"sector":"A","text":{"text":"Stage","textSize":25,"colour":"#2160ff"},"ticketCount":1,"numberingDirection":"left","category":"1"}}},"save":{"seatInfo":{"data":{"1":{"0":22,"1":22,"2":22,"3":22,"4":22,"5":22,"6":22,"7":22,"8":22,"9":22,"10":22,"11":22,"12":22,"13":22,"14":22,"15":22}},"count":0},"data":{"1":{"x":296.892,"y":13.495,"h":560.66,"w":728.735,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"seat","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1"},"2":{"x":357.375,"y":660.049,"h":117.775,"w":601.145,"active":false,"draggable":true,"resizable":true,"id":2,"origin":3,"shape":"rectangular","type":"stage","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"1"},"3":{"x":517.828,"y":670.99,"h":80.971,"w":304.253,"active":false,"draggable":true,"resizable":true,"id":3,"origin":1,"shape":"rectangular","type":"text","startingRow":1,"seatNumberingPosition":2,"sector":"A","text":{"text":"Stage","textSize":25,"colour":"#2160ff"},"ticketCount":1,"numberingDirection":"left","category":"1"}}}},"test":{"draft":{},"save":{"seatInfo":{"data":{"1":{"0":22}},"count":0},"data":{"1":{"x":427.696,"y":160.539,"h":371.324,"w":734.069,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"stand","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1","ticketCount":50}}}},"testLocationNoSeatplan":{"draft":{},"save":{"seatInfo":{"data":{"1":{"0":13,"1":13,"2":13,"3":13,"4":13,"startingRow":1}},"count":50},"data":{"1":{"x":370.138,"y":164.1,"h":288.088,"w":745.746,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"stand","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1","ticketCount":50}}}},"complexSeatplan":{"draft":{"seatInfo":{"details":{"1":{"0":14,"1":14,"2":14,"3":14,"4":14,"5":14,"6":14,"7":14,"startingRow":1},"2":{"0":2,"1":4,"2":5,"3":7,"4":8,"5":10,"6":11,"7":13,"startingRow":1},"3":{"0":2,"1":4,"2":6,"3":8,"4":10,"5":12,"startingRow":1},"4":{"0":9,"1":9,"2":9,"startingRow":1}},"count":244,"data":{"A":{"1":{"0":2,"1":4,"2":6,"3":8,"4":10,"5":12,"startingRow":1},"2":{"0":14,"1":14,"2":14,"3":14,"4":14,"5":14,"6":14,"7":14,"startingRow":1},"3":{"0":2,"1":4,"2":5,"3":7,"4":8,"5":10,"6":11,"7":13,"startingRow":1},"4":{"0":9,"1":9,"2":9,"startingRow":1}}}},"data":{"1":{"x":574.098,"y":146.907,"h":282.216,"w":475.515,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"seat","startingRow":1,"seatNumberingPosition":2,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1"},"2":{"x":1036.082,"y":162.371,"h":297.68,"w":589.562,"active":false,"draggable":true,"resizable":true,"id":2,"origin":1,"shape":"circular","type":"seat","startingRow":1,"seatNumberingPosition":3,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"1"},"3":{"x":262.887,"y":135.309,"h":322.809,"w":317.01,"active":false,"draggable":true,"resizable":true,"id":3,"origin":2,"shape":"trapezoid","type":"seat","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"1"},"4":{"x":715.206,"y":606.959,"h":119.845,"w":303.479,"active":false,"draggable":true,"resizable":true,"id":4,"origin":1,"shape":"rectangular","type":"seat","startingRow":1,"seatNumberingPosition":4,"sector":"A","text":{"text":"TestText","teLine truncated
+{"test2":{"draft":{"seatInfo":{"data":{"1":{"0":22,"1":22,"2":22,"3":22,"4":22,"5":22,"6":22,"7":22,"8":22,"9":22,"10":22,"11":22,"12":22,"13":22,"14":22,"15":22}},"count":352},"data":{"1":{"x":296.892,"y":13.495,"h":560.66,"w":728.735,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"seat","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1"},"2":{"x":357.007,"y":660.033,"h":117.775,"w":601.145,"active":false,"draggable":true,"resizable":true,"id":2,"origin":3,"shape":"rectangular","type":"stage","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"1"},"3":{"x":517.721,"y":669.847,"h":80.971,"w":304.253,"active":false,"draggable":true,"resizable":true,"id":3,"origin":1,"shape":"rectangular","type":"text","startingRow":1,"seatNumberingPosition":2,"sector":"A","text":{"text":"Stage","textSize":25,"colour":"#2160ff"},"ticketCount":1,"numberingDirection":"left","category":"1"}}},"save":{"seatInfo":{"data":{"1":{"0":22,"1":22,"2":22,"3":22,"4":22,"5":22,"6":22,"7":22,"8":22,"9":22,"10":22,"11":22,"12":22,"13":22,"14":22,"15":22}},"count":0},"data":{"1":{"x":296.892,"y":13.495,"h":560.66,"w":728.735,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"seat","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1"},"2":{"x":357.375,"y":660.049,"h":117.775,"w":601.145,"active":false,"draggable":true,"resizable":true,"id":2,"origin":3,"shape":"rectangular","type":"stage","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"1"},"3":{"x":517.828,"y":670.99,"h":80.971,"w":304.253,"active":false,"draggable":true,"resizable":true,"id":3,"origin":1,"shape":"rectangular","type":"text","startingRow":1,"seatNumberingPosition":2,"sector":"A","text":{"text":"Stage","textSize":25,"colour":"#2160ff"},"ticketCount":1,"numberingDirection":"left","category":"1"}}}},"test":{"draft":{},"save":{"seatInfo":{"data":{"1":{"0":22}},"count":0},"data":{"1":{"x":427.696,"y":160.539,"h":371.324,"w":734.069,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"stand","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1","ticketCount":50}}}},"testLocationNoSeatplan":{"draft":{"seatInfo":{"details":{"1":{"0":9,"1":9,"2":9,"startingRow":1}},"count":50,"data":{"A":{"1":{"0":9,"1":9,"2":9,"startingRow":1}}}},"data":{"1":{"x":369.755,"y":163.899,"h":287.15,"w":744.755,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"stand","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1","ticketCount":50}}},"save":{"seatInfo":{"data":{"1":{"0":13,"1":13,"2":13,"3":13,"4":13,"startingRow":1}},"count":50},"data":{"1":{"x":370.138,"y":164.1,"h":288.088,"w":745.746,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"stand","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1","ticketCount":50}}}},"complexSeatplan":{"draft":{"seatInfo":{"details":{"1":{"0":14,"1":14,"2":14,"3":14,"4":14,"5":14,"6":14,"7":14,"startingRow":1},"2":{"0":2,"1":4,"2":5,"3":7,"4":8,"5":10,"6":11,"7":13,"startingRow":1},"3":{"0":2,"1":4,"2":6,"3":8,"4":10,"5":12,"startingRow":1},"4":{"0":9,"1":9,"2":9,"startingRow":1}},"count":244,"data":{"A":{"1":{"0":2,"1":4,"2":6,"3":8,"4":10,"5":12,"startingRow":1},"2":{"0":14,"1":14,"2":14,"3":14,"4":14,"5":14,"6":14,"7":14,"startingRow":1},"3":{"0":2,"1":4,"2":5,"3":7,"4":8,"5":10,"6":11,"7":13,"startingRow":1},"4":{"0":9,"1":9,"2":9,"startingRow":1}}}},"data":{"1":{"x":574.098,"y":146.907,"h":282.216,"w":475.515,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"seat","startingRow":1,"seatNumberingPosition":2,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1"},"2":{"x":1036.082,"y":162.371,"h":297.68,"w":589.562,"active":false,"draggable":true,"resizable":true,"id":2,"origin":1,"shape":"circular","type":"seat","startingRow":1,"seatNumberingPosition":3,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"1"},"3":{"x":262.887,"y":135.309,"h":322.809,"w":317.01,"active":false,"draggable":true,"resizable":tLine truncated

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

@@ -130,53 +130,13 @@
         z-index: 10;
         color: white;
         transition: all 0.5s;
-    }
+        width: 95vw;
-
+        right: 2.5vw;
-    .default {
+        top: 1vh;
         height: 10vh;
-        width: 15vw;
-    }
-
-    .small {
-        height: 7vh;
-        width: 11vw;
-    }
-
-    .big {
-        height: 12vh;
-        width: 17vw;
-    }
-
-    .bigger {
-        height: 15vh;
-        width: 20vw;
-    }
-
-    .huge {
-        height: 20vh;
-        width: 25vw;
-    }
-
-    .topleft {
-        top: 3vh;
-        left: 0.5vw;
-    }
-
-    .topright {
-        top: 3vh;
-        right: 0.5vw;
-    }
-
-    .bottomright {
-        bottom: 3vh;
-        right: 0.5vw;
-    }
-
-    .bottomleft {
-        top: 3vh;
-        right: 0.5vw;
     }
 
+    
     .message-container {
         display: flex;
         justify-content: center;
@@ -187,7 +147,7 @@
         transition: all 0.5s;
         cursor: default;
     }
-
+    
     .types {
         color: white;
         border-radius: 100%;
@@ -196,40 +156,40 @@
         padding: 1.5%;
         font-size: 200%;
     }
-
+    
     .message {
         margin-right: 5%;
         text-align: end;
     }
-
+    
     .ok {
         background-color: rgb(1, 71, 1);
     }
-
+    
     .error {
         background-color: rgb(114, 1, 1);
     }
-
+    
     .info {
         background-color: rgb(44, 112, 151);
     }
-
+    
     .warning {
         background-color: orange;
     }
-
+    
     .hide {
         opacity: 0;
     }
-
+    
     .progress {
         background-color: rgb(0, 0, 99);
     }
-
+    
     .progress-spinner {
         animation: spin 2s infinite linear;
     }
-
+    
     @keyframes spin {
         from {
             transform: rotate( 0deg );
@@ -238,4 +198,80 @@
             transform: rotate( 720deg );
         }
     }
+
+    @media only screen and (min-width: 750px) {
+
+        .default {
+            height: 10vh;
+            width: 32vw;
+        }
+
+        .small {
+            height: 7vh;
+            width: 27vw;
+        }
+
+        .big {
+            height: 12vh;
+            width: 38vw;
+        }
+
+        .bigger {
+            height: 15vh;
+            width: 43vw;
+        }
+
+        .huge {
+            height: 20vh;
+            width: 50vw;
+        }
+
+        .topleft {
+            top: 3vh;
+            left: 0.5vw;
+        }
+
+        .topright {
+            top: 3vh;
+            right: 0.5vw;
+        }
+
+        .bottomright {
+            bottom: 3vh;
+            right: 0.5vw;
+        }
+
+        .bottomleft {
+            top: 3vh;
+            right: 0.5vw;
+        }
+    }
+
+
+    @media only screen and (min-width: 1500px) {
+        .default {
+            height: 10vh;
+            width: 15vw;
+        }
+
+        .small {
+            height: 7vh;
+            width: 11vw;
+        }
+
+        .big {
+            height: 12vh;
+            width: 17vw;
+        }
+
+        .bigger {
+            height: 15vh;
+            width: 20vw;
+        }
+
+        .huge {
+            height: 20vh;
+            width: 25vw;
+        }
+    }
 </style>

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

@@ -170,8 +170,6 @@
     }
 </script>
 
-<!-- TODO: optimize for mobile -->
-
 <style scoped>
     #popup-backdrop {
         position: fixed;
@@ -222,6 +220,8 @@
         border: none;
         border-radius: 20px;
         background-color: var( --popup-color );
+        width: 90vw;
+        height: 80vh;
     }
 
     .popup-iframe {
@@ -233,31 +233,6 @@
         height: 100%;
     }
 
-    .small {
-        width: 40%;
-        height: 40%;
-    }
-
-    .normal {
-        width: 50%;
-        height: 50%;
-    }
-
-    .big {
-        width: 60%;
-        height: 60%;
-    }
-
-    .bigger {
-        width: 70%;
-        height: 70%;
-    }
-
-    .huge {
-        width: 80%;
-        height: 80%;
-    }
-
     .message-container {
         height: 90%;
         width: 90%;
@@ -309,4 +284,31 @@
         border: solid var( --primary-color ) 1px;
         border-radius: 100%;
     }
+
+    @media only screen and (min-width: 999px) {
+        .small {
+            width: 40%;
+            height: 40%;
+        }
+
+        .normal {
+            width: 50%;
+            height: 50%;
+        }
+
+        .big {
+            width: 60%;
+            height: 60%;
+        }
+
+        .bigger {
+            width: 70%;
+            height: 70%;
+        }
+
+        .huge {
+            width: 80%;
+            height: 80%;
+        }
+    }
 </style>