We were using a custom icon because in the past social-share-button
didn't have support for whatsapp. But now that it does, we can remove
our custom icon.
Note we're using the `_app` suffix because that's the name of the icon
meant for mobile devices.
This rule was added so the tag list wouldn't have an extra bottom
margin. However, the rule is already applied by the `.tags` selector
inside `.budget-investment` and it was conflicting with other lists
(goals and tags) we've added to thi investments index.
I'm not sure why we were using squares to style these lists see commit
bbacd4546b) but I don't think it's very important and it breaks
displaying the list of related SDGs.
Now the tag list can render tags with or without links, so we need
to adapt the styles slightly.
We want to use the same text color for tags without links.
The hover style is only needed when using tags with links.
On these screens, sometimes the icons will be `$sdg-icon-min-width`
wide, but the margins were not taking this into account.
We can use CSS `max` function to set minimum margins just like we set
minimum width. However, there are two things to take into account:
* LibSass does not support these functions as it tries to use Sass own
functionst at compile time, so we need to hack them writing `Max()`
(which works in CSS because it is not case sensitive)
* Not all browsers support it (90% at the time of writing), so we write
the rules twice (the first time for browsers not supporting it); we
could use `@supports` but then we would have to overwrite some of the
rules in the `.sdg-goals-index .sdg-goal-list` selector using
`!important` or adding a `@supports` clause there as well
We're also using a percentage to separate the icons, since using the
viewport width causes strange result on screens where the element
max-width (which is based in rem) is much smaller than the size of the
window.
We were using the classic approach of adding a margin-right property to
all elements except the last one. This works great when all icons are
displayed in one row.
However, when they're displayed in several rows, there could be a
scenario where the last row has more elements:
element1 <margin> element2 <margin>
element3 <margin> element4 <margin> element5
In the example above, `element3` does not fit in the first row because
it's got a margin to its right. However, `element5` fits in the second
row because the last element has now right margin.
One option to fix this issue it using CSS `gap` property. However, at
the time of writing, it's only supported by 70% of the browsers.
So we're emulating the gap by giving a negative margin to the list
equivalent to the margin of the first element.
This idea is based on:
https://coryrylan.com/blog/css-gap-space-with-flexbox
The exception is the index page. Here the list of icons is centered with
`margin: auto`, and so we cannot use negative margins. We're using the
classic approach instead, which is fine because we define there are 6
icons per row.
These icons share page with the social media icons (eg: ssb-twitter)
in both the index and the show pages
We believe we gain consistency if all the icons that appear are the
same size.
Pull request 4101 will use this width in social media icons as well.
Note we're using both the `hidden` and `disabled` properties to
guarantee compatibility with user agents which might still display the
option even when using the `hidden` attribute or hiding it with
`display: none`. We could also use `hide()` and `show()` instead of the
`hidden` property, but since we're using the `disabled` property, I
thought the code would be easier to read if we used properties in both
cases.
Also note users will no longer be able to get, let's say, debates which
are related to goal 1 and target 2.1. We think this use case is highly
unlikely and there's no need to take it into account.
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.
In the spec we added in system/sdg/goals_spec.rb we couldn't use
either click_link or find_link, because the link to show/hide the
long description doesn't have the href attribute.
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`.
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.
There are no links inside a figure-card, so these styles didn't affect
any elements.
There are also no elements with `.title`, and the h3 inherits the white
color automatically form the figcaption.
On the other hand, the .see-all link is not inside an element with a
`card` class since commit fae52274a.
The default behavior for headings is to inherit the color, even in the
`:hover` style, and IMHO we can keep it this way, particularly in the
cards, which is the main place where we use headings inside links.
