bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

header & zoom in

This commit is contained in:
ouidade 2024-03-04 11:23:46 +01:00
parent 1118fcbda0
commit 32be3a1730
10 changed files with 365 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
View File

@ -163,6 +163,13 @@ header {
@media (max-width: 810px) {
header {
height: 110px; } }
@media (max-width: 660px) {
header {
height: 70px; } }
@media (max-width: 660px) {
header {
display: flex;
height: 50px; } }
header .contextual-region {
width: max-content; }
header .header_left_container {
@ -171,7 +178,11 @@ header {
display: flex;
flex-direction: row;
border-right: 1px solid #808080;
padding-left: 5%; }
padding-left: 5%;
padding-right: 5%; }
@media (max-width: 660px) {
header .header_left_container {
height: inherit; } }
@media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logorepu-2 {
height: 110px; } }
@ -189,13 +200,25 @@ header {
@media (max-width: 891px) {
header .header_left_container img {
height: 110px; } }
@media (max-width: 660px) {
header .header_left_container img {
height: 70px; } }
@media (max-width: 660px) {
header .header_left_container img {
height: 50px; } }
header .header_right_container {
padding-right: 10px; }
@media (max-width: 660px) {
header .header_right_container {
padding-right: 0; } }
header .header_right_container .language-switcher-language-url ul {
display: flex;
flex-direction: row;
font-size: 0.8rem;
padding: 0; }
@media (max-width: 660px) {
header .header_right_container .language-switcher-language-url ul {
margin-bottom: 0; } }
header .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
content: "/"; }
header .header_right_container .language-switcher-language-url ul .is-active {
@ -231,14 +254,23 @@ header {
background: black;
border-radius: 3px;
z-index: 1; }
@media (max-width: 660px) {
header .open-block span, header .open-block.opened span {
width: 25px; } }
header .open-block {
height: 100%;
display: grid;
align-items: center;
margin: auto; }
@media (max-width: 660px) {
header .open-block {
height: 50px; } }
header .open-block span {
margin-bottom: 13px;
transform-origin: 4px 0px; }
@media (max-width: 660px) {
header .open-block span {
margin-bottom: 5px; } }
header .open-block.opened {
margin: auto; }
header .open-block.opened span {
@ -323,6 +355,51 @@ header {
.layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 {
text-transform: uppercase; }
aside {
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
order: 1;
margin-top: 5rem; }
@media (max-width: 891px) {
aside {
margin-left: 5%;
margin-top: 9rem; } }
@media (max-width: 500px) {
aside {
width: 80%;
margin-top: 3rem; } }
aside .sidebar_first_container {
position: -webkit-sticky;
position: sticky;
top: 10rem;
font-weight: 400; }
aside .sidebar_first_container .field-content {
margin-bottom: 0.7rem; }
@media (max-width: 810px) {
aside .sidebar_first_container {
display: none; } }
aside .views-field-field-pieces-jointes .field-content {
display: flex;
flex-direction: column; }
aside .views-field-field-pieces-jointes .field-content .file--application-pdf {
display: inline-flex; }
aside .views-field-field-pieces-jointes .field-content .file--application-pdf a {
display: block;
font-size: small;
font-weight: 800; }
aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before {
content: url(../images/noun-arrow-download.svg);
margin: auto;
padding-right: 00.5rem; }
aside .views-field-field-pieces-jointes .field-content span {
font-size: small;
font-weight: 800; }
aside .views-field-field-pieces-jointes .field-content span:nth-child(2) {
margin-left: 50px;
align-self: center; }
/*pages*/
#home {
width: 100%;
@ -498,10 +575,16 @@ header {
font-weight: 500;
font-size: 0.6rem;
margin-left: 1rem; }
@media (max-width: 810px) {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title {
margin-left: 0; } }
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
grid-column: 3 /span 8;
grid-row: 2;
margin-left: 1rem; }
@media (max-width: 810px) {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
margin-left: 0; } }
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
grid-column: 3 /span 8;
grid-row: 3;
@ -509,6 +592,9 @@ header {
width: fit-content;
padding-bottom: 0.5rem;
margin-left: 1rem; }
@media (max-width: 810px) {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
margin-left: 0; } }
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a {
display: inline-flex;
align-items: center; }
@ -542,6 +628,10 @@ header {
#presentation .layout-content .content_container article.node-type-static .field_body {
padding-left: 20%;
padding-right: 20%; }
@media (max-width: 810px) {
#presentation .layout-content .content_container article.node-type-static .field_body {
padding-left: 13%;
padding-right: 13%; } }
@media (max-width: 640px) {
#presentation .layout-content .content_container article.node-type-static .field_body {
padding-left: 10%;
@ -560,6 +650,10 @@ header {
padding-bottom: 1rem;
padding-left: 20%;
padding-right: 20%; }
@media (max-width: 810px) {
#presentation .layout-content .content_container article.node-type-static .paragraph {
padding-left: 13%;
padding-right: 13%; } }
@media (max-width: 640px) {
#presentation .layout-content .content_container article.node-type-static .paragraph {
padding-left: 10%;
@ -585,16 +679,30 @@ header {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) {
display: flex;
flex-direction: row; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) {
flex-direction: column; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
padding-right: 30px;
text-align: left;
color: #0732c2; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
padding-right: 0px;
text-align: center; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
display: flex;
flex-direction: row; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
flex-direction: column; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p {
padding-right: 30px;
text-align: left; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p {
padding-right: 0px;
text-align: center; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes p {
margin-bottom: 0; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto {
@ -609,52 +717,25 @@ header {
width: 30px; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img {
width: -moz-available;
width: 100%;
height: auto;
cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; }
#presentation aside {
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
order: 1;
margin-top: 5rem; }
@media (max-width: 891px) {
#presentation aside {
margin-left: 5%;
margin-top: 9rem; } }
@media (max-width: 500px) {
#presentation aside {
width: 80%;
margin-top: 3rem; } }
#presentation aside .sidebar_first_container {
position: -webkit-sticky;
position: sticky;
top: 10rem;
font-weight: 400; }
#presentation aside .sidebar_first_container .field-content {
margin-bottom: 0.7rem; }
@media (max-width: 810px) {
#presentation aside .sidebar_first_container {
display: none; } }
#presentation aside .views-field-field-pieces-jointes .field-content {
display: flex;
flex-direction: column; }
#presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf {
display: inline-flex; }
#presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf a {
display: block;
font-size: small;
font-weight: 800; }
#presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before {
content: url(../images/noun-arrow-download.svg);
margin: auto;
padding-right: 00.5rem; }
#presentation aside .views-field-field-pieces-jointes .field-content span {
font-size: small;
font-weight: 800; }
#presentation aside .views-field-field-pieces-jointes .field-content span:nth-child(2) {
margin-left: 50px;
align-self: center; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
filter: brightness(75%);
transition: 0.2s; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in {
-ms-transform: scale(1.7);
/* IE 9 */
-webkit-transform: scale(1.7);
/* Safari 3-8 */
transform: scale(1.7);
max-width: 100vw;
overflow-x: scroll; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover {
filter: brightness(100%);
transition: 0.2s;
cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-out;
overflow-x: scroll; }
.node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage {
grid-column: 3 /span 9;

52
web/themes/custom/quartiers_de_demain/images/noun-loop-3037049.svg Normal file
View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.0"
x="0px"
y="0px"
viewBox="0 0 100 125"
style="enable-background:new 0 0 100 100;"
xml:space="preserve"
id="svg2"
sodipodi:docname="noun-loop-3037049.svg"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs2" /><sodipodi:namedview
id="namedview2"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="4.1365747"
inkscape:cx="41.217677"
inkscape:cy="56.810288"
inkscape:window-width="1920"
inkscape:window-height="1012"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" /><g
id="g1"
transform="matrix(-1,0,0,1,99.722674,0)"><path
d="M 86.85,13.47 C 81.61,8.34 74.67,5.51 67.35,5.63 c -7.34,0.08 -14.2,3 -19.34,8.24 -8.48,8.65 -10.23,21.81 -4.45,32.36 l -7.58,7.74 -2.3,-2.26 c -0.24,-0.23 -0.57,-0.37 -0.89,-0.36 -0.33,0 -0.65,0.14 -0.88,0.38 L 5.01,79.17 c -0.23,0.24 -0.36,0.56 -0.36,0.89 0,0.33 0.14,0.65 0.38,0.88 l 14.11,13.83 c 0.24,0.24 0.56,0.36 0.88,0.36 0.32,0 0.65,-0.13 0.89,-0.38 l 26.9,-27.44 c 0.23,-0.24 0.36,-0.56 0.36,-0.89 0,-0.33 -0.14,-0.65 -0.38,-0.88 l -2.3,-2.26 7.1,-7.24 c 0.43,0.28 0.86,0.56 1.32,0.82 4.29,2.48 9.02,3.69 13.73,3.69 7.19,0 14.3,-2.83 19.61,-8.25 C 97.83,41.5 97.66,24.07 86.85,13.47 Z M 20,92.11 7.67,80.03 32.82,54.37 45.14,66.45 Z m 23.7,-30.58 -5.94,-5.82 7.11,-7.26 c 0.04,0.06 0.08,0.11 0.12,0.17 0.09,0.14 0.19,0.27 0.29,0.4 0.21,0.3 0.43,0.6 0.66,0.89 0.11,0.15 0.23,0.29 0.34,0.43 0.23,0.29 0.47,0.57 0.71,0.84 0.11,0.12 0.21,0.25 0.32,0.37 0.35,0.39 0.72,0.77 1.09,1.14 0.46,0.45 0.93,0.87 1.42,1.28 0.12,0.1 0.24,0.2 0.36,0.3 0.12,0.1 0.23,0.2 0.34,0.29 z M 85.46,50.56 c -7.98,8.15 -20.44,9.85 -30.3,4.14 -0.7,-0.41 -1.36,-0.84 -2.01,-1.3 -1.04,-0.75 -2.05,-1.59 -2.98,-2.51 -1.49,-1.46 -2.8,-3.1 -3.91,-4.95 -0.02,-0.05 -0.05,-0.1 -0.08,-0.15 -5.78,-9.7 -4.28,-22.11 3.63,-30.19 4.67,-4.76 10.91,-7.42 17.58,-7.49 0.09,0 0.18,0 0.26,0 6.57,0 12.76,2.53 17.46,7.13 9.82,9.65 9.97,25.49 0.35,35.32 z"
id="path1" /></g><g
id="g2"
transform="translate(0.48349182,-0.48349182)"><rect
style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.59149;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
id="rect2"
width="0.68201739"
height="26.391418"
x="31.111984"
y="20.342749" /><rect
style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.59149;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
id="rect2-5"
width="0.68201739"
height="26.391418"
x="-33.879463"
y="18.257284"
transform="rotate(-90)" /></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

41
web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
View File

@ -37,7 +37,6 @@
$('.header_nav_container').fadeOut();
});
});
// // /////////////////
@ -58,4 +57,42 @@
// });
// })(jQuery, window);
//////////// agrandissement du shema
$('#paragraph-id--9 img').click(function() {
$(this).toggleClass('zoom_in');
});
});
// function $(id){
// return document.getElementById(id);
// }
// function agrandir(id){
// $('popup').style.display='block';
// $('imageAgrandie').src=$(id).src;
// }
// function reduire(){
// $('popup').style.display='none';
// $('imageAgrandie').src="";
// }
// zoom=2;
// document.body.onmousemouve=function(){
// loupe=document.getElementById("#paragraph-id--9");
// loupe.style.left=event.clientX+"px";
// loupe.style.right=event.clientY+"px";
// loupe.style.backgroundSize=(1500*zoom)+"px";
// loupe.style.backgroundPosition=(-loupe.offsetLeft+zoom-150)+"px"+(-loupe.offsetTop+zoom-150)+"px";
// }
function $zoom() {
}

