Improved app.toast styles + changes templates to show icons

web/src/app/css/app.css

@@ -234,8 +234,53 @@ main {
 	top: 0;
 	width: 100%;
 	height: 100%;
+	overflow: auto;
+	user-select: none;
+	pointer-events: none;
 }
-
 #toasts {
 	margin: auto;
 }
+
+#toast-container.info,
+#toast-container.warn,
+#toast-container.error {
+	background: #0000004d;
+}
+
+.toast .fa { vertical-align: middle }
+.toast .text {
+	padding: 1em;
+	font-size: 1.1em;
+}
+.toast {
+	border-radius: 2em;
+	box-shadow: 0px 0px 2em #00000087;
+	border: 1px solid #00000012;
+	margin-top: 1em;
+	min-width: 15em;
+	color: #fff;
+	user-select: auto;
+	pointer-events: all;
+}
+.toast.info { background: #5959ff }
+.toast.warn { background: #cc8932 }
+.toast.error { background: #d74848 }
+
+.toast .confirm {
+	background: #00000036;
+	border-radius: 0px 0px 2em 2em;
+	padding: .4em 1em;
+}
+.toast .confirm .nope,
+.toast .confirm .yes {
+	padding: .5em;
+	font-weight: bold;
+	user-select: none;
+}
+.toast .confirm .nope {
+	color: #fba8a8;
+}
+.toast .confirm .yes {
+	color: #79ff79;
+}

web/src/app/css/base.css

@@ -7,6 +7,8 @@ body {
 	cursor: pointer;
 }
 
+.text-center { text-align: center }
+
 .flex { display: flex }
 .flex > .center { margin: auto }
 

web/src/app/js/app.js

@@ -324,11 +324,13 @@ app.toast = {
 		} else result = true;
 		return result;
 	},
-	dismiss: function(id) {
+	dismiss: function(id, e) {
+		if (e !== undefined) e.stopPropagation();
 		app.toast.confirms[id] = 0;
 		app.toast.remove(id);
 	},
-	accept: function(id) {
+	accept: function(id, e) {
+		if (e !== undefined) e.stopPropagation();
 		app.toast.confirms[id] = 1;
 		app.toast.remove(id);
 	},
@@ -369,6 +371,7 @@ app.toast = {
 		toasts.innerHTML += tplfilled;
 		setTimeout(function() { app.toast.remove(id) },
 			options.millis || 3000);
+		calcHeightMobile();
 	},
 }
 

web/src/app/js/templates/toast/confirm.html

@@ -1,8 +1,6 @@
-<div style="flex">
-	<div>
-		<a onclick="app.toast.dismiss('{.id}')">NO</a>
-	</div>
-	<div>
-		<a onclick="app.toast.accept('{.id}')">YES</a>
-	</div>
+<div class="confirm flex">
+	<a class="width-max text-center button rounder nope"
+		onclick="app.toast.dismiss('{.id}', event)">NO</a>
+	<a class="width-max text-center button rounder yes"
+		onclick="app.toast.accept('{.id}', event)">YES</a>
 </div>

web/src/app/js/templates/toast/error.html

@@ -1,3 +1,6 @@
-<div id="{.id}">
-	<div>{.text}</div>
+<div id="{.id}" class="toast error"
+	onclick="app.toast.dismiss('{.id}')">
+	<div class="text"><i class="fa fa-times fa-fw">
+		</i>{.text}</div>
+	{confirmTemplate}
 </div>

web/src/app/js/templates/toast/info.html

@@ -1,4 +1,6 @@
-<div id="{.id}" style="background: blue">
-	<div>{.text}</div>
+<div id="{.id}" class="toast info"
+	onclick="app.toast.dismiss('{.id}')">
+	<div class="text"><i class="fa fa-info fa-fw">
+		</i>{.text}</div>
 	{confirmTemplate}
 </div>

web/src/app/js/templates/toast/warn.html

@@ -1,3 +1,6 @@
-<div id="{.id}">
-	<div>{.text}</div>
+<div id="{.id}" class="toast warn"
+	onclick="app.toast.dismiss('{.id}')">
+	<div class="text"><i class="fa fa-warning fa-fw">
+		</i>{.text}</div>
+	{confirmTemplate}
 </div>