Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search page layout #198

Closed
wants to merge 6 commits into from
Closed

Search page layout #198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
658215f
aligning divs
rrusher Mar 5, 2024
008dba7
layout fix
rrusher Mar 5, 2024
9a2bd36
minor layout issues
rrusher Mar 6, 2024
a7df658
early linting
rrusher Mar 6, 2024
dbd79fc
early linting
rrusher Mar 6, 2024
9f0913f
fix scroll
rrusher Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 85 additions & 64 deletions blocks/property-result-listing/property-result-listing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@

.property-result-listing.block {
display: flex;
flex-wrap: wrap;
flex-direction: column;
overflow: auto;
}

.search-map-active .property-result-listing.block {
height: 100vh;
}

.property-result-listing.block .search-results-loader {
Expand Down Expand Up @@ -36,12 +41,6 @@
transition: all 1s ease-in;
}

.property-search-template.search-map-active .property-result-listing.block > div {
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
}

.property-result-listing.block .button-container {
display: flex;
margin-bottom: 1.5rem;
Expand All @@ -53,16 +52,51 @@

.property-result-listing.block .property-list-cards {
display: grid;
grid-template: repeat(8, 1fr) / repeat(4, 1fr);
height: 3340px;
grid-gap: 20px;
height: 100%;
}

.search-map-active .property-result-listing.block .property-list-cards{
height: 6520px;
grid-template: repeat(16, 1fr) / repeat(2, 1fr);
height: 100%;
grid-template: repeat(16, 0fr) / repeat(2, 1fr);
}

.property-result-listing.block .property-list-cards .listing-tile {
width: 100%;
max-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;
}

.property-result-listing.block .disclaimer {
font-family: var(--font-family-proxima);
font-size: var(--body-font-size-xs);
font-weight: var(--font-weight-normal);
letter-spacing: var(--letter-spacing-s);
color: var(--dark-grey);
line-height: var(--line-height-m);
}

.property-result-listing.block .property-result-map-container .disclaimer {
display: block;
}

.property-result-listing.block [name="Page"] {
display: flex;
justify-content: flex-end;
}

.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-result-content .disclaimer {
display: none;
}

.property-result-listing.block .button-container a {
cursor:pointer;
Expand Down Expand Up @@ -106,11 +140,6 @@
display: none;
}

.property-result-listing.block [name="Page"] {
display: flex;
justify-content: flex-end;
}

.property-result-listing.block [name="Page"] .select-selected,
.property-result-listing.block [name="Page"] .search-results-dropdown .select-item li {
font-size: var(--body-font-size-xs);
Expand Down Expand Up @@ -190,15 +219,6 @@
transform: rotate(-45deg) translate(-3px,-3px);
}

.property-result-listing.block .disclaimer {
font-family: var(--font-family-proxima);
font-size: var(--body-font-size-xs);
font-weight: var(--font-weight-normal);
letter-spacing: var(--letter-spacing-s);
color: var(--dark-grey);
line-height: var(--line-height-m);
}

.property-result-listing.block .disclaimer hr {
height: 1px;
background: var(--grey);
Expand Down Expand Up @@ -278,6 +298,46 @@ text-align: center;
}

@media (min-width: 900px) {
.property-result-listing.block {
flex-direction: row;
}

.search-map-active .property-result-listing.block {
height: 100%;
}

.property-result-listing.block .property-list-cards {
grid-template: repeat(8, 0fr) / repeat(4, 1fr);
}

.property-result-listing.block .property-result-map-container .disclaimer {
display: none;
}

.search-map-active .property-result-listing.block .property-result-content .disclaimer {
display: block;
}

.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 {
width: 58%;
position: fixed;
min-height: 800px;
}

.property-search-template.search-map-active .property-result-listing.block .property-result-content {
width: 42%;
margin-left: 58%;
height: 100%;
display: block;
padding: 0 15px;
}

.property-result-listing.block .button-container {
justify-content: flex-end;
}
Expand All @@ -304,47 +364,8 @@ text-align: center;
}
}

@media (max-width: 899px) {
.property-result-listing.block {
width: 100%;
flex-direction: column-reverse;
}

.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%;
min-height: 800px;
}

.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: none;
}

.property-search-template.search-map-active .property-result-listing.block > div {
flex: 0 0 100%;
max-width: 100%;
padding: 0 15px;
}
}


