From 9705ea4b43999b1247cf57590ba0a3b76dd1c646 Mon Sep 17 00:00:00 2001 From: Isaiah Cornelius <112984277+Isaiah-Cornelius@users.noreply.github.com> Date: Mon, 1 Jan 2024 08:26:49 +0000 Subject: [PATCH 1/3] Fixed finder div height --- finder/app.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/finder/app.js b/finder/app.js index 792d5f7..e731d4a 100644 --- a/finder/app.js +++ b/finder/app.js @@ -1,6 +1,42 @@ /* global config csv2geojson turf Assembly $ */ 'use strict'; +// Determine the window dimensions +function getWindowDimensions() { + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + setListingsHeight(windowWidth, windowHeight); +} +// Create a function to set the '#listings' div height +function setListingsHeight(windowWidth, windowHeight) { + const listings = document.getElementById('listings'); + // the 'viewport-twothirds' class does not always allow the '#listings' div to use all of the available vertical space when screen width is >= 800px. + // When screen width is < 800px, the listings shift to the bottom of the screen. This class makes the '#listings' div too large and listings are lost below the bottom of the screen when scrolling to the bottom of the div. + // Check if the 'viewport-twothirds' class is present; if so, remove it (or remove this if statement after removing this class from the '#listings' div in index.html) + if (listings.classList.contains('viewport-twothirds')) { + listings.classList.remove('viewport-twothirds'); + } + let properListingsDivHeight; + // '#sidebarA' div has the 'py12' class which adds 12px of padding to the top and bottom of the rendered body height that 'document.querySelector('#sidebarA').clientHeight' does not catch; add 24 + const sidebarADivHeight = document.querySelector('#sidebarA').clientHeight; + // Check if the listings breakpoint is active (Listings breakpoint set to shift to bottom when screen width is less that 800px) + if (windowWidth < 800) { + // '#listings' div's parent's parent (grandparent?) has the 'viewport-third' class which sets the height at 33.3333vh; multiply the windowHeight by .333333 (1/3 of the viewheight) and subtract the sidebarADivHeight to get the properListingsDivHeight + properListingsDivHeight = windowHeight * 0.333333 - sidebarADivHeight; + } else { + // Use the rest of the vertical space + properListingsDivHeight = windowHeight - sidebarADivHeight; + } + // Set the listings div height to the properListingsDivHeight + listings.style.height = properListingsDivHeight + 'px'; +} + +// Call the getWindowDimensions function on window load +window.onload = getWindowDimensions; + +// Evaluate the window dimensions on resize to keep appropriate variable values +window.onresize = getWindowDimensions; + mapboxgl.accessToken = config.accessToken; const columnHeaders = config.sideBarInfo; From 88f7f5ebedcb2528d3f12f445eabf24c0f98ec53 Mon Sep 17 00:00:00 2001 From: Isaiah Cornelius <112984277+Isaiah-Cornelius@users.noreply.github.com> Date: Mon, 1 Jan 2024 19:33:17 +0000 Subject: [PATCH 2/3] Refactored setListingsHeight() and call on window events --- finder/app.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/finder/app.js b/finder/app.js index e731d4a..86b0ad1 100644 --- a/finder/app.js +++ b/finder/app.js @@ -1,14 +1,10 @@ /* global config csv2geojson turf Assembly $ */ 'use strict'; -// Determine the window dimensions -function getWindowDimensions() { +// Create a function to set the '#listings' div height +function setListingsHeight() { const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; - setListingsHeight(windowWidth, windowHeight); -} -// Create a function to set the '#listings' div height -function setListingsHeight(windowWidth, windowHeight) { const listings = document.getElementById('listings'); // the 'viewport-twothirds' class does not always allow the '#listings' div to use all of the available vertical space when screen width is >= 800px. // When screen width is < 800px, the listings shift to the bottom of the screen. This class makes the '#listings' div too large and listings are lost below the bottom of the screen when scrolling to the bottom of the div. @@ -32,10 +28,10 @@ function setListingsHeight(windowWidth, windowHeight) { } // Call the getWindowDimensions function on window load -window.onload = getWindowDimensions; +window.onload = setListingsHeight; // Evaluate the window dimensions on resize to keep appropriate variable values -window.onresize = getWindowDimensions; +window.onresize = setListingsHeight; mapboxgl.accessToken = config.accessToken; const columnHeaders = config.sideBarInfo; @@ -324,8 +320,8 @@ function applyFilters() { } }); }); - let uniqueRemoveIds = [...new Set(removeIds)]; - uniqueRemoveIds.forEach(function (id) { + const uniqueRemoveIds = [...new Set(removeIds)]; + uniqueRemoveIds.forEach((id) => { const idx = filteredGeojson.features.findIndex( (f) => f.properties.id === id, ); From d13bbeac9f3a6fa4e9c06063cf4bbfe67dba0553 Mon Sep 17 00:00:00 2001 From: Isaiah Cornelius <112984277+Isaiah-Cornelius@users.noreply.github.com> Date: Mon, 1 Jan 2024 19:37:27 +0000 Subject: [PATCH 3/3] Hide my hacky comment --- finder/app.js | 1 - 1 file changed, 1 deletion(-) diff --git a/finder/app.js b/finder/app.js index 86b0ad1..e289dbf 100644 --- a/finder/app.js +++ b/finder/app.js @@ -13,7 +13,6 @@ function setListingsHeight() { listings.classList.remove('viewport-twothirds'); } let properListingsDivHeight; - // '#sidebarA' div has the 'py12' class which adds 12px of padding to the top and bottom of the rendered body height that 'document.querySelector('#sidebarA').clientHeight' does not catch; add 24 const sidebarADivHeight = document.querySelector('#sidebarA').clientHeight; // Check if the listings breakpoint is active (Listings breakpoint set to shift to bottom when screen width is less that 800px) if (windowWidth < 800) {