Add icons for tags in DemocracyOS

[jaakkokorhonen]

https://github.com/DemocracyOS/app/wiki/How-to-add-new-tag-images
@jayapapaya can you supply a list of tags and icons?

[jayapapaya]

Tags (derived from guanyem commissions):

Economy
Education
Health
Culture
Immigration
LGBT
Information Society
Work, precarity and poverty
Housing, mobility and public Space
Participation, local government and transparency
Security

Link to svg files: https://www.dropbox.com/sh/qu35v6l0wljz1zh/AAD-od3lWvX8IVATp0ZwsJEOa?dl=0
(still adding)

@jaakkokorhonen do these more or less correspond to what is needed in Finland? Issue is they have grouped some things together (eg work/poverty and mobility/public space etc) which might or might not work for others. I have timed it to finish these eleven categories though, so any additional ones will have to wait ...

In Catalan:

Economia de la ciutat
Educació
Salut
Cultura
Immigració
LGBT
Societat de la informació
Treball, Desigualtat, Precarietat i Pobresa
Habitatge, mobilitat i espai públic
Govern local, transparencia y participació
Seguretat i Drets Civils

[jaakkokorhonen]

No. And these are not used in Guanyem. Will they be? Up to Joonas if he wants to see this in the Helsinki pilot.

[jayapapaya]

well, guanyem were the one's who had originally asked for them, so I hope they will be implemented!

will ping Toret tomorrow (Friday) let him know what is up.

@jaakkokorhonen will you let Joonas know? and have him get in touch if he needs any modifications.

[jayapapaya]

@gvilarino I followed all the steps from here https://github.com/DemocracyOS/app/wiki/How-to-add-new-tag-images and then went here http://democracyos-dcent.herokuapp.com/admin/tags/create ... but I can't see any images to chose from when creating a new tag, and can't edit any of the existing tags to change their images. After adding the files and editing the json and js file, what do I do next? Thanks

[gvilarino]

@jayapapaya did you push your new code to the server?

[jayapapaya]

@gvilarino I added the new svgs to the folder on github and then edited json and js straight via the github browser-based editor... https://github.com/d-cent/democracyos-dcent/tree/master/lib/tag-images

is that all correct?

When in the admin panel - I can't see any of the old images either. there are just some blank circles to chose from.

Where do I edit old tags, i.e. associate them with new images?

[gvilarino]

@jayapapaya is this all on your local instance or on the dcent online demo?

[jaakkokorhonen]

Ping @joonasp.

[jayapapaya]

@gvilarino here https://github.com/d-cent/democracyos-dcent - assumed that was the D-CENT online demo?

[gvilarino]

That's the codebase for the demo. You have to deploy that to heroku in order for changes to be available at http://democracyos-dcent.herokuapp.com

[jayapapaya]

don't have log-in/ credentials for herokuapp and have not yet worked with it. @jaakkokorhonen ?

[gvilarino]

@jayapapaya I'll push this as soon as I get a second; gotta finnish something

[jayapapaya]

Nice one - thanks @gvilarino

[gvilarino]

@jayapapaya you didn't push any code to any branch or made any pull requests. Could you please make a PR? I can't push no changes :)

[jayapapaya]

@gvilarino :( But I did! Am not very used to using github, so I might not have done it in the right sequence. but I made commits to the master, which should all be there: d-cent/democracyos-dcent@63a6adf...master

[gvilarino]

@jayapapaya that is not the repo we've been using and updating for the dcent-demo; you should make a PR to https://github.com/d-cent/democracyos

[gvilarino]

Actually that repo is absoluely outdated; I'll delete it if it's ok with you @jaakkokorhonen

[gvilarino]

By the way, @jayapapaya, pull requests should always be done against the development branch; never master.

I'll incorporate your commits to d-cent/democracyos-dcent into d-cent/democracy this time; no worries.

[gvilarino]

@jayapapaya for further reference please read the contribution guidelines; that should cover most of what's unclear about how to contribute code to this github repo.

[gvilarino]

Ok, everything is updated and deployed in http://democracyos-dcent.herokuapp.com

@jayapapaya your commits weren't compiling; I had to do a lot of manual fixing there. Were you able to run those changes locally? If so, how?

[jayapapaya]

@gvilarino hmmm, what needed to be fixed? In terms of implementing I simply followed your steps, assuming it would be pretty straightforward.

A couple of issues:

• The icons look like they have been made smaller. Can we make them larger?
• The admin cannot see which icons are chosen for which tag, am assuming because they are white, and there is no background colour set for the icons in the admin interface. Possible to either set a background so one can actually see which icon is being selected? Alternatively, to drop the polygon background and reload the icons as black instead?

(If I know a bit more what fixes you had to do, I might be able to help sort some of this...)

[jayapapaya]

@gvilarino design-wise, preferable to drop the polygons and have the icons in black actually. Let me know if possible and I will upload a set of black svgs.

[gvilarino]

Mainly lib/tag-images/index.js wasn't right; see my final version in my commit: 038323e3a6ce778ec1f7502ba60a1184967439c9

@jayapapaya you may add any kind of svg you like; you just need to test locally if they look good. Keep in mind that the hexagon will get drawn in the background, tinted with the color in the color property in the tag object (optional)

[jayapapaya]

@gvilarino haven't installed DOS locally - sorry, don't have the capacity to do that here, which was why I was hoping the process was fairly straightforward so that I could do the necessary tweaks.

@jaakkokorhonen any chance of someone making the hexagons white (ie, invisible)? So that we can just have the black icons there as they are not designed to have the hexagon around them, and also then the user can actually see what icons they are chosing for which tag, as right now it is just a series of white circles: http://democracyos-dcent.herokuapp.com/admin/tags/5417397efa4836b7323893d7

Finally, the icons are too small. Where/ how can this be corrected?

[jayapapaya]

@jaakkokorhonen @saariokari if you could let me know if hexagons can be made white (invisible)?
Then I can go ahead and upload black icons...
from: https://www.dropbox.com/sh/tua6qczw05zfg0c/AADQl8bQ62j4Go7kwVAkt5hca?dl=0

[saariokari-xx]

Hmm. Adding this snippet "article.proposal .entry-tag .hexagon { visibility: hidden; }" to custom.css in lib/style/ might just do the trick.

[gvilarino]

@saariokari you can add the .hide class to any element in the whole app and it will make them hidden ;)

[saariokari-xx]

Added hide class and created pull request.

[jayapapaya]

@saariokari need help creating PR for the black icons... the commits:

d-cent/democracyos@f0fc569
d-cent/democracyos@a2d7838
d-cent/democracyos@e391737

[jayapapaya]

@gvilarino How can we make the icons larger? thanks

[gvilarino]

You should toy around with CSS values of course. For example with article.proposal .entry-tag img, but it depends on how you want them to look.

[jayapapaya]

@gvilarino am just looking to make them larger

@saariokari any chance you could help? am looking to have the icons ideally 90px high in the body, and 45px in the left sidebar.

[saariokari-xx]

I'll check this too today or tomorrow latest.

[jayapapaya]

@saariokari thanks - ping me if there is a problem pls :)

[saariokari-xx]

Added styles (articles did not show on my local machine, had to use finnish demo site tags as a reference). Pull request made.