@media home

This commit is contained in:
2023-07-13 13:18:44 +02:00
parent cf892433b4
commit 654fd62898
3 changed files with 103 additions and 34 deletions
+47 -6
View File
@@ -427,26 +427,35 @@ a {
height: 600px;
border-bottom: 5px solid #009ee3;
background: rgba(0, 158, 227, 0.2); }
@media (max-width: 792px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 {
max-height: 500px; } }
@media (max-width: 724px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 {
max-height: 470px; } }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div {
height: 100%; }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages {
height: 100%; }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content {
height: 90%; }
@media (max-width: 479px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content {
display: flex;
flex-direction: column;
width: 80%; } }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite {
color: black;
line-height: 1.5rem;
width: 80%;
height: 600px;
margin: auto; }
@media (max-width: 680px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite {
width: 65%; } }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child {
display: grid;
grid-template-columns: 1fr repeat(9, 1fr) 1fr; }
@media (max-width: 680px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child {
display: flex;
flex-direction: column;
height: fit-content; } }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images {
order: 1;
grid-column: 1 /span 9;
@@ -454,7 +463,25 @@ a {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img {
width: inherit;
max-height: 550px;
object-fit: cover; }
object-fit: cover;
padding-left: 1rem; }
@media (max-width: 852px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img {
max-height: 500px; } }
@media (max-width: 792px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img {
max-height: 450px; } }
@media (max-width: 724px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img {
max-height: 400px; } }
@media (max-width: 680px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img {
height: 200px;
object-fit: contain;
max-width: 70vw;
margin: auto;
padding-left: 0;
padding-bottom: 1rem; } }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date {
grid-column: 9 / span 9;
grid-row: 2;
@@ -479,6 +506,12 @@ a {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu::before {
content: " | ";
margin-right: 2rem; }
@media (max-width: 534px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu::before {
display: none; } }
@media (max-width: 534px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu {
order: 2; } }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title {
display: inline-flex;
grid-column: 9 / span 9;
@@ -552,6 +585,9 @@ a {
align-items: center; }
.path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links a:after {
content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); }
@media (max-width: 479px) {
.path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images {
width: 100%; } }
.path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images .field__item img {
width: 15rem;
height: auto; }
@@ -560,6 +596,11 @@ a {
.path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche {
flex: 1 1 50px;
padding-left: 1rem; }
@media (max-width: 534px) {
.path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche {
padding-left: 0em;
flex: 1 1 100%;
padding-right: 1rem; } }
@media (max-width: 479px) {
.path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche {
padding-left: 0em; } }
-13
View File
@@ -162,12 +162,8 @@ jQuery(function($) {
// slideshow home // marche pas. attention ai rajouter des class dans template views.view.html.twig et views-view-actus-blocks-pages--block-1.html.twig
(function($, window) {
console.log('hello')
$(document).ready(function(){
// if ('.view-id-actus_blocks_pages view-display-id-block_1'){
$('.path-frontpage .view-actus-blocks-pages .view-content').slick({
slidesToShow: 1,
// slidesToScroll: 1,
@@ -185,16 +181,11 @@ jQuery(function($) {
}]
});
console.log('salut slick home');
$('.page-node-type-actualite .block-entity-fieldnodefield-images .field--type-image').slick({
dots: true,
arrows: false,
});
console.log('salut slick actus');
$('.page-node-type-projet .block-entity-fieldnodefield-photo .field--type-image').slick({
slidesToShow: 1,
dots: true,
@@ -203,10 +194,6 @@ jQuery(function($) {
adaptiveHeight: true,
});
console.log('salut slick projets');
});
// console.log('salut slick actus');
})(jQuery, window);
+56 -15
View File
@@ -9,6 +9,12 @@
height: 600px;
border-bottom: 5px solid $blue-light;
background: $background-actus;
@media(max-width:792px){
max-height: 500px;
}
@media(max-width:724px){
max-height: 470px;
}
div{
height: 100%;
.view-actus-blocks-pages{
@@ -18,37 +24,58 @@
// flex-basis: auto;
height: 90%;
@media (max-width: 479px){
display: flex;
flex-direction: column;
width: 80%;
}
// @media (max-width: 479px){
// display: flex;
// flex-direction: column;
// width: 80%;
// }
.views-row{
// width: 80%;
// margin: auto;
.node-type-actualite{
color: $black;
line-height: 1.5rem;
width: 80%;
height: 600px;
margin: auto;
// background-color: burlywood;
@media (max-width: 680px){
width: 65%;
}
div:first-child{ // block actu dans le bandeau
// display: flex;
// flex-direction: column;
// flex-wrap: wrap;
display: grid;
grid-template-columns: 1fr repeat(9, 1fr) 1fr;
@media (max-width: 680px){
display: flex;
flex-direction: column;
height: fit-content;
}
.field--name-field-images {
order: 1;
grid-column: 1 /span 9;
grid-row: 1 / span 6;
.field__item img{
width: inherit;
max-height: 550px;
object-fit: cover;
padding-left: 1rem;
@media(max-width:852px){
max-height: 500px;
}
@media(max-width:792px){
max-height: 450px;
}
@media(max-width:724px){
max-height: 400px;
}
@media (max-width: 680px){
height: 200px;
object-fit: contain;
max-width: 70vw;
margin: auto;
padding-left: 0;
padding-bottom: 1rem;
}
}
}
@@ -94,6 +121,12 @@
&::before{
content: " | ";
margin-right: 2rem;
@media (max-width: 534px){
display: none;
}
}
@media (max-width: 534px){
order: 2;
}
}
@@ -257,6 +290,9 @@
}
.field--name-field-images{
// grid-column: 2 / 4;
@media (max-width: 479px) {
width: 100%;
}
.field__item{
img{
width: 15rem;
@@ -271,9 +307,14 @@
flex: 1 1 50px;
// grid-column: 4 / 9;
padding-left: 1rem;
@media (max-width: 534px){
padding-left: 0em;
flex: 1 1 100%;
padding-right: 1rem;
}
@media (max-width: 479px){
padding-left: 0em;
padding-left: 0em;
}
p{
background-color: $white;