block responsive

user/themes/r2c/js/script.js

@@ -17,6 +17,7 @@ function clickhand(){
 };
 
 function drag() {
+
   var $hand1 = $( ".hand1" );
   var $hand2 = $( ".hand2" );
 
@@ -24,29 +25,49 @@ function drag() {
     containment: "#start",
     scroll: false,
     drag: function(event, ui){
-      var dragDistanceW = 300;
 
-      ui.position.left = Math.min( ui.position.left,  ui.helper.next().offset().left + ui.helper.next().width()-dragDistanceW);
-      ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistanceW);
+      // var dragDistance = 300;
+      // ui.position.left = Math.min( ui.position.left,  ui.helper.next().offset().left + ui.helper.next().width() - dragDistance);
+      // ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
+      //
+      // // ui.position.top = Math.max( ui.position.top, ui.helper.prev().offset().top + ui.helper.prev().outerHeight() - dragDistance);
+      // ui.position.top = Math.max(ui.position.top, ui.helper.prev().offset().top + dragDistance);
+
+      // General
+        // origine
+        var oW = parseFloat($(window).outerWidth(true));
+        var oH = parseFloat($(window).outerHeight(true));
+        // pourcent
+        var p = 100;
 
       // handler
-        // dimension handler
+        // position
+
+        var pos = $hand1.position();
+        var pos1 = $hand2.position();
+        // dimension
         var $Whand = $(this).outerWidth(true);
         var $Hhand = $(this).outerHeight(true);
 
-        // center handler
-        var ajustH = $Hhand / 2;
+        // center
         var ajustW = $Whand / 2;
+        var ajustH = $Hhand / 2;
 
-        // position handler
-        var offset = $(this).offset();
-        var xPos = offset.left + ajustW;
-        var yPos = offset.top - ajustH;
+        // position XY
+        var xPos = ( p * parseFloat( (pos.left + ajustW ) / oW ) ) + "%";
+        var yPos = ( p * parseFloat( (pos.top - ajustH ) / oH ) ) + "%" ;
 
-        var xPos2 = xPos + $Whand;
-        var yPos2 = yPos + $Hhand;
+        var xPos2 = ( p * parseFloat( (pos.left + ajustW ) / oW ) ) + "%";
+        var yPos2 = ( p * parseFloat( (pos.top + ajustH ) / oH ) ) + "%" ;
+
+        var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW ) ) + "%";
+        var yPos3 = ( p * parseFloat( (pos1.top + ajustH ) / oH ) ) + "%" ;
+
+        //handler2
+        var $handler2 = $(this).parent().find('.hand2');
 
       // Blocs
+        // find
         var $recits = $(this).parent('#page').find('#recits');
         var $itw = $(this).parent('#page').find("#interviews");
         var $img = $(this).parent('#page').find("#images");
