Browse Source

responsive slide site home

ouidade 2 days ago
parent
commit
c4d85da843

File diff suppressed because it is too large
+ 0 - 0
web/themes/custom/reha/dist/bundle.js


+ 24 - 5
web/themes/custom/reha/dist/css/bundle.css

@@ -2220,9 +2220,8 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 }
 @media (max-width: 891px) {
   .home-page-layout-content .block-block-content3bb825b3-ab84-4861-a4f2-2a5e5eed74de {
-    margin-bottom: 1rem;
-    margin-top: 2rem;
-    width: 50%;
+    width: 36%;
+    padding-bottom: 4rem;
   }
 }
 .home-page-layout-content .block-block-content3bb825b3-ab84-4861-a4f2-2a5e5eed74de p {
@@ -2236,10 +2235,16 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   top: -44px;
   position: relative;
 }
+@media (max-width: 891px) {
+  .home-page-layout-content .block-views-blocksites-block-1 {
+    top: -44px;
+  }
+}
 @media (max-width: 891px) {
   .home-page-layout-content .block-views-blocksites-block-1 .views-row {
     margin-left: 1.8rem;
     margin-right: 1.8rem;
+    width: 300px !important;
   }
 }
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site {
@@ -2247,6 +2252,12 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   height: 30vw;
   margin: auto;
 }
+@media (max-width: 891px) {
+  .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site {
+    height: fit-content;
+    width: 100%;
+  }
+}
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site {
   background-color: white;
   display: flex;
@@ -2276,6 +2287,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 @media (max-width: 900px) {
   .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site {
     width: 100%;
+    max-height: 200px;
   }
 }
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image {
@@ -2305,6 +2317,12 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
     width: 100%;
   }
 }
+@media (max-width: 900px) {
+  .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%;
+    max-height: 200px;
+  }
+}
 .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;
   font-style: italic;
@@ -2348,8 +2366,9 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
     height: auto;
     display: flex;
     margin: auto;
-    margin-bottom: 2rem;
-    margin-top: 2rem;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    justify-content: left;
   }
 }
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .infos-content-site h1 {

+ 6 - 3
web/themes/custom/reha/js/reha.js

@@ -141,17 +141,20 @@ jQuery(document).ready(function($){
         centerMode: true,
         adaptiveHeight: true,
         // centerPadding: '100px',
-        autoplay: true,
-        autoplaySpeed: 5000,
+        // autoplay: true,
+        // autoplaySpeed: 5000,
         responsive: [
           {
             breakpoint: 810,
             settings: {
               slidesToShow: 1,
-              adaptiveHeight: true,
+              // adaptiveHeight: false,
+              dots: false,
               arrows: false,
               draggable: true,
               centerMode: true,
+              centerPadding: '15px',
+
             }
           }]
       });

+ 21 - 7
web/themes/custom/reha/scss/pages/home/_home-view-sites.scss

@@ -12,10 +12,11 @@
     padding-left: 2rem;
     padding-bottom: 5rem;
     @media(max-width: 891px){
-        margin-bottom: 1rem;
-        margin-top: 2rem;
-        width: 50%;
+        // margin-bottom: 1rem;
+        // margin-top: 2rem;
+        width: 36%;
         // margin: auto;
+        padding-bottom: 4rem;
     }
     p{
         margin: 0;
@@ -29,18 +30,25 @@
         top: -44px;
         position: relative;
         // height: 550px;
+        @media(max-width: 891px){
+            top: -44px;
+         }
     
         .views-row{
             @media(max-width: 891px){
                 margin-left: 1.8rem;
                 margin-right: 1.8rem;
+                width: 300px !important;
             }
 
             .node-type-site{
                 width: 70%;
                 height: 30vw;
                 margin: auto;
-
+                @media(max-width: 891px){
+                    height: fit-content;
+                    width: 100%;
+                }
                 .entete_site{  
                     background-color: white;
                     // height: 520px;
@@ -66,6 +74,7 @@
                         height: 100%;
                         @media(max-width: 900px){
                             width: 100%;
+                            max-height: 200px;
                         }
                         .field--type-image{
                             height: 100%;
@@ -91,7 +100,11 @@
                                                 // max-height: 200px;   
                                                 @media(max-width: 1500px){
                                                     width: 100%;
-                                                }                 
+                                                } 
+                                                @media(max-width: 900px){
+                                                    width: 100%;
+                                                    max-height: 200px;
+                                                }                
                                             
                                         }
                                     }
@@ -142,8 +155,9 @@
                             height: auto;
                             display: flex;
                             margin: auto;
-                            margin-bottom: 2rem;
-                            margin-top: 2rem;
+                            margin-bottom: 1rem;
+                            margin-top: 1rem;
+                            justify-content: left;
                         }
                         h1{display: none;}
                         h2{

Some files were not shown because too many files changed in this diff