From 61d15bba6c3178190a089c123f3a089a9f0818e7 Mon Sep 17 00:00:00 2001
From: Nistor Cristian <contact@nistorcristian.com>
Date: Mon, 18 Mar 2019 12:34:58 +0200
Subject: [PATCH] Improved share on responsive

---
 assets/css/style.css   | 18 +++++++++++++++-
 assets/js/main.js      | 47 ++++++++++++++++++++++++------------------
 assets/scss/style.scss | 19 +++++++++++++++++
 3 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 2d04154..3edabbb 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -468,7 +468,23 @@ blockquote {
   .related-posts {
     padding: 50px 0 30px; }
     .related-posts .post:last-child {
-      display: none; } }
+      display: none; }
+  .share {
+    display: flex;
+    align-items: center;
+    position: relative;
+    top: 0;
+    width: 100%;
+    bottom: 0;
+    margin: 0;
+    border-top: 1px solid #EAECEF;
+    padding-top: 35px; }
+    .share ul {
+      align-items: flex-start;
+      flex-direction: row;
+      margin-left: 10px; }
+      .share ul li {
+        margin-right: 10px; } }
 
 @media screen and (max-width: 767px) {
   .post-content .editor-content h1,
diff --git a/assets/js/main.js b/assets/js/main.js
index 7b8520c..bd2a4c8 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -8,6 +8,9 @@ $(document).ready(function ($) {
         'content-api-key': '8a13e02a8917186f02014db742',
     };
 
+    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
+        h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+
     if(window.location.origin == 'https://our-status.hauntedthemes.com'){
         config['content-api-host'] = 'https://our-status.hauntedthemes.com';
         config['content-api-key'] = 'c6717eab3d9a3e6be361980f66';
@@ -38,8 +41,9 @@ $(document).ready(function ($) {
 
     function setDemoImages(){
         if(window.location.origin == 'https://our-status.hauntedthemes.com'){
-            $('#content img, .blog-intro img').each(function (index, element) {
-                $(this).attr('src', $(this).attr('src').replace("http://localhost:2368", "https://our.status.im"));
+            $('#content img, #main img, .related-posts img, .blog-intro img').each(function (index, element) {
+                $(this).attr('src', "https://our.status.im" + $(this).attr('src'));
+                $(this).attr('src', $(this).attr('src').replace('https://our.status.imhttps://our.status.im', 'https://our.status.im'));
             });
         }else{
             $('img').each(function (index, element) {
@@ -59,14 +63,6 @@ $(document).ready(function ($) {
 
         setGalleryRation();
 
-        // var elem = document.querySelector('.loop-grid');
-        // msnry = new Masonry(elem, {
-        //     itemSelector: '.loop-grid .post',
-        //     // columnWidth: 340,
-        //     percentPosition: true,
-        //     gutter: 0,
-        //     transitionDuration: 0
-        // });
 
         var currentPage = 1;
         var pathname = window.location.pathname;
@@ -102,17 +98,9 @@ $(document).ready(function ($) {
                 $.get(nextPage, function (content) {
                     step++;
                     var post = $(content).find('.post');
-                    // post.addClass('invisible');
                     $('#content .loop-grid').append( post );
                     setDemoImages();
                     $('[data-toggle="tooltip"]').tooltip();
-                    // $.each(post, function(index, val) {
-                    //     var $this = $(this);
-                    //     $('#content .loop-grid').imagesLoaded( function() {
-                    //         msnry.appended( $this );
-                    //         $this.removeClass('invisible');
-                    //     });
-                    // });
                 });
 
             });
@@ -151,8 +139,27 @@ $(document).ready(function ($) {
         return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
     }
 
-    $(".share").stick_in_parent({
-        offset_top: 30
+    var checkIfSticky = 0;
+    if(w >= 992){
+        $(".share").stick_in_parent({
+            offset_top: 30
+        });
+        checkIfSticky = 1;
+    }
+
+    $(window).on('resize', function(event) {
+        w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+        if (w < 992) {
+            $(".share").trigger("sticky_kit:detach");
+            checkIfSticky = 0;
+        }else{
+            if (checkIfSticky == 0) {
+                $(".share").stick_in_parent({
+                    offset_top: 30
+                });
+                checkIfSticky++;
+            }
+        };
     });
 
     // Set the right proportion for images inside the gallery
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 29fa196..0862a30 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -677,6 +677,25 @@ blockquote{
             }
         }
     }
+    .share{
+        display: flex;
+        align-items: center;
+        position: relative;
+        top: 0;
+        width: 100%;
+        bottom: 0;
+        margin: 0;
+        border-top: 1px solid $lighter-grey;
+        padding-top: 35px;
+        ul{
+            align-items: flex-start;
+            flex-direction: row;
+            margin-left: 10px;
+            li{
+                margin-right: 10px;
+            }
+        }
+    }
 }
 
 @media screen and (max-width: 767px) {