1
web/themes/custom/quartiers_de_demain/scss/global/_layout.scss
View File

@ -2,6 +2,7 @@
$header-height : 150px;
$header-height-pad : 110px;
$header-height-small : 70px;
$header-height-ultrasmall : 50px;
$width-menu-slidedown : 550px;
.layout-container {

9
web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss
View File

@ -50,11 +50,17 @@
font-weight: 500;
font-size: $font-normal;
margin-left: 1rem;
@media (max-width:810px) {
margin-left: 0;
}
}
.field_body{
grid-column: 3 /span 8;
grid-row: 2;
margin-left: 1rem;
@media (max-width:810px) {
margin-left: 0;
}
}
.field_field_lien{
@ -64,6 +70,9 @@
width: fit-content;
padding-bottom: 0.5rem;
margin-left: 1rem;
@media (max-width:810px) {
margin-left: 0;
}
a{
display: inline-flex;

108
web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
View File

@ -10,11 +10,6 @@
order: 2;
padding-top: 3rem;
padding-bottom: 6rem;
// width: 70%;
// margin: auto;
@media(max-width: 891px){
// width: 90%;
}
@media (max-width:500px) {
padding-top: 0;
}
@ -30,6 +25,10 @@
.field_body{
padding-left: 20%;
padding-right: 20%;
@media (max-width:810px) {
padding-left: 13%;
padding-right: 13%;
}
@media (max-width:640px) {
padding-left: 10%;
padding-right: 10%;
@ -54,6 +53,10 @@
padding-bottom: 1rem;
padding-left: 20%;
padding-right: 20%;
@media (max-width:810px) {
padding-left: 13%;
padding-right: 13%;
}
@media (max-width:640px) {
padding-left: 10%;
padding-right: 10%;
@ -93,21 +96,36 @@
.field_field_texte div:nth-child(2){
display: flex;
flex-direction: row;
@media(max-width: 500px){
flex-direction: column;
}
p{
padding-right: 30px;
text-align: left;
color: $blue_QDD;
@media(max-width: 500px){
padding-right: 0px;
text-align: center;
}
}
}
}
#paragraph-id--8{
.field_field_texte div:nth-child(2){
display: flex;
flex-direction: row;
@media(max-width: 500px){
flex-direction: column;
}
p{
padding-right: 30px;
text-align: left;
@media(max-width: 500px){
padding-right: 0px;
text-align: center;
}
}
}
}
@ -130,73 +148,33 @@
#paragraph-id--9{
img{
width: -moz-available;
width: 100%;
height: auto;
cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in;
&:hover{
filter: brightness(75%);
transition: 0.2s;
}
}
.zoom_in{
-ms-transform: scale(1.7); /* IE 9 */
-webkit-transform: scale(1.7); /* Safari 3-8 */
transform: scale(1.7);
max-width: 100vw;
overflow-x: scroll;
&:hover{
filter: brightness(100%);
transition: 0.2s;
cursor:url(/img/layout/backgrounds/zoom.cur),-moz-zoom-out;
overflow-x: scroll;
}
}
}
}
}
}
}
aside{
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
order: 1;
margin-top: 5rem;
@media(max-width:891px){
margin-left: 5%;
margin-top: 9rem;
}
@media (max-width:500px) {
width: 80%;
margin-top: 3rem;
}
.sidebar_first_container{
position: -webkit-sticky;
position: sticky;
top: 10rem;
font-weight: 400;
.field-content{
margin-bottom: 0.7rem;
}
@media (max-width: 810px){
display: none;
}
}
.views-field-field-pieces-jointes{
.field-content{
display: flex;
flex-direction: column;
.file--application-pdf{
display: inline-flex;
a{
display: block;
font-size: small;
font-weight: 800;
}
&::before{
content: url(../images/noun-arrow-download.svg);
margin: auto;
padding-right: 00.5rem;
}
}
span{
font-size: small;
font-weight: 800;
&:nth-child(2){
margin-left: 50px;
align-self: center;
}
}
}
}
}
}
}

