add handler2

logs/popularity/daily.json

@@ -1 +1 @@
-{"02-07-2018":140,"03-07-2018":176,"04-07-2018":10,"11-07-2018":166,"13-07-2018":188,"14-07-2018":111,"17-07-2018":197,"25-07-2018":26,"26-07-2018":290,"27-07-2018":38}
+{"02-07-2018":140,"03-07-2018":176,"04-07-2018":10,"11-07-2018":166,"13-07-2018":188,"14-07-2018":111,"17-07-2018":197,"25-07-2018":26,"26-07-2018":290,"27-07-2018":62}

logs/popularity/monthly.json

@@ -1 +1 @@
-{"07-2018":1342}
+{"07-2018":1366}

logs/popularity/totals.json

@@ -1 +1 @@
-{"\/":1342}
+{"\/":1366}

logs/popularity/visitors.json

@@ -1 +1 @@
-{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1532675099,"4b84b15bff6ee5796152495a230e45e3d7e947d9":1530699635}
+{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1532679028,"4b84b15bff6ee5796152495a230e45e3d7e947d9":1530699635}

user/themes/r2c/js/site.js

@@ -14,9 +14,10 @@ function clickhand(){
 
 function drag() {
 
-  var $hand = $( ".handler" );
+  var $hand1 = $( ".hand1" );
+  var $hand2 = $( ".hand2" );
 
-  $hand.draggable({
+  $hand1.draggable({
     drag: function(){
       // handler
         // dimension handler
@@ -41,17 +42,13 @@ function drag() {
         var $img = $(this).parent('#page').find("#images");
 
         // bottom
+        var $bottom = $(this).parent('#page').find(".bottom");
+
         var $links = $(this).parent('#page').find("#links");
         var $rs = $(this).parent('#page').find("#reseaux-sociaux");
         var $stmp = $(this).parent('#page').find("#streetmap");
-        var $bottom = $(this).parent('#page').find(".bottom");
 
         // dimension blocs
-        var Array_Dw0 = [];
-        var Array_Dw1 = [];
-        var Array_Dw2 = [];
-        var Array_Dw3 = [];
-
         var Dw0 = $(window).outerWidth(true);
         var Dw1 = $recits.outerWidth(true);
         var Dw2 = $itw.outerWidth(true);
@@ -84,6 +81,81 @@ function drag() {
         $rs.css({
           "width": Bw2,
         });
+        $stmp.css({
+          "width": '33%',
+        });
+    }
+  });
+
+  $hand2.draggable({
+    drag: function(){
+      // handler
+        // dimension handler
+        var $Hhand = $(this).outerHeight();
+        var $Whand = $(this).outerWidth();
+        // ajust handler
+        var ajustH = $Hhand / 2;
+        var ajustW = $Whand / 2;
+
+        // position handler
+        var offset = $(this).offset();
+        var xPos = offset.left + ajustW;
+        var yPos = offset.top - ajustH;
+
+        var xPos2 = xPos + (ajustW * 2);
+        var yPos2 = yPos + (ajustH * 2);
+
+
+      // Blocs
+        // top
+        var $recits = $(this).parent('#page').find('#recits');
+        var $itw = $(this).parent('#page').find("#interviews");
+        var $img = $(this).parent('#page').find("#images");
+
+        // bottom
+        var $bottom = $(this).parent('#page').find(".bottom");
+
+        var $links = $(this).parent('#page').find("#links");
+        var $rs = $(this).parent('#page').find("#reseaux-sociaux");
+        var $stmp = $(this).parent('#page').find("#streetmap");
+
+        // dimension blocs
+        var Dw0 = $(window).outerWidth(true);
+        var Dw1 = $recits.outerWidth(true);
+        var Dw2 = $itw.outerWidth(true);
+        var Dw3 = $img.outerWidth(true);
+
+        var xPos3 = Dw0 - xPos;
+        // var Bw1 = (Dw0 - (Dw2 + Dw3));
+        var Bw2 = (Dw0 - (Dw1 + Dw3));
+        var Bw3 = (Dw0 - (Dw1 + Dw2));
+        var Bl3 = Dw1 + Dw2;
+        // app dimension
+        $recits.css({
+          // "width": xPos,
+          "height": yPos - 5,
+        });
+        $itw.css({
+          "width": Bw2,
+          "height": yPos - 5,
+        });
+        $img.css({
+          "width": xPos3,
+          "height": yPos - 5,
+        });
+        $bottom.css({
+          "top": yPos2 + 5,
+        })
+        // $links.css({
+        //   "width": xPos,
+        //   "top": yPos2 + 5,
+        // })
+        $rs.css({
+          "width": Bw2,
+        });
+        $stmp.css({
+          "width": xPos3,
+        });
     }
   });
 };

user/themes/r2c/scss/template/_section.scss

@@ -12,16 +12,25 @@ body{
     width: 50px;
     height: 50px;
     border-radius: 25px;
-    background: blue;
     position: absolute;
-    left : calc((100%/3) - 25px);
     top: 50%;
     z-index: 999;
     cursor: grab;
   }
+  .hand1{
+    background: green;
+    opacity: 0.5;
+    left : calc((100%/3) - 25px);
+  }
+  .hand2{
+    background: red;
+    opacity: 0.5;
+    right: calc((100%/3) - 25px);
+  }
   .mouseDown{
     cursor: grabbing;
   }
+
   #start{
     width: 100%;
     height: calc(100% - 50px);
@@ -43,6 +52,7 @@ body{
     .blocs{
       overflow-y: auto;
       margin: 5px;
+      padding: 20px;
       width: $W33;
       &:nth-child(1){
         background: red;

user/themes/r2c/templates/partials/base.html.twig

@@ -54,7 +54,8 @@
     {% endblock %}
 
     {% block hero %}{% endblock %}
-        <div class="handler"></div>
+        <div class="handler hand1"></div>
+        <div class="handler hand2"></div>
 
           <section id="start">
         {% block body %}