janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-25 21:34:24 +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

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

@@ -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;
}
}
</style>

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

@@ -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>