margins fields

This commit is contained in:
2026-05-21 15:14:22 +02:00
parent f55e4c19a4
commit 5fff97b92a
6 changed files with 777 additions and 381 deletions
@@ -4,7 +4,7 @@
left: inherit !important;
}
.layout-content{
width: 60vw;
width: 80vw;
margin: auto;
}
@@ -36,261 +36,199 @@
text-transform: uppercase;
text-align: end;
}
.node-type-projet {
border-bottom: 1px solid black;
padding-bottom: 5rem;
margin-bottom: 5rem;
///// bouton print //////
.view-header{
position: fixed;
right: 0;
margin-right: 2rem;
margin-top: 5rem;
font-weight: 600;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
width: fit-content;
background-color: $blue-light;
border: none;
p{margin: 0;}
a{color: white;}
}
.projet-content {
display: flex;
flex-direction: column;
}
.field--name-field-photo {
// height: 66vh;
.view-projets{
margin-top: 4rem !important;
margin-bottom: 4rem !important;
///// filtres ///////////
.buttons-filtres-ressources{display: none;}
// width: 80%;
margin: auto;
.view-filters{
margin-top: 4rem;
padding-left: 0.5rem;
display: flex;
flex-direction: column;
@media (max-width: 479px){
flex-direction: column;
padding-bottom: 3rem;
margin-top: 0rem;
}
&::before{
content: 'Sélectionner les projets à imprimer :';
margin-right: 2rem;
margin-bottom: 1rem;
margin-left: 0.5rem;
font-weight: 900;
// width: 160px;
min-width: fit-content;
@media (max-width: 479px){
padding-bottom: 1rem;
}
}
}
.field--name-title {
order: 2;
font-family: "Marianne";
font-size: 2rem;
font-weight: 800;
color: $blue-light;
@media (max-width: 1624px) {
font-size: 2.3rem;
}
@media (max-width: 1384px) {
font-size: 2rem;
}
@media (max-width: 1216px) {
font-size: 2rem;
}
@media (max-width: 810px) {
font-size: 1.7rem;
}
a {
color: $blue-light;
}
}
.field--name-field-equipe {
order: 3;
color: $blue-dark;
font-size: 1.5rem;
font-weight: 900;
text-transform: uppercase;
@media (max-width: 1624px) {
font-size: 1.3rem;
}
@media (max-width: 1216px) {
font-size: 1.1rem;
}
@media (max-width: 810px) {
font-size: 1rem;
}
.field__label {
display: none;
}
.field__items {
height: 100%;
display: grid;
gap: 3px;
}
.field--name-field-incube {
order: 4;
display: inline-flex;
width: fit-content;
background-color: $red;
color: white;
font-weight: 800;
padding-right: 0.3rem;
padding-left: 0.2rem;
margin-bottom: 1rem;
margin-top: 1rem;
// flex-direction: row;
&::before {
content: ' Projet ';
padding-right: 0.5rem;
}
.field__label{
display: inline;
}
.field__item {
overflow: hidden;
aspect-ratio: 3 / 2;
display: none;
}
}
.field--name-field-neuf-rehabilitation,
.field--name-field-encours-fini {
display: none;
}
.field--name-field-region {
.field__label{
display: none;
}
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 2rem;
.field__item img {
width: 100%;
height: 100%;
object-fit: cover;
&::before {
content: "";
display: block;
}
.image-field-caption {
display: none;
}
// 1 seule image
.field__items:has(.field__item:only-child) {
grid-template-columns: 1fr;
// grid-template-rows: 1fr;
}
.field__items:has(.field__item:only-child) .field__item {
grid-column: 1;
// grid-row: 1;
}
// Plusieurs images
.field__items:has(.field__item:nth-child(2)) {
grid-template-columns: repeat(3, 1fr);
// grid-template-rows: 4fr 2fr 2fr;
}
.field__items:has(.field__item:nth-child(2)) .field__item:first-child {
grid-column: 1 / 4;
// grid-row: 1;
}
// facultatif : max 7 images affichées
.field__items .field__item:nth-child(n + 8) {
display: none;
width: 20px;
height: 20px;
background: url("../images/pictos/picto_lieu.svg") no-repeat center;
background-size: contain;
}
}
// }
.field--name-title {
order: 2;
font-family: "Marianne";
font-size: 2rem;
font-weight: 800;
color: $blue-light;
@media (max-width: 1624px) {
font-size: 2.3rem;
.field--name-field-etape-du-projet,
.field--name-field-type-de-projet,
.field--name-field-type-de-moa {
margin-bottom: 1rem;
a {
color: black;
}
.field__label {
width: fit-content;
color: $blue-dark;
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 0 !important;
flex-direction: row;
&::after {
content: ':';
padding-left: 0.5rem;
}
}
.field__item{
width: fit-content;
}
}
@media (max-width: 1384px) {
font-size: 2rem;
.field--name-field-textes{
margin-top: 2rem;
.field__label{
display: none !important;
}
}
@media (max-width: 1216px) {
font-size: 2rem;
}
@media (max-width: 810px) {
font-size: 1.7rem;
}
a {
color: $blue-light;
}
}
.field--name-field-equipe {
order: 3;
color: $blue-dark;
font-size: 1.5rem;
font-weight: 900;
text-transform: uppercase;
@media (max-width: 1624px) {
font-size: 1.3rem;
}
@media (max-width: 1216px) {
font-size: 1.1rem;
}
@media (max-width: 810px) {
font-size: 1rem;
}
.field__label {
display: none;
}
}
.field--name-field-incube {
order: 4;
display: inline-flex;
width: fit-content;
background-color: $red;
color: white;
font-weight: 800;
padding-right: 0.3rem;
padding-left: 0.2rem;
margin-bottom: 1rem;
margin-top: 1rem;
// flex-direction: row;
&::before {
content: ' Projet ';
padding-right: 0.5rem;
}
.field__label{
display: inline;
}
.field__item {
display: none;
}
}
.field--name-field-neuf-rehabilitation,
.field--name-field-encours-fini {
display: none;
}
///// ///////////
.field--name-field-region {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 2rem;
&::before {
content: "";
display: block;
width: 20px;
height: 20px;
background: url("../images/pictos/picto_lieu.svg") no-repeat center;
background-size: contain;
}
}
.field--name-field-type-de-moa {
order: 6;
}
.field--name-field-type-de-projet {
order: 7;
}
.field--name-field-etape-du-projet {
order: 8;
}
.field--name-field-textes {
order: 9;
.field__label {
display: none;
}
.field--name-field-titre {
color: $blue-dark;
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 0 !important;
flex-direction: row;
&::after {
content: ' :';
padding-left: 0.5rem;
}
}
}
.field--name-field-etape-du-projet,
.field--name-field-type-de-projet,
.field--name-field-type-de-moa {
a {
color: black;
}
.field__label {
color: $blue-dark;
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 0 !important;
flex-direction: row;
&::after {
content: ':';
padding-left: 0.5rem;
}
}
}
@media print {
.path-projets-complets {
.layout-content {
width: 100% !important;
margin: 0 auto !important;
}
.projet-content {
display: block !important;
}
.field--name-field-photo {
.field__items {
display: block !important;
height: auto !important;
}
.field__item {
display: block !important;
aspect-ratio: auto !important;
overflow: visible !important;
margin-bottom: 4mm;
}
.field__item img {
width: 100% !important;
height: auto !important;
object-fit: contain !important;
display: block;
}
}
}
// @media screen {
// .node-type-projet {
// visibility: hidden;
// }
// }
}
}
@@ -12,8 +12,8 @@
@page {
margin-top: 1cm;
margin-bottom: 1cm;
margin-left: 1cm;
margin-right: 1cm;
// margin-left: 1cm;
// margin-right: 1cm;
}
.layout-container{
display: block;
@@ -48,6 +48,10 @@
text-align: end;
}
.view-header,
.view-filters{
display: none;
}
.views-row{
.node-type-projet {
border-bottom:none;
@@ -67,6 +71,253 @@
.field--name-field-photo .image-field-caption {
display: none;
}
.field--name-field-photo {
// height: 66vh;
.field__label {
display: none;
}
.field__items {
height: 100%;
display: grid;
gap: 3px;
}
.field__item {
overflow: hidden;
aspect-ratio: 3 / 2;
}
.field__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.image-field-caption {
display: none;
}
// 1 seule image
.field__items:has(.field__item:only-child) {
grid-template-columns: 1fr;
// grid-template-rows: 1fr;
}
.field__items:has(.field__item:only-child) .field__item {
grid-column: 1;
// grid-row: 1;
}
// Plusieurs images
.field__items:has(.field__item:nth-child(2)) {
grid-template-columns: repeat(3, 1fr);
// grid-template-rows: 4fr 2fr 2fr;
}
.field__items:has(.field__item:nth-child(2)) .field__item:first-child {
grid-column: 1 / 4;
// grid-row: 1;
}
// facultatif : max 7 images affichées
.field__items .field__item:nth-child(n + 8) {
display: none;
}
}
// }
.field--name-title {
order: 2;
font-family: "Marianne";
font-size: 2rem;
font-weight: 800;
color: $blue-light;
@media (max-width: 1624px) {
font-size: 2.3rem;
}
@media (max-width: 1384px) {
font-size: 2rem;
}
@media (max-width: 1216px) {
font-size: 2rem;
}
@media (max-width: 810px) {
font-size: 1.7rem;
}
a {
color: $blue-light;
}
}
.field--name-field-equipe {
order: 3;
color: $blue-dark;
font-size: 1.5rem;
font-weight: 900;
text-transform: uppercase;
@media (max-width: 1624px) {
font-size: 1.3rem;
}
@media (max-width: 1216px) {
font-size: 1.1rem;
}
@media (max-width: 810px) {
font-size: 1rem;
}
.field__label {
display: none;
}
}
.field--name-field-incube {
order: 4;
display: inline-flex;
width: fit-content;
background-color: $red;
color: white;
font-weight: 800;
padding-right: 0.3rem;
padding-left: 0.2rem;
margin-bottom: 1rem;
margin-top: 1rem;
// flex-direction: row;
&::before {
content: ' Projet ';
padding-right: 0.5rem;
}
.field__label{
display: inline;
}
.field__item {
display: none;
}
}
.field--name-field-neuf-rehabilitation,
.field--name-field-encours-fini {
display: none;
}
.field--name-field-region {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 2rem;
&::before {
content: "";
display: block;
width: 20px;
height: 20px;
background: url("../images/pictos/picto_lieu.svg") no-repeat center;
background-size: contain;
}
}
.field--name-field-type-de-moa {
order: 6;
}
.field--name-field-type-de-projet {
order: 7;
}
.field--name-field-etape-du-projet {
order: 8;
}
.field--name-field-textes {
order: 9;
.field__label {
display: none;
}
.field--name-field-titre {
color: $blue-dark;
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 0 !important;
flex-direction: row;
&::after {
content: ' :';
padding-left: 0.5rem;
}
}
}
.field--name-field-etape-du-projet,
.field--name-field-type-de-projet,
.field--name-field-type-de-moa {
a {
color: black;
}
.field__label {
color: $blue-dark;
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 0 !important;
flex-direction: row;
&::after {
content: ':';
padding-left: 0.5rem;
}
}
}
@media print {
.path-projets-complets {
.layout-content {
width: 100% !important;
margin: 0 auto !important;
}
.projet-content {
display: block !important;
}
.field--name-field-photo {
.field__items {
display: block !important;
height: auto !important;
}
.field__item {
display: block !important;
aspect-ratio: auto !important;
overflow: visible !important;
margin-bottom: 4mm;
}
.field__item img {
width: 100% !important;
height: auto !important;
object-fit: contain !important;
display: block;
}
}
}
}
}
.projet-body-print{
padding-top: 3rem ;
@@ -94,4 +345,5 @@
break-after: page;
}
}
}
@@ -37,7 +37,8 @@
}
#views-exposed-form-base-de-donnees-block-1,
#views-exposed-form-projets-block-1{
#views-exposed-form-projets-block-1,
#views-exposed-form-projets-page-1{
display: flex;
flex-wrap: wrap;
@media (max-width:810px){