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

Provide better visual distinction between Citywide vs District Based Council Items #29

Open
tbuckl opened this issue Oct 19, 2014 · 12 comments

Comments

@tbuckl
Copy link
Member

tbuckl commented Oct 19, 2014

right now at least, event items on the production site show an october 6th event before an october 16th one.

@tbuckl
Copy link
Member Author

tbuckl commented Oct 19, 2014

we need some kind of visual cue that citwide items are different from the city council ones. or else, just not append them at the district level. here:

(http://municipal.codeforamerica.org)

@tbuckl tbuckl closed this as completed Oct 19, 2014
@tbuckl tbuckl reopened this Oct 19, 2014
@tbuckl tbuckl changed the title event items are not sorted by the date that is printed for them Need Thoughts on Visual Cues to Differentiate Citywide vs District Based Council Items Oct 21, 2014
@techieshark
Copy link
Contributor

@ardouglass, want to look at this?

@ardouglass
Copy link

To visually differ the two with something like another header when the citywide stuff starts or something like tabs, there isn't a simple fix. There's no good way to do this (that I can think of) without rendering the legislation template a second time in a different block in the html.

Would it be easy to make that happen @techieshark?

@techieshark
Copy link
Contributor

I'm thinking basically we'd have to split the event_items array into in district and citywide items, then run this map call twice:

https://github.com/codeforamerica/MuniciPal/blob/master/app/assets/javascripts/updatepage.js#L175

We could split the items either in js (note that for any item, council_district_id will either be a number or null for citywide), or in the controller.

Does that seem workable?

@ardouglass
Copy link

It seems like it would work either way. The JS might be easier? I don't really know. I'm having a bit of trouble wrapping my head around what it's doing and how the specific templates are being rendered.

@techieshark
Copy link
Contributor

I'm not sure if this helps, but here's a brief description (in perhaps more detail than you need but hopefully enough to get other lurkers up to speed):

The line mentioned above is calling _.map() which is provided by lodash (sidenote: lodash is a project that one of the javascript hackers in Mesa–Blaine–helped write, and is functionally identical to underscore).

We call map to run a function on each item in the set of event_items (sidenote, normally you'd care about the output and use map to transform one array into another, but since we don't we should actually switch that map call to an each call).

For each event item, we take the item returned from the controller and build an EventItem javascript object (which returns itself) and then call the render method on that object and pass in the jQuery selector we want the render output attached to (in this case, .legislative-items):

  var event_item = new EventItem(item, data.attachments[i]).render('.legislative-items');

The render method builds up a mustache view object and asks mustache to render the html. We're then using jQuery to attach the html. Here's what that looks like, from app/assets/javascripts/legistar/legistar.js.

var itemHtml = Mustache.render(legislationTemplate, view);
$(container).append(itemHtml);

If you need to change the templates themselves, you can find all those in /app/views/layouts/_mustache_templates.html.erb.

Happy to answer any questions.

@techieshark
Copy link
Contributor

Here's a thought (below). I liked @michaelhwan's idea to make it more clear which items are in district vs citywide, and the image below takes that a step further by splitting the sets of items into two.

I'm wondering if we should take this even further by showing just in-district to start with, and then toggle the visibility of the citywide items somehow. Thoughts?

municipal-differentiate-district-and-citywide-items-sm

@techieshark
Copy link
Contributor

@ianmesa any thoughts on this?

@ianmesa
Copy link

ianmesa commented Nov 12, 2014

I like how you are proposing to separate the two sections with the distinct headers. Also agree it might be better/less cluttered to toggle the citywide items

Also, just another thought; I know we are starting to get a lot of icons, but Ive seen district items represented by an icon map of the district, and citywide items represented by an icon map of the city.

@techieshark
Copy link
Contributor

@ianmesa you've seen those icons somewhere? Can you send me an example or a link to where you've seen that? I'm not quite following what you mean.

Thanks!

@techieshark techieshark added ready and removed design labels Nov 14, 2014
@KHarshawat
Copy link

Spoke with Peter ... here's my feedback. I think you should go with the section headers and keep them on the same page (rather than having a toggle). I reasoned that there probably won't be as many items for the District -specific section so you should keep them on the same page.

I also suggested that the titles for the sections are similar. Either "Items in District 4" and "Items across the city" or "District 4 Items" and City-wide Items"

I would keep away from using "Being Discussed" -- it's passive text. Also, would consider changing "items" to something more descriptive like "Legislation", "Plans", "Issues" etc. Hope that helps!

@techieshark
Copy link
Contributor

That's great. Thanks @KHarshawat. I'll get on this.

@techieshark techieshark changed the title Need Thoughts on Visual Cues to Differentiate Citywide vs District Based Council Items Provide better visual distinction between Citywide vs District Based Council Items Nov 17, 2014
@techieshark techieshark removed their assignment Jan 9, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants