Commit Graph

2326 Commits

Author SHA1 Message Date
cyrillefr
03c6d9156f Fix lint/style offenses 2025-03-27 16:19:26 +01:00
cyrillefr
9d0214374b Replace link with button in ballot investment component 2025-03-27 16:19:26 +01:00
Javi Martín
2239b8fdca Remove obsolete questions index in the admin area
We removed the link to this page in commit 83e8d6035 because poll
questions don't really make sense without a poll.

However, this page also contained information about successful
proposals, which might be interesting so administrators don't have to
navigate to the public area in order to find and create questions based
on successful proposals.

So we're keeping the part about successful proposals and linking it from
the proposals part of the admin area.

Note we're using translation keys like `successful_proposals_tab`, which
don't make sense anymore, for the successful proposals. We're doing so
because we've already got translations for these keys and, if we renamed
them, we'd lose the existing translations and our translators would have
to add them again.

Also note we're changing one poll question test a little bit so we
create the question from a successful proposal using the new page. There
are other tests checking how to create a question from the
admin/proposals#show action and other tests checking what happens when
accessing a successful proposal in the admin section, so we don't lose
any test coverage by changing an existing test instead of adding a new
one.

Finally, note that we've removing the `search` method in poll question
because we no longer use it. This currently makes the
`author_visible_name` database column useless; we aren't removing it
right now because we don't want to risk a possible data loss in a patch
release (we're about to release version 2.3.1), but we might remove it
in the future.
2025-03-26 16:42:04 +01:00
Javi Martín
4732817360 Remove obsolete icons-related CSS
These rules aren't used since commit c5c9efee1.

Note that there's still an `icon-budget` element in the
`_investment_show` partial. The rules for this icon are already defined
inside the rules for the `.budget-investment-show` selector.

The `icon-budget` and `icon-proposals` HTML classes are still used in
the "Following" tab (the code uses the `followable_icon` method), but in
this case the `.budget-investment` or `.proposal` selectors aren't
present, so the properties weren't applied here either.

Similarly, there are elements with the `icon-debates` and
`icon-proposals` HTML classes in the dashboard area, but they aren't
inside elements matching the `.debate` or `.proposal` selectors either.

And there's an element with the `icon-debate` HTML class in the
legislation area. Once again, it isn't inside an element matching the
`.debate` selector.

So can safely remove this code.
2025-03-26 16:42:04 +01:00
Javi Martín
1389d45646 Simplify like/unlike buttons styles on small screens
Since we're now using a flex layout, the styles are more robust when we
keep the percentages below each button even on small screens.
2025-03-07 16:00:41 +01:00
Javi Martín
11816f833d Use a flex layout to render participation processes lists
This way we simplify the HTML, which had some `if...else` blocks that
were hard to follow because there were opening tags inside these blocks
while the closing tags were outside these blocks.

We're also making the CSS container-dependent instead of
window-dependent. Since there are between one and three elements inside
the panel, we accomplish this by making the element with the content
take its own line if the width of the panel is smaller than 35rem.

Note we're trying to keep the layout similar to what it was; since we're
no longer using negative margins (like the ones in the `.row` selector),
the votes element now gets a width of 22.5% instead of 25%.

Also note we're using the column-gap property for flexbox because the
`flex-with-gap` mixin doesn't work so well with elements that have
borders. Since the column-gap property for flexbox is now supperted by
more than 98% of the browsers (which wasn't the case when we started
using the `flex-with-gap` mixin), the `flex-with-gap` mixin has become
obsolete.

Finally, note we're removing the `max-width: 12rem` rule in the images.
I'm not sure why we introduced this rule in the first place, and it
didn't play so well to the new layout. I considered using code like
`max-width: min(100%, 12rem)`, but, since I'm not sure why `12rem` was
there in the first place, I'm not sure whether this approach was better,
and it sure made things more complex.
2025-03-06 18:49:39 +01:00
Javi Martín
6b81799cf9 Remove redundant CSS rule
The exact same rule was already present in the block preceding it.
2025-03-06 18:27:29 +01:00
Javi Martín
b7c07e804e Remove border in proposals and debates supports
This way, it's consistent with the investments list, where we don't use
a border in the elements used for supporting or voting investments.
2025-03-06 18:26:33 +01:00
taitus
e094dc17d6 Remove unused CSS
* The `gender-and-channel` class isn't use since commit e3063cd24f
* The `first-comment` class added in commit e5fb90f954 was never used
* The `additional-info` class added in commit d47ce39b37 was never used
* The `title-quote` class isn't use since commit f317514258
* The `big-number` class added in commit aa1ed87725 was never used
* The `big-number-stat` class isn't used since commit cf32dcd6d5
* The `budget-investment-amount` and `budget-investment-description`
classes added in commit 4ade8325d7 were never used
* The `debate-quiz` class isn't use since commit d679c1eb79
* The `enquiries-list` class isn't use since commit 6aa96c4471
* The `investment-project-content` class isn't use since commit d0b8fef6b3
* The `leave-comment` class isn't use since commit ff6285d114
* The `poll-question-show` class isn't use since commit 8277e3cc2b
* The `questions-callout` class isn't use since commit ddf8d5f811
* The `budget-investments-inner` class isn't used since commit c6a9ffc19
* The `map-attributtion` class isn't use since commit 5a09b79da4
* The `postfix` class isn't use since commit 3752f3a53b
* The `translation-locale` added in commit a6e8fecc16 was never used
* The `changes-link`, `comment-advice`, `show-comments` and `comment-votes-number`
classes aren't use since commit d679c1eb79
2025-03-05 17:24:53 +01:00
Javi Martín
f460d3bc31 Add and apply function-calculation-no-interpolation rule
This stylelint-scss rule is useful because we were inconsistent when
using calc(); sometimes we added interpolation to Sass variables, and
sometimes we didn't. The reason why we originally added interpolation
was that it was necessary until we migrated to Dart Sass in commit
d54971e53. Since then, we can omit the interpolation, which is also what
the Sass documentation recommends [1].

[1] https://sass-lang.com/documentation/values/calculations/
2025-03-05 14:39:16 +01:00
Javi Martín
a60926c44b Fix wrong icon position in form header
We made a mistake when adding the `calc()` function in commit 6df813fdb,
since the `/` operator originally only affected the `$heading-icon-size`
part of the operation, but affected the whole operation after that
commit. This caused the icon to be positioned on top of another icon.
2025-03-05 14:34:40 +01:00
Javi Martín
cddce21f7b Simplify calc rules with rem-calc inside
The interpolation of the rem-calc function made the code harder to read.
Besides, for new code we've already agreed upon using rem units instead
of `rem-calc`.

For instance, we had the following code:

```
width: calc(100% - #{2 * rem-calc(10)});
```

Now, `2 * rem-calc(10)` is the same as `rem-calc(20)`, but we were using
`2 *` to make it clear that this value was related to the value of the
`margin-left` property, which was `rem-calc(10)`.

IMHO using `0.625rem` for the margin and `2 * 0.625rem` for the width
the code is easier to read because there are no interpolation and no
complex operations involved.
2025-03-05 14:34:40 +01:00
Javi Martín
f3fe1ac6c1 Fix Sass warnings in divisions without calc()
We forgot to add the `calc()` function in commits 4c0b6455f, 390c749d2
and dc54fda71.

We were getting a warning when compiling the assets without the
`quiet_deps` option:

```
DEPRECATION WARNING: Using / for division outside of calc() is
deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($line-height, 3) or calc($line-height / 3)

More info and automated migrator: https://sass-lang.com/d/slash-div
```
2025-03-05 14:34:40 +01:00
taitus
7c48ba0116 Do not display the cookie banner when JS is disabled 2025-01-23 17:16:57 +01:00
taitus
018b00cd6e Allow managing versions of cookies consent
This can be useful when adding a new cookie or making
modifications that require asking the user again.
2025-01-23 17:16:57 +01:00
taitus
7407c386a6 Render third party cookies in the management component
Set cookie duration to 365 days based on the AEPD's cookie usage guidelines.

Note from the document: "Cookies with a duration of up to 24 months are
considered acceptable as long as they are periodically updated."
Reference: https://www.aepd.es/guias/guia-cookies.pdf
2025-01-23 17:16:55 +01:00
taitus
dc54fda71b Allow accepting all cookies in consent banner and management component
Create cookie consent "all" when accept all cookies

Set cookie duration to 365 days based on the AEPD's cookie usage guidelines.

Note from the document: "Cookies with a duration of up to 24 months are
considered acceptable as long as they are periodically updated."
Reference: https://www.aepd.es/guias/guia-cookies.pdf
2025-01-23 17:03:30 +01:00
taitus
390c749d24 Add switch to management component for essentials cookies 2025-01-23 16:48:55 +01:00
taitus
c95c80dc32 Create a new component to render checkboxes as switches
https://get.foundation/sites/docs/switch.html
2025-01-23 16:48:55 +01:00
taitus
d35455624f Allow accept essential cookies from management modal 2025-01-23 16:48:55 +01:00
taitus
119c4202fe Allow accessing to management modal from cookies consent banner 2025-01-23 16:48:55 +01:00
taitus
5d590a0aee Add modal management for show essential cookies information
Note that in order to avoid display duplicated vertical scroll when
render a modal, we are add an `overflow: unset` rule. This rule
overwrite a vendor rule both in the modal we are adding and in the
modal we already have when creating a budget in admin section.
2025-01-23 16:48:55 +01:00
taitus
0ef7f9f1fa Extract close button definition to mixin 2025-01-23 16:48:54 +01:00
taitus
1958a77842 Allow accept essential cookies from consent banner
Set cookie duration to 365 days based on the AEPD's cookie usage guidelines.

Note from the document: "Cookies with a duration of up to 24 months are
considered acceptable as long as they are periodically updated."
Reference: https://www.aepd.es/guias/guia-cookies.pdf
2025-01-23 16:48:53 +01:00
taitus
4c0b6455f6 Add cookies consent banner
Allow enabling from settings admin section.

Note that we set the z-index to 20 in order to will be greater than
the others z-index elements in the application like <header> on
mobile devices.
2025-01-23 16:05:40 +01:00
Javi Martín
e5bfb92564 Compile admin CSS in a different stylesheet
With this change, on my browser, reloading a page in development after
changing a CSS file is about 25% faster than simply splitting the CSS
code between `application.css` and `vendored.css`. Compared to using
only one `application.css` file containing everything, reloading a page
in development is about 35% faster.

The combined size of all the generated stylesheets is now about 0.5%
bigger. Not sure why (maybe placeholder selectors?), but the difference
is negligible.

Note that we could load the `administration.css` file only in the admin
area, reducing the size of the page for people accessing the public
area. However, the size of this stylesheet (compressed) is 28K, which is
less than 3% of the overall size of a page and, on the other hand,
there's a risk of some styles no longer being applied because we might
have overlooked the fact that some styles in the `administration.css`
are also applied to the public area.

So, for now, we're still loading the administration styles in the public
area. We might reconsider in the future.
2025-01-08 16:37:43 +01:00
Javi Martín
4646c056a7 Compile vendored CSS in a different stylesheet
With this change, on my browser, reloading a page in development after
changing a CSS file is about 10%-15% faster.

On the minus side, this change results in an extra request when browsing
the page; AFAIK it isn't that big of a deal, even when the server isn't
using HTTP/2.
2025-01-08 16:27:52 +01:00
Javi Martín
b6ffeeca62 Move styles from admin to layout
These styles are used in places other than the admin section. In
particular, the `.button.small.success` style is no longer used in the
admin section but only in the verified user form.

Note: I'm not sure whether the `table .callout` selector matches any
element, either in the admin or in the public section, so I'm leaving it
where it was.
2025-01-08 16:27:43 +01:00
Javi Martín
111516f660 Move stats styles to the stats stylesheet
These styles aren't only used in the admin section but also in the
public stats page.
2025-01-08 16:20:37 +01:00
Javi Martín
b3588b1865 Remove no-margin-bottom HTML class
It was only used once, and we can use a selector that makes it obvious
where it is used. Besides, the style for the no-margin-bottom class was
to remove the bottom margin, which was inconsistent with the style for
the no-margin-top class, which adds a negative margin to the element.

I'm not sure why we're removing the margin here, though, since it isn't
consistent with the rest of the forms in the application. For now, we're
keeping it the way it used to look.
2025-01-08 16:20:37 +01:00
Javi Martín
02aac86b04 Move edit password manually view to a component
We're restructuring the CSS of the admin stylesheet, and there was a
rule that is only applied to this component.
2025-01-08 16:20:37 +01:00
Javi Martín
0657749ead Remove unused CSS in admin stylesheet
* The `archived` class isn't used since commit cd982768f
* The `ignored` class isn't used since commit 343025872
* The `count-error` class isn't used since commit bddfee2b8
* The `edit-legislation-draft-version`, `edit-legislation-process` and
  `legislation-questions-answers` classes aren't used since commit
  d679c1eb7
* The `legislation-process-save`, `legislation-question-delete`,
  `legislation-process-version` and `legislation-process-question`
  classes aren't used since commit f8707a73cd
* The `is-featured` class isn't used since e60ffa3c0
* The `on-hover` and `on-hover-block` classes aren't used since commit
  d91388b2b
* The `total-price` class isn't used since commit d0b8fef6b
* The `login-as` class was never used in the first place
2025-01-08 16:19:44 +01:00
Javi Martín
89ffec2b87 Fix typo in investments stylesheets folder name
The styles were being loaded anyway because we use `budgets/**/*` to
load the stylesheets related to budgets.
2025-01-08 16:10:05 +01:00
CoslaJohn
624e60eab9 Added layer control to map to allow each geozone display to be toggled on/off
Note we're adding a `name` property to the geozones investments sidebar
map even if we don't render the geozones in the map, in order to
simplify the JavaScript function `geozoneLayers`.
2024-12-23 17:35:33 +01:00
CoslaJohn
cb8b0ad6ff Support different colors and headings on each feature
We're making sure each feature contains properties in order to avoid
possible JavaScript errors.

We're also adding a default color to a geozone.
2024-12-23 17:35:33 +01:00
CoslaJohn
5dbe2cbf24 Support FeatureCollection and MultiPolygon in geozones
We're reworking the format validation to correctly interpret feature
collection, feature, and geometry, according to RFC 7946 [1].

Since Leaflet interprets GeoJSON format, we're rendering the GeoJSON as
a layer instead of as a set of points. For that, we're normalizing the
GeoJSON to make sure it contains either a Feature or a
FeatureCollection. We're also adding the Leaflet images to the assets
path so the markers used for point geometries are rendered correctly.

Note we no longer allow a GeoJSON containing a geometry but not a
defined type. Since there might be invalid GeoJSON in existing Consul
Democracy databases, we're normalizing these existing geometry objects
to be part of a feature object.

We're also wrapping the outline points in a FeatureCollection object
because most of the large GIS systems eg ArcGIS, QGIS export geojson as
a complete FeatureCollection.

[1] https://datatracker.ietf.org/doc/html/rfc7946

Co-authored-by: Javi Martín <javim@elretirao.net>
2024-12-23 17:35:33 +01:00
Javi Martín
ddaf320d8a Add proper labels to shift date selectors
We were using one label for both date selectors, but it wasn't
associated with any of them.

So we're now rendering one label per control and, just like we only show
one of these date selectors at a time, we're only showing one label at a
time.
2024-11-12 15:58:26 +01:00
Javi Martín
ee34ead4ee Move poll shifts form partial to a component
Thanks to it, we can move a few helper methods to the component.
2024-11-12 15:17:16 +01:00
Javi Martín
4102330abc Add labels to investments filters
Note that adding the labels broke the layout because the button was no
longer aligned with the fields, so we're now using a flex layout.

Since we're using labels, we no longer need a placeholder (which wasn't
very informative, by the way) in the text field.
2024-11-11 15:04:40 +01:00
Javi Martín
670f4515ab Remove obsolete HTML class in advanced filters button
The `clear` class isn't needed since commit c9f31b8e1, when we moved
this button above the regular search fields.

