janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-25 05:14:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

mobile optimize popups and notifications

Browse Source
This commit is contained in:
Janis Hutz
2023-09-29 16:03:32 +02:00
parent 7e4b04570e
commit bcc32f9b28
4 changed files with 126 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/server/backend/helperRoutes.js
View File

@@ -22,6 +22,11 @@ module.exports = ( app, settings ) => {
} ); } );
app.get( '/startPage/assets/:image', ( req, res ) => { 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' ) );
} ); } );
}; };

2
src/server/data/seatplan.json
View File

File diff suppressed because one or more lines are too long

122
src/webapp/main/src/components/notifications/notifications.vue
View File

@@ -130,52 +130,12 @@
z-index: 10; z-index: 10;
color: white; color: white;
transition: all 0.5s; transition: all 0.5s;
} width: 95vw;
right: 2.5vw;
.default { top: 1vh;
height: 10vh; 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 { .message-container {
display: flex; display: flex;
@@ -238,4 +198,80 @@
transform: rotate( 720deg ); 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> </style>

56
src/webapp/main/src/components/notifications/popups.vue
View File

@@ -170,8 +170,6 @@
} }
</script> </script>
<!-- TODO: optimize for mobile -->
<style scoped> <style scoped>
#popup-backdrop { #popup-backdrop {
position: fixed; position: fixed;
@@ -222,6 +220,8 @@
border: none; border: none;
border-radius: 20px; border-radius: 20px;
background-color: var( --popup-color ); background-color: var( --popup-color );
width: 90vw;
height: 80vh;
} }
.popup-iframe { .popup-iframe {
@@ -233,31 +233,6 @@
height: 100%; 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 { .message-container {
height: 90%; height: 90%;
width: 90%; width: 90%;
@@ -309,4 +284,31 @@
border: solid var( --primary-color ) 1px; border: solid var( --primary-color ) 1px;
border-radius: 100%; 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> </style>