From bcc32f9b28e5582a4ebbe02bb78972847d81adc8 Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Fri, 29 Sep 2023 16:03:32 +0200 Subject: [PATCH] mobile optimize popups and notifications --- src/server/backend/helperRoutes.js | 7 +- src/server/data/seatplan.json | 2 +- .../notifications/notifications.vue | 144 +++++++++++------- .../src/components/notifications/popups.vue | 56 +++---- 4 files changed, 126 insertions(+), 83 deletions(-) diff --git a/src/server/backend/helperRoutes.js b/src/server/backend/helperRoutes.js index 8b65419..e8b689a 100644 --- a/src/server/backend/helperRoutes.js +++ b/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' ) ); } ); }; \ No newline at end of file diff --git a/src/server/data/seatplan.json b/src/server/data/seatplan.json index c5b2600..4214ea0 100644 --- a/src/server/data/seatplan.json +++ b/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","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"2"}}},"save":{"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":1037.99,"y":164.215,"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":137.24,"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.961,"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","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"2"}}}}} \ No newline at end of file +{"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":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","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"2"}}},"save":{"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":1037.99,"y":164.215,"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":137.24,"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.961,"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","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"2"}}}}} \ No newline at end of file diff --git a/src/webapp/main/src/components/notifications/notifications.vue b/src/webapp/main/src/components/notifications/notifications.vue index 1bdac65..6eb00d8 100644 --- a/src/webapp/main/src/components/notifications/notifications.vue +++ b/src/webapp/main/src/components/notifications/notifications.vue @@ -130,53 +130,13 @@ z-index: 10; color: white; transition: all 0.5s; - } - - .default { + width: 95vw; + right: 2.5vw; + 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; + } + } \ No newline at end of file diff --git a/src/webapp/main/src/components/notifications/popups.vue b/src/webapp/main/src/components/notifications/popups.vue index 792fb3d..46423e3 100644 --- a/src/webapp/main/src/components/notifications/popups.vue +++ b/src/webapp/main/src/components/notifications/popups.vue @@ -170,8 +170,6 @@ } - - \ No newline at end of file