Improve filter button #308

msecret · 2015-06-30T01:13:58Z

This moves the filter button to the right side of the filter bar. This
was done so the filter button UI was attached to the actual filter
UI, so the button affords closing and opening the side bar.

This iteration doesn't include any animation. Animation would require
some extra work.

Fixes #293

This moves the filter button to the right side of the filter bar. This was done so the filter button UI was attached to the actual filter UI, so the button affords closing and opening the side bar. This iteration doesn't include any animation. Animation would require some extra work.

…ove_filter_button

This was done to ensure this new show/hide filter button looks nice at all breakpoints an devices.

msecret · 2015-07-01T23:55:05Z

This is how it's looking at various breakpoints. @jenniferthibault @noahmanger, the position of the filter buttons breaks at the smallest breakpoint when its minified. It's running into the header below it.

jenniferthibault · 2015-07-02T16:39:29Z

@msecret I'm working through some other tweaks to different elements on other screen sizes you've shown, but:
A) Is this set of changes to the mobile view possible?;
B) Is this kind of markup helpful?

…ove_filter_button

noahmanger · 2015-07-02T19:01:39Z

This looks way better. A couple other ideas:

Would love for this to default to closed on mobile so you see the data first.
If that's the case, we may need an indicator that filters are applied.

jenniferthibault · 2015-07-02T19:40:11Z

Next up: Show filters on mobile screens. Same philosophy for the changes you see here as in "hide filter" above.

jenniferthibault · 2015-07-02T20:21:30Z

Medium and XL screens:

Glad to talk through anything that throws a monkey wrench into something that I haven't noticed!

jenniferthibault · 2015-07-02T21:00:43Z

I was confusing myself with all the descriptions of how the menu worked. I hope this helps to clarify!

noahmanger · 2015-07-02T21:09:18Z

On small screens I'm worried that the icon switching sides with the text might be kind of a weird jump. Is there a reason you had it like that?

jenniferthibault · 2015-07-02T21:22:31Z

THANK YOU @noahmanger ! It made sense in my head when I was making it, but I didn't pause to review it when finished. For small screens, the icon is now on the left so that people read it (and hopefully get the signal) before they have to read the text. For large screens, since the text is moving left-right, the icon is on the right so that the words disappear & reveal in-sync with the animation. Does that make sense, or should they all be on the same side? cc @msecret — sorry for the confusion here.

noahmanger · 2015-07-02T21:43:34Z

Nice. Yeah I think it makes sense to be on the right on large screens. I like it!

msecret · 2015-07-07T22:27:29Z

@noahmanger @jenniferthibault , I just updated this, here are some new screens.

This incorporated fixes such as positioning the button on various breakpoints, centering the paging content at the mobile breakpoints, ensuring the arrows on the hide/show filters button is always there and ensuring consistent borders and positioning.

Before the filter code had to be duplicated in two separate templates for candidates and committees. This moves it into a shared files that uses variables set by both parent templates to display the filters.

This only incorperates the design feedback on teh actual filter button not the other things about positioning. - Lining up filter button and result info box so they're aligned visually. - Keep the filter button the same color on hover so it fits nicely with the box it's part of. - Ensure result table's width is always a percentage so it's width lines up with the result info box above when the filter toggles. - Move apply filter button to the center at sm and md breakpoints.

We are adding animation to the side bar when it opens and closes to make the tranistion more seamless to the user.

…ove_filter_button

Jen recommended adding more padding to the filter box and table for the mobile view so it matches up with the padding for the header above it.

After discussion with Jen, we decided that the sorting icon would make more sense if right next to the text for the header rather the off to the right so they have a spacial connection to eachother.

msecret · 2015-07-13T18:55:54Z

Still left to do:

Mobile animation for filter slide up. I'm having trouble with this, not 100% we should do it right now.
Fix staggering fields problem on tablet. I think I might want to put this in a different PR has it's pretty separate from this issue.

noahmanger · 2015-07-13T22:53:51Z

static/styles/_components/_side-panel.scss

