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