57
web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss
View File

@ -10,4 +10,61 @@
}
}
aside{
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
order: 1;
margin-top: 5rem;
@media(max-width:891px){
margin-left: 5%;
margin-top: 9rem;
}
@media (max-width:500px) {
width: 80%;
margin-top: 3rem;
}
.sidebar_first_container{
position: -webkit-sticky;
position: sticky;
top: 10rem;
font-weight: 400;
.field-content{
margin-bottom: 0.7rem;
}
@media (max-width: 810px){
display: none;
}
}
.views-field-field-pieces-jointes{
.field-content{
display: flex;
flex-direction: column;
.file--application-pdf{
display: inline-flex;
a{
display: block;
font-size: small;
font-weight: 800;
}
&::before{
content: url(../images/noun-arrow-download.svg);
margin: auto;
padding-right: 00.5rem;
}
}
span{
font-size: small;
font-weight: 800;
&:nth-child(2){
margin-left: 50px;
align-self: center;
}
}
}
}
}

42
web/themes/custom/quartiers_de_demain/scss/partials/_header.scss
View File

@ -17,7 +17,13 @@ header{
// width: 800px;
height: $header-height-pad;
}
@media (max-width:360px) { }
@media(max-width: 660px){
height: $header-height-small;
}
@media(max-width: 660px){
display: flex;
height: $header-height-ultrasmall;
}
.contextual-region{
width: max-content;
}
@ -29,6 +35,10 @@ header{
flex-direction: row;
border-right: 1px solid #808080;
padding-left: 5%;
padding-right: 5%;
@media(max-width: 660px){
height: inherit;
}
#block-quartiers-de-demain-logorepu-2{
@media(max-width: 891px){
@ -51,17 +61,28 @@ header{
@media(max-width: 891px){
height: $header-height-pad;
}
@media(max-width: 660px){
height: $header-height-small;
}
@media(max-width: 660px){
height: $header-height-ultrasmall;
}
}
}
.header_right_container{
padding-right: 10px;
@media(max-width: 660px){
padding-right: 0;
}
.language-switcher-language-url{
ul{
display: flex;
flex-direction: row;
font-size: $font-medium;
padding: 0;
@media(max-width: 660px){
margin-bottom: 0;
}
li:nth-child(1){
&::after{
content: "/";
@ -80,18 +101,14 @@ header{
display: none;
grid-row: 3;
grid-column: 1 /span 12;
position: absolute;
top: 100%;
width: 100%;
background: $bleu_fond_header;
border-bottom: 1px solid #808080;
border-top: 1px solid #808080;
font-size: $font-big;
#block-quartiers-de-demain-entete{
grid-column: 1 /span 11;
order: 2;
@ -99,6 +116,9 @@ header{
h2{
display: none;
}
@media(max-width: 660px){
}
}
}
@ -119,6 +139,9 @@ header{
background: black;
border-radius: 3px;
z-index: 1;
@media(max-width: 660px){
width: 25px;
}
}
}
.open-block{
@ -126,10 +149,17 @@ header{
display: grid;
align-items: center;
margin: auto;
@media(max-width: 660px){
height: $header-height-ultrasmall;
}
span{
margin-bottom: 13px;
transform-origin: 4px 0px;
@media(max-width: 660px){
margin-bottom: 5px;
}
}
}
.open-block.opened {
margin: auto;

2
web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
View File

@ -26,7 +26,7 @@
/*pages*/
@import "pages/_home";
@import "pages/home";
@import "pages/partenaires";
@import "pages/presentation";
@import "pages/static";

1
web/themes/custom/quartiers_de_demain/templates/html.html.twig
View File

@ -32,6 +32,7 @@
<title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token }}">
<js-placeholder token="{{ placeholder_token }}">
</head>
<body{{ attributes }}>
{#