We're going to add help content here and having a floating button would
make the button disappear when creating content for mobile phones.
I'm not sure having the link in the <header> tag is semantically
correct, but is consistent to what we did to create local targets in the
SDG content section.
Note we're changing the style of the link to create local targets so
it's consistent with the link to create budgets/groups/headings.
The color #fff provides higher contrast, which can cause problems to
users who experience migraines with bright colors or dyslexic users who
might see some kind of shadows around the text because of the bright
color.
So even if it isn't a big improvement, we're slighty reducing the
contrast in order to slightly reduce this problem.
It was hard to know where the numbers were coming from; they depended on
the padding of the link and the size of the notification icon size. So
we're using variables to make it more explicit.
However, the code is now too complex, so we'll probably have to simplify
it in the future.
Other than simplifying the view, we can write tests using `click_link`,
which makes the tests more robust. Clicking the `.icon-notification`
element was causing some tests to fail when defining a window height of
750 pixels in the `admin_budgets` branch.
Hopefully now it's a bit more obvious that SDGs can be selected by
clicking on them and that the field to select goals and the field to
select targets/goals are related (since they're now part of the same
fieldset).
We were using list items with the checkbox role. This is probably
confusing since list items have a listitem role, and so we were
basically using a list with no listitem.
We could add a `<span role="checkbox">` tag inside the list item, but
using real checkboxes is probably easier. We're also adding a test to
verify the checkboxes native behavior is compatible with our code.
Note we're using the "enter" key to toggle the "checked" status of the
SDG. This is probably not intuitive for screen reader users who might
try to submit the form using the "enter" key after selecting a goal.
However, the alternative would be even less intuitive for sighted
keyboard users, since for them these icons look like links or buttons
and they would accidentally submit the form when trying to select a
goal.
Since we haven't come up with a better interface yet, for now we're
following the principle of least damage; we consider submitting the form
against a user's will is less annoying than forcing users to move to a
different field before being able to submit the form.
Also note we can't write `check` in the tests because Capybara will try
to click the checkbox, which is hidden by the image in the label.
These styles were broken in commit 2614de79c, since there we only
considered scenarios where the `tags` element is a list. In these forms, however, the `tags` element is a regular <div> tag.
Since we've changed the facebook and twitter login icons, it makes sense
to use the same icons in social share links.
Besides, using font-awesome simplifies the code and prevents problems
with screen readers announcing the value of the `content:` CSS property.
We were using the icon for google plus, which was confusing since google
plus no longer exists.
Note this change requires changing the font for these icons, since the
google icon is not present in the "icons" font. On the plus side, using
the font awesome icons we can simplify the code a little bit.
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.
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.
