mustard: theme: Aggiunte regole per notifs.php.

web/mustard/js/notifs.js.php

@@ -41,18 +41,18 @@ function markread(notif) {
 }
 
 function markdeleted(notif) {
-    let xhr=new XMLHttpRequest();
-    xhr.open('GET','notifsh.php?act=delete&id='+notif.id.replace(/^notif-([0-9]+)$/,'$1'));
-    xhr.responseType='json';
+    let xhr = new XMLHttpRequest();
+    xhr.open('GET', 'notifsh.php?act=delete&id=' + notif.id.replace(/^notif-([0-9]+)$/, '$1'));
+    xhr.responseType = 'json';
     xhr.send();
-    xhr.onload=function() {
+    xhr.onload = function () {
         if (xhr.response['deleted']) {
             notif.remove();
         } else {
-            alert("Il server non ha potuto cancellare la notifica " + notif.text);
+            alert("Il server non ha potuto cancellare la notifica '" + notif.text + "'");
         }
     };
-    xhr.onerror=function() {
+    xhr.onerror = function () {
         alert('La richiesta è fallita.');
     };
 }

web/mustard/theme.css

@@ -118,6 +118,7 @@ p {
 .bad {
 	background-color: #DE8787;
 }
+
 .neut {
 	background-color: #FFCCAA;
 }
@@ -128,42 +129,6 @@ p {
 	color: black;
 }
 
-#notifs-list-controls {
-	margin-top: 32px;
-	margin-left: 360px;
-	margin-right: 360px;
-}
-
-#notifs-list {
-	margin-left: 360px;
-	margin-right: 360px;
-}
-
-#notifs-list div {
-	padding: 3px;
-	margin:  10px;
-	min-width: 360px;
-
-	vertical-align: top;
-
-	word-break: break-word;
-
-	background-color: #87DE87;
-	border-radius: 5px;
-}
-
-#notifs-list div.sev-warning {
-	background-color: #FFEEAA;
-}
-
-#notifs-list div.sev-error {
-	background-color: #DE8787;
-}
-
-#notifs-list div.seen {
-	background-color: lightgrey;
-}
-
 .ourfield {
 	background-color: #FFB380;
 }
@@ -849,15 +814,82 @@ input {
 	color: black;
 	border-radius: 6px;
 }
+
 .message p, ul {
 	margin-bottom: 10px;
 }
 
-@media only screen and (max-width:720px) {
+#notifs-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-gap: 10px;
+}
+
+#notifs-list-controls {
+	display: inline-block;
+	overflow: auto;
+	margin-top: 32px;
+	margin-left: 10px;
+	margin-right: 10px;
+	grid-column: 2;
+	border-radius: 5px;
+	padding: 3px;
+	background-color: #FFEEAA;
+}
+
+#global-selector {
+	width: auto;
+}
+
+.control-btn {
+	float: right;
+	visibility: hidden;
+}
+
+#notifs-list {
+	grid-column: 2;
+}
+
+div.notif {
+	padding: 5px;
+	margin: 10px;
+	word-break: break-word;
+	background-color: #87DE87;
+	border-radius: 5px;
+}
+
+div.notif p {
+	text-align: center;
+	padding: 3px;
+}
+
+
+div.notif input {
+	width: auto;
+}
+
+div.notif button {
+	float: right;
+}
+
+div.sev-warning {
+	background-color: #FFEEAA;
+}
+
+div.sev-error {
+	background-color: #DE8787;
+}
+
+div.seen {
+	background-color: lightgrey;
+}
+
+@media only screen and (max-width: 720px) {
 	.bigtab td {
 		width: 244px;
 		min-width: 244px;
 	}
+
 	.message {
 		width: 340px;
 	}