Quote Block, Hero Block bug fix (#263)

* Quote Block, Hero Block bug fix * Review Comments incorporated * Review Comments incorporated --------- Co-authored-by: piyushjindal <[email protected]>
hlxsites · Aug 13, 2024 · 06db12d · 06db12d
1 parent 3f08cb9
commit 06db12d
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 6 deletions.
diff --git a/blocks/fragment/fragment.css b/blocks/fragment/fragment.css
@@ -1 +1,4 @@
 /* stylelint-disable-next-line no-empty-source */
+main .section.two-columns > div.fragment-wrapper {
+  flex: unset;
+}
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
@@ -12,6 +12,7 @@ main .section.hero-container {
   margin-bottom: 57px;
   justify-content: center;
   align-items: center;
+  overflow-x: hidden;
 }
 
 main .section.full-width > .hero-wrapper {

diff --git a/blocks/hero/search/home.css b/blocks/hero/search/home.css
@@ -274,3 +274,13 @@
     max-height: 185px;
   }
 }
+
+@media screen and (min-width: 1200px) {
+  .hero.block.small-size > div .content h2 {
+    max-width: 505px;
+  }
+
+  .hero.block.small-size .content .homes .filters .select-wrapper .selected::after {
+    position: relative;
+  }
+}
diff --git a/blocks/hero/search/search.css b/blocks/hero/search/search.css
@@ -85,7 +85,6 @@
   display: block;
 }
 
-
 .hero.block .content .search-bar .suggester-results > li > ul {
   padding: 0 15px;
 }
@@ -148,3 +147,9 @@
     padding: 10px;
   }
 }
+
+@media screen and (min-width: 1200px) {
+  .hero.block.small-size .content .search-bar {
+    max-width: 505px;
+  }
+}
diff --git a/blocks/quote/design-1.css b/blocks/quote/design-1.css
@@ -0,0 +1,7 @@
+.design-1.black-white .quote.block {
+  border-top: 1px solid var(--black);
+}
+
+.design-1.black-white .quote.block p {
+  color: var(--black);
+}
diff --git a/blocks/quote/quote.css b/blocks/quote/quote.css
@@ -1,5 +1,7 @@
+@import url('./design-1.css');
+
 .quote.block {
-  border-top: 1px solid var(--body-color);
+  border-top: 1px solid var(--secondary-accent);
 }
 
 .quote.block .quote {
@@ -30,3 +32,6 @@
   text-transform: uppercase;
 }
 
+.quote.block p {
+  color: var(--secondary-color);
+}
diff --git a/blocks/shared/search/util.js b/blocks/shared/search/util.js
@@ -50,11 +50,11 @@ export function buildFilterSelect(name, placeholder, options) {
   wrapper.classList.add('select-wrapper', name);
   wrapper.innerHTML = `
     <select name="${name}" aria-label="${placeholder}">
-      <option value="">Any ${placeholder}</option>
+      <option value="">${placeholder}</option>
     </select>
-    <div class="selected" role="button" aria-haspopup="listbox" aria-label="${placeholder}" aria-expanded="false" tabindex="0"><span>Any ${placeholder}</span></div>
+    <div class="selected" role="button" aria-haspopup="listbox" aria-label="${placeholder}" aria-expanded="false" tabindex="0"><span>${placeholder}</span></div>
     <ul class="select-items" role="listbox">
-      <li role="option" class="selected" data-value="">Any ${placeholder}</li>
+      <li role="option" class="selected" data-value="">${placeholder}</li>
     </ul>
   `;
 

diff --git a/styles/styles.css b/styles/styles.css
@@ -308,8 +308,8 @@ main .section.padding {
 
 main .section.two-columns {
   display: flex;
-  flex-wrap: wrap;
   justify-content: space-around;
+  flex-flow: column wrap;
 }
 
 main .section.two-columns > div {
@@ -552,6 +552,12 @@ form button[type="submit"]:hover {
   }
 }
 
+@media screen and (min-width: 900px) {
+  main .section.two-columns {
+    flex-direction: row;
+  }
+}
+
 @media screen and (min-width: 1200px) {
   :root {
     --nav-height: 140px;