Add ratio & alt attribute to stats images

Author: xf-

config.js

@@ -6,40 +6,52 @@ module.exports = function () {
         'name': 'Clientstatistik',
         'href': 'https://regensburg.freifunk.net/netz/statistik/node/{NODE_ID}/',
         'image': 'https://grafana.regensburg.freifunk.net/render/d-solo/000000026/node?panelId=1&var-node={NODE_ID}&from=now-1d&width=650&height=350&theme=light&_t={TIME}',
-        'title': 'Clientstatistik für {NODE_ID} - weiteren Statistiken'
+        'title': 'Clientstatistik für {NODE_ID} - weiteren Statistiken',
+        'width': 650,
+        'height': 350
       },
       {
         'name': 'Trafficstatistik',
         'href': 'https://regensburg.freifunk.net/netz/statistik/node/{NODE_ID}/',
         'image': 'https://grafana.regensburg.freifunk.net/render/d-solo/000000026/node?panelId=2&from=now-1d&var-node={NODE_ID}&width=650&height=350&theme=light&_t={TIME}',
-        'title': 'Trafficstatistik für {NODE_ID} - weiteren Statistiken'
+        'title': 'Trafficstatistik für {NODE_ID} - weiteren Statistiken',
+        'width': 650,
+        'height': 350
       },
       {
         'name': 'Systemlast',
         'href': 'https://regensburg.freifunk.net/netz/statistik/node/{NODE_ID}/',
         'image': 'https://grafana.regensburg.freifunk.net/render/d-solo/000000026/node?panelId=4&from=now-1d&var-node={NODE_ID}&width=650&height=350&theme=light&_t={TIME}',
-        'title': 'Systemlast für {NODE_ID} - weiteren Statistiken'
+        'title': 'Systemlast für {NODE_ID} - weiteren Statistiken',
+        'width': 650,
+        'height': 350
       },
       {
         'name': 'Airtime',
         'href': 'https://regensburg.freifunk.net/netz/statistik/node/{NODE_ID}/',
         'image': 'https://grafana.regensburg.freifunk.net/render/d-solo/000000026/node?panelId=5&from=now-1d&var-node={NODE_ID}&width=650&height=350&theme=light&_t={TIME}',
-        'title': 'Airtime für {NODE_ID} - weiteren Statistiken'
+        'title': 'Airtime für {NODE_ID} - weiteren Statistiken',
+        'width': 650,
+        'height': 350
       }
     ],
     'linkInfos': [
       {
         'name': 'Statistik für alle Links zwischen diese Knoten',
         'image': 'https://grafana.regensburg.freifunk.net/render/d-solo/nvSNqoHmz/link?panelId=7&var-node={SOURCE_ID}&var-nodetolink={TARGET_ID}&from=now-1d&&width=650&height=350&theme=light&_t={TIME}',
-        'title': 'Linkstatistik des letzten Tages, min und max aller Links zwischen diesen Knoten'
+        'title': 'Linkstatistik des letzten Tages, min und max aller Links zwischen diesen Knoten',
+        'width': 650,
+        'height': 350
       }
     ],
     'globalInfos': [
       {
         'name': 'Globale Statistik',
         'href': 'https://regensburg.freifunk.net/netz/statistik',
         'image': 'https://grafana.regensburg.freifunk.net/render/d-solo/000000028/globals?panelId=2&from=now-7d&&width=650&height=350&theme=light&_t={TIME}',
-        'title': 'Globale Statistik - weiteren Statistiken'
+        'title': 'Globale Statistik - weiteren Statistiken',
+        'width': 650,
+        'height': 350
       }
     ],
     // Array of data provider are supported

lib/utils/helper.js

@@ -117,10 +117,10 @@ define({
     }
   },
   showStat: function showStat(V, o, subst) {
-    var content = V.h('img', { attrs: { src: require('helper').listReplace(o.image, subst) } });
+    var content = V.h('img', { attrs: { src: require('helper').listReplace(o.image, subst), width: o.width, height: o.height, alt: _.t('loading', { name: o.name }) } });
 
     if (o.href) {
-      return V.h('p', V.h('a', {
+      return V.h('div', V.h('a', {
         attrs:
           {
             href: require('helper').listReplace(o.href, subst),
@@ -129,7 +129,7 @@ define({
           }
       }, content));
     }
-    return V.h('p', content);
+    return V.h('div', content);
   },
 
   getTileBBox: function getTileBBox(s, map, tileSize, margin) {

locale/de.json

@@ -93,5 +93,6 @@
   "others": "andere",
   "none": "keine",
   "remove": "entfernen",
-  "close": "schließen"
+  "close": "schließen",
+  "loading": "%{name} graoh (wird generiert)"
 }

locale/en.json

@@ -93,5 +93,6 @@
   "others": "other",
   "none": "none",
   "remove": "remove",
-  "close": "close"
+  "close": "close",
+  "loading": "%{name} graph (is generated)"
 }

scss/modules/_base.scss

@@ -55,6 +55,7 @@ h4 {
 
 img {
   max-width: 100%;
+  height: auto;
 }
 
 a {

scss/modules/_sidebar.scss

@@ -29,6 +29,11 @@
     padding-bottom: 15px;
   }
 
+  img {
+    padding: 0 $button-distance 1em;
+    box-sizing: border-box;
+  }
+
   .node-list,
   .node-links,
   .link-list {