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.

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

Issue 99 - Collapsible filter/legend #241

Closed
wants to merge 9 commits into from
Closed
Show file tree
Hide file tree
Changes from 3 commits
Commits
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
45 changes: 33 additions & 12 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -48,18 +48,38 @@

<body class='flex'>
<div class="content">
<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>
<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">
<img class="refresh-image" alt="${lang_name}" src="/images/refresh.png">
<span class="refresh-text" data-translation-id="refresh">Refresh</span></button>
<div class='counter'>
<script type="text/javascript" src="//counter.websiteout.net/js/7/0/41000/0"></script>
<div class="header">
<div class="title white-and-blue">
<h1 data-translation-id="page_title" class='h1'>Twin Cities Mutual Aid Map</h1>
</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">
<img class="refresh-image" alt="${lang_name}" src="/images/refresh.png">
<span class="refresh-text" data-translation-id="refresh">
Refresh
</span>
</button>
<div class='counter'>
<script type="text/javascript" src="//counter.websiteout.net/js/7/0/41000/0" ></script>
</div>
</div>
</div>
Comment on lines +65 to +82
Copy link
Contributor Author

@amaxama amaxama Sep 10, 2020

Choose a reason for hiding this comment

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

Most of this is indentation changes

</div>
</div>
<div id="search-controls"></div>
Expand All @@ -86,6 +106,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>
Expand Down
10 changes: 1 addition & 9 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)
})
38 changes: 35 additions & 3 deletions src/js/filter.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ 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.renderControls(this.$controls)
this.list = new List(this.$el.id, {
valueNames: [...this.sortOptions.map(o => o.name), ...this.searchOptions.searchOn],
Expand Down Expand Up @@ -202,7 +204,37 @@ 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());

}

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);
}

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";
}
}

}

export default Filter
export default Filter
146 changes: 146 additions & 0 deletions src/styles/components/filter.css
Original file line number Diff line number Diff line change
@@ -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;
}

}
2 changes: 1 addition & 1 deletion src/styles/components/form-control.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,4 @@
display: flex;
align-items: center;
padding: .5rem 0;
}
}
2 changes: 1 addition & 1 deletion src/styles/components/map-popup.css
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,4 @@
color: var(--gray-700);
padding: 0 0 .4rem 0;
font-size: 1rem;
}
}
45 changes: 43 additions & 2 deletions src/styles/components/search.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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%;
Expand All @@ -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 {
Expand All @@ -60,4 +101,4 @@
.hide-search-result,
.hide-clear-search {
display: none;
}
}
Loading