From 3e2d68fed124723c6874a681372fd8ad0291e463 Mon Sep 17 00:00:00 2001
From: Lanie Hei <heixx011@umn.edu>
Date: Sun, 7 Jun 2020 14:10:45 -0500
Subject: [PATCH 1/2] Adds link and modal to the search help

---
 public/images/questionmark.svg |  5 +++
 public/index.html              | 17 ++++++++-
 src/index.js                   | 22 +++++++++++
 src/styles/styles.css          | 67 ++++++++++++++++++++++++++++++++--
 4 files changed, 107 insertions(+), 4 deletions(-)
 create mode 100644 public/images/questionmark.svg

diff --git a/public/images/questionmark.svg b/public/images/questionmark.svg
new file mode 100644
index 0000000..25b3308
--- /dev/null
+++ b/public/images/questionmark.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180">
+<path fill="#FFF" stroke="#000" stroke-width="16" d="M9,89a81,81 0 1,1 0,2zm51-14c0-13 1-19 8-26c7-9 18-10 28-8c10,2 22,12 22,26c0,14-11,19-15,22c-3,3-5,6-5,9v22m0,12v16"/>
+</svg>
+<!-- By Sarang - derivated from the shape of the question mark in Aiga information .svg, Public Domain, https://commons.wikimedia.org/w/index.php?curid=12746986 -->
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 0127b3f..f0e52da 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>
@@ -56,6 +59,18 @@ <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><br />
+     <ul class='help-search-list'>
+      <li class='txt-small search-example' data-translation-id=""><b>Zip Codes</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>Items</b>  - e.g. 'food', 'water', or 'toiletries'</li>
+      <li class='txt-small search-example' data-translation-id=""><b>Building Type</b>  - e.g. 'church', 'shelter'</li>
+      <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 Needs</b>  - e.g. 'needs volunteers', '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>
diff --git a/src/index.js b/src/index.js
index 53e550a..7d200c8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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 => {
@@ -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 => {
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 78b2c85..bcafcf8 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -40,7 +40,19 @@ 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;
 }
 
@@ -48,6 +60,19 @@ a.txt-white:hover {
   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%;
@@ -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;
@@ -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;
@@ -335,6 +366,18 @@ input[type='checkbox'] + label {
 }
 
 /* Small screens */
+@media only screen and (max-width: 920px) {
+  .help-search {
+  width: 40%; 
+  height: 40%; 
+
+  /* keep it on the map */
+  right: 10%;
+  top: 25%;
+  }
+
+}
+
 @media only screen and (max-width: 640px) {
   body {
     flex-direction: column;
@@ -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: 50%; 
+    height: 45%; 
+    left: 25%;
+
+    /* keep it on the map */
+    top: 34%;
+    }
 }

From 4f0e0591f9ece0b7711de7eddfa8eac477d643d0 Mon Sep 17 00:00:00 2001
From: Lanie Hei <heixx011@umn.edu>
Date: Sun, 7 Jun 2020 15:53:22 -0500
Subject: [PATCH 2/2] Adds additional messaging

---
 public/index.html     | 11 ++++++-----
 src/styles/styles.css |  8 ++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index f0e52da..4f95a86 100644
--- a/public/index.html
+++ b/public/index.html
@@ -61,14 +61,15 @@ <h1 data-translation-id="page_title" class='h1'>Twin Cities Aid Map</h1>
   </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><br />
+    <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 Codes</b> - e.g. '55108'</li>
+      <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>Items</b>  - e.g. 'food', 'water', or 'toiletries'</li>
-      <li class='txt-small search-example' data-translation-id=""><b>Building Type</b>  - e.g. 'church', 'shelter'</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>
       <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 Needs</b>  - e.g. 'needs volunteers', 'seeking donations'</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">
diff --git a/src/styles/styles.css b/src/styles/styles.css
index bcafcf8..0b326bd 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -369,7 +369,7 @@ input[type='checkbox'] + label {
 @media only screen and (max-width: 920px) {
   .help-search {
   width: 40%; 
-  height: 40%; 
+  height: 50%; 
 
   /* keep it on the map */
   right: 10%;
@@ -424,9 +424,9 @@ input[type='checkbox'] + label {
   .help-search {
     display:flex;
     flex-direction:column;
-    width: 50%; 
-    height: 45%; 
-    left: 25%;
+    width: 60%; 
+    height: 60%; 
+    left: 20%;
 
     /* keep it on the map */
     top: 34%;