Issue 99 - Collapsible filter/legend #241
Conversation
| @@ -20,6 +20,7 @@ | |||
| --primary-700: hsl(var(--primary), 35%); | |||
| --primary-800: hsl(var(--primary), 25%); | |||
| --primary-900: hsl(var(--primary), 15%); | |||
| --primary-blue: hsl(var(--primary), 10%); | |||
There was a problem hiding this comment.
This is the original dark blue used for the title header - open to a better variable name if there are suggestions!
| <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> |
There was a problem hiding this comment.
Most of this is indentation changes
| } | ||
|
|
||
| /* component: title */ | ||
| .title { | ||
| padding: 10px 15px 0px 15px; |
There was a problem hiding this comment.
Moved all legend and filter related items to filter.css
| @@ -52,7 +52,7 @@ a.txt-white:hover { | |||
|
|
|||
| .content { | |||
| z-index: 1; | |||
| width: 33.3333%; | |||
| width: 36%; | |||
There was a problem hiding this comment.
Mad just a little wider so title fits on one line more often
| @@ -22,6 +22,10 @@ | |||
| "filter_by_both": "ለ ሁለቱም ክፍት ነው ", | |||
| "filter_by_closed": "ለጊዜው ዝግ ነው ", | |||
| "filter_by_unknown": "ሁኔታው አይታወቅም ", | |||
| "receiving": "receiving", | |||
There was a problem hiding this comment.
All of these are just placeholders for now!
|
Here's an example of what it looks like (animation is slow cause my computer is laggy, it should be a bit more smooth than that): |
|
So exciting! |
|
@mc-funk Yeah... I played around with a few places to put it..I had originally thought of putting it in line with the title but I actually kind of want to put a kebab menu there for overflow actions like "refresh"....I could try putting it over to the right though and see how that goes. Regardless, I just tried it on mobile and the touch area that picks up tap input is definitely not big enough so I'm going to increase that for sure. I'll try that first and see if that makes a difference for you and then I can try it over to the right if it's sill not great |
What
Add collapsability to top filters and toggle legend on map when filters are collapsed
Why
Issue #99
Ensure the following interactions work as expected. Please test using a mobile form factor.
Check the app in the following web browsers: