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

img fill home diap

Browse Source
This commit is contained in:
ouidade
2025-09-18 10:39:50 +02:00
parent e1e2839feb
commit 750ce593fe
3 changed files with 81 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/reha/dist/css/bundle.css
Vendored
+23 -9
View File
@@ -1976,6 +1976,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
} }
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site { .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site {
width: 70%; width: 70%;
height: 30vw;
margin: auto; margin: auto;
} }
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site { .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site {
@@ -1983,6 +1984,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: auto; margin: auto;
height: 100%;
} }
@media (max-width: 1400px) { @media (max-width: 1400px) {
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site { .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site {
@@ -2001,29 +2003,41 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site { .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site {
order: 1; order: 1;
width: 70%; width: 70%;
height: 100%;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site { .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site {
width: 100%; width: 100%;
} }
} }
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item { .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image {
height: 100%;
}
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items {
height: 100%;
}
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
position: relative; position: relative;
height: 100%;
} }
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item img { .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item a {
height: 100%;
width: 100%; width: 100%;
object-fit: contain; }
height: fit-content; .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item a img {
height: 100%;
width: 100%;
object-fit: fill;
} }
@media (max-width: 1500px) { @media (max-width: 1500px) {
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item img { .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item a img {
width: 100%; width: 100%;
} }
} }
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item blockquote { .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item blockquote {
position: absolute; position: absolute;
font-style: italic; font-style: italic;
margin: 0; margin: 0;
@@ -2033,19 +2047,19 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
bottom: 0px; bottom: 0px;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item blockquote { .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item blockquote {
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
} }
} }
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item blockquote p { .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item blockquote p {
margin: 0; margin: 0;
padding-left: 1rem; padding-left: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item blockquote p { .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item blockquote p {
font-size: 0.8rem; font-size: 0.8rem;
} }
} }
web/themes/custom/reha/reha.theme
+2
View File
@@ -146,5 +146,7 @@ function reha_preprocess_field(&$variables){
array_splice($variables['items'], 1); array_splice($variables['items'], 1);
} }
} }
} }
web/themes/custom/reha/scss/pages/home/_home-view-sites.scss
+56 -35
View File
@@ -38,7 +38,9 @@
.node-type-site{ .node-type-site{
width: 70%; width: 70%;
height: 30vw;
margin: auto; margin: auto;
.entete_site{ .entete_site{
background-color: white; background-color: white;
// height: 520px; // height: 520px;
@@ -46,6 +48,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: auto; margin: auto;
height: 100%;
@media(max-width: 1400px){ @media(max-width: 1400px){
width: 100%; width: 100%;
display: flex; display: flex;
@@ -60,48 +63,66 @@
.image-site{ .image-site{
order: 1; order: 1;
width: 70%; width: 70%;
height: 100%;
@media(max-width: 900px){ @media(max-width: 900px){
width: 100%; width: 100%;
} }
.field__item{ .field--type-image{
display: flex; height: 100%;
flex-direction:column; .field__items{
align-items: flex-end; height: 100%;
position: relative; .field__item{
img { display: flex;
// height: 520px; flex-direction:column;
width: 100%; align-items: flex-end;
object-fit: contain; position: relative;
height: fit-content; height: 100%;
// object-fit: cover; a{
// max-height: 200px; height: 100%;
@media(max-width: 1500px){ width: 100%;
width: 100%; img {
} height: 100%;
} // height: 520px;
blockquote{ width: 100%;
position: absolute; // height: 100%;
font-style: italic; object-fit: fill;
margin: 0; // height: fit-content;
width: 20vw; // object-fit: cover;
z-index: 900; // max-height: 200px;
right: -20vw; @media(max-width: 1500px){
bottom: 0px; width: 100%;
@media(max-width: 900px){ }
left: 0;
top: 0; }
width: 100%; }
}
p{
margin: 0; blockquote{
padding-left: 1rem; position: absolute;
padding-bottom: 1rem; font-style: italic;
@media(max-width: 900px){ margin: 0;
font-size: 0.8rem; width: 20vw;
z-index: 900;
right: -20vw;
bottom: 0px;
@media(max-width: 900px){
left: 0;
top: 0;
width: 100%;
}
p{
margin: 0;
padding-left: 1rem;
padding-bottom: 1rem;
@media(max-width: 900px){
font-size: 0.8rem;
}
}
} }
} }
} }
} }
} }
.infos-content-site{ .infos-content-site{