Provide better visual distinction between Citywide vs District Based Council Items

[tbuckl]

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

[tbuckl]

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)

[techieshark]

@ardouglass, want to look at this?

[ardouglass]

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]

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]

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]

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]

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?

[techieshark]

@ianmesa any thoughts on this?

[ianmesa]

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]

@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!

[KHarshawat]

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]

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