Breakpoints review (css)

[srenault-meeds]

Rationale

No Breakpoint System is precisely identified in the product.

Thus, we have at least 2 Problems:

• Breakpoints identified in the product are not consistent with the modern UX guidelines. An update is needed
• Breakpoints are not consistent between JS and CSS

1. Functional Requirements

Breakpoints list is identified as follow:

ID	Device	Type	Screen Size
xs	Extra small	Small to large phone	< 600px
sm	Small	Small to medium tablet	600px > < 960px
md	Medium	Large tablet to laptop	960px > < 1264px*
l	Large	Desktop	1264px > < 1904px*
xl	Extra large	4k and ultra-wide	> 1904px*

*-16px on desktop for browser scrollbar

Impacts

Check any page to see if impacts to be updated

Gamification

NA

Notifications

NA

Analytics

NA

Unified Search

NA

2. Technical Requirements

Existing Features

The existing Features and classes shouldn't change, thus no Upgrade should be necessary to adopt new breakpoints.

Feature Flags

No feature flags is necessary

3. Software Architecture

Access

The Javascript Breackpoints are defined to use the following breakpoints:

         thresholds: {
           xs: 768,
           sm: 980,
           md: 1024,
           lg: 1280,
           xl: 1700,
         },

It should be changed to use the new ones:

         thresholds: {
           xs: 0,
           sm: 600,
           md: 960,
           lg: 1264,
           xl: 1904,
         },

The same adaptation has to be made in CSS in variables.less :

@smallMobileWidth: 380px;
@maxMobileWidth: 767px;
@minTabletWidth: (@maxMobileWidth + 1px);
@maxTabletWidth: 979px;
@minLargeTabletWidth: (@maxTabletWidth + 1px);
@maxLargeTabletWidth: 1023px;
@minDesktop: (@maxLargeTabletWidth + 1px);
@maxDesktop: 1279px;
@minLargeDesktop: (@maxDesktop + 1px);
@maxLargeDesktop: 1700px;

To be updated by

@smallMobileWidth: 380px;
@maxMobileWidth: 599.98px;
@minTabletWidth: (@maxMobileWidth + 0.02px);
@maxTabletWidth: 959.98px;
@minLargeTabletWidth: (@maxTabletWidth + 0.02px);
@maxLargeTabletWidth: 1263.98px;
@minDesktop: (@maxLargeTabletWidth + 0.02px);
@maxDesktop: 1903.98px;
@minLargeDesktop: (@maxDesktop + 0.02px);

Those variables has to be used consequently in vuetify.less in order to harmonize the display wheter when using Javascript or CSS.

[srenault-meeds]

@margondicco Can you check please?

[srenault-meeds]

@margondicco after internal discussion, I removed the layout columns as this MIP is only about updating CSS

[margondicco]

GO FONC

[srenault-meeds]

Thanks. @boubaker ready for tech spec :)

[boubaker]

Thanks. @boubaker ready for tech spec :)

Thanks

[boubaker]

Ready for tech review by DAO Members (eXo : @rdenarie )

[rdenarie]

Go tech

[SaraBoutej]

Thank you @rdenarie
Merged cc @boubaker