In this case, the duration of the budget cannot be determined, and the
application was crashing when trying to do so.
Now we're just returning `nil` as duration.
There's an edge case where the current phase of the budget was disabled.
In this case, the application was crashing.
I'm not sure what we should do regarding this case. Is it OK to allow
disabling the current phase? Is it OK to allow selecting a disabled
phase as the current phase?
Since I'm not sure about it, for now I'm leaving it the same way it was.
Co-authored-by: Julian Herrero <microweb10@gmail.com>
In commit 905ac48bb we activated exceptions when assets were not found,
in order to detect places where we were trying to load non-existent
images.
We got an exception for that reason: we were loading images based on the
current locale, but for some locales there was no images.
We're now using fallbacks and loading another image when the original
one isn't available.
Note we're copying the English images to images with a generic name for
the case where there's no fallback with an image. We're copying the
files instead of using symbolic links to make sure they can be
overwritten independently in other CONSUL installations.
Also note we're updating the HTML so the section gets the ID instead of
the header. That way the system test is simple.
Before commit 28caabecd, it was clear which budgets were in draft mode
because their phase was "drafting".
Now the phase isn't "drafting" anymore, so we have to make it clear
somehow that the budget is a draft.
I'm using styles similar to the ones we added in commit 2f636eaf7 for
completed budgets but at the same time making them slightly different so
it's easy to differenciate completed and drafting budgets.
Using `<a>` tags with no `href` means these elements cannot be activated
by keyboard users, so we're replacing them with buttons.
In the future we probably want to add more consistency so all toggle
buttons use the same code. We might also add styles depending on the
`aria-expanded` property.
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.
Now it's easier to change the investments filter. Previously we had to
go back to the budget index page, change the filter there, and then
select one heading.
Now the links to change the current filter in the budget index page
aren't needed anymore.
Since we were using an icon font with no text, screen readers were
announcing things like "Enabled, L", trying to read the icon generated
with CSS.
Using text and replacing it with CSS with an icon solves the problem.
We could also use aria-label, but I prefer using "Yes/No" so the text
can be shown/hidden with CSS. Also useful when using
`save_and_open_page` during tests, since the displayed page will not
have any CSS rules applied.
Out of several existing techniques to hide text [1], we're setting the
font size to 1px in combination with moving the content off-screen
because that way we can override it in the `::before` element.
Just moving the content off-screen has the inconvenient of the content
still being taken into account when calculating the text indentation.
And just using a 1px font would make a 1px-sized square appear when
selecting text, which could confuse users.
[1] https://webaim.org/techniques/css/invisiblecontent/
We're going to change it a bit, and using a component allows us to use
the `header` method and easily add a title to this page, which lacked
the `<title>` tag.
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.
This makes the table easier to identify when writing tests and using
screen readers.
Since we do not render any other table captions anywhere else, we're
making the caption invisible so only screen reader users will be
affected by this change.
While trying to add the target="_blank" to this link I noticed that this attribute
no longer works in some places in the application, such as the terms and
conditions link in the sign_up page.
For the time being I think we can resolve it this way in this case and deal with
this issue in a separate PR.
In this page we will render a list of clickable Goals icons that will show their
targets and related local targets
Co-authored-by: Senen <senenrodero@gmail.com>
This component was rendered on different pages so there were no conflicts
with static id's.
Now in the SDG help page we are going to render them all at once, so we
convert the static identifiers to dynamic.
