formating trends

hlxsites · Jul 15, 2024 · 3f9add5 · 3f9add5
1 parent 8cbb9a4
commit 3f9add5
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 3 deletions.
diff --git a/blocks/property-data/property-data.css b/blocks/property-data/property-data.css
@@ -0,0 +1,54 @@
+.section.property-data-container {
+  width: var(--full-page-width);
+  background-color: var(--tertiary-color);
+}
+
+.property-data.block .accordion-header {
+  cursor: pointer;
+  padding: 16px 30px 16px 0;
+  position: relative;
+  display: inline-block;
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  line-height: 26px;
+  margin: 0 5px 0 0;
+  font-size: 22px;
+  width: 100%;
+  color: var(--primary-color);
+}
+
+.property-data.block .accordion .accordion-header::after {
+  border-color: var(--body-color) transparent transparent transparent;
+  border-style: solid;
+  border-width: 6px 5px 0;
+  content: '';
+  margin-top: -5px;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transition: transform .3s linear;
+  transform: rotate(0);
+}
+
+.property-data.block .accordion .accordion-header:not(.active)::after {
+  transform: rotate(90deg);
+  transition: transform .3s linear;
+}
+
+.property-data.block .accordion-content {
+  display: none;
+  padding-bottom: 60px;
+}
+
+.property-data.block .accordion-header.active + .accordion-content {
+  display: block;
+}
+
+.property-data.block .accordion-content .row .head {
+  font-size: var(--heading-font-size-m);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-s);
+  color: var(--body-color);
+  letter-spacing: var(--letter-spacing-xs);
+  margin-bottom: 10px;
+}
diff --git a/blocks/property-data/property-data.js b/blocks/property-data/property-data.js
@@ -1,7 +1,7 @@
 import { getMarketTrends } from '../../scripts/apis/creg/creg.js';
 import { div } from '../../scripts/dom-helpers.js';
 import {
-  formatCurrency,
+  formatCurrency, toggleAccordion,
 } from '../../scripts/util.js';
 
 function daysOnMarket(listingContractDate) {
@@ -35,8 +35,8 @@ export default async function decorate(block) {
       div({ class: 'accordion-header', onclick: (e) => toggleAccordion(e) }, 'Market Trends'),
       div({ class: 'accordion-content' },
         div({ class: 'row' },
-          div({ class: 'address' }, property.unstructuredAddress),
-          div({ class: 'zip' }, `ZIP Code: ${property.postalCode}`),
+          div({ class: 'head' }, property.unstructuredAddress),
+          div({ class: 'head' }, `ZIP Code: ${property.postalCode}`),
         ),
         div({ class: 'row' },
           div({ class: 'td' },