kevin/r2c
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

block responsive

Browse Source
This commit is contained in:
kevin
2018-09-11 02:53:29 +02:00
parent 8913001708
commit dea51a66f2
6 changed files with 87 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/r2c/css-compiled/template.css
+1 -3
View File
File diff suppressed because one or more lines are too long
user/themes/r2c/css-compiled/template.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
@font-face{font-family:CooperHewitt;src:url(../fonts/CooperHewitt/CooperHewitt-Bold.eot);src:url(../fonts/CooperHewitt/CooperHewitt-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/CooperHewitt/CooperHewitt-Bold.woff) format('woff'),url(../fonts/CooperHewitt/CooperHewitt-Bold.ttf) format('truetype'),url(../fonts/CooperHewitt/CooperHewitt-Bold.svg#CooperHewitt) format('svg')}@font-face{font-family:CooperHewitt-BoldItalic;src:url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.eot);src:url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.woff) format('woff'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.ttf) format('truetype'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.svg#CooperHewitt-BoldItalic) format('svg')}@font-face{font-family:rubik;src:url(../fonts/rubik/Rubik-Light.eot);src:url(../fonts/rubik/Rubik-Light.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-Light.woff) format('woff'),url(../fonts/rubik/Rubik-Light.ttf) format('truetype'),url(../fonts/rubik/Rubik-Light.svg#rubik) format('svg')}@font-face{font-family:Rubik-Bold;src:url(../fonts/rubik/Rubik-Bold.eot);src:url(../fonts/rubik/Rubik-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-Bold.woff) format('woff'),url(../fonts/rubik/Rubik-Bold.ttf) format('truetype'),url(../fonts/rubik/Rubik-Bold.svg#Rubik-Bold) format('svg')}@font-face{font-family:Rubik-MediumItalic;src:url(../fonts/rubik/Rubik-MediumItalic.eot);src:url(../fonts/rubik/Rubik-MediumItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-MediumItalic.woff) format('woff'),url(../fonts/rubik/Rubik-MediumItalic.ttf) format('truetype'),url(../fonts/rubik/Rubik-MediumItalic.svg#Rubik-MediumItalic) format('svg')}@font-face{font-family:cmu-concrete-ita;src:url(../fonts/Concrete/cmunoti.eot);src:url(../fonts/Concrete/cmunoti.eot?#iefix) format('embedded-opentype'),url(../fonts/Concrete/cmunoti.woff) format('woff'),url(../fonts/Concrete/cmunoti.ttf) format('truetype'),url(../fonts/Concrete/cmunoti.svg#cmu-concrete-ita) format('svg')}*{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}p:last-child{margin:0}em{font-style:italic}strong{font-family:Rubik-MediumItalic;font-weight:400}text{font-family:rubik}h1{font-size:1.2rem;line-height:50px}h1 a{font-family:CooperHewitt;font-weight:400}h2{font-family:CooperHewitt-BoldItalic;font-size:1.1rem;line-height:50px}p{font-family:rubik;font-size:1rem;line-height:1.3rem;margin-bottom:12px}p a{font-family:cmu-concrete-ita}.blocs:nth-child(1){color:#fff}.blocs:nth-child(1) a{color:#00f}body{overflow:hidden;background:#e6e6e6}#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)}#page .hand2{right:calc((100%/3) - 25px)}#page .mouseDown{cursor:-webkit-grabbing;cursor:grabbing}#page #start{width:100%;height:calc(100% - 50px)}#page #start img{transition:filter .5s;filter:grayscale(100%) contrast(4)}#page #start img:hover{transition:filter .5s;filter:grayscale(0)}#page #start .blocs{position:absolute;overflow-y:auto;width:calc((100% / 3) - 1px);min-width:200px;height:calc((100% / 2 - 25px) - 1px);margin:0}#page #start .blocs:nth-child(1){background:#969696}#page #start .blocs:nth-child(-n+2){padding:0 20px}#page #start .blocs:nth-child(3n+2){left:calc((100% / 3) + 1px);background:#fff}#page #start .blocs:nth-child(3n+3){right:-1px;background:#fff}#page #start .blocs:nth-child(n+4){top:calc((100% / 2 + 25px) + 1px)}#page #start .blocs:nth-of-type(-n+2)>div:nth-child(n+1){margin-bottom:25px}#page #start #links canvas{top:0;left:0}#page #start #links canvas[resize]{width:100vw;height:100vh}#page #start #streetmap>div:nth-of-type(1){height:100%}#page #start #streetmap #mapid{width:100vw;height:100%}
@font-face{font-family:CooperHewitt;src:url(../fonts/CooperHewitt/CooperHewitt-Bold.eot);src:url(../fonts/CooperHewitt/CooperHewitt-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/CooperHewitt/CooperHewitt-Bold.woff) format('woff'),url(../fonts/CooperHewitt/CooperHewitt-Bold.ttf) format('truetype'),url(../fonts/CooperHewitt/CooperHewitt-Bold.svg#CooperHewitt) format('svg')}@font-face{font-family:CooperHewitt-BoldItalic;src:url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.eot);src:url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.woff) format('woff'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.ttf) format('truetype'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.svg#CooperHewitt-BoldItalic) format('svg')}@font-face{font-family:rubik;src:url(../fonts/rubik/Rubik-Light.eot);src:url(../fonts/rubik/Rubik-Light.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-Light.woff) format('woff'),url(../fonts/rubik/Rubik-Light.ttf) format('truetype'),url(../fonts/rubik/Rubik-Light.svg#rubik) format('svg')}@font-face{font-family:Rubik-Bold;src:url(../fonts/rubik/Rubik-Bold.eot);src:url(../fonts/rubik/Rubik-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-Bold.woff) format('woff'),url(../fonts/rubik/Rubik-Bold.ttf) format('truetype'),url(../fonts/rubik/Rubik-Bold.svg#Rubik-Bold) format('svg')}@font-face{font-family:Rubik-MediumItalic;src:url(../fonts/rubik/Rubik-MediumItalic.eot);src:url(../fonts/rubik/Rubik-MediumItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-MediumItalic.woff) format('woff'),url(../fonts/rubik/Rubik-MediumItalic.ttf) format('truetype'),url(../fonts/rubik/Rubik-MediumItalic.svg#Rubik-MediumItalic) format('svg')}@font-face{font-family:cmu-concrete-ita;src:url(../fonts/Concrete/cmunoti.eot);src:url(../fonts/Concrete/cmunoti.eot?#iefix) format('embedded-opentype'),url(../fonts/Concrete/cmunoti.woff) format('woff'),url(../fonts/Concrete/cmunoti.ttf) format('truetype'),url(../fonts/Concrete/cmunoti.svg#cmu-concrete-ita) format('svg')}*{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}p:last-child{margin:0}em{font-style:italic}strong{font-family:Rubik-MediumItalic;font-weight:400}text{font-family:rubik}h1{font-size:1.2rem;line-height:50px}h1 a{font-family:CooperHewitt;font-weight:400}h2{font-family:CooperHewitt-BoldItalic;font-size:1.1rem;line-height:50px}p{font-family:rubik;font-size:1rem;line-height:1.3rem;margin-bottom:12px}p a{font-family:cmu-concrete-ita}.blocs:nth-child(1){color:#fff}.blocs:nth-child(1) a{color:#00f}body{overflow:hidden;background:#e6e6e6}#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)}#page .hand2{right:calc((100%/3) - 25px)}#page .mouseDown{cursor:-webkit-grabbing;cursor:grabbing}#page #start{width:100%;height:calc(100% - 50px)}#page #start img{transition:filter .5s;filter:grayscale(100%) contrast(4)}#page #start img:hover{transition:filter .5s;filter:grayscale(0)}#page #start .blocs{position:absolute;overflow-y:auto;width:calc((100% / 3) - 1px);min-width:200px;height:calc((100% / 2 - 25px) - 1px);margin:0}#page #start .blocs:nth-child(1){background:#969696}#page #start .blocs:nth-child(-n+2){padding:0 20px}#page #start .blocs:nth-child(3n+2){left:calc((100% / 3) + 1px);background:#fff}#page #start .blocs:nth-child(3n+3){right:-1px;background:#fff}#page #start .blocs:nth-child(n+4){top:calc((100% / 2 + 25px) + 1px)}#page #start .blocs:nth-of-type(-n+2)>div:nth-child(n+1){margin-bottom:25px}#page #start #links canvas[resize]{width:100vw;height:100vh}#page #start #streetmap>div:nth-of-type(1){height:100%}#page #start #streetmap #mapid{width:100vw;height:100%}
user/themes/r2c/js/script.js
+82 -45
View File
@@ -17,6 +17,7 @@ function clickhand(){
};
function drag() {
var $hand1 = $( ".hand1" );
var $hand2 = $( ".hand2" );
@@ -24,29 +25,49 @@ function drag() {
containment: "#start",
scroll: false,
drag: function(event, ui){
var dragDistanceW = 300;
ui.position.left = Math.min( ui.position.left, ui.helper.next().offset().left + ui.helper.next().width()-dragDistanceW);
ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistanceW);
// var dragDistance = 300;
// ui.position.left = Math.min( ui.position.left, ui.helper.next().offset().left + ui.helper.next().width() - dragDistance);
// ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
//
// // ui.position.top = Math.max( ui.position.top, ui.helper.prev().offset().top + ui.helper.prev().outerHeight() - dragDistance);
// ui.position.top = Math.max(ui.position.top, ui.helper.prev().offset().top + dragDistance);
// General
// origine
var oW = parseFloat($(window).outerWidth(true));
var oH = parseFloat($(window).outerHeight(true));
// pourcent
var p = 100;
// handler
// dimension handler
// position
var pos = $hand1.position();
var pos1 = $hand2.position();
// dimension
var $Whand = $(this).outerWidth(true);
var $Hhand = $(this).outerHeight(true);
// center handler
var ajustH = $Hhand / 2;
// center
var ajustW = $Whand / 2;
var ajustH = $Hhand / 2;
// position handler
var offset = $(this).offset();
var xPos = offset.left + ajustW;
var yPos = offset.top - ajustH;
// position XY
var xPos = ( p * parseFloat( (pos.left + ajustW ) / oW ) ) + "%";
var yPos = ( p * parseFloat( (pos.top - ajustH ) / oH ) ) + "%" ;
var xPos2 = xPos + $Whand;
var yPos2 = yPos + $Hhand;
var xPos2 = ( p * parseFloat( (pos.left + ajustW ) / oW ) ) + "%";
var yPos2 = ( p * parseFloat( (pos.top + ajustH ) / oH ) ) + "%" ;
var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW ) ) + "%";
var yPos3 = ( p * parseFloat( (pos1.top + ajustH ) / oH ) ) + "%" ;
//handler2
var $handler2 = $(this).parent().find('.hand2');
// Blocs
// find
var $recits = $(this).parent('#page').find('#recits');
var $itw = $(this).parent('#page').find("#interviews");
var $img = $(this).parent('#page').find("#images");
@@ -54,44 +75,58 @@ function drag() {
var $rs = $(this).parent('#page').find("#reseaux-sociaux");
var $links = $(this).parent('#page').find("#links");
//handler2
var $handler2 = $(this).parent().find('.hand2');
// dimension en px
var $Dr = $recits.outerWidth(true);
var $Di = $itw.outerWidth(true);
var $Dimg = $img.outerWidth(true);
var $Dstr = $stmp.outerWidth(true);
var $Drs = $rs.outerWidth(true);
var $Dlinks = $links.outerWidth(true);
// dimension blocs
// dimension blocs en %
//windows
var Dw0 = $(window).outerWidth(true);
var DoW = ( p * (oW / oW ) ) + "%" ;
var DoH = ( p * (oH / oH ) ) + "%" ;
//blocs
var Dw1 = $recits.outerWidth(true);
var Dw2 = $itw.outerWidth(true);
var Dw3 = $img.outerWidth(true);
var Dw4 = $links.outerWidth(true);
var Dw5 = $rs.outerWidth(true);
var Dw6 = $stmp.outerWidth(true);
// recit
var DrW = ( p * parseFloat( ($Dr) / oW ) ) + "%" ;
// interviews
var DitwW = ( p * parseFloat( ($Di) / oW ) ) + "%" ;
// images
var DimgW = ( p * parseFloat( ($Dimg) / oW ) ) + "%" ;
// street
var DstmpW = ( p * parseFloat( ($Dstr) / oW ) ) + "%" ;
// reaseaux
var DrsW = ( p * parseFloat( ($Drs) / oW ) ) + "%" ;
// links
var DlinksW = ( p * parseFloat( ($Dlinks) / oW ) ) + "%" ;
var xPos3 = Dw0 - xPos;
var Bw2 = (Dw0 - (Dw1 + Dw3));
var Bw3 = (Dw0 - (Dw1 + Dw2));
var Bl3 = Dw1 + Dw2;
var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
// app dimension
$handler2.css({
"top": yPos + 25,
});
// application dimension
$(this).css({
'left': xPos,
'top': yPos
})
$hand2.css({
'top': yPos,
})
$recits.css({
"width":xPos,
"height": yPos - 2,
"width": xPos,
"height": yPos,
});
$itw.css({
"left":xPos,
"width": Bw2,
"height": yPos - 2,
"width": PosHand,
"height": yPos,
});
$img.css({
"height": yPos - 2,
"height": yPos,
});
$stmp.css({
@@ -104,7 +139,7 @@ function drag() {
$rs.css({
"top": yPos2,
"left":xPos,
"width":Bw2,
"width":PosHand,
"bottom":0,
"height": 'auto',
});
@@ -121,12 +156,14 @@ function drag() {
$hand2.draggable({
containment: "#start",
scroll: false,
drag: function(event, ui){
drag: function(event, ui){
var dragDistance = 300;
ui.position.left = Math.min( ui.position.left, ui.helper.next().offset().left + ui.helper.next().width()-dragDistance);
ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
ui.position.top = Math.max(ui.position.top, ui.helper.next().offset().top + dragDistance);
// handler
// dimension handler
var $Whand = $(this).outerWidth(true);
@@ -173,11 +210,11 @@ function drag() {
var Bl3 = Dw1 + Dw2;
// app dimension
$handler1.css({
"top": yPos + 25,
});
//
// $handler1.css({
// "top": yPos + 25,
//
// });
$recits.css({
"height": yPos - 2,
@@ -213,6 +250,7 @@ function drag() {
"height": 'auto',
});
}
});
};
@@ -222,12 +260,11 @@ function dragcanvas() {
var $reseau = $('#reseaux-sociaux svg')
$links.draggable({
// containment:".bottom",
// containment:"#start",
scroll: false
});
$reseau.draggable({
// containment:".bottom",
scroll: false
});
@@ -250,6 +287,6 @@ $(document).ready(function() {
clickhand();
map();
drag();
// dragcanvas();
dragcanvas();
// scrollbar();
});
user/themes/r2c/scss/template/_section.scss
+1 -7
View File
@@ -21,11 +21,9 @@ body{
.hand1{
left : calc((100%/3) - 25px);
}
.hand2{
right: calc((100%/3) - 25px);
}
.mouseDown{
cursor: grabbing;
}
@@ -73,10 +71,6 @@ body{
}
#links{
canvas{
top: 0;
left: 0;
}
canvas[resize] {
width: 100vw;
height: 100vh;
@@ -97,5 +91,5 @@ body{
height: 100%;
}
}
}
}
}
user/themes/r2c/templates/item.html.twig
-1
View File
@@ -39,4 +39,3 @@
</section>
</section>
{% endblock %}
user/themes/r2c/templates/partials/base.html.twig
+2
View File
@@ -72,9 +72,11 @@
{% endblock %}
{% block hero %}{% endblock %}
<div class="handler hand1">
<img src="user/themes/r2c/images/handler.svg" alt="">
</div>
<div class="handler hand2">
<img src="user/themes/r2c/images/handler.svg" alt="">
</div>