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*/
#header-top {
height: 3rem;
height: 5rem;
background: white;
margin-bottom: 2rem;
margin-top: 1rem; }
padding-bottom: 1rem;
padding-top: 1rem; }
.header_top_left_container {
height: 100%; }
@ -1428,7 +1428,7 @@ footer {
cursor: pointer;
z-index: 100;
background-color: white;
opacity: 0;
opacity: 0.2;
transition: opacity 250ms;
width: 10%; }
.last-news .slick-arrow:hover, .last-ressources .slick-arrow:hover {
@ -1612,13 +1612,16 @@ footer {
#home_prog_container .programme-7:hover {
background: #28429f; }
#home_theme_container .slick-slide {
margin: 0 1rem; }
#home_theme_container .slick-arrow {
position: absolute;
height: 100%;
cursor: pointer;
z-index: 100;
background-color: white;
opacity: 0;
opacity: 0.2;
transition: opacity 250ms;
width: 10%; }
#home_theme_container .slick-arrow:hover {
@ -1658,7 +1661,9 @@ footer {
left: 0;
width: 100%;
height: 100%;
position: absolute; }
position: absolute;
display: grid;
align-items: center; }
#home_theme_container .views-field-field-image img {
width: 100%;
height: auto; }
@ -1684,8 +1689,57 @@ footer {
.path-centre-de-ressources {
background-color: #eff2f9; }
.path-centre-de-ressources main {
flex: 0 0 100%;
max-width: 100%; }
.path-centre-de-ressources header {
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 {
text-align: center;
background-color: #98d0d9;
@ -1693,7 +1747,8 @@ footer {
.path-centre-de-ressources form {
background-color: #98d0d9;
display: grid;
padding: 0 0 5rem 0;
padding: 5rem 0 1rem 0;
margin-top: -3rem;
column-gap: 1rem;
grid-template-columns: calc(10% - 3em) repeat(4, 20%); }
.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 {
text-align: center;
margin: 1.8rem 0;
grid-column: 2; }
grid-column: 1 / span 2; }
.path-actus .content_container .layout__region--content .views-element-container footer a {
display: inline-block;
margin: 0 auto;
@ -1912,7 +1967,7 @@ article p, .paragraph p {
cursor: pointer;
z-index: 100;
background-color: white;
opacity: 0;
opacity: 0.2;
transition: opacity 250ms;
width: 10%; }
.path-actus .content_container .slick-arrow:hover {
@ -1990,7 +2045,7 @@ article p, .paragraph p {
cursor: pointer;
z-index: 100;
background-color: white;
opacity: 0;
opacity: 0.2;
transition: opacity 250ms;
width: 10%; }
.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){
let elem = $(".content_container").find(".views-element-container header>div");
// elem.slick({
// slidesToShow: 1,
// slidesToScroll: 1,
// centerMode: true,
// centerPadding: '60px',
// });
$(elem[0]).slick({
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
// centerPadding: '60px'
});
}
@ -142,7 +142,7 @@ $(function(){
slidesToShow: 5,
slidesToScroll: 4,
centerMode: true,
centerPadding: '10%',
// centerPadding: '10%',
infinite: false,
});
inner_rows = $('#programmes-block_4').find(".views-row").clone();

View File

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

View File

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

View File

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

View File

@ -1,7 +1,72 @@
.path-centre-de-ressources{
main{
flex: 0 0 100%;
max-width: 100%;
}
background-color: $bck-col;
header{
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{
@ -15,7 +80,8 @@
form{
background-color: $lightblue;
display: grid;
padding: 0 0 5rem 0;
padding: 5rem 0 1rem 0;
margin-top: -3rem;
column-gap: 1rem;
grid-template-columns: calc(10% - 3em) repeat(4, 20%);
&>div:first-child{
@ -55,12 +121,12 @@
background-color: transparent;
border: solid 1px black;
box-shadow: none;
&:first-child{
// margin-right: .5rem;
}
&:last-child{
// margin-left: .5rem;
}
// &:first-child{
// // margin-right: .5rem;
// }
// &:last-child{
// // margin-left: .5rem;
// }
}
}
}

View File

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