From 638a3142d2a343bfad5ad4950d4d2070e9957057 Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Fri, 3 Jan 2020 14:57:28 -0500 Subject: [PATCH 01/13] Initial changes to support having the map not be underneath - still buggy --- src/App.scss | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/App.scss b/src/App.scss index 49a2196..2b779e7 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,4 +1,9 @@ .app{ + + height: 100vh; /* frm: added for new UI */ + diaplay: grid; /* frm: added for new UI */ + grid-template-columns: 200px auto; /* frm: added for new UI */ + #map{ height: 100%; z-index: 9; @@ -39,7 +44,7 @@ height: 10vw; } } - } + } #secondLine{ font-size: 20vh; color: white; @@ -69,17 +74,21 @@ html, body, #root, .app { } .searchBar{ - padding-top: 2%; - padding-bottom: 2%; + /* padding-top: 2%; */ /* frm: commented out for new UI */ + /* padding-bottom: 2%; */ /* frm: commented out for new UI */ background-color: #232444; //width: 300px; width: 32%; - position: fixed; - left: 2%; - top: 2%; + /* position: fixed; */ /* frm: commented oiut for new UI */ + /* left: 2%; */ /* frm: commented out for new UI */ + /* top: 2%; */ /* frm: commented out for new UI */ z-index:11; - box-shadow: 10px 10px 5px rgba(0, 0, 0, .3); + /* box-shadow: 10px 10px 5px rgba(0, 0, 0, .3); */ /* frm: commented out for new UI */ + height: 100vh; /* frm: added for new UI */ + display: grid; /* frm: added for new UI */ + grid-template-rows: auto auto; /* frm: added for new UI */ + grid-gap: 0; /* frm: added for new UI */ } .mobileSearch { From 7cea51457ab7985af9f52ba48c81e337b2739317 Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Fri, 3 Jan 2020 17:04:34 -0500 Subject: [PATCH 02/13] UI updates to have map not be underneath - it works --- src/App.scss | 16 ++++++++-------- src/Map.js | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/App.scss b/src/App.scss index c2f3b60..3050b10 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,11 +1,11 @@ .app{ height: 100vh; /* frm: added for new UI */ - diaplay: grid; /* frm: added for new UI */ - grid-template-columns: 200px auto; /* frm: added for new UI */ + display: grid; /* frm: added for new UI */ + grid-template-columns: 300px auto; /* frm: added for new UI */ #map{ - height: 100%; + height: 100vh; /* frm: changed from % to vh */ z-index: 9; } @@ -78,8 +78,8 @@ html, body, #root, .app { /* padding-bottom: 2%; */ /* frm: commented out for new UI */ background-color: #232444; //width: 300px; - width: 32%; - /* position: fixed; */ /* frm: commented oiut for new UI */ + /* width: 32%; */ /* frm: commented out for new UI */ + /* position: fixed; */ /* frm: commented out for new UI */ /* left: 2%; */ /* frm: commented out for new UI */ /* top: 2%; */ /* frm: commented out for new UI */ z-index:11; @@ -131,7 +131,7 @@ html, body, #root, .app { align-items: flex-end; justify-content: center; padding-left: 5%; - padding-right: 7%; + padding-right: 5%; /* frm: changed from 7% to 5% */ padding-top: 5%; padding-bottom: 5%; @@ -232,7 +232,7 @@ html, body, #root, .app { font-size: 16px; background-color: #f5f5f5; border: none; - padding: 0px 20px 0px 5px; + padding: 0px 5px 0px 5px; /* frm: changed right-pad from 20px to 5px */ appearance: none; -moz-appearance: none; -webkit-appearance: none; @@ -280,7 +280,7 @@ html, body, #root, .app { .eventList{ background-color: white; - height: 500px; + /* height: 500px; */ /* frm: commented out for new UI */ overflow:hidden; overflow-y:scroll; margin-bottom: 0px; diff --git a/src/Map.js b/src/Map.js index 1cdaa8a..1fbf4df 100644 --- a/src/Map.js +++ b/src/Map.js @@ -160,7 +160,7 @@ export function Map(props){ } // zoom to marker bounds, plus padding (percentage) - map.current.fitBounds(markers.current.getBounds().pad(0.5)); + map.current.fitBounds(markers.current.getBounds().pad(0.1)); } }, [locations, props.hoverMarker, props.locFilt]); From dd7b4780347a3aa16f9ddf843697238aa393130d Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Sat, 4 Jan 2020 10:20:28 -0500 Subject: [PATCH 03/13] Added minmax to column grid for better scaling --- src/App.scss | 4 ++-- src/Map.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App.scss b/src/App.scss index 3050b10..a45397b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,7 +2,7 @@ height: 100vh; /* frm: added for new UI */ display: grid; /* frm: added for new UI */ - grid-template-columns: 300px auto; /* frm: added for new UI */ + grid-template-columns: minmax(30%, 300px) minmax(70%,100%); /* frm: added for new UI */ #map{ height: 100vh; /* frm: changed from % to vh */ @@ -77,7 +77,7 @@ html, body, #root, .app { /* padding-top: 2%; */ /* frm: commented out for new UI */ /* padding-bottom: 2%; */ /* frm: commented out for new UI */ background-color: #232444; - //width: 300px; + max-width: 300px; /* width: 32%; */ /* frm: commented out for new UI */ /* position: fixed; */ /* frm: commented out for new UI */ /* left: 2%; */ /* frm: commented out for new UI */ diff --git a/src/Map.js b/src/Map.js index 1fbf4df..0f8951c 100644 --- a/src/Map.js +++ b/src/Map.js @@ -160,7 +160,7 @@ export function Map(props){ } // zoom to marker bounds, plus padding (percentage) - map.current.fitBounds(markers.current.getBounds().pad(0.1)); + map.current.fitBounds(markers.current.getBounds().pad(0.01)); /* frm: messing with pad */ } }, [locations, props.hoverMarker, props.locFilt]); From c694550af74036c4f2c6b4e070c7be7b130b9875 Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Sat, 4 Jan 2020 10:33:37 -0500 Subject: [PATCH 04/13] tweaked CSS so searchBar stretches to full size of column --- src/App.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.scss b/src/App.scss index a45397b..5b2e529 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,7 +2,7 @@ height: 100vh; /* frm: added for new UI */ display: grid; /* frm: added for new UI */ - grid-template-columns: minmax(30%, 300px) minmax(70%,100%); /* frm: added for new UI */ + grid-template-columns: minmax(30%, 300px) minmax(70%, 100%); /* frm: added for new UI */ #map{ height: 100vh; /* frm: changed from % to vh */ @@ -77,7 +77,7 @@ html, body, #root, .app { /* padding-top: 2%; */ /* frm: commented out for new UI */ /* padding-bottom: 2%; */ /* frm: commented out for new UI */ background-color: #232444; - max-width: 300px; + /* max-width: 300px; */ /* frm: commented out for new UI */ /* width: 32%; */ /* frm: commented out for new UI */ /* position: fixed; */ /* frm: commented out for new UI */ /* left: 2%; */ /* frm: commented out for new UI */ From b8bd5cd4d07272d5c57c1ca24d352abcc4897aa7 Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Sat, 4 Jan 2020 11:23:32 -0500 Subject: [PATCH 05/13] CSS tweak to better handle resizing of browser window --- src/App.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.scss b/src/App.scss index 5b2e529..c11d3cb 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,7 +2,7 @@ height: 100vh; /* frm: added for new UI */ display: grid; /* frm: added for new UI */ - grid-template-columns: minmax(30%, 300px) minmax(70%, 100%); /* frm: added for new UI */ + grid-template-columns: minmax(180px,30%) auto; #map{ height: 100vh; /* frm: changed from % to vh */ From 8abafb556f16771d250cfe0a27a11eb1b21394b6 Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Sat, 4 Jan 2020 11:27:57 -0500 Subject: [PATCH 06/13] added drop shadow back to visually separate searchbar from map --- src/App.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.scss b/src/App.scss index c11d3cb..e597e93 100644 --- a/src/App.scss +++ b/src/App.scss @@ -84,6 +84,7 @@ html, body, #root, .app { /* top: 2%; */ /* frm: commented out for new UI */ z-index:11; /* box-shadow: 10px 10px 5px rgba(0, 0, 0, .3); */ /* frm: commented out for new UI */ + box-shadow: 10px 0px 5px rgba(0, 0, 0, .3); /* frm: experiment to separate searchbar from map */ height: 100vh; /* frm: added for new UI */ display: grid; /* frm: added for new UI */ From fe8c71ba31120d13dc99a2dba79339dd176bf8f4 Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Sun, 5 Jan 2020 10:10:40 -0500 Subject: [PATCH 07/13] Fixes for new layout for mobile --- src/App.js | 8 +++-- src/App.scss | 92 +++++++++++++++++++++++++++++++++++------------ src/EventList.js | 2 +- src/Map.js | 11 ++++++ src/MobileList.js | 2 ++ src/SearchBar.js | 3 +- 6 files changed, 91 insertions(+), 27 deletions(-) diff --git a/src/App.js b/src/App.js index 5323451..79983f7 100644 --- a/src/App.js +++ b/src/App.js @@ -36,7 +36,8 @@ const queryString = require('query-string'); * */ -const deviceIsMobile = isMobile; // HACK to allow easy mocking of isMobile for testing/debugging +// const deviceIsMobile = isMobile; // HACK to allow easy mocking of isMobile for testing/debugging +const deviceIsMobile = true; // HACK to allow easy mocking of isMobile for testing/debugging function App() { @@ -122,7 +123,8 @@ function App() { // code just operates on the list of events passed to it. return ( -
+ /*
*/ /* frm: original code */ +
setCurrZip(newZip)} updateRange={(newRange) => setCurrRange(newRange)} updateEventKind={(newEventKind) => setCurrEventKind(newEventKind)} events={filteredEvents} updatedHover={(newHover) => setHoverEvent(newHover)} locFilt={locFilt} deviceIsMobile={deviceIsMobile}/> {events === null && currZip == null &&
@@ -130,10 +132,10 @@ function App() {

Enter your zipcode to find events near you!

} + setLocFilt(newLoc)} locFilt={locFilt}/> {filteredEvents !== null && deviceIsMobile && setHoverEvent(newHover)} locFilt={locFilt} cardIndex={cardIndex} updateCardIndex={(update) => setCardIndex(update)}/> } - setLocFilt(newLoc)} locFilt={locFilt}/>
); } diff --git a/src/App.scss b/src/App.scss index e597e93..cba38d8 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,7 +1,14 @@ -.app{ - - height: 100vh; /* frm: added for new UI */ - display: grid; /* frm: added for new UI */ +/* frm: I added classes to distinguish between desktop and + * mobile cases - appIsDesktop and appIsMobile. This + * allowed me to set up the grid differently for the + * two cases. For desktop, the app has a left panel + * containing the search bar with the map on the + * right. For mobile, there is just a single column + * withy three rows (search, map, mobile-list-of-events). + */ + +.appIsDesktop { + display: grid; /* frm: added for new map layout UI */ grid-template-columns: minmax(180px,30%) auto; #map{ @@ -9,6 +16,37 @@ z-index: 9; } +} + +.appIsMobile { + display: grid; /* frm: added for new map layout UI */ + grid-template-rows: min-content auto min-content; + + #map{ + /* height: 100vh; */ /* frm: don't need height for mobile */ + z-index: 9; /* frm: not sure z-index does anything for mobile */ + } + +} + +/* frm: I added a ); diff --git a/src/SearchBar.js b/src/SearchBar.js index 08dfc41..d46b7df 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -104,7 +104,8 @@ export function SearchBar(props){ */ return( -
+ /*
*/ /* frm: original code */ +
From 15f9a4c042d4a232f8dc64d1eb4fa4e03c417364 Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Sun, 5 Jan 2020 10:13:52 -0500 Subject: [PATCH 08/13] removed debugging code --- src/App.js | 3 +-- src/Map.js | 11 ----------- 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 79983f7..da1532d 100644 --- a/src/App.js +++ b/src/App.js @@ -36,8 +36,7 @@ const queryString = require('query-string'); * */ -// const deviceIsMobile = isMobile; // HACK to allow easy mocking of isMobile for testing/debugging -const deviceIsMobile = true; // HACK to allow easy mocking of isMobile for testing/debugging +const deviceIsMobile = isMobile; // HACK to allow easy mocking of isMobile for testing/debugging function App() { diff --git a/src/Map.js b/src/Map.js index f528023..0f8951c 100644 --- a/src/Map.js +++ b/src/Map.js @@ -145,17 +145,6 @@ export function Map(props){ if(key === props.hoverMarker || (props.locFilt !== null && key === props.locFilt['lat'] + "&" + props.locFilt['lng'])){ console.log("matching"); - // frm: Start of Debugging - if(key === props.hoverMarker) { - console.log("matched hover: " + props.hoverMarker); - } - - if(props.locFilt !== null && key === props.locFilt['lat'] + "&" + props.locFilt['lng']){ - let thisLat = props.locFilt['lat']; - let thisLng = props.locFilt['lng']; - console.log("matched locFilt: lat = " + thisLat + ", long = " + thisLng); - } - // frm: End of Debugging highlighted = true; } From 8430b15af165e1a7268b8a52d5493489dca368a7 Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Sun, 12 Jan 2020 13:41:45 -0500 Subject: [PATCH 09/13] adjusted bounds padding for markers for better zoom --- src/Map.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Map.js b/src/Map.js index 0f8951c..187f5f8 100644 --- a/src/Map.js +++ b/src/Map.js @@ -160,7 +160,7 @@ export function Map(props){ } // zoom to marker bounds, plus padding (percentage) - map.current.fitBounds(markers.current.getBounds().pad(0.01)); /* frm: messing with pad */ + map.current.fitBounds(markers.current.getBounds().pad(0.1)); /* frm: messing with pad */ } }, [locations, props.hoverMarker, props.locFilt]); From eaa24e674b45975ca97e353db009462ad2e2dda3 Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Mon, 13 Jan 2020 12:08:35 -0500 Subject: [PATCH 10/13] minor tweaks --- src/App.js | 3 ++- src/App.scss | 2 +- src/Map.js | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index da1532d..7d62f1a 100644 --- a/src/App.js +++ b/src/App.js @@ -36,7 +36,8 @@ const queryString = require('query-string'); * */ -const deviceIsMobile = isMobile; // HACK to allow easy mocking of isMobile for testing/debugging +// const deviceIsMobile = isMobile; // HACK to allow easy mocking of isMobile for testing/debugging +const deviceIsMobile = true; function App() { diff --git a/src/App.scss b/src/App.scss index cba38d8..c5461b0 100644 --- a/src/App.scss +++ b/src/App.scss @@ -438,7 +438,7 @@ html, body, #root, .app { background-color: #232444; border: none; color: white; - font-size: 24px; + font-size: 16px; /* frm: changed from 24px */ height: 30px; /* frm: changed from 40px to 30px */ box-shadow: 1px 2px 5px rgba(0, 0, 0, .3); diff --git a/src/Map.js b/src/Map.js index 187f5f8..fd47530 100644 --- a/src/Map.js +++ b/src/Map.js @@ -159,8 +159,8 @@ export function Map(props){ } - // zoom to marker bounds, plus padding (percentage) - map.current.fitBounds(markers.current.getBounds().pad(0.1)); /* frm: messing with pad */ + // zoom to marker bounds, plus padding to make sure entire marker is visible + map.current.fitBounds(markers.current.getBounds().pad(0.1)); } }, [locations, props.hoverMarker, props.locFilt]); From c81a820e0f1301dfab2fc8d0b97bf75c9ea43935 Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Tue, 14 Jan 2020 10:58:39 -0500 Subject: [PATCH 11/13] CSS tweaks for mobile --- src/App.scss | 33 ++++++++++++++++++++++++--------- src/Map.js | 13 ++++++++++--- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/src/App.scss b/src/App.scss index c5461b0..1787a3c 100644 --- a/src/App.scss +++ b/src/App.scss @@ -9,7 +9,7 @@ .appIsDesktop { display: grid; /* frm: added for new map layout UI */ - grid-template-columns: minmax(180px,30%) auto; + grid-template-columns: minmax(180px,300px) auto; #map{ height: 100vh; /* frm: changed from % to vh */ @@ -24,6 +24,10 @@ #map{ /* height: 100vh; */ /* frm: don't need height for mobile */ + /* ??? frm: + * Actually I might need the height for mobile. The documentation + * for leaflet says that there needs to be a defined height. + */ z-index: 9; /* frm: not sure z-index does anything for mobile */ } @@ -38,11 +42,21 @@ * to be left, center, right. */ +/* frm: commented this out for now - replaced with code immediately below + * .mobileNavWrapper { - position: relative; + ** position: relative; ** ** frm: using flex below means I don't need relative position ** margin-top: 5px; margin-bottom: 5px; } + * + */ + +.mobileNavWrapper { /* frm: new code based on flex */ + display: flex; + flex-direction: row; + justify-content: space-around; +} .app{ height: 100vh; /* frm: added for new map layout UI */ @@ -405,7 +419,7 @@ html, body, #root, .app { max-height: 30vh; min-height: 10vh; /* changed from 20vh to 10vh to conserve whitespace */ box-shadow: 1px 2px 5px rgba(0, 0, 0, .3); - border: 1px solid #232444; + /* border: 1px solid #232444; */ /* frm: removed as part of new layout UI */ h3{ margin-top: 10px; /* frm: smaller for mobile to conserve whitespace */ @@ -421,7 +435,7 @@ html, body, #root, .app { padding-left: 5%; padding-right: 5%; - padding-bottom: 2%; /* frm: added this to make sure we had some whitespace at bottom (after reducing min-height of .eventCard */ + padding-bottom: 1%; .eventRSVP{ display: none; /* frm: changed from visibility: hidden to display: none to conserve whitespace */ @@ -432,7 +446,7 @@ html, body, #root, .app { } button{ - position: absolute; /* frm: changed for new map layout UI */ + /* position: absolute; */ /* frm: changed for new map layout UI */ bottom: 3%; /* frm: changed from 5% to 3% */ z-index: 10; background-color: #232444; @@ -444,18 +458,19 @@ html, body, #root, .app { } #mobileRSVP{ - left: 35%; - width: 30vw; + /* left: 35%; */ /* frm: commented out trying to get flex to work */ + /* width: 30vw; */ /* frm: commented out because I now have it flex its width */ + flex: 1; a{ text-decoration: none; color:white; } } #leftIndex{ - left: 25px; + /* left: 25px; */ /* frm: commented out trying to get flex to work */ } #rightIndex{ - right: 25px; + /* right: 25px; */ /* frm: commented out trying to get flex to work */ } } diff --git a/src/Map.js b/src/Map.js index fd47530..cae0a7f 100644 --- a/src/Map.js +++ b/src/Map.js @@ -39,7 +39,7 @@ export function Map(props){ zoom = map.getZoom(), delta = this._delta, normalizedDelta = 0, - snap = this._map.options.zoomSnap || 0; + snap = this._map.options.zoomSnap || 0; // ??? frm: why use this._map instead of just map wheelDeltaList.push(Math.abs(delta)); var average = 0; @@ -59,7 +59,7 @@ export function Map(props){ var deltaTime = currentScrollTime - lastScroll; - var d2 = this._delta / (this._map.options.wheelPxPerZoomLevel * 4), + var d2 = this._delta / (this._map.options.wheelPxPerZoomLevel * 4), // ??? frm: why use this._map instead of just map d3 = 4 * Math.log(2 / (1 + Math.exp(-Math.abs(d2)))) / Math.LN2, d4 = snap ? Math.ceil(d3 / snap) * snap : d3, normalizedDelta = map._limitZoom(zoom + (this._delta > 0 ? d4 : -d4)) - zoom; @@ -196,7 +196,14 @@ export function Map(props){ const lat = props.events[first]['location']['location']['latitude']; const long = props.events[first]['location']['location']['longitude']; - if(center[0] !== lat || center[0] !== long){ + /* + * If "first" non-private location is different from previous "center" + * then update the "center". This will center the map view on the + * "first" non-private location which we assume is the one closest to + * the given zip code (the Mobilize API should return events in the + * order of closest first) + */ + if(center[0] !== lat || center[1] !== long){ setCenter([lat, long]); setNewCenter(true); } From 8f9927afb86ba50fca17d21f79c3c803f8b4dc2d Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Tue, 14 Jan 2020 14:24:08 -0500 Subject: [PATCH 12/13] More CSS tweaks for mobile tiled layout and general cleanup --- src/App.js | 21 +++++-- src/App.scss | 141 ++++++++++++++++++---------------------------- src/EventList.js | 13 +---- src/Map.js | 23 ++++++++ src/MobileList.js | 27 ++++++++- src/SearchBar.js | 5 +- 6 files changed, 123 insertions(+), 107 deletions(-) diff --git a/src/App.js b/src/App.js index 7d62f1a..ec088bc 100644 --- a/src/App.js +++ b/src/App.js @@ -37,7 +37,7 @@ const queryString = require('query-string'); */ // const deviceIsMobile = isMobile; // HACK to allow easy mocking of isMobile for testing/debugging -const deviceIsMobile = true; +const deviceIsMobile = true; // HACK to allow easy mocking of isMobile for testing/debugging function App() { @@ -95,19 +95,31 @@ function App() { } }, [currZip, currRange]); - // Filters the events when there are new events from the API or when user changes filtering criteria + /* + * Filters the events when there are new events from the API or + * when the user changes filtering criteria + */ useEffect(() => { + if (!events){ - return setFilteredEvents(null); + setCardIndex(null); // no events, hence no valid cardIndex + setFilteredEvents(null); // no events, hence no filtered events + return; } + setCardIndex(0); // reset to the first event in the list + + // if ALLEVENTS then return everything, otherwise filter on the current kind of event setFilteredEvents(events.filter((event) => { return ((currEventKind === 'ALLEVENTS') || (currEventKind === event['event_type'])); })); }, [events, currEventKind]); - // If the cardIndex changes, reset the event whose marker is highlighted, by calling setHoverEvent() + /* + * If the cardIndex changes, then reset the event whose + * marker is highlighted, by calling setHoverEvent() + */ useEffect(() => { if (deviceIsMobile && filteredEvents != null) { setHoverEvent( @@ -123,7 +135,6 @@ function App() { // code just operates on the list of events passed to it. return ( - /*
*/ /* frm: original code */
setCurrZip(newZip)} updateRange={(newRange) => setCurrRange(newRange)} updateEventKind={(newEventKind) => setCurrEventKind(newEventKind)} events={filteredEvents} updatedHover={(newHover) => setHoverEvent(newHover)} locFilt={locFilt} deviceIsMobile={deviceIsMobile}/> {events === null && currZip == null && diff --git a/src/App.scss b/src/App.scss index 1787a3c..d3719ea 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,65 +1,51 @@ -/* frm: I added classes to distinguish between desktop and - * mobile cases - appIsDesktop and appIsMobile. This - * allowed me to set up the grid differently for the - * two cases. For desktop, the app has a left panel - * containing the search bar with the map on the - * right. For mobile, there is just a single column - * withy three rows (search, map, mobile-list-of-events). +/* + * + * The app uses a tiled layout that is different for desktop + * vs. mobile. + * + * On desktop, there are two columns: the left + * column contains the search criteria
above a + * scrolling list of events that match the search criteria. + * The width of the first column is constrained. The right + * column contains the map and it grows/shrinks to use up + * all of the remaining available space. + * + * On mobile, there is a single column that contains (in + * order from top to bottom): the search criteria then + * the map and then an area where the event details are + * provided along with buttons (previous, Info/RSVP, next). + * + * As you will see, we use CSS grid to implement this layout. + * + * To distinguish between the desktop and mobile cases, there + * is a class defined for each case: "appIsDesktop" and + * "appIsMobile". + * */ .appIsDesktop { - display: grid; /* frm: added for new map layout UI */ + display: grid; /* on desktop use a two column grid layout - right column grows/shrinks */ grid-template-columns: minmax(180px,300px) auto; #map{ - height: 100vh; /* frm: changed from % to vh */ + height: 100vh; z-index: 9; } } .appIsMobile { - display: grid; /* frm: added for new map layout UI */ + display: grid; /* on mobile use a row grid with three rows: search, map, card & nav */ grid-template-rows: min-content auto min-content; #map{ - /* height: 100vh; */ /* frm: don't need height for mobile */ - /* ??? frm: - * Actually I might need the height for mobile. The documentation - * for leaflet says that there needs to be a defined height. - */ z-index: 9; /* frm: not sure z-index does anything for mobile */ } } -/* frm: I added a - + * + */ + +
{ props.updatedHover(event['currentTarget'].getAttribute('coord')) }} + onMouseLeave={(event) => { props.updatedHover(null) }}> +
+

{event['title']}

+

{event['location']['venue']} in {event['location']['locality']}

+ +

Click to RSVP

+
+ +
) }).filter((arrItem) => { @@ -145,7 +168,7 @@ export function MobileList(props){ props.cardIndex > 0 && } - + { props.cardIndex < listEvents.length-1 && diff --git a/src/SearchBar.js b/src/SearchBar.js index d46b7df..8d4fc24 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -43,7 +43,9 @@ export function SearchBar(props){ event.preventDefault(); props.updateRange(rangeInput); // calls setCurrRange() in App.js triggering a Mobilize API call and a re-render setZip(input); - // ??? frm: Should I add a call to setEventKind() here? + /* ??? frm: Should I add a call to setEventKind() here? + * I don't think it necessary until I put the event kind in the URL... + */ } function setRange(input){ @@ -104,7 +106,6 @@ export function SearchBar(props){ */ return( - /*
*/ /* frm: original code */
From cc159656a37d38b10d0979fd365296a68c4c55a4 Mon Sep 17 00:00:00 2001 From: Fred Mueller Date: Tue, 14 Jan 2020 14:27:51 -0500 Subject: [PATCH 13/13] removed hack to force mobile UI --- src/App.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index ec088bc..8a7ec8d 100644 --- a/src/App.js +++ b/src/App.js @@ -36,8 +36,7 @@ const queryString = require('query-string'); * */ -// const deviceIsMobile = isMobile; // HACK to allow easy mocking of isMobile for testing/debugging -const deviceIsMobile = true; // HACK to allow easy mocking of isMobile for testing/debugging +const deviceIsMobile = isMobile; // HACK to allow easy mocking of isMobile for testing/debugging function App() {