add handler2
This commit is contained in:
@@ -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 @@
|
||||
{"07-2018":1342}
|
||||
{"07-2018":1366}
|
||||
@@ -1 +1 @@
|
||||
{"\/":1342}
|
||||
{"\/":1366}
|
||||
@@ -1 +1 @@
|
||||
{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1532675099,"4b84b15bff6ee5796152495a230e45e3d7e947d9":1530699635}
|
||||
{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1532679028,"4b84b15bff6ee5796152495a230e45e3d7e947d9":1530699635}
|
||||
File diff suppressed because one or more lines are too long
+1
-1
@@ -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}
|
||||
@@ -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,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 %}
|
||||
|
||||
Reference in New Issue
Block a user