nsc-events-nextjs_9_528_responsive-ui-for-home-page

SeattleColleges / nsc-events-nextjs

NSC Events Web Application

MIT License

5 stars 5 forks source link

nsc-events-nextjs_9_528_responsive-ui-for-home-page #532

Closed heosman closed 2 months ago

heosman commented 2 months ago

Resolves #528

This PR

Implements responsive UI for the Home page
Implements responsive UI for My Events and Archived Events pages again (changes were reverted for some reason)
Refactored Home page and Event Detail and other pages to use inline styling instead of stylesheets

Home page on desktop/laptop (signed in):

Home page on tablet:

Home page on mobile screen (not signed in):

Home page on mobile screen (signed in):

Bejarano03 commented 2 months ago

Good work thus far. I like what you are doing, and was able to checkout your branch and test out some of the styling done. I like your implementation of flex so that its more responsive.

heosman commented 2 months ago

@ken-ni When we switched to MUI, we were moving away from using the stylesheets, and the Home page and Event details pages were the only pages that were using them at that point. It was also much easier to manipulate the pages to be responsive with inline styling.

heosman commented 2 months ago

@intisarosman1 I set a minimum width so the event card will be at least 460 px wide. It looks better now when there are less events, but it would start to break if I made it any wider than this.

intisarosman1 commented 2 months ago

@intisarosman1 I set a minimum width so the event card will be at least 460 px wide. It looks better now when there are less events, but it would start to break if I made it any wider than this.

Looks better now!