Note that in Ruby files this rule allows vertical alignment, but doesn't
seem to do the same in ERB. Since we only used vertical alignment in one
place, and that place also had an unneeded extra space on every aligned
line, I've decided to change the code in that place and follow the rule.
So now we remove duplication between .rubocop.yml and the rubocop rules
defined for erblint. Having the rules in two places led to some
mistakes, like renaming Layout/Tab to Layout/IndentationStyle in
`.rubocop.yml` but forgetting to do so in `.erb-lint.yml`.
This also means we can use the EnforcedStyle options for
Layout/SpaceInsideHashLiteralBraces in views as well.
We couldn't implement this feature earlier because it required Ruby 2.4
and due to incompatibilities between versions of erb_lint and versions
of rubocop.
There are some rules which do not apply to ERB files and so we're
disabling them.
* Layout/LineLength, Layout/TrailingEmptyLines and Lint/UselssAssignment
generate false positives
* Rails/OutputSafety is redundant since its functionality is already
covered by ERB Lint ErbSafety linter
Note this rule does still allow us to add new lines after opening tags;
it just makes sure that if we do, we also add it in closing tags.
Likewise, if we don't add it in the opening tag, it forces us not to add
it in the closing tag either.
I don't have a strong preference about either style; in these cases I've
chosen the latter because it seemed more common in our code.
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.
So now we've got a component receiving records (goals or targets) and a
related model (Debate, Proposal, ...), with optionally a link to see
more tags.
This way we simplify some logic since the `TagList` classes were dealing
with too many cases (a record is passed, a class name is passed, a limit
is passed), ... Now `TagList` only deal with the natural `TagList` case,
which is listing the tags for a record. The case where a class name is
passed is used in the `TagCloud` class.
Now we check the given record or name is a relatable instance or class
to avoid trying to render goals for records which don't have a goals
association.
Note for now we are ignoring the case where we pass a controller_path
for an unsupported class (for example, `legislation/proposals` or
`budgets/headings`) because we never use it. We might need to revisit
this case in the future.
Co-Authored-By: Javi Martín <javim@elretirao.net>
On commit 1a902a96 we removed this helper to make use of polymorphic
routes but when it's called for Legislation::Proposal fails as the
namespace does not match the model namespace.
Now we recover the removed helper but only the parts that do not work
with polymorphic_url helper.
Co-Authored-By: Javi Martín <javim@elretirao.net>
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.
We noticed there was a performance issue while browsing the SDG
Management section and when one of our tests started failing sometimes
because the request to the relations#index controller took too long.
The issue proved to be `SDG::Target#<=>`. This method calls `.goal` for
each target, meaning we were generating 169 database queries when
sorting all targets.
So we're comparing codes directly to minimize the number of database
queries and improve performance. Requests to the relations index take
now less than third of the time they used to take.
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.
We were doing the same tests three times to test the advanced search
feature. I'm grouping them in one place and shuffling the sections
around to remove duplication and make the test suite faster.
