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

Made the calendar page mobile-responsive #450

Merged
merged 1 commit into from
Oct 16, 2023
Merged

Made the calendar page mobile-responsive #450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions client/src/features/calendar/MonthAndYear.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const MonthAndYear = ({
<div className="flex">
<button onClick={handlePreviousMonth}>
<svg
className="w-6 h-6"
className="w-6 h-6 max-[440px]:w-4 max-[440px]:h-4"
Copy link
Contributor

Choose a reason for hiding this comment

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

I haven't played around with the breakpoints myself at this point, but do we think these 440px and 380px breakpoints should be refactored into the Tailwind config for easier reuse (or if they need to be updated later) or are they more of a one-off kind of thing?

Copy link
Member

@Caleb-Cohen Caleb-Cohen Sep 10, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I haven't played around with the breakpoints myself at this point, but do we think these 440px and 380px breakpoints should be refactored into the Tailwind config for easier reuse (or if they need to be updated later) or are they more of a one-off kind of thing?

I think tailwind config is a better way to go in the long run. @devlarabar what are your thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hey, sorry I've only just now seen this! I agree that the tailwind config is the better way to go, in case there are more cases like this in the future if other features are added to the app. I'd be happy to work on the mobile-responsiveness of the modal as well if needed, either in this PR or a different one!

Copy link
Member

Choose a reason for hiding this comment

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

I'd prefer not to add it to this PR because there are a couple ways we could solve the modal that'd I'd like to investigate before we start working on it.

Copy link
Contributor

Choose a reason for hiding this comment

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

This should be good then, so I'll go ahead and approve as well. I'll make sure to include some language in the tech spec I'll be writing later this week for the modal/mobile design and specifically for the tailwind breakpoints.

xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
Expand All @@ -27,7 +27,7 @@ const MonthAndYear = ({
</button>
<button data-cy="next-month" onClick={handleNextMonth}>
<svg
className="w-6 h-6"
className="w-6 h-6 max-[440px]:w-4 max-[440px]:h-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
Expand All @@ -42,7 +42,7 @@ const MonthAndYear = ({
</svg>
</button>
</div>
<h2 className="ml-2 w-[14ch] text-3xl font-bold leading-none">
<h2 className="max-[440px]:ml-1 ml-2 w-[14ch] max-[440px]:text-base max-[440px]:text-center sm:text-3xl text-xl font-bold leading-none">
{month}, {year}
</h2>
</div>
Expand Down
10 changes: 5 additions & 5 deletions client/src/features/calendarHeader/CalendarHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ function CalendarHeader({ date }) {
};

return (
<header className="flex items-center px-5 py-3 bg-white justify-between">
<section className="flex space-x-3">
<header className="flex items-center max-[440px]:px-2 px-5 py-3 bg-white lg:justify-between w-full justify-center lg:flex-nowrap flex-wrap max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4 overflow-hidden">
<section className="flex max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4">
<HeaderButton
Icon={BsCalendarPlusFill}
tooltipText="Add Event"
Expand All @@ -49,8 +49,8 @@ function CalendarHeader({ date }) {
onClick={() => navigate("/")}
/>
</section>
<section className="flex items-center space-x-3">
<img src={Logo} className="max-w-none" alt="Logo" />
<section className="flex items-center w-full order-first lg:w-min lg:space-x-3 lg:order-none justify-between mb-4 lg:mb-0">
<img src={Logo} className="max-w-none max-[380px]:w-9" alt="Logo" />
<MonthAndYear
month={date?.month}
year={date?.year}
Expand All @@ -63,7 +63,7 @@ function CalendarHeader({ date }) {
onClick={() => date.getCurrentMonth()}
/>
</section>
<section className="flex space-x-3">
<section className="flex max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4">
<HeaderButton
Icon={IoChatbubblesOutline}
tooltipText="Feedback"
Expand Down
6 changes: 3 additions & 3 deletions client/src/features/calendarHeader/components/HeaderButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
function HeaderButton({ Icon, tooltipText, ...rest }) {
return (
<button
className="relative p-3 bg-[#F5E7DE] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] rounded-lg group font-inconsolata font-bold"
className="p-2 sm:p-3 relative bg-[#F5E7DE] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] rounded-lg group font-inconsolata font-bold"
{...rest}
>
<Icon className="w-8 h-8 text-[#C57756]" />
<span className="absolute -bottom-full left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in bg-[#F5CEB5BF] p-2 border border-black whitespace-nowrap rounded-md pointer-events-none">
<Icon className="max-[380px]:w-4 max-[380px]:h-4 w-6 h-6 sm:w-8 sm:h-8 text-[#C57756]" />
<span className="absolute -bottom-full left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in bg-[#F5CEB5BF] p-2 border border-black whitespace-nowrap rounded-md pointer-events-none z-10">
{tooltipText}
</span>
</button>
Expand Down
4 changes: 2 additions & 2 deletions client/src/features/calendarHeader/components/TodayButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
function TodayButton({ text, tooltipText, ...rest }) {
return (
<button
className="relative p-2 px-4 bg-teal-light shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] rounded-lg font-inconsolata font-bold"
className="relative sm:p-2 sm:px-4 p-1 px-3 bg-teal-light shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] rounded-lg font-inconsolata font-bold"
{...rest}
>
<span className="text-lg font-bold">{text}</span>
<span className="text-lg font-bold max-[440px]:text-sm">{text}</span>
<span className="absolute -bottom-full left-1/2 -translate-x-1/2 translate-y-5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in bg-teal-light p-2 border border-black whitespace-nowrap rounded-md pointer-events-none">
{tooltipText}
</span>
Expand Down
Loading