From 90184c07941fe0233682913accf271ccf955e253 Mon Sep 17 00:00:00 2001 From: 6foot5 <6foot5@gmail.com> Date: Mon, 30 Aug 2021 13:16:09 -0400 Subject: [PATCH 1/3] refined filter logic and print styles --- package.json | 1 + src/App.css | 5 +++++ src/Banner.js | 1 + src/FilterDropdown.js | 17 +++++++++++------ src/LocationCard.js | 11 ++++++++++- src/LocationStrip.js | 11 ++++------- src/MealSites.js | 10 +++++++++- src/NavBar.js | 2 ++ yarn.lock | 5 +++++ 9 files changed, 48 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index ef65e05..64f90e7 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react-leaflet-markercluster": "^3.0.0-rc1", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", + "url-search-params-polyfill": "^8.1.1", "web-vitals": "^1.0.1" }, "scripts": { diff --git a/src/App.css b/src/App.css index 78e3ec9..2137402 100644 --- a/src/App.css +++ b/src/App.css @@ -502,6 +502,11 @@ h3 { td, th { vertical-align: middle; + width: 33%; +} + +.print-days-column { + min-width: 270px; } @media print { diff --git a/src/Banner.js b/src/Banner.js index ab03cf8..928c254 100644 --- a/src/Banner.js +++ b/src/Banner.js @@ -1,5 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; +import 'url-search-params-polyfill'; function Banner(props) { diff --git a/src/FilterDropdown.js b/src/FilterDropdown.js index 11ebe86..562b545 100644 --- a/src/FilterDropdown.js +++ b/src/FilterDropdown.js @@ -2,12 +2,13 @@ import React from 'react'; function FilterDropdown(props) { - let activeTypeFilters, dropdownContainerClass = 'dropdown mx-2 mb-4 resource-filter'; + let activeTypeFilters, dropdownContainerClass = 'dropdown mx-2 mb-4 resource-filter', extraCountText = ''; if (props.activeFilters.hasOwnProperty(props.filterName)) { activeTypeFilters = props.activeFilters[props.filterName]; if (props.activeFilters[props.filterName].length) { dropdownContainerClass += ' resource-filter--active'; + extraCountText += ' more'; } } else { activeTypeFilters = []; @@ -15,15 +16,19 @@ function FilterDropdown(props) { const optionListDropdownAlt = props.filterOptions.data.reduce( (accumulator, currentOption, currentIndex) => { - let thisAction, thisActionLabel, thisButtonClass = 'dropdown-item ', showCount = true; + let thisAction, thisActionLabel, thisButtonClass = 'dropdown-item '; + + if (currentOption.count === 0) { + thisButtonClass += ' disabled'; + } if (!activeTypeFilters.includes(currentOption.value)) { thisAction = props.changeHandler; thisActionLabel = 'Add the filter'; - if(props.filterName === 'day') { - showCount = false; - } + // if(props.filterName === 'day') { + // showCount = false; + // } accumulator.push(
  • @@ -36,7 +41,7 @@ function FilterDropdown(props) { onClick={thisAction} > {currentOption.label} - {showCount ? ` (${currentOption.count})` : ''} + {currentOption.count ? ` (${currentOption.count}${extraCountText})` : ` (${currentOption.count})`}
    • ); diff --git a/src/LocationCard.js b/src/LocationCard.js index ef62cce..6e158af 100644 --- a/src/LocationCard.js +++ b/src/LocationCard.js @@ -34,7 +34,16 @@ function LocationCard(props) {
  • {props.location.hoursOpen}
    {props.location.daysOpen}
    • -
  • Location: {props.location.address}
    • +
  • + + Directions: {props.location.address} +
    • diff --git a/src/LocationStrip.js b/src/LocationStrip.js index 8027960..d2180e7 100644 --- a/src/LocationStrip.js +++ b/src/LocationStrip.js @@ -2,16 +2,10 @@ import React from 'react'; function LocationCard(props) { - - - let q = encodeURIComponent(props.location.address); let iconClass = props.location.serviceIcon; - // let cardMapClass = ''; - // let q = encodeURIComponent(`${props.location.wgs_y},${props.location.wgs_x}`); if (props.context === 'map') { iconClass += ' service-icon-map'; - // cardMapClass += ' card-map'; } return( @@ -29,7 +23,10 @@ function LocationCard(props) { {props.location.hoursOpen} | {props.location.daysOpen} - Area: {props.location.generalArea}
    Location: {props.location.address} + + Area: {props.location.generalArea}
    + {props.location.address} + ) } diff --git a/src/MealSites.js b/src/MealSites.js index c090c82..fbd253e 100644 --- a/src/MealSites.js +++ b/src/MealSites.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import axios from 'axios'; import moment from 'moment'; +import 'url-search-params-polyfill'; import Banner from './Banner'; import FilterOptions from './FilterOptions'; import ResultsMeta from './ResultsMeta'; @@ -486,6 +487,7 @@ class MealSites extends Component { let thisLocationPasses = true; let filterKeysFailed = []; let termMatches = 0; + let filterKeysPassed = []; Object.keys(this.state.activeFilters).forEach( (activeFilterKey, i) => { if (this.state.activeFilters[activeFilterKey].length) { @@ -497,6 +499,8 @@ class MealSites extends Component { if (!termMatches) { thisLocationPasses = false; filterKeysFailed.push(activeFilterKey); + } else { + filterKeysPassed.push(activeFilterKey); } termMatches = 0; } @@ -505,6 +509,7 @@ class MealSites extends Component { // Following loop is to increment location count based on remaining locations Object.keys(filteredDataForOutput.filterOptions).forEach( (allFilterOptionsKey, i) => { if (filteredDataForOutput.filterOptions[allFilterOptionsKey].data.length) { + let locationAlreadyPassedFacet = false; filteredDataForOutput.filterOptions[allFilterOptionsKey].data.forEach( (termObject, i) => { let thisOptionLocationCounted = false; let otherFacetFailures = 0; @@ -513,7 +518,10 @@ class MealSites extends Component { otherFacetFailures++; } }); - if (location.selectors.includes(termObject.value) && !otherFacetFailures && !thisOptionLocationCounted) { + if (filterKeysPassed.includes(allFilterOptionsKey)) { + locationAlreadyPassedFacet = true; + } + if (location.selectors.includes(termObject.value) && !otherFacetFailures && !thisOptionLocationCounted && !locationAlreadyPassedFacet) { filteredDataForOutput.filterOptions[allFilterOptionsKey].data[i].count++; thisOptionLocationCounted = true; } diff --git a/src/NavBar.js b/src/NavBar.js index b597bae..e035422 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -1,4 +1,6 @@ +import React from 'react'; import { NavLink } from 'react-router-dom'; +import 'url-search-params-polyfill'; function NavBar(props) { diff --git a/yarn.lock b/yarn.lock index c1e0b3d..d7de118 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11692,6 +11692,11 @@ url-parse@^1.5.1: querystringify "^2.1.1" requires-port "^1.0.0" +url-search-params-polyfill@^8.1.1: + version "8.1.1" + resolved "https://registry.yarnpkg.com/url-search-params-polyfill/-/url-search-params-polyfill-8.1.1.tgz#9e69e4dba300a71ae7ad3cead62c7717fd99329f" + integrity sha512-KmkCs6SjE6t4ihrfW9JelAPQIIIFbJweaaSLTh/4AO+c58JlDcb+GbdPt8yr5lRcFg4rPswRFRRhBGpWwh0K/Q== + url@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1" From 171d1e2852427eb32bf471717d446533180bccc1 Mon Sep 17 00:00:00 2001 From: 6foot5 <6foot5@gmail.com> Date: Mon, 30 Aug 2021 15:09:39 -0400 Subject: [PATCH 2/3] scale back interactivity in IE --- package.json | 1 - src/Banner.js | 1 - src/MealSites.js | 1 - src/NavBar.js | 21 +++++++++++++++++---- yarn.lock | 5 ----- 5 files changed, 17 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 64f90e7..ef65e05 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,6 @@ "react-leaflet-markercluster": "^3.0.0-rc1", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", - "url-search-params-polyfill": "^8.1.1", "web-vitals": "^1.0.1" }, "scripts": { diff --git a/src/Banner.js b/src/Banner.js index 928c254..ab03cf8 100644 --- a/src/Banner.js +++ b/src/Banner.js @@ -1,6 +1,5 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import 'url-search-params-polyfill'; function Banner(props) { diff --git a/src/MealSites.js b/src/MealSites.js index fbd253e..01e4a9c 100644 --- a/src/MealSites.js +++ b/src/MealSites.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import axios from 'axios'; import moment from 'moment'; -import 'url-search-params-polyfill'; import Banner from './Banner'; import FilterOptions from './FilterOptions'; import ResultsMeta from './ResultsMeta'; diff --git a/src/NavBar.js b/src/NavBar.js index e035422..47a9032 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -1,10 +1,18 @@ import React from 'react'; import { NavLink } from 'react-router-dom'; -import 'url-search-params-polyfill'; function NavBar(props) { let currentUrlParams = new URLSearchParams(window.location.search); + let symptomsOfInternetExplorer = /MSIE|Trident/.test(window.navigator.userAgent); + + console.log('IE Check:'); + console.log(symptomsOfInternetExplorer); + console.log(window.navigator.userAgent); + + // if (window.document.documentMode) { + // symptomsOfInternetExplorer = true; + // } return(