We're also moving the `float` property to the CSS file.
2024-11-11 15:04:40 +01:00
Javi Martín
29968d1d9f Use a button to toggle advanced filters
As mentioned in commit 5311daadf, there are several reasons to use
buttons in these situations.
2024-11-11 15:04:40 +01:00
Javi Martín
c28ff49f10 Move investments search form partial to a component
As a bonus, we now have a few less helper methods :).
2024-11-11 15:04:40 +01:00
Javi Martín
1cefc040a7 Add labels to the search form in the management area
The text for the unfeasible checkbox wasn't correctly defined as a
label, while the fields to search investments and select the heading
weren't intuitive since their purpose wasn't obvious.
2024-11-11 15:04:35 +01:00
Javi Martín
87a5dd8ee5 Use a button to mark debates as featured
As mentioned in commit 5311daadf, there are several reasons to use
buttons in these situations. And, as mentioned in the previous commits,
using buttons instead of links for actions requiring confirmation will
help us test for accessibility issues.
2024-11-08 13:24:23 +01:00
Javi Martín
68744f110e Use CSS to add separators to the debates featured action
Just like we do in the moderation actions displayed next to id.
2024-11-08 13:24:23 +01:00
Javi Martín
d85a87a517 Use a button to delete surveys
As mentioned in commit 5311daadf, there are several reasons to use
buttons in these situations. And, as mentioned in the previous commits,
using buttons instead of links for actions requiring confirmation will
help us test for accessibility issues.
2024-11-08 13:11:02 +01:00
Javi Martín
11ef917802 Use a button to delete comments
As mentioned in commit 5311daadf, there are several reasons to use
buttons in these situations. And, as mentioned in the previous commits,
using buttons instead of links for actions requiring confirmation will
help us test for accessibility issues.
2024-11-08 13:01:01 +01:00
Javi Martín
891333abed Use a button to hide recommendations
As mentioned in commit 5311daadf, there are several reasons to use
buttons in these situations. And, as mentioned in the previous commits,
using buttons instead of links for actions requiring confirmation will
help us test for accessibility issues.

Since we're adding styles for this button, we're also adding the
`font-size` property instead of using the `small` class. We'll deal with
the `float-right` property in the next commit.
2024-11-08 13:00:14 +01:00
Javi Martín
b694ee7077 Use a button to delete an investment
Note that, since the button now generates a `form` tag, we need to
adjust the styles of this section.

As mentioned in commit 5311daadf, there are several reasons to use
buttons in these situations. And, as mentioned in the previous commits,
using buttons instead of links for actions requiring confirmation will
help us test for accessibility issues.

Note we're simplifying the `table .button` margin rules because the
`.button` class already defines `0` for all its margins except the
bottom margin. Otherwise, the margins defined by the `flex-with-gap`
mixin would be overwritten by the margins defined in the `table .button`
class.
2024-11-08 12:19:05 +01:00
Javi Martín
2fb8abe83f Use a button to delete documents
While testing for accessibility issues (in a development branch), we're
removing Turbolinks and monkey-patching the behavior of the `click_link`
method to check the page for accessibility issues after each request.
However, we were getting false positives when clicking links that act
like buttons.

So, for the reasons mentioned in commit 5311daadf, we're replacing the
link to delete a document with a button.
2024-11-07 15:18:37 +01:00