Tournament page layout changes #253

SibiAkkash · 2024-01-15T07:00:11Z

Reduced padding for standings table
Left aligned tournament info section

tournament-page-2024-01-16_22.59.12.mp4

Changes as discussed here: https://upai.zulipchat.com/#narrow/stream/387757-tech-backend/topic/tournament.20page.20layout

Bug: Wrapping the full page in a Suspense breaks the flowbite components from loading.
When we wrap the whole thing in Suspense, the first few setTimeouts in onMount don't have any effect. Adding only a setTimeout of say 8 seconds highlights this bug. Only after 8 seconds, do the flowbite tabs actually render. 😬

The setTimout(s) in onMount is a bit of hack and it works because the tournament query latency is ~ equal to setTimeout delays.

@Joe2k @punchagan should probably look for different library from flowbite later on....

- Left align title, status, info(image or location + date) - Add icons, skeletons for location and date

Joe2k · 2024-01-15T07:03:43Z

Can you attach a ss with the banner in tournament page as well?
Should we left align the tabs as well? Currently looks weird as tabs are centered in the page while everything else is left aligned

Joe2k · 2024-01-15T07:04:49Z

Also the tournament name is fully missing 😆

SibiAkkash · 2024-01-15T07:05:22Z

Also the tournament name is fully missing 😆

i just commented it out to show the skeletons lol, i haven't put skeletons for the title yet 😆

SibiAkkash · 2024-01-15T07:05:41Z

Can you attach a ss with the banner in tournament page as well?

Should we left align the tabs as well? Currently looks weird as tabs are centered in the page while everything else is left aligned

banner ?
yes, trying left aligned tabs now

Joe2k · 2024-01-15T07:06:26Z

Banner as in where we have tournament title image.. like in beach nationals in Prod

SibiAkkash · 2024-01-15T07:07:13Z

Banner as in where we have tournament title image.. like in beach nationals in Prod

ah yes. about the image... should we fix these images to a particular size ? this way we can show like a gray background till the tournament query resolves

Joe2k · 2024-01-15T07:11:04Z

hmm so currently we have it width as full and height will be taken as per the aspect ratio(but we can always keep these images as square 1:1 when uploading). I think we can retain that same logic and show a square skeleton with same side length as component width? This will solve all probs like shifting and all

Joe2k · 2024-01-15T07:11:39Z

But this is for mobile.. might have to think diff for desktops. But for now this will be fine xD

SibiAkkash · 2024-01-15T07:24:36Z

hmm so currently we have it width as full and height will be taken as per the aspect ratio(but we can always keep these images as square 1:1 when uploading). I think we can retain that same logic and show a square skeleton with same side length as component width? This will solve all probs like shifting and all

hmm, square skeleton works, but the image might look squished or stretched no ?

Joe2k · 2024-01-15T07:25:45Z

but the image might look squished or stretched no ?

We'll make sure we are always creating and uploading square images only for tournament

Joe2k · 2024-01-15T07:26:12Z

We can tell Comps / Ops also to follow it

- Also fixed padding for initial and spirit standings

- Left aligned section buttons and added icons - Added skeleton for (almost) whole page

punchagan · 2024-01-16T17:22:39Z

We can tell Comps / Ops also to follow it

Adding a custom upload widget that crops image might work nicely. I'm not sure if there's something that works well with Solid, but might be worth looking for one. This UX is easily understood because a lot of apps enforce this when uploading profile pictures, etc.

SibiAkkash · 2024-01-17T13:29:26Z

Can you attach a ss with the banner in tournament page as well?

Should we left align the tabs as well? Currently looks weird as tabs are centered in the page while everything else is left aligned

with tournament banner
https://github.com/india-ultimate/hub/assets/39093537/52ef5c69-9144-4273-b243-6c2f84d56e89

since we don't know whether a tournament has an image or not, page skeleton wise i'm just showing the image skeleton here. if a tournament doesnt have an image, things might feel like they are shifting upward, as seen in the Surat tournament in the video. Having like an animation between the skeleton and the correct page might alleviate this.

ig enough for now ? @Joe2k

SibiAkkash · 2024-01-17T13:52:40Z

But this is for mobile.. might have to think diff for desktops. But for now this will be fine xD

we could just put a max-width on the image ?

Also have set a max-width on the images

Joe2k · 2024-01-18T13:54:22Z

frontend/src/components/Tournament.js

@@ -144,147 +185,153 @@ const Tournament = () => {
        icon={trophy}
        pageList={[{ url: "/tournaments", name: "All Tournaments" }]}
      />
+      <Suspense fallback={<TournamentPageSkeleton />}>


Can we have the tournament status in text-xs and under the title. Feel like its dominating a lot of space otherwise

Joe2k · 2024-01-18T13:56:38Z

frontend/src/components/Tournament.js

+              />
+            }
+          >
+            <div class="flex justify-start">


Can we have the logo still centered. Again since its taking full width anyway it should be fine. Otherwise feels its out of center by few inches

The image is taking 3/4 of container width no ?

ahh cool.. Then lets make it full width of the container? That should be good i think

if we center it, it would look off on larger screens right ? everything else if left aligned regardless of screensize. Also, the image being off center might be because the beach nats image has a transparent border ?

Beach nats Surat

left-align center-align

hmm i still like full width more.. yes for larger screens we have to think diff. But what i meant before was image left aligned is not looking too good since its a square. Would be perfect if it was rectangle and didnt have any space left on the right. But since its square, not centering it looks off. Like I havent seen image left aligned in any other websites with space left on the right

correct, the square image looks a bit off when left centered. I was talking about left aligning for larger screens only. Agreed.

