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/css-compiled/template.min.css

@@ -1 +1 @@
-*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font:inherit;font-size:16px;margin:0;padding:0;vertical-align:baseline;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,html{height:100%}body{line-height:1}ol,ul{list-style:none}a{text-decoration:none;color:#000}blockquote,q{quotes:none}img{width:100%;height:100%;vertical-align:bottom}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-spacing:0;border-collapse:collapse}p{font-style:normal}em{font-style:italic}strong{font-weight:bolder}body{overflow:hidden}#page{height:100%}#page .navbar{width:100%;height:50px}#page .handler{position:absolute;z-index:999;top:50%;left:calc((100%/3) - 25px);width:50px;height:50px;cursor:-webkit-grab;cursor:grab;border-radius:25px;background:#00f}#page .mouseDown{cursor:-webkit-grabbing;cursor:grabbing}#page #start{width:100%;height:calc(100% - 50px)}#page #start .bottom,#page #start .top{display:-ms-inline-flexbox;display:inline-flex;width:100%;-ms-flex-pack:justify;justify-content:space-between}#page #start .top{position:relative;height:calc(100% / 2)}#page #start .bottom{position:absolute;top:calc(100% / 2 + 25px);bottom:0;height:auto}#page #start .blocs{overflow-y:auto;width:calc(100% / 3);margin:5px}#page #start .blocs:nth-child(1){background:red}#page #start .blocs:nth-child(2){left:calc(100% / 3);background:pink}#page #start .blocs:nth-child(3){background:green}
+*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font:inherit;font-size:16px;margin:0;padding:0;vertical-align:baseline;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,html{height:100%}body{line-height:1}ol,ul{list-style:none}a{text-decoration:none;color:#000}blockquote,q{quotes:none}img{width:100%;height:100%;vertical-align:bottom}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-spacing:0;border-collapse:collapse}p{font-style:normal}em{font-style:italic}strong{font-weight:bolder}body{overflow:hidden}#page{height:100%}#page .navbar{width:100%;height:50px}#page .handler{position:absolute;z-index:999;top:50%;width:50px;height:50px;cursor:-webkit-grab;cursor:grab;border-radius:25px}#page .hand1{left:calc((100%/3) - 25px);opacity:.5;background:green}#page .hand2{right:calc((100%/3) - 25px);opacity:.5;background:red}#page .mouseDown{cursor:-webkit-grabbing;cursor:grabbing}#page #start{width:100%;height:calc(100% - 50px)}#page #start .bottom,#page #start .top{display:-ms-inline-flexbox;display:inline-flex;width:100%;-ms-flex-pack:justify;justify-content:space-between}#page #start .top{position:relative;height:calc(100% / 2)}#page #start .bottom{position:absolute;top:calc(100% / 2 + 25px);bottom:0;height:auto}#page #start .blocs{overflow-y:auto;width:calc(100% / 3);margin:5px;padding:20px}#page #start .blocs:nth-child(1){background:red}#page #start .blocs:nth-child(2){left:calc(100% / 3);background:pink}#page #start .blocs:nth-child(3){background:green}

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 %}