Feature/team directory responsive

[JaneMoroz]

Description

Responsive layout for the Team Directory. Have to use two layout components: table and card container. Their visibility is manipulated through the custom breakpoint (1920px).

Issue link

15-team-directory-page-responsive

Fixes # (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
chingu-dashboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 27, 2023 7:59pm

[Dan-Y-Ko]

Hey Jane,
at bigger screen sizes it should have this design: https://www.figma.com/file/OAKUcYBLP3UOaRlnKrcf1G/Chingu-Dashboard?type=design&node-id=3049-20451&mode=dev

and at smaller screen sizes it should have this design: https://www.figma.com/file/OAKUcYBLP3UOaRlnKrcf1G/Chingu-Dashboard?type=design&node-id=4303-34381&mode=dev (what you have here).

Just need to change it to adapt to the original design in bigger screens.

[JaneMoroz]

Hey Jane, at bigger screen sizes it should have this design: https://www.figma.com/file/OAKUcYBLP3UOaRlnKrcf1G/Chingu-Dashboard?type=design&node-id=3049-20451&mode=dev

and at smaller screen sizes it should have this design: https://www.figma.com/file/OAKUcYBLP3UOaRlnKrcf1G/Chingu-Dashboard?type=design&node-id=4303-34381&mode=dev (what you have here).

Just need to change it to adapt to the original design in bigger screens.

• If screen's width > 1920px, the table is displayed
• For screens < 1920px, we show cards

Right? I just used 1920px breakpoint as you mentioned in the ticket.

[Dan-Y-Ko]

Hey Jane, at bigger screen sizes it should have this design: https://www.figma.com/file/OAKUcYBLP3UOaRlnKrcf1G/Chingu-Dashboard?type=design&node-id=3049-20451&mode=dev
and at smaller screen sizes it should have this design: https://www.figma.com/file/OAKUcYBLP3UOaRlnKrcf1G/Chingu-Dashboard?type=design&node-id=4303-34381&mode=dev (what you have here).
Just need to change it to adapt to the original design in bigger screens.

• If screen's width > 1920px, the table is displayed
• For screens < 1920px, we show cards

Right? I just used 1920px breakpoint as you mentioned in the ticket.

Weird...seems to be same issue as Tim's pr. I'm not sure why it's not working for me even though I'm on 1920x1080 monitor?

[JaneMoroz]

@Dan-Y-Ko Well, in case of team directory: if your screen is 1920x1080 you should see a table. Is that what you see? If we want to see cards at 1920px I need to change the breakpoint to 1919px or maybe use max-width breakpoints instead of min-width.

[Dan-Y-Ko]

@Dan-Y-Ko Well, in case of team directory: if your screen is 1920x1080 you should see a table. Is that what you see? If we want to see cards at 1920px I need to change the breakpoint to 1919px or maybe use max-width breakpoints instead of min-width.

This is what I see https://i.imgur.com/nX61lnD.png It should be table, but it's not.

[JaneMoroz]

@Dan-Y-Ko Well, in case of team directory: if your screen is 1920x1080 you should see a table. Is that what you see? If we want to see cards at 1920px I need to change the breakpoint to 1919px or maybe use max-width breakpoints instead of min-width.

This is what I see https://i.imgur.com/nX61lnD.png It should be table, but it's not.

Weird... I'm not an expert in resolutions, but maybe a few px are eaten by browser's borders... maybe check other browsers too.. or we can change the breakpoint to 1930px

[Dan-Y-Ko]

@Dan-Y-Ko Well, in case of team directory: if your screen is 1920x1080 you should see a table. Is that what you see? If we want to see cards at 1920px I need to change the breakpoint to 1919px or maybe use max-width breakpoints instead of min-width.

This is what I see https://i.imgur.com/nX61lnD.png It should be table, but it's not.

Weird... I'm not an expert in resolutions, but maybe a few px are eaten by browser's borders... maybe check other browsers too.. or we can change the breakpoint to 1930px

Ok I figured it out. It's a browser issue. Do you know of a quick solution to handle an edge case with Edge browser? If not, we can just merge this.

Nvm, I looked into it. It's a useless feature they added into the Edge browser to add margins on the outside and with rounded corners. I think we can disregard this as there doesn't really seem to be any solutions atm.