@media (min-width: 1200px) {
.property-result-listing.block .property-info-wrapper {
font-size: var(--body-font-size-xl);
}

.property-result-listing.block .property-list-cards {
grid-template: repeat(8, 1fr) / repeat(4, 1fr);
}
}
15 changes: 8 additions & 7 deletions blocks/property-result-listing/property-result-listing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ function buildDisclaimer(html) {
const wrapper = document.createElement('div');
wrapper.classList.add('disclaimer');
wrapper.innerHTML = `
<hr role="presentation" aria-hidden="true" tabindex="-1">
<hr role="presentation" aria-hidden="true" tabindex="-1">
<div class="text">
${html}
</div>
Expand Down Expand Up @@ -95,7 +95,7 @@ function buildPagination(currentPage, totalPages) {
</div>
</div>
<div class="pagination-arrows">
<a class="prev arrow ${currentPage === 1 && 'disabled'}" role="button" aria-label="Previous Page"></a>
<a class="prev arrow ${currentPage === 1 && 'disabled'}" role="button" aria-label="Previous Page"></a>
<a class="next arrow ${currentPage === totalPages && 'disabled'}" role="button" aria-label="Next Page"></a>
</div>`;
return wrapper;
Expand All @@ -108,7 +108,11 @@ export default async function decorate(block) {
window.dispatchEvent(event);
window.addEventListener('onResultUpdated', () => {
if (getPropertiesCount() > 0) {
document.querySelector('.property-result-map-container').style.display = 'block';
// update map
window.updatePropertyMap(getAllData(), false);

// document.querySelector('.property-result-map-container').style.display = 'block';
document.querySelector('.property-search-template').classList.add('search-map-active');
const propertyResultContent = document.createElement('div');
propertyResultContent.classList.add('property-result-content');
const listings = getPropertyDetails();
Expand All @@ -131,10 +135,7 @@ export default async function decorate(block) {
propertyResultContent.append(buildPropertySearchResultsButton());
/** build disclaimer */
propertyResultContent.append(buildDisclaimer(disclaimerHtml));
block.prepend(propertyResultContent);

// update map
window.updatePropertyMap(getAllData(), false);
block.append(propertyResultContent);

document.querySelector('.property-result-map-container').append(disclaimerBlock);
/** update page on select change */
Expand Down
4 changes: 2 additions & 2 deletions blocks/property-result-map/map-delayed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1054,7 +1054,7 @@ function loadJS(src) {
document.head.append(script);
}

async function initGoogleMapsAPI() {
export default async function initGoogleMapsAPI() {
const placeholders = await fetchPlaceholders();
const CALLBACK_FN = 'initMap';
window[CALLBACK_FN] = initMap;
Expand All @@ -1066,4 +1066,4 @@ async function initGoogleMapsAPI() {
loadJS(src);
}

initGoogleMapsAPI();
// initGoogleMapsAPI();
57 changes: 9 additions & 48 deletions blocks/property-result-map/map.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,6 @@
padding: 3px;
}

.property-search-template.search-map-active .property-result-listing.block > div:last-of-type {
position: fixed;
width: 50%;
left: 50%;
top: calc(var(--nav-height) + 50px + 120px);

/* todo need to figureout on how to do this dynamicly */
height: 600px;
max-width: calc(1400px/2 - 30px);
}

.property-search-template.search-map-active .info-window {
width: 178px;
pointer-events: all;
Expand Down Expand Up @@ -171,15 +160,13 @@


.property-search-template .property-result-map {
height: 600px;
height: 100%;
width: 100%;
display: none;
position: absolute;
}

.property-search-template.search-map-active .property-result-map {
display: block;

}

.property-search-template .map-controls-container {
Expand Down Expand Up @@ -373,43 +360,23 @@
display: none !important
}

.property-search-template .property-result-map-container {
display: none;
}

.property-search-template.search-map-active .property-result-map-container {
display: block;
}

/* end */

@media (min-width: 600px) {
.property-search-template.search-map-active .custom-controls {
bottom: 16vw;
}

.property-search-template.search-map-active .property-result-listing.block > div:last-of-type {
width: 100%;
left: 0;
top: calc(var(--nav-height) + 50px + 120px);
height: 600px;

}
}

.property-result-listing.block .property-result-map-container .disclaimer {
display: none;
}

@media (max-width: 899px) {
.property-search-template.search-map-active .property-result-listing.block .property-result-map-container .disclaimer {
display: block;
}
}

@media (min-width: 900px) {
.property-search-template.search-map-active .property-result-listing.block > div:last-of-type {
position: fixed;
width: 100%;
left: 50%;
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;
bottom: 20px;
Expand Down Expand Up @@ -441,9 +408,3 @@
margin: 0;
}
}

@media (min-width: 1200px) {
.property-search-template.search-map-active .property-result-listing.block > div:last-of-type {
max-width: calc(1400px/2 - 30px);
}
}
Loading
Loading