Avoid image overlap on the right column

morags · morags · commit fe275ac4f8c5 · 2018-08-04T23:19:38.000+03:00
diff --git a/resources/js/contentTransformation.js b/resources/js/contentTransformation.js
@@ -136,6 +136,24 @@ window.addEventListener('load', function () {
     };
 });
 
+/* Shift images to the right */
+window.addEventListener('load', function () {
+    var imgs = $('main .thumb, main .mermaid');
+    var prev = $('head');
+
+    imgs.each(function () {
+        $this = $(this);
+        var v_offest = $this.offset().top;
+        var height = $this.height();
+        cutoff = prev.offset().top + prev.height();
+        if (v_offest <= cutoff) {
+            var new_offset = cutoff + 20;
+            $this.css('top', `${new_offset}px`); // Default UIkit margin
+        }
+        prev = $this;
+    })
+});
+
 /* Preview Wikilinks */
 window.addEventListener('load', function () {
     var own = top.location.host.toString();
@@ -166,10 +184,10 @@ window.addEventListener('load', function () {
                 if (res.type != 'no-extract') {
                     caller.find('p').html(res.extract);
                 };
-                caller.find('p').html('No extract available!');     // TODO: Add "warning" icon for policy pages, and "info" icon for guideline pages
+                caller.find('p').html('No extract available!'); // TODO: Add "warning" icon for policy pages, and "info" icon for guideline pages
             })
             .fail(function (res, status, err) {
                 caller.find('p').html('Article not found!<br>Reason: ' + status + ', ' + err);
             });
     };
-});
+});
diff --git a/resources/templates/main.mustache b/resources/templates/main.mustache
@@ -106,7 +106,7 @@
             {{#if catlinks}}<nav>{{{catlinks}}}</nav>{{/if}}                                                                                    {{! TODO: Move category links to side- or toolbar }}
             {{#if dataAfterContent}}<div>{{{dataAfterContent}}}</div>{{/if}}
         </main>
-        <div id="right col" class="uk-width-1-4">
+        <div id="right-col" class="uk-width-1-4">
 
         </div>
         <div class="uk-width-1-4">
