* Add Tables option to Redcarpet in Legislation draft
* Allow table tags in Admin Legislation Sanitizer
* Add Test to render markdown tables in Legislation drafts
* Add Test for Admin Legislation Sanitizer
We include test for image, table and h1 to h6 tags and additional tests to strengthen the allowed and disallowed parameters
* Add Table from markdown test in System and Factories
* Add test to render tables for admin user
* Remove comment line about Redcarpet options
* Edit custom css for legislation draft table to make it responsive
The `inverted-selection` rules defined in the `%brand-background`
selector weren't being applied because we were using this selector in
`::before` and `::after` pseudoelements. Not sure about the reason, but
it looks like the saturation of `::after::selection` pseudoelements
resulted in invalid selectors and so the inverted selection rules were
ignored for every selection using `%brand-background`, like
`%budget-header`.
Using `@include brand-background` instead of `@extend %brand-background`
in pseudoelements solves the issue. The inverted selection might not
work in these pseudoelements, but we don't need it there since these
pseudoelements don't have content.
Zooming with the mousewheel is useful when you want to use it, but
annoying when you don't want to.
Here we're taking an intermediary approach: by default, the mousewheel
isn't active, but it will be active after focusing on the map, so it can
be used both to scroll and to zoom.
This behavior presents usability issues, though, since we aren't making
users aware of the way the mousewheel works, and even if they were
aware, it could be confusing anyway. However, I currently think it's
better than always enabling or always disabling the mousewheel (might
change my mind, though).
Note that the "focus" event is only used on the map, so if we click on a
marker or navigate to a marker with the keyboard without focusing on the
map first, the mousewheel isn't enabled. The same would happen if we
used the "click" event.
We might use the Leaflet.GestureHandling plugin in the future to deal
with this issue and the scroll on touch screens.
By using the bindPopup function instead of the click event
popups work when using the keyboard.
Note that now we are loading all the map markers in the first
request in a single query to the database (needed when there
is a lot or markers to show). Because of that we removed the
AJAX endpoint.
Note that in the budgets wizard test we now create district with no
associated geozone, so the text "all city" will appear in the districts
table too, meaning we can't use `within "section", text: "All city" do`
anymore since it would result in an ambiguous match.
Co-Authored-By: Julian Herrero <microweb10@gmail.com>
Co-Authored-By: Javi Martín <javim@elretirao.net>
Using a button for interactive elements is better, as explained in
commit 5311daadf.
Since buttons with "type=button" do nothing by default, we no longer
need to call `preventDefault()` when clicking it.
We were using `map_location` in one place and
`location-map-remove-marker` in another one. We usually use dashes in
HTML class names, we don't say "location map" anywhere else.
The `marker` variable is like a global variable inside the
`initializeMap` function, so assigning it inside the `createMarker`
function was changing its value in other places.
So we're using different variable names like `newMarker` in order to
make the code easier to follow. Now we "only" change the `marker`
variable in functions that modify the marker.
This is the only part of the sidebar that needs to be re-rendered after
an AJAX request adding or removing investments to a ballot, so having a
separate view just for it will make it easier to simplify the code.
It's causing annoying behaviour for desktop users when scrolling
the page to the bottom and there is more content below the
map.
The behaviour of touchable devices does not seem to be
affected by this change and keeps behaving the same.
Since we're now allowing <h2> and <h3> tags in the description, we
remove the broken <h3> tag from quiz-question class. Since its content
is also in the <title> element, and in order to be consistent with other
show actions in the public area, we change this tag to <h1>.
We add <h2> tag in the "Share" heading and we replace the broken <h4>
tag above adding new styles.
The top bar padding was different on small screens when we were in the
admin section, so we're now applying the same padding everywhere.
Note we're still applying extra padding on medium/large screens because
in the public section we display our logo image, which has some blank
space. In the admin section we're emulating this blank space with
padding; we might change it in the future if we change our logo.
Also note we're using `0.8rem` instead of `$line-height / 2`. The reason
is tricky: there's a spec testing the reorder feature with drag and drop
in the poll questions answers administration, and that test fails when
the drop space is right at the bottom of the screen, which is what
happens when we use the `$line-height / 2` padding. A proper solution
would be to remove the inaccessible drag and drop feature and use a
different method to reorder the answers.
We can use the `link` mixin. Note this mixin uses anchor-color instead
of brand-color; by default, they're both the same, so we probably meant
anchor-color here.
The `overflow: hidden` applied to the `.callout` selector made the full
width background invisible, meaning this section hasn't looked properly
on very large screens since commit 701378d02.
So now it uses the same interface and styles as the main layout. On
small screens, it's easier to play with the menu when the button is on
the left because the menu it opens is aligned to the left.
Note that now we can get rid of the title-bar class; we didn't use the
styles in the public area since commit dcec003d0, and we were overriding
all the Foundation styles in the admin area with the exception of the
padding, which we no longer need.
We're changing the order of the elements in the HTML so the menu button
appears next to the menu it opens, with no logo between them, which IMHO
makes sense and makes it easier to understand the layout for people
using screen readers.
A small advantage of this approach is that on very narrow screens or
Consul applications having a very long word for "Menu", the menu button
appeared on top, the logo appeared below it, and the contents of the
menu appeared below the logo. Now the logo appears on top, the menu
button appears below it, and the contents of the menu appear below the
menu button.
The menu didn't look properly on these screens since commit dcec003d0.
On small screens with enough horizontal space to show the menu button,
the logo, and the contents of the menu, all three elements were shown on
the same row, which looked broken.
Now the contents of the menu are shown below the menu button.
Note that, to force this, we're making the contents of the menu 100%
wide. That means links would take the 100% of the space, which would
make it easy to click on a link while trying to scroll when using
touchscreens. So we're making the links as wide as their text, which
also has a disadvantage: it's harder to click on narrow links like
"SDG".
We're going to change these styles in order to fix a bug, and the
Foundation styles were getting in the way. Besides, we were overwriting
some rules and so now we're removing 6 properties while we're also
adding 6, so it isn't like the Foundation styles were helping us.
This class was only there in order to use Foundation's styles, but
the amount of styles we were using was equal to the amount of
styles we were overwriting.
This way we follow the convention of one stylesheet per component.
Note that we depend on Foundation's `menu` class for some of the
styles and JavaScript behavior, so we're keeping both the `menu` and
`account-menu` classes.
This way it's easier to refactor it.
Note we're using `with_request_url` in the tests because the component
renders the locale switcher, which needs a URL in order to work. This
doesn't affect whether we're in the management section or not.
Using line-height is confusing and has unexpected results when texts
span over multiple lines, as might be the case in some language and
screen resolution combinations.
The contrast value was 1.75, which makes the text hard to read and it
isn't even near to the minimum accessibility requirements.
We're using the `$color-success` variable since the `$check` color is
green and this one is green too.
As mentioned in commit 925f04e3f, icon classes make screen readers
announce strange symbols and aren't properly displayed for people who
have changed their preferred font family.
Some institutions using CONSUL have expressed interest in this feature
since some of their tenants might already have their own domains.
We've considered many options for the user interface to select whether
we're using a subdomain or a domain, like having two separate fields,
using a check box, ... In the end we've chosen radio buttons because
they make it easier to follow a logical sequence: first you decide
whether you're introducing a domain or subdomain, and then you enter it.
We've also considered hiding this option and assuming "if it's got a
dot, it's a domain". However, this wouldn't work with nested subdomains
and it wouldn't work with domains which are simply machine names.
Note that a group of radio buttons (or check boxes) is difficult to
style when the text of the label might expand over more than one line
(as is the case here on small screens); in this case, most solutions
result in the second line of the label appearing immediately under the
radio button, instead of being aligned with the first line of the label.
That's why I've added a container for the input+label combination.
As mentioned in commit 925f04e3f, icon classes make screen readers
announce strange symbols and aren't properly displayed for people who
have changed their preferred font family.