@@ -54,44 +75,58 @@ function drag() {
         var $rs = $(this).parent('#page').find("#reseaux-sociaux");
         var $links = $(this).parent('#page').find("#links");
 
-      //handler2
-        var $handler2 = $(this).parent().find('.hand2');
+        // dimension en px
+        var $Dr = $recits.outerWidth(true);
+        var $Di = $itw.outerWidth(true);
+        var $Dimg =  $img.outerWidth(true);
+        var $Dstr = $stmp.outerWidth(true);
+        var $Drs = $rs.outerWidth(true);
+        var $Dlinks = $links.outerWidth(true);
 
-        // dimension blocs
+        // dimension blocs en %
           //windows
-          var Dw0 = $(window).outerWidth(true);
+          var DoW = ( p * (oW / oW ) ) + "%" ;
+          var DoH = ( p * (oH / oH ) ) + "%" ;
 
           //blocs
-          var Dw1 = $recits.outerWidth(true);
-          var Dw2 = $itw.outerWidth(true);
-          var Dw3 = $img.outerWidth(true);
-          var Dw4 = $links.outerWidth(true);
-          var Dw5 = $rs.outerWidth(true);
-          var Dw6 = $stmp.outerWidth(true);
-
-        var xPos3 = Dw0 - xPos;
-        var Bw2 = (Dw0 - (Dw1 + Dw3));
-        var Bw3 = (Dw0 - (Dw1 + Dw2));
-        var Bl3 = Dw1 + Dw2;
-
-        // app dimension
-        $handler2.css({
-          "top": yPos + 25,
-        });
+            // recit
+            var DrW = ( p * parseFloat( ($Dr) / oW ) ) + "%" ;
+            // interviews
+            var DitwW = ( p * parseFloat( ($Di) / oW ) ) + "%" ;
+            // images
+            var DimgW = ( p * parseFloat( ($Dimg) / oW ) ) + "%" ;
+            // street
+            var DstmpW = ( p * parseFloat( ($Dstr) / oW ) ) + "%" ;
+            // reaseaux
+            var DrsW = ( p * parseFloat( ($Drs) / oW ) ) + "%" ;
+            // links
+            var DlinksW = ( p * parseFloat( ($Dlinks) / oW ) ) + "%" ;
+
+            var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
+
+        // application dimension
+        $(this).css({
+          'left': xPos,
+          'top': yPos
+        })
+
+        $hand2.css({
+          'top': yPos,
+        })
 
         $recits.css({
-          "width":xPos,
-          "height": yPos - 2,
+          "width": xPos,
+          "height": yPos,
         });
 
         $itw.css({
           "left":xPos,
-          "width": Bw2,
-          "height": yPos - 2,
+          "width": PosHand,
+          "height": yPos,
         });
 
         $img.css({
-          "height": yPos - 2,
+          "height": yPos,
         });
 
         $stmp.css({
@@ -104,7 +139,7 @@ function drag() {
         $rs.css({
           "top": yPos2,
           "left":xPos,
-          "width":Bw2,
+          "width":PosHand,
           "bottom":0,
           "height": 'auto',
         });
@@ -121,12 +156,14 @@ function drag() {
   $hand2.draggable({
     containment: "#start",
     scroll: false,
-    drag: function(event, ui){
 
+    drag: function(event, ui){
       var dragDistance = 300;
 
       ui.position.left = Math.min( ui.position.left,  ui.helper.next().offset().left + ui.helper.next().width()-dragDistance);
       ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
+
+      ui.position.top = Math.max(ui.position.top, ui.helper.next().offset().top + dragDistance);
       // handler
         // dimension handler
         var $Whand = $(this).outerWidth(true);
@@ -173,11 +210,11 @@ function drag() {
         var Bl3 = Dw1 + Dw2;
 
         // app dimension
-
-        $handler1.css({
-          "top": yPos + 25,
-
-        });
+        //
+        // $handler1.css({
+        //   "top": yPos + 25,
+        //
+        // });
 
         $recits.css({
           "height": yPos - 2,
@@ -213,6 +250,7 @@ function drag() {
           "height": 'auto',
         });
 
+
     }
   });
 };
@@ -222,12 +260,11 @@ function dragcanvas() {
   var $reseau = $('#reseaux-sociaux svg')
 
   $links.draggable({
-      // containment:".bottom",
+      // containment:"#start",
     scroll: false
   });
 
   $reseau.draggable({
-      // containment:".bottom",
     scroll: false
   });
 
@@ -250,6 +287,6 @@ $(document).ready(function() {
   clickhand();
   map();
   drag();
-  // dragcanvas();
+  dragcanvas();
   // scrollbar();
 });

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

@@ -21,11 +21,9 @@ body{
   .hand1{
     left : calc((100%/3) - 25px);
   }
-
   .hand2{
     right: calc((100%/3) - 25px);
   }
-
   .mouseDown{
     cursor: grabbing;
   }
@@ -73,10 +71,6 @@ body{
     }
 
     #links{
-      canvas{
-        top: 0;
-        left: 0;
-      }
       canvas[resize] {
           width: 100vw;
           height: 100vh;
@@ -97,5 +91,5 @@ body{
         height: 100%;
       }
     }
-  }
+}
 }

user/themes/r2c/templates/item.html.twig

@@ -39,4 +39,3 @@
     </section>
 </section>
 {% endblock %}
-

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

@@ -72,9 +72,11 @@
     {% endblock %}
 
     {% block hero %}{% endblock %}
+        
         <div class="handler hand1">
           <img src="user/themes/r2c/images/handler.svg" alt="">
         </div>
+
         <div class="handler hand2">
           <img src="user/themes/r2c/images/handler.svg" alt="">
         </div>