From 8e525b48a67abe7fd4f8195928523818bd93a1e4 Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Sat, 9 Apr 2016 22:18:01 +0200
Subject: [PATCH] client/general: correct A:R for thumbnails

---
 client/css/main.css                  | 12 ++++++++++++
 client/css/users.css                 |  2 +-
 client/html/user_summary.hbs         |  2 +-
 client/js/util/handlebars-helpers.js |  8 ++++++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/client/css/main.css b/client/css/main.css
index be83132a..7ff46206 100644
--- a/client/css/main.css
+++ b/client/css/main.css
@@ -148,3 +148,15 @@ nav.text-nav ul li.active a {
     border: 1px solid var(--message-success-border-color);
     background: var(--message-success-background-color);
 }
+
+.thumbnail {
+    /*background-image: attr(data-src url);*/ /* not available yet */
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+.thumbnail img {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+}
diff --git a/client/css/users.css b/client/css/users.css
index 6ba3d5fa..b9be874a 100644
--- a/client/css/users.css
+++ b/client/css/users.css
@@ -45,7 +45,7 @@
 #user .text-nav {
     margin-bottom: 1.5em;
 }
-#user-summary img {
+#user-summary .thumbnail {
     width: 6em;
     height: 6em;
     margin: 0 1.5em 1.5em 0;
diff --git a/client/html/user_summary.hbs b/client/html/user_summary.hbs
index b23a120e..f95eb2de 100644
--- a/client/html/user_summary.hbs
+++ b/client/html/user_summary.hbs
@@ -1,5 +1,5 @@
 <div id='user-summary'>
-    <img src='{{this.user.avatarUrl}}' alt='{{this.user.name}}&rsquo;s avatar'/>
+    {{thumbnail this.user.avatarUrl}}
     <ul class='basic-info'>
         <li>Registered: {{reltime this.user.creationTime}}</li>
         <li>Last seen: {{reltime this.user.lastLoginTime}}</li>
diff --git a/client/js/util/handlebars-helpers.js b/client/js/util/handlebars-helpers.js
index 03eb7f1a..9e69f764 100644
--- a/client/js/util/handlebars-helpers.js
+++ b/client/js/util/handlebars-helpers.js
@@ -10,6 +10,14 @@ handlebars.registerHelper('reltime', function(time) {
         '</time>');
 });
 
+handlebars.registerHelper('thumbnail', function(url) {
+    return new handlebars.SafeString(
+        '<div class="thumbnail" ' +
+        'style="background-image: url(\'' + url + '\')">' +
+        '<img alt="thumbnail" src="' + url + '"/>' +
+        '</div>');
+});
+
 handlebars.registerHelper('toLowerCase', function(str) {
     return str.toLowerCase();
 });