layout fix

hlxsites · Mar 5, 2024 · 008dba7 · 008dba7
1 parent 658215f
commit 008dba7
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 28 deletions.
diff --git a/blocks/property-result-listing/property-result-listing.css b/blocks/property-result-listing/property-result-listing.css
@@ -4,6 +4,9 @@
 
 .property-result-listing.block {
   display: flex;
+  flex-direction: column;
+  overflow: auto;
+  height: 100vh;
 }
 
 .property-result-listing.block .search-results-loader {
@@ -47,34 +50,26 @@
 .property-result-listing.block .property-list-cards {
   display: grid;
   grid-template: repeat(8, 0fr) / repeat(4, 1fr);
-  height: 3340px;
   grid-gap: 20px;
+  height: 100%;
 }
 
 .search-map-active .property-result-listing.block .property-list-cards{
   height: 100%;
   grid-template: repeat(16, 0fr) / repeat(2, 1fr);
 }
 
-.property-result-listing.block {
-  width: 100%;
-  flex-direction: column;
-}
-
-.property-result-listing.block .property-list-cards {
-  grid-template: repeat(32, 1fr) / repeat(1, 1fr);
-  height: 13440px;
-}
-
 .property-result-listing.block .property-list-cards .listing-tile {
   width: 100%;
   max-width: 100%;
 }
 
-.search-map-active .property-result-listing.block {
-  width: 100%;
+.search-map-active .property-result-listing.block .property-result-map-container {
   min-height: 800px;
   height: 100vh;
+  position: fixed;
+  left: 0;
+  z-index: 1;
 }
 
 .search-map-active .property-result-listing.block .property-list-cards,
@@ -83,12 +78,12 @@
   display: none;
 }
 
-.property-search-template.search-map-active .property-result-listing.block .property-result-map-container {
+/* .property-search-template.search-map-active .property-result-listing.block .property-result-map-container {
   margin-top: -30px;
-/*   flex: 0 0 100%;
+  flex: 0 0 100%;
   max-width: 100%;
-  padding: 0 15px; */
-}
+  padding: 0 15px;
+} */
 
 .property-result-listing.block .button-container a {
   cursor:pointer;
@@ -225,6 +220,10 @@
   line-height: var(--line-height-m);
 }
 
+.property-result-listing.block .property-result-map-container .disclaimer {
+  display: block;
+}
+
 .property-result-listing.block .disclaimer hr {
   height: 1px;
   background: var(--grey);
@@ -304,26 +303,41 @@ text-align: center;
 }
 
 @media (min-width: 900px) {
+  .property-result-listing.block {
+    margin-top: 75px;
+    flex-direction: row;
+}
+
   .search-map-active .property-result-listing.block .property-list-cards,
   .search-map-active .property-result-listing.block [name="Page"],
   .search-map-active .property-result-listing.block .property-list-cards .property-result-content .disclaimer {
     display: grid;
   }
 
   .property-search-template.search-map-active .property-result-listing.block .property-result-map-container {
-    flex: 0 0 58%;
-    padding: 0;
+    width: 58%;
+    position: fixed;
+    min-height: 800px;
+    max-height: calc(100vh -20px);
   }
 
   .property-search-template.search-map-active .property-result-listing.block .property-result-content {
-    flex: 0 0 42%;
+    width: 42%;
+    margin-left: 58%;
+    height: 100%;
+    display: block;
     padding: 0 15px;
   }
 
   .property-result-listing.block .button-container {
     justify-content: flex-end;
   }
-
+  .property-result-listing.block .property-result-map-container .disclaimer {
+    display: none;
+  }
+  .search-map-active .property-result-listing.block .property-result-content .disclaimer {
+    display: block;
+  }
   .property-result-listing.block [class*="disclaimer"] * {
     font-family: var(--font-family-proxima);
     font-size: var(--body-font-size-xs);

diff --git a/blocks/property-result-map/map.css b/blocks/property-result-map/map.css
@@ -170,10 +170,10 @@
 
 
 .property-search-template .property-result-map {
-    height: 100vh;
+    height: 100%;
     width: 100%;
     display: none;
-    position: absolute;
+    /* position: absolute; */
 }
 
 .property-search-template.search-map-active .property-result-map {
@@ -385,13 +385,13 @@
         bottom: 16vw;
     }
 
-    .property-search-template.search-map-active .property-result-listing.block > div:first-of-type {
+    /* .property-search-template.search-map-active .property-result-listing.block > div:first-of-type {
         width: 100%;
         left: 0;
         top: calc(var(--nav-height) + 50px + 120px);
         height: 600px;
 
-    }
+    } */
 }
 
 /* .property-result-listing.block .property-result-content .disclaimer {
@@ -405,13 +405,12 @@
 } */
 
 @media (min-width: 900px) {
-    .property-search-template.search-map-active .property-result-listing.block > div:first-of-type {
+    /* .property-search-template.search-map-active .property-result-listing.block > div:first-of-type {
         position: fixed;
         width: 100%;
         top: calc(var(--nav-height) + 50px + 120px);
-        /* todo need to figureout on how to do this dynamicly */
         height: 600px;
-    }
+    } */
 
     .property-search-template.search-map-active  .custom-controls {
         right: 20px;