[front] feat: add buttons to compare criteria

[GresilleSiffle]

related issues #1940

do not merge: the back end doesn't support comparisons with different score_max yet

---

Description

This PR adds a new comparison method for mobile devices: buttons.

Features

• the main criterion is mandatory and can't be skipped
• the arrows allow to navigate between the criteria
• to clear a score given to a criterion, click on the active comparison button
• the criteria are displayed according to the user's preferences

How the front end chooses to display buttons or sliders?

If the displayed comparison has been previously made with buttons, the buttons are displayed. If it has been rated by sliders, sliders are displayed.

If the displayed comparison is new, the button are displayed for devices not matching the media query (pointer:fine), and the sliders are displayed for all other devices (See the pointer media feature).

No conversion from buttons to sliders and from sliders to buttons is allowed for now.

Future improvements

• disable by default the weekly collective goal on mobile devices to save space, and to make the UI more simple, add a setting to control this behaviour
  • addressed by [back][front] feat: add a setting to control the weekly col. goal on mobile #1977
• suggested in Discord add a setting to control display of the buttons auto and select (they are currently displayed above the entity cards, but they could be displayed below to ease the navigation on mobile devices)

to-do

front end - tutorial

• test the tutorial
• update the texts to match the buttons on mobile devices

front end - buttons

• make the buttons look like buttons
• make them "selected" when a criterion has been given a score
• disable them during API requests
• add the possibility to swipe up and down
• add hints about swipe up and down
• prevent skipping the main criterion of the poll
• display a "continue or change video" after all mandatory criteria have been rated?
  • not for now

front end - comparison input

• display buttons when the score_max of the main criterion is 2
• else display sliders if the score_max of the main criterion is 10
• else display buttons on smartphones
• else display sliders
• handle incoherent score_max between != criteria

front end - comparison scores review

• add the possibility to view all criteria at once
  • add a proto of the table view
• display the review only when buttons are displayed
  • factorise duplicated code

front end - comparison

• add the possibility to clear the score of an already submitted optional criterion
• rework the margin and padding of the grid items to save space

front end - coherence

• when displaying a "mobile" comparison on desktop
  • display the buttons, and add a message "this comparison has been made on mobile"
  • allow the users to update their comparison
• when displaying a "desktop" comparison on mobile
  • display the sliders, and add a message "this comparison has been made on desktop"
  • make the sliders read-only

Preview

A "mobile" comparison displayed on desktop:

Checklist

• I added the related issue(s) id in the related issues section (if any)
  • if not, delete the related issues section
• I described my changes and my decisions in the PR description
• I read the development guidelines of the CONTRIBUTING.md
• The tests pass and have been updated if relevant
• The code quality check pass

[GresilleSiffle]

The branch is now ready for review. I keep the PR in draft for now, because the back end is not yet ready to process comparisons with different score_max value.

[amatissart]

On iOS, the "overscroll" rule has no effect. It's necessary to add

html {
  overscroll-behavior-y: none;
}

(if it has not undesirable effect on Android)

[GresilleSiffle]

Addressed by 2b6e534

[amatissart]

I feel the animation is a bit slow and frustrating when looking for a specific criterion. Why not using the same value as in the EntitySelector?

Suggested change

	const SWIPE_TIMEOUT = 240;
	const SWIPE_TIMEOUT = 180;

[GresilleSiffle]

Addressed by e3bed73