The key was declared twice and so the first one ("Support this project")
was overwritten.
We're grouping all keys related to the investment list together in order
to reduce the chances of this issue happening again (or, at least, in
this part of the code).
An image without an alt text is invalid HTML and is confusing for screen
reader users.
This is just a quick patch which partially solves this problem. The
image doesn't necessarily need to be a decorative one, so administrators
should have the option to provide an alternative text for the images.
Note one of the tests dealing with random results is a bit flaky; since
it's a permutation selecting 7 objects out of 12, it will fail about
once every 4 million times. We think this is acceptable.
Co-Authored-By: Julian Nicolas Herrero <microweb10@gmail.com>
- Allow to define a link (text and url) on budget form for render on the budget
header.
- Improve styles
Co-authored-by: Senén Rodero Rodríguez <senenrodero@gmail.com>
Note we're absolutely positioning the link instead of the icon; that way
keyboard users will be able to focus on the icon. Until now, users would
focus on an empty link.
For the same reason, we couldn't use `click_link` with Capybara, since
it would fail to click an empty link. Now we can.
Co-authored-by: Javi Martín <javim@elretirao.net>
There was a big difference between the current budget and a specific
budget landing page. This didn't really make too much sense. Also, it
was not possible to know how a draft participatory budget will look
before it was published.
By unifying those two views now they will look quite similar and it
will be possible for administrators to preview any draft budget and to
know how the budget will look like before actually publishing it.
Using the name instead of using the name and the price is IMHO more
consistent with the rest of the application, particularly for screen
reader users. Writing texts clicking those links is also easier.
I think the main reason why we used the price as part of the link was so
the clickable area was bigger. We can accomplish the same result with
CSS.
Using flex we don't have to rely on JavaScript to equalize the item.
Besides, we've had problems with JavaScript in the past.
We're also adjusting the width of the elements; previously, even though
we defined a width of 16.666% for each element, only five elements would
be on the same row. It happenend because these elements were styled with
inline-block and the generated HTML contained a newline character
between <li> tags, meaning a space character was introduced between
elements. The width of the mentioned space character wasn't being taken
into account when calculating the width.
Using flex, there's no space character between items and we have to
define the margin between them. We're taking this margin into account
when calculating the width.
Currently this change is barely beneficial (if at all), but it doesn't
harm and might be useful in some cases. For instance, the `datetime`
attributes generates a date containing time zone information, which the
text shown on the screen does not, and styling dates with CSS is now
easier.
