[front] feat: add buttons to compare criteria

[GresilleSiffle]

related issues #1940

---

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 matching the media query (pointer:coarse), 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
• 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]

Recent feedback from the rest of the team:

• try to find an alternative to the icons (+) and (++)
• try to find an alternative to the icon representing a balance

[GresilleSiffle]

Some alternatives to replace the current buttons (I implemented the option 4):

[GresilleSiffle]

What do you think about the following capture? Instead of displaying the name of the criterion, a full question is asked to increase the UI clarity.