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

Adds link and modal to the search help #138

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Adds link and modal to the search help #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e2d68f
Adds link and modal to the search help
Jun 7, 2020
4f0e059
Adds additional messaging
Jun 7, 2020
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
5 changes: 5 additions & 0 deletions public/images/questionmark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 17 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,10 @@ <h1 data-translation-id="page_title" class='h1'>Twin Cities Aid Map</h1>
<div class="filter-pane white-and-blue">
<div class='legend' id="key"></div>
<button data-translation-id="show_list_button" id="locations-toggle-button" class="location-list-toggle toggle-button" aria-label="Toggle list of locations">Show list of locations</button>
<button data-translation-id="help_info" id="help-info-toggle-button" class="toggle-button" aria-label="Toggle help info section">Help/info</button>
<button data-translation-id="help_info" id="help-info-toggle-button" class="toggle-button" aria-label="Toggle help info section">Help/Info</button>

<!-- an href of "javascript:;" prevents the link from logging in the user's history, since they aren't actually going to another site -->
<a href="javascript:;" id="help-search-toggle-link" aria-label="Toggle search help section"><img class="question-mark-svg" src="images/questionmark.svg" alt="question mark"> Need Help with Search Examples?</a>
<div class='counter'>
<script type="text/javascript" src="//counter.websiteout.net/js/7/0/41000/0"></script>
</div>
Expand All @@ -56,6 +59,19 @@ <h1 data-translation-id="page_title" class='h1'>Twin Cities Aid Map</h1>
<p class='p txt-small bold'><span data-translation-id="project_data">See this data in</span> <a href="https://docs.google.com/spreadsheets/d/e/2PACX-1vSfnmh9CmtVoBMy2k_-NMhhvF7ursBs2L5IPF9VZ1J-l9P71vjDFw7y6Y6E98d5lNeOAEo7leisP0Y8/pubhtml" target="_blank">Google Sheets</a>.</p>
<p class='p txt-small bold'><span data-translation-id="project_learn">Learn about this project on</span> <a href="https://github.com/Twin-Cities-Mutual-Aid/twin-cities-aid-distribution-locations/blob/master/README.md" target="_blank">GitHub</a>.</p>
</div>
<div id="help-search" class='help-search padded white-and-blue'>
<button id='help-search-close-button' class='help-search-close-button' aria-label="Close help search section">X <span data-translation-id="close">Close</span></button>
<h3 class='txt-summary_large_image' data-translation-id="">Search terms and examples:</h3>
<p class='txt-small'>Please note that this is not a complete list of search terms to use, but rather a general guide.</p>
<ul class='help-search-list'>
<li class='txt-small search-example' data-translation-id=""><b>Zip Code</b> - e.g. '55108'</li>
<li class='txt-small search-example' data-translation-id=""><b>City Name </b> - e.g. 'St. Paul'</li>
<li class='txt-small search-example' data-translation-id=""><b>Item</b> - e.g. 'food', 'water', or 'toiletries'</li>
<li class='txt-small search-example' data-translation-id=""><b>Building Type</b> - e.g. 'church', or 'shelter'</li>
Copy link
Contributor

@jdalt jdalt Jun 8, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the UI mockup and state of the data are somewhat disconnected:

  • We don't currently capture "Building Type" anywhere in the Google Sheet. There might be fragments of this in the notes, but I don't think this should be advertised as feature of the search.
  • I think "Neighborhood" might be more useful to search for than "City" (debatable)
  • I'm not certain what "Item" refers to in the data. Is this something in the needs section?
  • I don't believe we capture Language Criteria in the Google Sheets.

I think we need to take a step back and make certain that someone on the TCMAP side verifies these, and we try out each of these search criteria and validate that they return useful information.

Copy link
Contributor

@comeoneileen comeoneileen Jun 9, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, I'm sort of the defacto head of the data entry crew and haven't done a good job chiming in on the Github side of things yet. Hello. We are SO excited about the prospect of search, even if it were nothing more than a mobile-friendly version of opening the spreadsheet and doing a ctrl-F, and it looks like y'all have some great stuff in the works.

@jdalt, you're entirely correct about "building type" - it crossed my mind today as not a terrible idea to capture eventually, but I'd like to hear more from map users about how difficult sites are to find. My understanding is that many are NOT buildings - a lot of this is tents in parking lots, card tables on lawns, etc.

We...do have a column for neighborhood at the moment and not city (city does exist as part of the address), but...I'm not convinced that neighborhood info we have is (A) accurate or (B) being used for anything anyway.

I just realized how late it is and need to stop there, but if anybody wants to do the official data entry volunteer training and REALLY get a close look at the process, it'll be 6/9 from 19:00-20:30 or so. I'd also be open to running an abbreviated version with folks working specifically on this feature. I'm on OTC Slack as Eileen King.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey peeps-
I was thinking and curious if you guys feel the same way about this, but I kind of wonder now if we actually don't need to include a search example modal/pop up window.

