slider ressources v0

This commit is contained in:
armansansd 2021-07-04 01:03:00 +02:00
parent 9c4e1f448b
commit 3ae61ffc2d
9 changed files with 160 additions and 38 deletions

View File

@ -1252,10 +1252,10 @@ iframe {
/*pages*/ /*pages*/
#header-top { #header-top {
height: 3rem; height: 5rem;
background: white; background: white;
margin-bottom: 2rem; padding-bottom: 1rem;
margin-top: 1rem; } padding-top: 1rem; }
.header_top_left_container { .header_top_left_container {
height: 100%; } height: 100%; }
@ -1428,7 +1428,7 @@ footer {
cursor: pointer; cursor: pointer;
z-index: 100; z-index: 100;
background-color: white; background-color: white;
opacity: 0; opacity: 0.2;
transition: opacity 250ms; transition: opacity 250ms;
width: 10%; } width: 10%; }
.last-news .slick-arrow:hover, .last-ressources .slick-arrow:hover { .last-news .slick-arrow:hover, .last-ressources .slick-arrow:hover {
@ -1612,13 +1612,16 @@ footer {
#home_prog_container .programme-7:hover { #home_prog_container .programme-7:hover {
background: #28429f; } background: #28429f; }
#home_theme_container .slick-slide {
margin: 0 1rem; }
#home_theme_container .slick-arrow { #home_theme_container .slick-arrow {
position: absolute; position: absolute;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
z-index: 100; z-index: 100;
background-color: white; background-color: white;
opacity: 0; opacity: 0.2;
transition: opacity 250ms; transition: opacity 250ms;
width: 10%; } width: 10%; }
#home_theme_container .slick-arrow:hover { #home_theme_container .slick-arrow:hover {
@ -1658,7 +1661,9 @@ footer {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; } position: absolute;
display: grid;
align-items: center; }
#home_theme_container .views-field-field-image img { #home_theme_container .views-field-field-image img {
width: 100%; width: 100%;
height: auto; } height: auto; }
@ -1684,8 +1689,57 @@ footer {
.path-centre-de-ressources { .path-centre-de-ressources {
background-color: #eff2f9; } background-color: #eff2f9; }
.path-centre-de-ressources main {
flex: 0 0 100%;
max-width: 100%; }
.path-centre-de-ressources header { .path-centre-de-ressources header {
margin-bottom: 0; } margin-bottom: 0; }
.path-centre-de-ressources header .slick-slide {
margin: 0 1rem; }
.path-centre-de-ressources header .slick-slide .views-row {
display: grid !important;
grid-template-columns: 1fr;
position: relative;
height: auto; }
.path-centre-de-ressources header .slick-slide .views-row .views-field-field-image {
grid-column: 1;
grid-row: 1 / span 4;
z-index: -1;
padding-top: 1rem; }
.path-centre-de-ressources header .slick-slide .views-row .views-field:not(.views-field-field-image) {
background: blue;
width: 50%;
margin-left: 1rem;
padding-left: 1rem; }
.path-centre-de-ressources header .slick-slide .views-row .views-field-title {
padding-bottom: 1rem;
grid-column: 1;
grid-row: 3;
font-weight: 600; }
.path-centre-de-ressources header .slick-slide .views-row .views-field-view-node {
padding-top: 1rem;
grid-column: 1;
grid-row: 1; }
.path-centre-de-ressources header .slick-slide .views-row .views-field-field-programme {
text-transform: uppercase;
grid-column: 1;
grid-row: 2; }
.path-centre-de-ressources header .slick-slide .views-row a {
text-decoration: none; }
.path-centre-de-ressources header .slick-arrow {
position: absolute;
height: 100%;
cursor: pointer;
z-index: 100;
background-color: white;
opacity: 0.2;
transition: opacity 250ms;
width: 10%; }
.path-centre-de-ressources header .slick-arrow:hover {
opacity: .5; }
.path-centre-de-ressources header .slick-next {
right: 0;
top: 0; }
.path-centre-de-ressources .content_container > div > h2:first-child { .path-centre-de-ressources .content_container > div > h2:first-child {
text-align: center; text-align: center;
background-color: #98d0d9; background-color: #98d0d9;
@ -1693,7 +1747,8 @@ footer {
.path-centre-de-ressources form { .path-centre-de-ressources form {
background-color: #98d0d9; background-color: #98d0d9;
display: grid; display: grid;
padding: 0 0 5rem 0; padding: 5rem 0 1rem 0;
margin-top: -3rem;
column-gap: 1rem; column-gap: 1rem;
grid-template-columns: calc(10% - 3em) repeat(4, 20%); } grid-template-columns: calc(10% - 3em) repeat(4, 20%); }
.path-centre-de-ressources form > div:first-child { .path-centre-de-ressources form > div:first-child {
@ -1868,7 +1923,7 @@ article p, .paragraph p {
.path-actus .content_container .layout__region--content .views-element-container footer { .path-actus .content_container .layout__region--content .views-element-container footer {
text-align: center; text-align: center;
margin: 1.8rem 0; margin: 1.8rem 0;
grid-column: 2; } grid-column: 1 / span 2; }
.path-actus .content_container .layout__region--content .views-element-container footer a { .path-actus .content_container .layout__region--content .views-element-container footer a {
display: inline-block; display: inline-block;
margin: 0 auto; margin: 0 auto;
@ -1912,7 +1967,7 @@ article p, .paragraph p {
cursor: pointer; cursor: pointer;
z-index: 100; z-index: 100;
background-color: white; background-color: white;
opacity: 0; opacity: 0.2;
transition: opacity 250ms; transition: opacity 250ms;
width: 10%; } width: 10%; }
.path-actus .content_container .slick-arrow:hover { .path-actus .content_container .slick-arrow:hover {
@ -1990,7 +2045,7 @@ article p, .paragraph p {
cursor: pointer; cursor: pointer;
z-index: 100; z-index: 100;
background-color: white; background-color: white;
opacity: 0; opacity: 0.2;
transition: opacity 250ms; transition: opacity 250ms;
width: 10%; } width: 10%; }
.page-node-type-programme .block-region-bottom .item-list .slick-arrow:hover { .page-node-type-programme .block-region-bottom .item-list .slick-arrow:hover {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -58,12 +58,12 @@ $(function(){
if($('.path-centre-de-ressources').length > 0){ if($('.path-centre-de-ressources').length > 0){
let elem = $(".content_container").find(".views-element-container header>div"); let elem = $(".content_container").find(".views-element-container header>div");
// elem.slick({ $(elem[0]).slick({
// slidesToShow: 1, slidesToShow: 1,
// slidesToScroll: 1, slidesToScroll: 1,
// centerMode: true, centerMode: true,
// centerPadding: '60px', // centerPadding: '60px'
// }); });
} }
@ -142,7 +142,7 @@ $(function(){
slidesToShow: 5, slidesToShow: 5,
slidesToScroll: 4, slidesToScroll: 4,
centerMode: true, centerMode: true,
centerPadding: '10%', // centerPadding: '10%',
infinite: false, infinite: false,
}); });
inner_rows = $('#programmes-block_4').find(".views-row").clone(); inner_rows = $('#programmes-block_4').find(".views-row").clone();

View File

@ -34,7 +34,7 @@
footer{ footer{
text-align: center; text-align: center;
margin: 1.8rem 0; margin: 1.8rem 0;
grid-column: 2 ; grid-column: 1 / span 2 ;
a{ a{
display: inline-block; display: inline-block;
margin: 0 auto; margin: 0 auto;
@ -95,7 +95,7 @@
cursor: pointer; cursor: pointer;
z-index: 100; z-index: 100;
background-color: white; background-color: white;
opacity: 0; opacity: 0.2;
transition: opacity 250ms; transition: opacity 250ms;
width: 10%; width: 10%;
&:hover{ &:hover{

View File

@ -22,7 +22,7 @@
cursor: pointer; cursor: pointer;
z-index: 100; z-index: 100;
background-color: white; background-color: white;
opacity: 0; opacity: 0.2;
transition: opacity 250ms; transition: opacity 250ms;
width: 10%; width: 10%;
&:hover{ &:hover{
@ -278,17 +278,16 @@
} }
} }
#home_theme_container{ #home_theme_container{
// .slick-slide{ .slick-slide{
// // margin: 0 1rem; margin: 0 1rem;
}
// }
.slick-arrow{ .slick-arrow{
position: absolute; position: absolute;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
z-index: 100; z-index: 100;
background-color: white; background-color: white;
opacity: 0; opacity: 0.2;
transition: opacity 250ms; transition: opacity 250ms;
width: 10%; width: 10%;
&:hover{ &:hover{
@ -335,6 +334,8 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
display: grid;
align-items: center;
img{ img{
width: 100%; width: 100%;
height: auto; height: auto;

View File

@ -94,7 +94,7 @@
cursor: pointer; cursor: pointer;
z-index: 100; z-index: 100;
background-color: white; background-color: white;
opacity: 0; opacity: 0.2;
transition: opacity 250ms; transition: opacity 250ms;
width: 10%; width: 10%;
&:hover{ &:hover{

View File

@ -1,7 +1,72 @@
.path-centre-de-ressources{ .path-centre-de-ressources{
main{
flex: 0 0 100%;
max-width: 100%;
}
background-color: $bck-col; background-color: $bck-col;
header{ header{
margin-bottom: 0; margin-bottom: 0;
.slick-slide{
margin: 0 1rem;
.views-row{
display: grid !important;
grid-template-columns: 1fr;
// flex-direction: column;
// flex-direction: column-reverse;
position: relative;
height: auto;
.views-field-field-image{
grid-column: 1;
grid-row: 1 / span 4;
z-index: -1;
padding-top: 1rem;
}
.views-field:not(.views-field-field-image){
background: blue;
width: 50%;
margin-left: 1rem;
padding-left: 1rem;
}
.views-field-title{
padding-bottom: 1rem;
grid-column: 1;
grid-row: 3;
font-weight: 600;
}
.views-field-view-node{
padding-top: 1rem;
grid-column: 1;
grid-row: 1;
}
.views-field-field-programme{
text-transform: uppercase;
grid-column: 1;
grid-row: 2;
}
a{
text-decoration: none;
}
}
}
.slick-arrow{
position: absolute;
height: 100%;
cursor: pointer;
z-index: 100;
background-color: white;
opacity: 0.2;
transition: opacity 250ms;
width: 10%;
&:hover{
opacity: .5;
}
}
.slick-next{
right: 0;
top: 0;
}
} }
.content_container{ .content_container{
@ -15,7 +80,8 @@
form{ form{
background-color: $lightblue; background-color: $lightblue;
display: grid; display: grid;
padding: 0 0 5rem 0; padding: 5rem 0 1rem 0;
margin-top: -3rem;
column-gap: 1rem; column-gap: 1rem;
grid-template-columns: calc(10% - 3em) repeat(4, 20%); grid-template-columns: calc(10% - 3em) repeat(4, 20%);
&>div:first-child{ &>div:first-child{
@ -55,12 +121,12 @@
background-color: transparent; background-color: transparent;
border: solid 1px black; border: solid 1px black;
box-shadow: none; box-shadow: none;
&:first-child{ // &:first-child{
// margin-right: .5rem; // // margin-right: .5rem;
} // }
&:last-child{ // &:last-child{
// margin-left: .5rem; // // margin-left: .5rem;
} // }
} }
} }
} }

View File

@ -1,10 +1,10 @@
//header //header
#header-top{ #header-top{
height: 3rem; height: 5rem;
background: white; background: white;
margin-bottom: 2rem; padding-bottom: 1rem;
margin-top: 1rem; padding-top: 1rem;
} }
.header_top_left_container{ .header_top_left_container{
height: 100%; height: 100%;