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

Cody/increase weekly pick button responsiveness #611

Merged
merged 5 commits into from
Oct 22, 2024
Merged

Cody/increase weekly pick button responsiveness #611

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
83271df
Made team image smaller on mobile screens
kepsteen Oct 11, 2024
1e66c56
on smallest screens stacked Team logo and name vertically
kepsteen Oct 11, 2024
465ee8a
Merge remote-tracking branch 'origin/develop' into Cody/increase-Week…
kepsteen Oct 14, 2024
8f1d7f1
removed xs breakpoint
kepsteen Oct 15, 2024
644dcf5
Merge branch 'develop' into Cody/increase-WeeklyPickButton-responsive…
kepsteen Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion components/WeeklyPickButton/WeeklyPickButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,12 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({
data-testid="team-radio"
/>

<Label htmlFor={team} data-testid="team-label" disabled={isDisabled}>
<Label
htmlFor={team}
data-testid="team-label"
disabled={isDisabled}
className="flex-col xs:flex-row"
Copy link
Member

Choose a reason for hiding this comment

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

It's better in tailwind to work from small to large. Therefore it should be: className="flex-row sm:flex-col"

However, I'm confused by the need for the addtional xs breakpoint. Why not just make it flex-col by default, and flex-rowat a large enough breakpoint?

Copy link
Contributor Author

@kepsteen kepsteen Oct 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I am working from small to large. For screen sizes less than the xs breakpoint, the label will have the class flex-col to allow the team image and the team name to stack vertically.

The reason I created an extra breakpoint was that I found the issue to only happen on screen sizes less than 400px. When I tried using the sm breakpoint provided by tailwind, it looked strange that they were stacked vertically as the Button grew in size on screens closer to the breakpoint.

Copy link
Member

Choose a reason for hiding this comment

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

Okay, so if you change it to className="flex-row sm:flex-col" does that still work? I try not to target specifically smaller breakpoints. Instead, start with the smallest and change it for the larger ones. If that makes sense.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think this would have the opposite effect that I was looking for. In this case the label would have the class flex-row placing the team name and image next to each other on screen sizes less than the sm breakpoint. When the screen sizes exceed the sm breakpoint the class flex-col would be applied and the team name and image would be placed on top of each other.

Copy link
Member

Choose a reason for hiding this comment

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

Yes, you're right, sorry.

All I'm trying to get across is you should almost always make the default for the smallest breakpoint.

So className="flex-col sm:flex-row" or whichever larger breakpoint you find appropriate for the row.

Copy link
Collaborator

Choose a reason for hiding this comment

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

From 0 to 640px sm breakpoint, is the minimum size. Even if this breaks at 400, it will adhere the same styles starting at 640px and lower. Anything from 0 to 640px should be flex-col. Then, you use sm:flex-row. Ending with classaName="flex-col sm:flex-row". Mobile first, and adjust larger screens accordingly.

Therefore, we do not need the custom 400 breakpoint.

>
<Image
src={src}
alt={team}
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,9 @@ module.exports = {
gridTemplateRows: {
'adminLayout': '5rem auto',
},
screens: {
'xs': '400px'
}
},
},
plugins: [require('tailwindcss-animate')],
Expand Down