Issue 99 - Collapsible filter/legend

public/index.html

@@ -51,8 +51,17 @@
     <div class="title white-and-blue">
       <h1 data-translation-id="page_title" class='h1'>Twin Cities Mutual Aid Map</h1>
     </div>
-    <div class="filter-pane white-and-blue">
-      <div class='legend' id="key"></div>
+
+    <div id="filter-pane" class="filter-pane white-and-blue">
+      <a id="toggle-legend-button" class="arrow-icon open">
+        <span class="left-bar"></span>
+          <span class="right-bar"></span>
+        </a>
+
+      <div class="legend-container" id="legend-container" style="max-height: 1000px;">
+        <div class='legend' id="key" style="max-height: 1000px;"></div>
+
+      <div class="action-group">
       <button data-translation-id="show_list_button" id="locations-toggle-button" class="location-list-toggle toggle-button" aria-label="Show 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="refresh_button" id='refresh-page-button' class='toggle-button' aria-label="refresh page data">
@@ -62,7 +71,9 @@ <h1 data-translation-id="page_title" class='h1'>Twin Cities Mutual Aid Map</h1>
         <script type="text/javascript" src="//counter.websiteout.net/js/7/0/41000/0"></script>
       </div>
     </div>
-    <div id="search-controls"></div>
+  </div>
+  </div>
+  <div id="search-controls"></div>
     <div id="side-pane" class="location-list">
       <div id="filter-controls"></div>
       <div class="list" id="location-list"></div>
@@ -86,6 +97,7 @@ <h1 data-translation-id="page_title" class='h1'>Twin Cities Mutual Aid Map</h1>
         <span class="lang-name" data-translation-id="lang_name">English</span>
       </span>
     </button>
+    <div class="legend-overlay" id="legend-overlay" />
   </div>
 
   <script src="/js/list.min.js"></script>

src/index.js

@@ -9,6 +9,7 @@ import './styles/components/location-card.css';
 import './styles/components/map-popup.css';
 import './styles/components/form-control.css';
 import './styles/components/search.css';
+import './styles/components/filter.css';
 import './styles/typography.css';
 
 // Import Libs
@@ -561,12 +562,3 @@ const refreshPageButton = document.getElementById('refresh-page-button')
 refreshPageButton.addEventListener("click", function() {
   refreshPage()
 })
-
-// render key
-const key = document.getElementById('key')
-statusOptions.forEach(s => {
-  const el = document.createElement('div');
-  el.classList = ['legend--item'];
-  el.innerHTML = `<span class="legend--item--swatch" style="background-color: ${s.accessibleColor}"></span>${s.label}`
-  key.append(el)
-})

src/js/filter.js

