Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: responsive designs adaptable to giant screens #251

Merged
merged 7 commits into from
May 5, 2023
Merged

Feat: responsive designs adaptable to giant screens #251

merged 7 commits into from
May 5, 2023

Conversation

braianj
Copy link
Collaborator

@braianj braianj commented May 1, 2023

Screenshot 2023-05-01 at 18 36 48

Screenshot 2023-05-01 at 18 37 01

Screenshot 2023-05-01 at 18 37 10

Screenshot 2023-05-01 at 18 37 47

Screenshot 2023-05-01 at 18 37 58

Screenshot 2023-05-01 at 18 38 15

Screenshot 2023-05-01 at 18 38 52

Screenshot 2023-05-01 at 18 39 01

Screenshot 2023-05-01 at 18 39 07

Screenshot 2023-05-01 at 18 39 14

Screenshot 2023-05-01 at 18 39 21

Screenshot 2023-05-01 at 18 39 29

Screenshot 2023-05-01 at 18 39 36

Screenshot 2023-05-01 at 18 39 43

Screenshot 2023-05-01 at 18 39 52

@braianj braianj self-assigned this May 1, 2023
@braianj braianj linked an issue May 1, 2023 that may be closed by this pull request
Responsive designs adaptable to giant screens #222
Closed
@github-actions
Copy link

github-actions bot commented May 1, 2023 •
edited
Loading

Pull Request Test Coverage Report for Build 4886845623

  • 0 of 0 changed or added relevant lines in 0 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage remained the same at 76.81%
Totals Coverage Status
Change from base Build 4853431640: 0.0%
Covered Lines: 491
Relevant Lines: 567
💛 - Coveralls

@braianj braianj requested a review from 2fd May 2, 2023 21:32
2fd
2fd suggested changes May 3, 2023
View reviewed changes
src/components/Layout/OverviewList.tsx Outdated Show resolved Hide resolved
src/components/Layout/OverviewList.tsx Outdated Show resolved Hide resolved
src/components/Layout/OverviewList.tsx
cardWidth: isBigScreen ? 310 : 260,
cardMargin: 14,
containerMargin: 48,
})
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks too hardcoded 😅 , Isn't any other way to get these values directly from the components? That way, we can eventually create an standard component that handles all this nice behavior

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the isBigDesktop and set a card fixed width in useCardsByWidth hook and also into the css.
Is this good enough or should I extract those numbers (cardWidth, cardMargin, containerMargin) dynamically using useRef?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should detect it dynamically, but it is not necessarily urgent. We can merge it if there is and issue to fix it later.

src/components/Place/PlaceList/PlaceList.tsx Outdated Show resolved Hide resolved
src/components/Place/PlaceList/PlaceList.tsx Outdated Show resolved Hide resolved
src/hooks/useCardsPerWindowSize.ts Outdated Show resolved Hide resolved
src/hooks/useCardsPerWindowSize.ts Outdated Show resolved Hide resolved
src/pages/index.tsx Outdated Show resolved Hide resolved
src/hooks/usePlaceListPois.ts Outdated Show resolved Hide resolved
2fd
2fd approved these changes May 4, 2023
View reviewed changes
Copy link
Contributor

@2fd 2fd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#260

@braianj braianj merged commit 3c5b3ba into master May 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@2fd 2fd 2fd approved these changes

Assignees

@braianj braianj

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Responsive designs adaptable to giant screens
2 participants
@braianj @2fd