Dynamic view

[sirhcofe]

Changes

This pull request introduces several enhancements to the existing layout and visual elements, with a focus on improving the overall user interface and responsiveness.

1. Layout

• Grid Layout Implementation: The card arrangement has been revamped using a grid layout, providing a more consistent and visually appealing two-dimensional structure.
• Column Alignment: Items in columns are now aligned uniformly, eliminating issues where the third column occupied more height than the first two.

Grid layout

2. ActiveUserProjects

• Optimized Placement: Pie chart and chart legend have been shifted to the left to accommodate longer project names.
• Dynamic Sizing: The size of the pie chart dynamically adjusts based on the card's width.
• Centered Alignment: Both the pie chart and chart legends are now aligned within the card's center.

3. CurrentActiveUsers

• Responsive User Images: User images now dynamically resize based on the card's width.
• Mobile-Friendly Display: On mobile devices, the layout optimally displays four users per row, while on larger screens, five users are showcased per row.

4. MostActiveUser/TopFarmers

• Responsive User Images: User images now dynamically resize based on the card's width/height.  

  5. MostRecentSubmission

• Enhanced Readability: The "Score:" text has been removed, and the time string is now inline with the project submission score to save height space.
• Responsive User Images: User images now dynamically resize based on the card's height.

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
42-on-campus-stats	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 2, 2024 8:35am

[Bunyod16]

Hey Zer, thank you for the contributions!

I'm getting an uloaded, white page in vercel when viewing this deployment. Seems like its related to these errors in the console.

[Jachokoreto]

@Bunyod16 do you remember if the vercel preview for pr worked in the past? I suspect that it may be due to the wrong api call thats causing the frontend to not work right now. Can maybe check the env for deployment, make sure it uses the same as the master branch (the correct backend url). Also is it possible to add me into this vercel project?

[Bunyod16]

@Jachokoreto the pulling seems fine on local, but somehow the alignment on my mac Chrome is off? i tested with LT Browser and it seems fine there on other screens.

[jasonkwm]

It is off for my PC as well. May I know what screen size this is made for? I think size could be relative.

for like this.

and this.

I believe these are in their own respective boxes and could be resized according to their relative parent sizes.

[sirhcofe]

Ok, I think I found the problem, will push a fix soon

[sirhcofe]

Good day @Bunyod16 @Jachokoreto @jasonkwm. A fix has been pushed. Here's a breakdown on what has been changed:

• To address display issues on larger screens (≥ 2560px), I introduced an additional state called viewType in App.tsx:

  // App.tsx
  useEffect(() => {
  if (divRef.current) {
  const width = divRef.current.clientWidth;
  if (width >= 2560) setViewType("TV"); // set to TV size here
  else if (width >= 1280 && width < 2560) setViewType("Desktop");
  else if (width >= 736 && width < 1280) setViewType("Tablet");
  else setViewType("Mobile");
  }
  }, [divRef]);

• However, I realized that tailwind's responsive design doesn't consider 2560px, and its default "2xl" prop is only 1536px wide. This resulted in text appearing too large even on desktop screens, and I acknowledge this oversight.

• To resolve this, I've created a new breakpoint "3xl" in tailwind.config.js specifically for 2560px. This ensures that the text element will render larger font sizes only when the parent screen width surpasses the "3xl" breakpoint.

Feel free to review the changes, and let me know if any further adjustments are needed. Thank you!

ps: The state in App.tsx is used for d3 charts in ActiveUserProject

Edit: To answer Jason's question: The image sizes are dynamically adjusted to the card's width or height (Figure 1). The card itself adapts its dimensions based on the screen resolution, with a minimum height determined in the parent div (Figure 2). Meanwhile, text sizes are responsive and scale according to the tailwind's responsive design.

Figure 1: An example of setting image height in `MostActiveUser`, either based on 0.14*card-width or 0.5*card-height, whichever is smaller

Figure 2: An example of setting text sizes based on tailwind's breakpoints, now taking custom 3xl (min-width: 2560px) prop instead of default 2xl (min-width: 1536px)