iv.js/CSS: Use flexbox to keep next/prev buttons aligned at the center

2 files changed, 20 insertions, 15 deletions

diff --git a/data/style.css b/data/style.css
index cce9e6d8..148994f3 100644
--- a/data/style.css
+++ b/data/style.css
@@ -1012,18 +1012,20 @@ div#iv_view {
 /* ivview childs:
  *   1  div -> loading
  *   2  div -> img
- *   3  a   -> full
- *   4  a   -> flagging
- *   5  a   -> prev
- *   6  a   -> next */
+ *   3  div -> links
+ *      1  a -> full
+ *      2  a -> prev
+ *      3  a -> next
+ *      4  a -> flagging
+ */
 .ivview     { position: fixed; background: $boxbg$; border: 2px solid $border$; padding: 5px; text-align: center }
-.ivview a   { border: 0; font-weight: bold; font-size: 14px }
 .ivview img { cursor: pointer }
 .ivview > div:nth-child(1) { position: absolute; left: 48%; top: 48%; width: 30px; height: 30px }
-.ivview >   a:nth-child(3) { float: left; padding-right: 10px }
-.ivview >   a:nth-child(4) { float: right; padding-left: 10px; font-size: 11px; font-weight: normal; display: inline-block; width: 130px; text-align: right; white-space: nowrap }
-.ivview >   a:nth-child(5) { padding-right: 5px }
-.ivview >   a:nth-child(6) { padding-left: 5px }
+.ivview > div:nth-child(3) { width: 100%; display: flex }
+.ivview > div:nth-child(3) > a { flex: 1; text-align: left; border: 0; font-weight: bold; font-size: 14px; white-space: nowrap }
+.ivview > div:nth-child(3) > a:nth-child(2) { text-align: right; padding-right: 5px }
+.ivview > div:nth-child(3) > a:nth-child(3) { padding-left: 5px }
+.ivview > div:nth-child(3) > a:nth-child(4) { text-align: right; font-size: 11px; font-weight: normal }
 
 
 /****** filter selector *****/
diff --git a/elm/iv.js b/elm/iv.js
index 319fc8c0..167b0c93 100644
--- a/elm/iv.js
+++ b/elm/iv.js
@@ -46,21 +46,24 @@ function create_div() {
     ivimg = document.createElement('div');
     ivparent.appendChild(ivimg);
 
-    ivfull = document.createElement('a');
-    ivparent.appendChild(ivfull);
+    var ivlinks = document.createElement('div');
+    ivparent.appendChild(ivlinks);
 
-    ivflag = document.createElement('a');
-    ivparent.appendChild(ivflag);
+    ivfull = document.createElement('a');
+    ivlinks.appendChild(ivfull);
 
     ivprev = document.createElement('a');
     ivprev.onclick = show;
     ivprev.textContent = '« previous';
-    ivparent.appendChild(ivprev);
+    ivlinks.appendChild(ivprev);
 
     ivnext = document.createElement('a');
     ivnext.onclick = show;
     ivnext.textContent = 'next »';
-    ivparent.appendChild(ivnext);
+    ivlinks.appendChild(ivnext);
+
+    ivflag = document.createElement('a');
+    ivlinks.appendChild(ivflag);
 
     document.querySelector('body').appendChild(ivparent);
 }