modif position blocs + add variable scss

This commit is contained in:
2018-07-26 09:11:04 +02:00
parent 21d6860753
commit 3e7c0c56ed
8 changed files with 104 additions and 87 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":10}
{"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":54}
+1 -1
View File
@@ -1 +1 @@
{"07-2018":1024}
{"07-2018":1068}
+1 -1
View File
@@ -1 +1 @@
{"\/":1024}
{"\/":1068}
+1 -1
View File
@@ -1 +1 @@
{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1532585943,"4b84b15bff6ee5796152495a230e45e3d7e947d9":1530699635}
{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1532588999,"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}#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}.top{height:50%}.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;top:calc(100%/2 + 25px);bottom:0;width:calc(100%/3);height:calc(100%/2 - 25px)}.bottom>div:nth-child(2){left:calc(100%/3)}.bottom>div:nth-child(3){right:0}
*{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}.handler{position:absolute;z-index:999;top:50%;left:calc((100%/3) - 25px);width:50px;height:50px;border-radius:25px;background:#00f}body{overflow:hidden}#page{height:100%}#page .navbar{width:100%;height:50px}#page #start{width:100%;height:calc(100% - 50px)}#page #start .bottom,#page #start .top{position:relative;height:calc(100% / 2)}#page #start .blocs{position:absolute;overflow-y:auto;width:calc(100% / 3);height:100%}#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){right:0;background:green}
@@ -14,3 +14,30 @@
//width
// $33: calc(100% / 3);
// header
$heightH: 25px;
// taille & position blocs
// height
$H100: 100%;
$H50: calc(#{$H100} / 2);
// width
$W100: 100%;
$W33: calc(#{$W100} / 3);
// top
$T100: 100%;
// right
$R100: 100%;
//bottom
$B100: 100%;
// left
$L100: 100%;
$L33: calc(#{$L100} / 3);
$L66: calc(#{$L100} / 3);
+62 -58
View File
@@ -1,43 +1,3 @@
#page{
height: 100%;
.navbar{
width: 100%;
height: 50px;
}
#start{
width: 100%;
height: calc(100% - 50px);
.blocs{
overflow-y: auto;
&:nth-child(1){
background: red;
}
&:nth-child(2){
background: pink;
}
&:nth-child(3){
background: brown;
}
&:nth-child(4){
background: blue;
}
&:nth-child(5){
background: green;
}
&:nth-child(6){
background: yellow;
}
}
}
}
.top{
height: 50%;
}
.top, .bottom{
display: inline-grid;
grid-template-columns: auto auto auto;
}
.handler{
width: 50px;
height: 50px;
@@ -48,6 +8,52 @@
top: 50%;
z-index: 999;
}
body{
overflow: hidden;
}
#page{
height: 100%;
.navbar{
width: 100%;
height: 50px;
}
#start{
width: 100%;
height: calc(100% - 50px);
.top, .bottom{
position: relative;
height: $H50;
}
.blocs{
overflow-y: auto;
position: absolute;
width: $W33;
height: $H100;
&:nth-child(1){
background: red;
}
&:nth-child(2){
background: pink;
left: $L33;
}
&:nth-child(3){
background: green;
right: 0;
}
}
}
}
// .top{
// height: 50%;
// }
// .top, .bottom{
// // display: inline-grid;
// // grid-template-columns: auto auto auto;
// }
//
// #start{
@@ -57,21 +63,19 @@
// height: 100%;
// }
// }
.bottom{
height: 100%;
position: fixed;
& > div{
position: fixed;
width: calc(100%/3);
top: calc(100%/2 + 25px);
height: calc(100%/2 - 25px);
bottom: 0;
&:nth-child(2){
left: calc(100%/3);
}
&:nth-child(3){
right: 0;
}
}
}
//
// .top, .bottom{
// & > div{
// position: fixed;
// width: calc(100%/3);
// top: calc(100%/2 + 25px);
// height: calc(100%/2 - 25px);
// bottom: 0;
// &:nth-child(2){
// left: calc(100%/3);
// }
// &:nth-child(3){
// right: 0;
// }
// }
// }