When a proposal had geozones, it was a bit strange to have a list of
tags, then a list of SDGs, and then another list of tags. So we're
changing the order a bit.
This way we'll be able to add targets as well. Besides, having two
classes in the CSS selector will allows to overwrite styles such as
`.debate-show ul li`.
On the other hand, we need to add a stylesheet for the filters as well.
This way we generate the same HTML as we generate everywhere where we
manually generate lists of links. Having a blank space betwwen tags
results in a space being introduced when the elements are displayed
inline (or with `inline-block`).
So in places where we don't want that space between the elements we have
to use a flex layout.
This way we won't have to add the `inline-block` and `no-bullet` classes
to other elements and we can define the styles in one place.
Note we're using the `ul.tags` selector instead of just `.tags` to avoid
conflicts with a `div.tags` selector which is used to select tags in a
form. Renaming the selector to `.tag-list` would be better, but we
aren't doing so because it would break custom stylesheets using that
selector.
Also note we're keeping the %tags placeholder selector in `.tags`
selector in the participation.scss file. This is so styles are not
overwritten by selectors like `.debate-show ul li`, which has the same
specifity as `ul.tags li`.
Having the date at the beginning makes it less weird to select a custom
date now that we don't have enough space to display the "from" and "to"
date selectors in different columns.
This is similar to what we do with investments, which belong to a heading
but also belong to a budget. In our case, the reason is we've been asked
to add local targets which belong to a goal but are not related to any
existing target.
Even though we're not implementing that case right now, we're adding the
relation so we don't have to add data migrations in the future.
To make it easier to add the component to the front pages forms and
avoid introducing redundant classes we add the necessary padding
(@include grid-column-gutter) to make it behave like the rest of the form
fields.
Note that for the sdg management section we set this value to 0.
Render the tags under the input. This way the input is not moved down
when a tag is added.
Render icons under the label. As you can add tags by clicking on the icons,
in this way the input is more related to the icons.
Add "display_text" to allow customize the text that we want render on tag.
For Goals we render "SDG1", "SDG2"..
For Targets we render the code "1.1", "1.A"...
- When we click on an icon we add a new tag with the Goal related to the input or
we remove the tag when that label already exists.
- Manage goals icons status when add or remove related targets:
Whenever there is a tag related to Goal, either the Goal itself or a Target, the icon
will be "checked".
When there is no related Goal or Target it will no longer be marked as checked.
This will allow autocomplete for the loaded values in suggestions settings.
We remove commas on tag to allow to jquery.amsify.suggestag.js use comma
as delimiter.
This component allows you to add Goals and Targets in a single
input to relate it to any resource.
We use the new added library to render them as tags.
Now the banner component accepts either a banner or a section and loads
the banner if it's a section, so we don't have to add the `@banners`
variable in several controllers.
