/all display a mozaic

static/css/style.css

@@ -19,11 +19,25 @@ figure.big {
     vertical-align: middle;
 }
 
+figure.moz {
+    display: block;
+    float: left;
+    height: 190px;
+    width: 300px;
+    text-align: center;
+    vertical-align: middle;
+}
+
 .big img {
     max-height: calc(100vh - 5px);
     max-width: calc(100vw - 5px);
 }
 
+.moz img {
+    max-height: 190px;
+    max-width: 300px;
+}
+
 a {
     outline: none;
 }

static/js/youp0m.js

@@ -12,6 +12,34 @@ function get_picts(then, then_value) {
     });
 }
 
+function show_mozaic() {
+    if (!picts) {
+	get_picts(show_mozaic);
+	return;
+    }
+
+    while (document.body.hasChildNodes())
+	document.body.removeChild(document.body.lastChild);
+
+    picts.forEach(function (pict) {
+	var figure = document.createElement("figure");
+	figure.className = "moz";
+	var img = document.createElement("img");
+	img.src = img_url + pict.name;
+	img.alt = pict.name;
+	var link = document.createElement("a");
+	link.onclick = function(e) {
+	    window.history.pushState(null, "YouP0m", link.href);
+	    sync();
+	    return false;
+	};
+	link.href = "/" + pict.name;
+	link.appendChild(img);
+	figure.appendChild(link);
+	document.body.appendChild(figure);
+    });
+}
+
 function show_picture(id) {
     if (!picts) {
 	get_picts(show_picture, id);
@@ -84,7 +112,11 @@ function display_error(msg) {
 }
 
 function sync() {
-    show_picture(window.location.pathname.slice(1));
+    path = window.location.pathname.slice(1);
+    if (path == "all")
+	show_mozaic();
+    else
+	show_picture(path);
 }
 
 window.onpopstate = sync;