add handler2

This commit is contained in:
2018-07-27 10:10:55 +02:00
parent 64d1783c76
commit 4274713245
9 changed files with 106 additions and 19 deletions
+1 -1
View File
@@ -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}
+1 -1
View File
@@ -1 +1 @@
{"07-2018":1342}
{"07-2018":1366}
+1 -1
View File
@@ -1 +1 @@
{"\/":1342}
{"\/":1366}
+1 -1
View File
@@ -1 +1 @@
{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1532675099,"4b84b15bff6ee5796152495a230e45e3d7e947d9":1530699635}
{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1532679028,"4b84b15bff6ee5796152495a230e45e3d7e947d9":1530699635}
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -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}
+80 -8
View File
@@ -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,
});
}
});
};
+12 -2
View File
@@ -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;
@@ -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 %}