@@ -12,8 +12,11 @@ class Filter {
     this.$filters = []
 
     this.$el = el
-    this.$searchControl = document.getElementById('search-controls')
-    this.$controls = document.getElementById('filter-controls')
+    this.$searchControl = document.getElementById("search-controls")
+    this.$controls = document.getElementById("filter-controls")
+    this.$legendOverlay = document.getElementById("legend-overlay")
+    this.$toggleLegendButton = document.getElementById("toggle-legend-button")
+    this.$key = document.getElementById("key")
     this.renderControls(this.$controls)
     this.list = new List(this.$el.id, {
       valueNames: [...this.sortOptions.map(o => o.name), ...this.searchOptions.searchOn],
@@ -175,8 +178,7 @@ class Filter {
 
     const debouncedSearch = _.debounce(this.search.bind(this), 300);
 
-    const $key = document.getElementById("key");
-    $key.innerHTML = `<ul class="filters">${filters}</ul>`;
+    this.$key.innerHTML = `<ul class="filters">${filters}</ul>`;
 
     this.$locationList = document.getElementById('location-list')
     this.$sort = document.getElementById('sort-by')
@@ -185,7 +187,7 @@ class Filter {
     this.$searchInputGroup = document.getElementsByClassName('search-input-group')[0]
     this.$listResults = document.getElementById('list-results-count')
     this.$clearSearchBtn = document.getElementById('clear-search-btn')
-    this.$filters = Array.prototype.slice.call($key.querySelectorAll('input[type="checkbox"]'))
+    this.$filters = Array.prototype.slice.call(this.$key.querySelectorAll('input[type="checkbox"]'))
     this.$sort.addEventListener('change', this.update.bind(this))
     this.$search.addEventListener('input', event => {
       this.$locationList.classList.add('loading-indicator');
@@ -202,7 +204,45 @@ class Filter {
       this.search.bind(this)(event.currentTarget.value)
     })
     this.$filters.forEach($e => $e.addEventListener('change', this.update.bind(this)))
+
+    this.statusOptions.forEach(statusOption => {
+      this.createLegendOverlayItem(statusOption);
+    })
+
+    this.$toggleLegendButton.addEventListener("click", 
+      event => this.toggleFilters());
+
+  }
+
+  toggleFilters() {
+    this.$toggleLegendButton.classList.toggle("open");
+    const panel = document.getElementById("legend-container");
+    if (panel.style.maxHeight) {
+      panel.style.maxHeight = null;
+    } else {
+      panel.style.maxHeight = panel.scrollHeight + "px";
+    }
+    if (this.$legendOverlay.style.maxWidth) {
+      this.$legendOverlay.style.maxWidth = null;
+    } else {
+      this.$legendOverlay.style.maxWidth = panel.scrollWidth + "px";
+    }
+  }
+
+  createLegendOverlayItem(option) {
+    const item = document.createElement('div');
+    item.innerHTML = `<button class="legend-overlay-item" style="background-color: ${option.accessibleColor}">${option.name}</button>`
+    this.$legendOverlay.append(item);
+  }
+
+  toggleLegendOverlay() {
+    if (this.$legendOverlay.style.maxWidth) {
+      this.$legendOverlay.style.maxWidth = null;
+    } else {
+      this.$legendOverlay.style.maxWidth = panel.scrollWidth + "px";
+    }
   }
+
 }
 
-export default Filter
+export default Filter

src/styles/components/filter.css

@@ -0,0 +1,146 @@
+
+.filter-pane {
+	padding: 0px 15px 5px 15px;
+}
+
+.filters {
+	list-style: none;
+	padding: 0;
+	margin: 0px;
+}
+
+.filter-item {
+  	padding: 2px 0px;
+}
+
+.legend--item {
+  	display: flex;
+  	align-items: center;
+}
+
+.legend--item--swatch {
+	border-radius: 20%;
+	width: 10px;
+	height: 10px;
+	margin-right: 5px;
+	display: inline-block;
+	margin-left: 5px;
+}
+
+/* Small screens */
+@media only screen and (max-width: 640px) {
+
+	.filter-pane {
+		display: flex;
+		flex-flow: row nowrap;
+		padding: 0 0px 0 12px;
+		background: var(--primary-blue);
+	}
+
+	.legend-container {
+		overflow: hidden;
+		max-height: 0;
+		transition: max-height 0.4s ease-in-out;
+	}
+
+	.legend {
+		flex-flow: row nowrap;
+	}
+
+	.arrow-icon {
+		background-color: var(--primary-blue);
+		height: 1em;
+		width: 1em;
+		margin: 5px 5px;
+		position: relative;
+		cursor: pointer;
+		border-radius: 4px;
+	}
+
+	.left-bar {
+		position: absolute;
+		background-color: transparent;
+		top: 0;
+		left: 0;
+		width: 8px;
+		height: 2px;
+		display: block;
+		transform: rotate(35deg);
+		float: right;
+		border-radius: 1px;
+	}
+
+	.left-bar:after {
+		content: "";
+		background-color: white;
+		width: 8px;
+		height: 2px;
+		display: block;
+		float: right;
+		border-radius: 3px 4px 4px 3px;
+		transition: all 0.4s cubic-bezier(0.25, 1.7, 0.35, 0.8);
+		z-index: -1;
+	}
+
+	.right-bar {
+		position: absolute;
+		background-color: transparent;
+		top: 0px;
+		left: 6px;
+		width: 8px;
+		height: 2px;
+		display: block;
+		transform: rotate(-35deg);
+		float: right;
+		border-radius: 1px;
+	}
+
+	.right-bar:after {
+		content: "";
+		background-color: white;
+		width: 8px;
+		height: 2px;
+		display: block;
+		float: right;
+		border-radius: 4px 3px 3px 4px;
+		transition: all 0.4s cubic-bezier(0.25, 1.7, 0.35, 0.8);
+		z-index: -1;
+	}
+
+	.open .left-bar:after {
+		transform-origin: center center;
+		transform: rotate(-70deg);
+	}
+
+	.open .right-bar:after {
+		transform-origin: center center;
+		transform: rotate(70deg);
+	}
+
+	.legend-overlay {
+		display: flex;
+		flex-direction: column;
+		background: rgba(360, 360, 360, 0.8);
+		border-radius: 0 0.9rem 0.9rem 0;
+		font-weight: bold;
+		padding: 5px 0 5px 0;
+		border: none;
+		position: absolute;
+		z-index: 1;
+		bottom: 40px;
+		left: 0px;
+		max-width: 0;
+		transition: max-width 0.4s ease-in-out;
+		overflow: hidden;
+	}
+
+	.legend-overlay-item {
+		border-radius: 1.5rem;
+		padding: 8px 0px;
+		margin: 3px 8px 3px 8px;
+		border: none;
+		color: white;
+		width: 85px;
+	}
+
+}

src/styles/components/form-control.css

@@ -30,4 +30,4 @@
     display: flex;
     align-items: center;
     padding: .5rem 0;
-} 
+} 

src/styles/components/map-popup.css

@@ -34,4 +34,4 @@
     color: var(--gray-700);
     padding: 0 0 .4rem 0;
     font-size: 1rem;
-}
+}

src/styles/components/search.css

@@ -24,7 +24,7 @@
 	padding: 10px; /*diff */
 	border: 1px solid var(--gray-800);
 	height: 30px;
-	max-width: 100%;
+	/* max-width: 100%; */
 	padding-left: 30px;
 	border-radius: .25rem;
 	flex: 1;
@@ -39,6 +39,15 @@
 	right: 15px;
 }
 
+.list-meta {
+	display: flex;
+	justify-content: flex-end;
+	padding: 0 8px 0 0;
+	font-weight: bold;
+	font-size: 0.9rem;
+	background: var(--gray-50);
+}
+
 @media(max-width: 1118px) {
 	.search-full-width {
 		width: 100%;
@@ -47,6 +56,38 @@
 	.search-full-width .search-input {
 		width: 100%;
 	}
+
+	.list-meta {
+		display: flex;
+		justify-content: flex-end;
+		padding: 0 8px 0 0;
+		font-weight: bold;
+		font-size: 0.9rem;
+		background: var(--gray-50);
+	}
+
+	#search-controls {
+		background: var(--gray-50);
+	}
+
+}
+
+/* Small screens */
+@media only screen and (max-width: 640px) {
+
+	.list-meta {
+		display: flex;
+		justify-content: flex-end;
+		padding: 0 8px 0 0;
+		font-weight: bold;
+		font-size: 0.7rem;
+		background: var(--gray-50);
+	}
+
+	#search-controls {
+		background: var(--gray-50);
+	}
+
 }
 
 #clear-search-btn:disabled {
@@ -60,4 +101,4 @@
 .hide-search-result,
 .hide-clear-search {
 	display: none;
-}
+}