hmm i still like full width more.. yes for larger screens we have to think diff. But what i meant before was image left aligned is not looking too good since its a square. Would be perfect if it was rectangle and didnt have any space left on the right. But since its square, not centering it looks off. Like I havent seen image left aligned in any other websites with space left on the right

hmm, maybe we should enforce a 4/3 or 16/9 aspect ratio then ?

Joe2k · 2024-01-18T13:58:04Z

frontend/src/components/Tournament.js

@@ -353,11 +399,11 @@ const Tournament = () => {
                      <tr class="border-b bg-white dark:border-gray-700 dark:bg-gray-800">
                        <th
                          scope="row"
-                          class="whitespace-nowrap py-4 pl-10 pr-6 font-normal"
+                          class="whitespace-nowrap py-4 pl-4 pr-2 font-normal"


Screen.Recording.2024-01-18.at.7.26.56.PM.mov

There is a bit of mismatch in padding between final and initial

Also pl here can be 6 / 8..Rank feels too close to the left

Joe2k · 2024-01-18T13:59:53Z

frontend/src/components/Tournament.js


-      <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
+      <div class="mb-4 border-b border-gray-200 px-1 dark:border-gray-700">


The underline below the tabs are not at the centre of words but more aligned to the right

Joe2k · 2024-01-19T06:25:38Z

I feel lets park this for now... There is too much bias in lot of things i feel cause we ourselves dont know the best practices to design the UI. Lets properly do a design doc first in figma for all kinds of devices and then pick this? Cause anyway the other pages like schedule and standings and rules are all still centered so might not look good when transitioning @SibiAkkash what you think?

SibiAkkash · 2024-01-19T06:31:05Z

I feel lets park this for now... There is too much bias in lot of things i feel cause we ourselves dont know the best practices to design the UI. Lets properly do a design doc first in figma for all kinds of devices and then pick this? Cause anyway the other pages like schedule and standings and rules are all still centered so might not look good when transitioning @SibiAkkash what you think?

yeah makes sense, the other pages would also have to be changed. Alright, lets have a plan and do this at once.

SibiAkkash added 2 commits January 13, 2024 16:17

standings: Reduce padding for table cells

4c2f5af

tournament-page: Align tournament info section to the left

790bc5c

- Left align title, status, info(image or location + date) - Add icons, skeletons for location and date

SibiAkkash requested a review from Joe2k January 15, 2024 07:01

SibiAkkash self-assigned this Jan 15, 2024

standings: Left align standings tabs

42d52ec

- Also fixed padding for initial and spirit standings

SibiAkkash force-pushed the standings-comp branch 2 times, most recently from c22f49f to 6e9078b Compare January 16, 2024 16:42

tournament-sections: Left align section buttons

4137cd6

- Left aligned section buttons and added icons - Added skeleton for (almost) whole page

SibiAkkash force-pushed the standings-comp branch from 6e9078b to 4137cd6 Compare January 16, 2024 16:47

SibiAkkash force-pushed the standings-comp branch 2 times, most recently from e80188c to ee765ec Compare January 17, 2024 13:51

SibiAkkash force-pushed the standings-comp branch from ee765ec to ba0764d Compare January 17, 2024 14:43

tournament-images: Set image height to be same as width

e6e60a9

Also have set a max-width on the images

SibiAkkash force-pushed the standings-comp branch from ba0764d to e6e60a9 Compare January 17, 2024 14:45

Joe2k requested changes Jan 18, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tournament page layout changes #253

Tournament page layout changes #253

SibiAkkash commented Jan 15, 2024 •

edited

Loading

Joe2k commented Jan 15, 2024

Joe2k commented Jan 15, 2024

SibiAkkash commented Jan 15, 2024

SibiAkkash commented Jan 15, 2024

Joe2k commented Jan 15, 2024

SibiAkkash commented Jan 15, 2024

Joe2k commented Jan 15, 2024

Joe2k commented Jan 15, 2024

SibiAkkash commented Jan 15, 2024

Joe2k commented Jan 15, 2024

Joe2k commented Jan 15, 2024

punchagan commented Jan 16, 2024

SibiAkkash commented Jan 17, 2024

SibiAkkash commented Jan 17, 2024

Joe2k Jan 18, 2024

Joe2k Jan 18, 2024

SibiAkkash Jan 18, 2024

Joe2k Jan 18, 2024

SibiAkkash Jan 19, 2024

Joe2k Jan 19, 2024

SibiAkkash Jan 19, 2024

SibiAkkash Jan 19, 2024

Joe2k Jan 18, 2024

Joe2k Jan 18, 2024

Joe2k Jan 18, 2024

Joe2k commented Jan 19, 2024

SibiAkkash commented Jan 19, 2024


		<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
		<div class="mb-4 border-b border-gray-200 px-1 dark:border-gray-700">

Tournament page layout changes #253

Are you sure you want to change the base?

Tournament page layout changes #253

Conversation

SibiAkkash commented Jan 15, 2024 • edited Loading

Joe2k commented Jan 15, 2024

Joe2k commented Jan 15, 2024

SibiAkkash commented Jan 15, 2024

SibiAkkash commented Jan 15, 2024

Joe2k commented Jan 15, 2024

SibiAkkash commented Jan 15, 2024

Joe2k commented Jan 15, 2024

Joe2k commented Jan 15, 2024

SibiAkkash commented Jan 15, 2024

Joe2k commented Jan 15, 2024

Joe2k commented Jan 15, 2024

punchagan commented Jan 16, 2024

SibiAkkash commented Jan 17, 2024

SibiAkkash commented Jan 17, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Joe2k commented Jan 19, 2024

SibiAkkash commented Jan 19, 2024

SibiAkkash commented Jan 15, 2024 •

edited

Loading