It was more of a starting point to provide any help or context but I'm wondering how useful it is now that I'm thinking more on it. I suppose it could help if there are common questions on things but didn't want to feel like we needed to add it if it's unnecessary confusion?

Let me know what you guys think!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

being that the search isn't as full-featured as, say, google, and folks don't know the parameters they can search, I feel that it would still be nice to add. But I also might be admittedly biased because I spent several hours hacking this out 😅 would like others to weigh in

Copy link
Contributor

@codarose codarose Jun 15, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi all! Sorry to be so late in weighing in on this, didn't mean to leave you hanging for so long Lanie!

@laniehei I really appreciate the work you did on this! I think an issue we are facing is that our UI design got ahead of our actual user-driven needs. I think before we add something like this to the design, we need to get user feedback to determine if it is actually needed, and if so, what would make it the most helpful. We are stuck right now at this "user feedback" issue, in that we currently have no good way of getting that feedback unfortunately. So that has made it difficult to weigh in on this design change.

I'm inclined to agree that explaining that this is an exact search, and not as robust as say google search, could be helpful. But this is also something that takes up real-estate in a fixed part of the screen, and we are currently having conversations about the UI design in general to determine if other things need to be prioritized into that space, such as the 'search' bar itself, which currently is lost when users scroll through locations.

I think we need to table this design direction for now until we've gotten more feedback.

Again thank you for this work, and sorry this process ended up being so messy - we need to find a more clear way of presenting UI changes so that they are motivated by an understanding of the data, or from user feedback.

<li class='txt-small search-example' data-translation-id=""><b>Language Criteria</b> - e.g. 'bilingual', or 'spanish'</li>
<li class='txt-small search-example' data-translation-id=""><b>Site Need</b> - e.g. 'needs volunteers', or 'seeking donations'</li>
</ul>
</div>
<div class='map' id="map">
<button class="lang-select-button" id="lang-select-button">
<span class="lang-select-label" data-translation-id="language">Language</span>
Expand Down
22 changes: 22 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,17 @@ function toggleHelpInfo() {
}
}

// open/close help search
function toggleHelpSearch() {
if (window.location.hash === '#help-search') {
// this currently leaves a '#' at the end of the URL on close. there's definitely a
// better solution out there, but this works even if it's not pretty
window.location.hash = ''
} else {
window.location.hash = '#help-search'
}
}

// close popups for all locations
function closePopups() {
locations.forEach(location => {
Expand Down Expand Up @@ -477,6 +488,17 @@ helpInfoCloseButton.addEventListener("click", function(){
toggleHelpInfo()
});

// add help-search-toggle-link handler
const helpSearchOpenButton = document.getElementById('help-search-toggle-link')
helpSearchOpenButton.addEventListener("click", function(){
toggleHelpSearch()
});

const helpSearchCloseButton = document.getElementById('help-search-close-button')
helpSearchCloseButton.addEventListener("click", function(){
toggleHelpSearch()
});

// render key
const key = document.getElementById('key')
statusOptions.forEach(s => {
Expand Down
67 changes: 64 additions & 3 deletions src/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,39 @@ a.txt-white:hover {
display: block;
}

.help-info:not(:target) {
.help-search {
z-index: 1;
position: fixed;
width: 45%;
height: 40%;

/* keep it on the map */
left: 34%;
top: 25%;
}

.help-info:not(:target),
.help-search:not(:target) {
display: none;
}

.help-info:target + .map {
display: none;
}

.help-search-list {
display: flex;
flex-direction:column;
list-style: none;
padding: 0;
margin: 0px;
}

#help-search-toggle-link {
/* ensures that the link won't wrap */
white-space: nowrap;
}

.content {
z-index: 1;
width: 33.3333%;
Expand Down Expand Up @@ -165,6 +190,11 @@ input[type='checkbox'] + label {
background-color: rgba(0,0,50,.9);
}

.question-mark-svg {
/* match height of small text */
height: 13px;
}

/* component: title */
.title {
padding: 15px 15px 5px 15px;
Expand Down Expand Up @@ -267,7 +297,8 @@ input[type='checkbox'] + label {
}

/* component: help info close button */
.help-info-close-button {
.help-info-close-button,
.help-search-close-button {
display: inline;
float: right;
margin-top: 10px;
Expand Down Expand Up @@ -335,6 +366,18 @@ input[type='checkbox'] + label {
}

/* Small screens */
@media only screen and (max-width: 920px) {
.help-search {
width: 40%;
height: 50%;

/* keep it on the map */
right: 10%;
top: 25%;
}

}

@media only screen and (max-width: 640px) {
body {
flex-direction: column;
Expand Down Expand Up @@ -367,7 +410,25 @@ input[type='checkbox'] + label {
.h1 {
margin: 0;
}
.help-info-close-button {
.help-info-close-button,
.help-search-close-button {
margin-top: 0;
}

.help-search-close-button {
width: 50%;
align-self: flex-end;

}

.help-search {
display:flex;
flex-direction:column;
width: 60%;
height: 60%;
left: 20%;

/* keep it on the map */
top: 34%;
}
}