@@ -23,24 +23,144 @@
 }

 .side-panel {


This is my fault for the way this was originally implemented, but the glossary also has the .side-panel class, so all of these style changes break it. We could either move them to .side-panel--left or remove the .side-panel class from the glossary. (They started out as similarly functioning things, so made sense for them to share some styles, but they're no pretty different so maybe it makes more sense to break them out).

noahmanger · 2015-07-13T22:54:48Z

static/styles/_components/_side-panel.scss

+    margin-top: 1em;
+  }
+
+  &.side-panel--open {


Does this need to be nested or can it be moved up a level?

The styles for the side bar were breaking the style for the glossary side bar. This change moves the style rules so it only applies to the new side bar.

…ove_filter_button Conflicts: static/js/modules/tables.js

noahmanger · 2015-07-14T16:40:41Z

static/js/modules/tables.js

@@ -165,6 +165,7 @@ function initTable($table, $form, baseUrl, columns) {
  var $paging = $(api.table().container()).find('.results-info--top');
  $paging.prepend($('#filter-toggle'));


This line needs to be removed. It's moving the button.

Improve filter button

noahmanger added the in progress label Jun 30, 2015

msecret added in progress and removed in progress labels Jun 30, 2015

Marco Segreto added 2 commits June 30, 2015 11:45

Merge remote-tracking branch 'upstream/develop' into feature/293-impr…

0a481dd

…ove_filter_button

Improved mobile breakpoints for new button

3de6dfd

This was done to ensure this new show/hide filter button looks nice at all breakpoints an devices.

Merge remote-tracking branch 'upstream/develop' into feature/293-impr…

6385c4e

…ove_filter_button

Fixes

7d8b4bd

Marco Segreto added 7 commits July 7, 2015 15:28

Implemented Jen's design feedback

821ad3c

This incorporated fixes such as positioning the button on various breakpoints, centering the paging content at the mobile breakpoints, ensuring the arrows on the hide/show filters button is always there and ensuring consistent borders and positioning.

Moved shared filter code to shared file

3d0479a

Before the filter code had to be duplicated in two separate templates for candidates and committees. This moves it into a shared files that uses variables set by both parent templates to display the filters.

Large breakpoint animations

7341ef9

We are adding animation to the side bar when it opens and closes to make the tranistion more seamless to the user.

Merge remote-tracking branch 'upstream/develop' into feature/293-impr…

fe09996

…ove_filter_button

Add more padding on mobile view

d976c68

Jen recommended adding more padding to the filter box and table for the mobile view so it matches up with the padding for the header above it.

Move sort icon to left of header

3d59bcc

After discussion with Jen, we decided that the sorting icon would make more sense if right next to the text for the header rather the off to the right so they have a spacial connection to eachother.

msecret added plz-review and removed in progress labels Jul 13, 2015

noahmanger reviewed Jul 13, 2015
View reviewed changes

Marco Segreto added 2 commits July 13, 2015 16:20

Fix glossary side bar

18553ca

The styles for the side bar were breaking the style for the glossary side bar. This change moves the style rules so it only applies to the new side bar.

Merge remote-tracking branch 'upstream/develop' into feature/293-impr…

d172d40

…ove_filter_button Conflicts: static/js/modules/tables.js

noahmanger reviewed Jul 14, 2015
View reviewed changes

Fix broken thing from merge conflict

af3d85b

noahmanger pushed a commit that referenced this pull request Jul 14, 2015

Merge pull request #308 from msecret/feature/293-improve_filter_button

a658f80

Improve filter button

noahmanger merged commit a658f80 into fecgov:develop Jul 14, 2015

noahmanger removed the plz-review label Jul 14, 2015

noahmanger mentioned this pull request Jul 21, 2015

Default to closed filters on mobile and tablet fecgov/openFEC#967

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve filter button #308

Improve filter button #308

msecret commented Jun 30, 2015

msecret commented Jul 1, 2015

jenniferthibault commented Jul 2, 2015

noahmanger commented Jul 2, 2015

jenniferthibault commented Jul 2, 2015

jenniferthibault commented Jul 2, 2015

jenniferthibault commented Jul 2, 2015

noahmanger commented Jul 2, 2015

jenniferthibault commented Jul 2, 2015

noahmanger commented Jul 2, 2015

msecret commented Jul 7, 2015

msecret commented Jul 13, 2015

noahmanger Jul 13, 2015

noahmanger Jul 13, 2015

noahmanger Jul 14, 2015

		@@ -165,6 +165,7 @@ function initTable($table, $form, baseUrl, columns) {
		var $paging = $(api.table().container()).find('.results-info--top');
		$paging.prepend($('#filter-toggle'));

Improve filter button #308

Improve filter button #308

Conversation

msecret commented Jun 30, 2015

msecret commented Jul 1, 2015

jenniferthibault commented Jul 2, 2015

noahmanger commented Jul 2, 2015

jenniferthibault commented Jul 2, 2015

jenniferthibault commented Jul 2, 2015

jenniferthibault commented Jul 2, 2015

noahmanger commented Jul 2, 2015

jenniferthibault commented Jul 2, 2015

noahmanger commented Jul 2, 2015

msecret commented Jul 7, 2015

msecret commented Jul 13, 2015

noahmanger Jul 13, 2015

Choose a reason for hiding this comment

noahmanger Jul 13, 2015

Choose a reason for hiding this comment

noahmanger Jul 14, 2015

Choose a reason for hiding this comment