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]

ACC and PRs ready for review by the DAO members (cc @rdenarie )

[rdenarie]

Hello, I'm afraid there is a problem on people page This is visible on mips-ft and exo-mips-ft instance

I think it would be preferable to fix it in this mip if it is related. wdyt @boubaker ?

[rdenarie]

The rest seems ok for me

[boubaker]

I think it would be preferable to fix it in this mip if it is related. wdyt @boubaker ?

It's due to the fact that there are some changes made in Meeds-io/MIPs#110 which is added into MIPs branch as well.

[boubaker]

BTW, the Meeds-io/MIPs#110 is still with Dev In Progress status:

Should we remove the commits and then proceed to current MIP merge, then let the process continue on Meeds-io/MIPs#110 when it's ready ? @rdenarie

[ahamdi]

@boubaker I am adapting the code of #110 with the changes added to the #113 If I am unable to provide the fix tomorrow morning, I am ok to remove the commits of #110, we will add them after the merge of the current MIP is done. WDYT ?

[boubaker]

@boubaker I am adapting the code of #110 with the changes added to the #113 If I am unable to provide the fix tomorrow morning, I am ok to remove the commits of #110, we will add them after the merge of the current MIP is done. WDYT ?

Thanks for your help

[rdenarie]

Adaptation is done by @ahamdi All is ok now.

@SaraBoutej you can proceed to the merge

[SaraBoutej]

Thank you @rdenarie Merged cc @boubaker