resize blocs

This commit is contained in:
2018-07-17 11:38:18 +02:00
parent 356d3a62f3
commit 74787c6ef5
9 changed files with 88 additions and 34 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}
{"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}
+1 -1
View File
@@ -1 +1 @@
{"07-2018":791}
{"07-2018":939}
+1 -1
View File
@@ -1 +1 @@
{"\/":791}
{"\/":939}
+1 -1
View File
@@ -1 +1 @@
{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1531535672,"4b84b15bff6ee5796152495a230e45e3d7e947d9":1530699635}
{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1531820217,"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}#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}
+49 -23
View File
@@ -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(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
console.log(yPos);
// 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 + 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");
var $grid1 = $(this).parent('.top');
var $grid2 = $(this).parent('.bottom');
// style
var style_recit = { width: xPos, height : yPos }
var style_height = { height : yPos }
$grid1.css('griqd-template-columns', xPos + 'auto auto' );
$grid2.css('grid-template-columns', xPos + 'auto auto' );
// app style
$recits.css(style_recit);
$itw.css(style_height);
$links.css(style_height);
$recits.css('width', xPos);
$rs.css('width', xPos);
$recits.css('height', yPos);
$itw.css('height', yPos);
$links.css('height', yPos);
// 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;
// style_bottom
var yPos2 = yPos + (ajustH * 2);
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 }
$rs.css($style_rs);
$stmp.css($style_stmp);
$img.css($style_img);
}
});
};
@@ -46,5 +73,4 @@ function drag() {
$(document).ready(function() {
wrap();
drag();
// resize();
});
+26 -2
View File
@@ -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%;
// }
+1 -1
View File
@@ -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.