resize blocs

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}
+{"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":148}

logs/popularity/monthly.json

@@ -1 +1 @@
-{"07-2018":791}
+{"07-2018":939}

logs/popularity/totals.json

@@ -1 +1 @@
-{"\/":791}
+{"\/":939}

logs/popularity/visitors.json

@@ -1 +1 @@
-{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1531535672,"4b84b15bff6ee5796152495a230e45e3d7e947d9":1530699635}
+{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1531820217,"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}#page{height:100%}#page .navbar{width:100%;height:50px}#page #start{width:100%;height:calc(100% - 50px)}#page #start .blocs{overflow-y:auto;height:calc(100vh/2 - 25px)}#page #start .blocs:nth-child(1){background:red}#page #start .blocs:nth-child(2){background:pink}#page #start .blocs:nth-child(3){background:brown}#page #start .blocs:nth-child(4){background:#00f}#page #start .blocs:nth-child(5){background:green}#page #start .blocs:nth-child(6){background:#ff0}.bottom,.top{display:inline-grid;grid-template-columns:auto auto auto}.handler{position:absolute;z-index:999;top:50%;left:calc((100%/3) - 25px);width:50px;height:50px;border-radius:25px;background:red}
+*{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}#page{height:100%}#page .navbar{width:100%;height:50px}#page #start{width:100%;height:calc(100% - 50px)}#page #start .blocs{overflow-y:auto}#page #start .blocs:nth-child(1){background:red}#page #start .blocs:nth-child(2){background:pink}#page #start .blocs:nth-child(3){background:brown}#page #start .blocs:nth-child(4){background:#00f}#page #start .blocs:nth-child(5){background:green}#page #start .blocs:nth-child(6){background:#ff0}.bottom,.top{display:inline-grid;grid-template-columns:auto auto auto}.handler{position:absolute;z-index:999;top:50%;left:calc((100%/3) - 25px);width:50px;height:50px;border-radius:25px;background:#00f}.bottom{position:fixed;height:100%}.bottom>div{position:fixed;bottom:0;height:auto}

user/themes/r2c/js/site.js

@@ -3,42 +3,69 @@ function wrap(){
   $('#start > div:nth-child(n+2)').wrapAll('<div class="bottom"></div> ')
 };
 
-function resize() {
-  $(window).on("load resize", function() {
-    $("#recits").resizable();
-    // $( "#reseaux-sociaux" ).resizable();
-  });
-}
-
 function drag() {
 
   var $hand = $( ".handler" );
 
   $hand.draggable({
     drag: function(){
+
+      // dimension handler
+      var $heighthand = $(this).outerHeight();
+      var $widthhand = $(this).outerWidth();
+      // ajust handler
+      var ajustH = $heighthand /2;
+      var ajustW = $widthhand /2;
+
+      // position handler
       var offset = $(this).offset();
-      var xPos = offset.left;
-      var yPos = offset.top;
-      $('#posX').text('x: ' + xPos);
-      $('#posY').text('y: ' + yPos);
-      console.log(yPos);
+      var xPos = offset.left + ajustW;
+      var yPos = offset.top - ajustH;
+
+      var xPos2 = xPos + (ajustW * 2);
+      var yPos2 = yPos + (ajustH * 2);
 
+      // top
       var $recits = $(this).parent('#page').find('#recits');
       var $itw = $(this).parent('#page').find("#interviews");
       var $links = $(this).parent('#page').find("#links");
+
+      // bottom
       var $rs = $(this).parent('#page').find("#reseaux-sociaux");
+      var $stmp = $(this).parent('#page').find("#streetmap");
+      var $img = $(this).parent('#page').find("#img");
+
+      // style
+      var style_recit =  { width: xPos, height : yPos }
+      var style_height =  { height : yPos }
+
+      // app style
+      $recits.css(style_recit);
+      $itw.css(style_height);
+      $links.css(style_height);
+
+      // width div
+      var $w0 = $('html').outerWidth();
+      var $w1_1 = $recits.outerWidth();
+      var $w1_2 = $itw.outerWidth();
+      var $w1_3 = $links.outerWidth();
+
+      var $w2_1 = ($w1_2 + $w1_3) - $w0;
+      var $w2_2 = ($w1_1 + $w1_3) - $w0;
+      var $l2_2 = ($w1_1);
+      var $l2_3 = ($l2_2 + $w1_2);
+      var $w2_3 = ($w1_1 + $w1_2) - $w0;
 
-      var $grid1 = $(this).parent('.top');
-      var $grid2 = $(this).parent('.bottom');
+      // style_bottom
+      var yPos2 = yPos + (ajustH * 2);
 
-      $grid1.css('griqd-template-columns', xPos + 'auto auto' );
-      $grid2.css('grid-template-columns', xPos + 'auto auto' );
+      var $style_rs = { width: xPos, top : yPos2 }
+      var $style_stmp = { width: $w1_2, top : yPos, left : $l2_2 }
+      var $style_img = { width: $w1_3, top : yPos, left : $l2_3 }
 
-      $recits.css('width', xPos);
-      $rs.css('width', xPos);
-      $recits.css('height', yPos);
-      $itw.css('height', yPos);
-      $links.css('height', yPos);
+      $rs.css($style_rs);
+      $stmp.css($style_stmp);
+      $img.css($style_img);
     }
   });
 };
@@ -46,5 +73,4 @@ function drag() {
 $(document).ready(function() {
   wrap();
   drag();
-  // resize();
 });

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

@@ -10,7 +10,7 @@
       // display: grid;
       //
       .blocs{
-        height: calc(100vh/2 - 25px);
+        // height: calc(100vh/2 - 25px);
         overflow-y: auto;
         &:nth-child(1){
           background: red;
@@ -42,9 +42,33 @@
   width: 50px;
   height: 50px;
   border-radius: 25px;
-  background: red;
+  background: blue;
   position: absolute;
   left : calc((100%/3) - 25px);
   top: 50%;
   z-index: 999;
 }
+
+//
+// #start{
+//   height: 100%;
+//   & > div {
+//     position: fixed;
+//     height: 100%;
+//   }
+// }
+
+.bottom{
+height: 100%;
+position: fixed;
+  & > div{
+    position: fixed;
+    height: auto;
+    bottom: 0;
+  }
+}
+//
+// #reseaux-sociaux{
+//   position: fixed;
+//   height: 100%;
+// }

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

@@ -12,7 +12,7 @@
             {{ module.content }}
           </div>
       {% endfor %}
-      <div class=" blocs">
+      <div class=" blocs" id="img">
         Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices.
 
         On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum". Ils sont également connus sous les noms de texte blanc, faux-texte, bolo bolo, pseudo texte, texte factice, vrai faux texte, faux contenu, texte de remplissage, de remplacement, ou d'attente. Outre son usage dans les milieux de l'imprimerie et du graphisme, certains chansonniers en font l'utilisation lors de la composition de mélodies, chantant ces textes en amont de l'écriture de leur textes. L'utilisation de faux-textes aurait déjà été une pratique courante depuis le 16ème siècle dans les milieux de l'imprimerie et de la composition.