feat: ranking panel rework #6867

VIKTORVAV99 · 2024-06-19T12:53:51Z

Issue

Closes: AVO-17
Closes: AVO-337
Closes: #4530

Description

Link to Figma: https://www.figma.com/design/O1DtS6UyZHSH4IymG8Ufsw/%F0%9F%8E%B9-Design-Hack?node-id=4195-2114&t=G7O58Pa8jUXOwk6y-1

Preview

Double check

I have tested my parser changes locally with poetry run test_parser "zone_key"
I have run pnpx prettier@2 --write . and poetry run format in the top level directory to format my changes.

…ework

tonypls · 2024-07-31T08:56:08Z

The padding for each of these lines would be nice if it was equal. Slightly more than the top padding is currently:

Optional fix: iPad mini or smaller desktop size the buttons are not completely visible

Will also do a code review now (and ask the pr agent to do one 🤖)

/review

tonypls · 2024-07-31T08:57:11Z

/review

github-actions · 2024-07-31T08:58:37Z

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Key issues to review Possible Bug The new `isOnTop` prop is added to control the direction of the chevron icon. However, the logic seems inverted in the implementation. When `isOnTop` is true, `HiChevronUp` is shown when the accordion is collapsed, which is counterintuitive as it suggests the accordion should open upwards. API Change The `disabled` prop has been renamed to `isDisabled`. This is a breaking change and all instances in the project where `Button` is used must be updated to reflect this change. Redundant Code The `InfoModalContent` function includes a div structure that seems to be left from the previous implementation. This could be cleaned up to better align with the new button components used.

VIKTORVAV99 · 2024-07-31T09:06:45Z

The padding for each of these lines would be nice if it was equal. Slightly more than the top padding is currently:

Optional fix: iPad mini or smaller desktop size the buttons are not completely visible

Will also do a code review now (and ask the pr agent to do one 🤖)

/review

Overlap should be fixed or mitigated by #7024 which was originally part of #6911.

I'll look into the padding and double check it with Alex as well. 👍🏻

VIKTORVAV99 · 2024-07-31T11:46:47Z

Fixed the margins and hight so it looks more uniform but a more permanent responsive fix requires #7020 or something similar.

Possibly also some responsive tweaks about the header as it looks very strange on say a iPad at the moment (when visiting the website).

tonypls

Couple of small comments but overall loooks great!

Feel free to scrutinize my padding changes, my goal was to have no padding on the Outer left panel section, reduce the padding on the new stuff to make it maximize ranking space and just meet the top of the Historical Slider component.

web/src/components/Accordion.tsx

web/src/features/modals/InfoModal.tsx

tonypls · 2024-08-01T14:26:13Z

web/src/features/modals/InfoModal.tsx

-        </a>
+      <div className="flex basis-0 gap-x-4">
+        <PrivacyPolicyButton />
+        <VerticalDivider />


This is very hard to see in both light and dark mode

I'll adjust it slightly but it's not meant to be super visible. Let me know what you think about the new version.

web/src/features/modals/InfoText.tsx

…ework

tonypls · 2024-08-01T17:48:42Z

Do you know where this border on the input came from? It appeared after my commit but I can't figure out how?!

VIKTORVAV99 · 2024-08-01T18:56:25Z

Do you know where this border on the input came from? It appeared after my commit but I can't figure out how?!

It has appeared in other PRs as well, best I can think of is some sort of dependency change that happened earlier today (Dependabot updates all dependencies the 1st of each month) but I'll look into why it's happening.

It has nothing to do with this PR though.

EDIT: It's not affected on staging so probably not a dependency change but it's also affecting #7048 so I don't really know what the issue is. Will try and dig into it a bit.

tonypls · 2024-08-01T20:07:32Z

Do you know where this border on the input came from? It appeared after my commit but I can't figure out how?!

It has appeared in other PRs as well, best I can think of is some sort of dependency change that happened earlier today (Dependabot updates all dependencies the 1st of each month) but I'll look into why it's happening.

It has nothing to do with this PR though.

EDIT: It's not affected on staging so probably not a dependency change but it's also affecting #7048 so I don't really know what the issue is. Will try and dig into it a bit.

I'm very confused because it's doesn't happen with this branch locally but it does on the preview 🤔

tonypls

LGTM 🎉

Looks great, glad to get this one out there :)

VIKTORVAV99 · 2024-08-01T20:13:00Z

Do you know where this border on the input came from? It appeared after my commit but I can't figure out how?!

It has appeared in other PRs as well, best I can think of is some sort of dependency change that happened earlier today (Dependabot updates all dependencies the 1st of each month) but I'll look into why it's happening.
It has nothing to do with this PR though.
EDIT: It's not affected on staging so probably not a dependency change but it's also affecting #7048 so I don't really know what the issue is. Will try and dig into it a bit.

I'm very confused because it's doesn't happen with this branch locally but it does on the preview 🤔

If you try and reinstall your dependencies does it show up then? Maybe it's a dependency thing anyway (I forgot that I now have to update staging as well so maybe it's there anyway).

EDIT: I think I tracked it down to this PR #7035

Will revert the dependencies one by one locally and find out which one it is and figure out if it's a bug or we had a bug that are now "fixed".

VIKTORVAV99 · 2024-08-01T21:32:45Z

Narrowed down the problem to this PR tailwindlabs/tailwindcss-forms#141 of @tailwindcss/forms which was included in version 0.5.4.

I'll create a PR to revert the package here and then open an issue with them describing the issue.

And if this is the intended behaviour (we were not specifying a type) then I'll create a pr that removes this styling instead and add type='search to the input for accessibility purposes.

tonypls · 2024-08-02T06:56:29Z

Narrowed down the problem to this PR tailwindlabs/tailwindcss-forms#141 of @tailwindcss/forms which was included in version 0.5.4.

I'll create a PR to revert the package here and then open an issue with them describing the issue.

And if this is the intended behaviour (we were not specifying a type) then I'll create a pr that removes this styling instead and add type='search to the input for accessibility purposes.

Nice investigating! Thanks

wip: ranking panel rework

fe2e5fc

github-actions bot added the frontend 🎨 label Jun 19, 2024

github-actions bot deployed to electricitymaps-staging (Preview) June 19, 2024 12:57 View deployment

wip: add linkedin button

2c23299

github-actions bot deployed to electricitymaps-staging (Preview) June 19, 2024 14:57 View deployment

wip: align feedback button with the rest

cf6b57a

github-actions bot deployed to electricitymaps-staging (Preview) June 19, 2024 15:09 View deployment

adjust more stuff

1280f56

github-actions bot deployed to electricitymaps-staging (Preview) June 19, 2024 15:58 View deployment

create shared component for text

fb754cd

github-actions bot deployed to electricitymaps-staging (Preview) June 19, 2024 16:21 View deployment

VIKTORVAV99 added 2 commits June 19, 2024 18:26

invert accordion buttons when component is on top

ae14424

Merge branch 'master' into vik/ranking_panel_rework

4e91670

github-actions bot deployed to electricitymaps-staging (Preview) June 19, 2024 16:29 View deployment

github-actions bot deployed to electricitymaps-staging (Preview) June 19, 2024 16:31 View deployment

create pre-defined buttons for social stuff

9497d75

github-actions bot deployed to electricitymaps-staging (Preview) June 19, 2024 19:31 View deployment

use pre-defined buttons in modal

d9f4034

github-actions bot deployed to electricitymaps-staging (Preview) June 19, 2024 19:50 View deployment

add shrinkage

e7714c0

github-actions bot deployed to electricitymaps-staging (Preview) June 19, 2024 20:12 View deployment

simplify internal button props

acf6823

github-actions bot deployed to electricitymaps-staging (Preview) June 19, 2024 20:19 View deployment

align buttons and icons

60ab964

github-actions bot deployed to electricitymaps-staging (Preview) June 20, 2024 09:37 View deployment

merge master

d07437c

github-actions bot deployed to electricitymaps-staging (Preview) June 20, 2024 10:26 View deployment

Merge remote-tracking branch 'origin/master' into vik/ranking_panel_r…

f1f84ac

…ework

github-actions bot deployed to electricitymaps-staging (Preview) June 20, 2024 16:24 View deployment

adjust e2e test

aac51be

VIKTORVAV99 changed the title ~~wip: ranking panel rework~~ feat: ranking panel rework Jul 30, 2024

merge master

a599f4c

github-actions bot deployed to electricitymaps-staging (Preview) July 30, 2024 11:39 View deployment

merge master

f394df1

github-actions bot deployed to electricitymaps-staging (Preview) July 30, 2024 12:27 View deployment

github-actions bot added the Review effort [1-5]: 4 label Jul 31, 2024

Merge branch 'master' into vik/ranking_panel_rework

e9cede3

github-actions bot deployed to electricitymaps-staging (Preview) July 31, 2024 11:17 View deployment

tweak hights and margins

a3f7f1a

github-actions bot deployed to electricitymaps-staging (Preview) July 31, 2024 11:50 View deployment

feat(web): update padding

6e4736b

github-actions bot deployed to electricitymaps-staging (Preview) August 1, 2024 15:16 View deployment

tonypls reviewed Aug 1, 2024

View reviewed changes

VIKTORVAV99 added 2 commits August 1, 2024 18:11

PR feedback

5f64e86

Merge remote-tracking branch 'origin/master' into vik/ranking_panel_r…

a2cd824

…ework

github-actions bot deployed to electricitymaps-staging (Preview) August 1, 2024 16:14 View deployment

tonypls approved these changes Aug 1, 2024

View reviewed changes

VIKTORVAV99 merged commit c47bf6c into master Aug 1, 2024
21 checks passed

VIKTORVAV99 deleted the vik/ranking_panel_rework branch August 1, 2024 20:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ranking panel rework #6867

feat: ranking panel rework #6867

VIKTORVAV99 commented Jun 19, 2024 •

edited

Loading

tonypls commented Jul 31, 2024

tonypls commented Jul 31, 2024

github-actions bot commented Jul 31, 2024

VIKTORVAV99 commented Jul 31, 2024

VIKTORVAV99 commented Jul 31, 2024

tonypls left a comment

tonypls Aug 1, 2024

VIKTORVAV99 Aug 1, 2024

tonypls commented Aug 1, 2024 •

edited

Loading

VIKTORVAV99 commented Aug 1, 2024 •

edited

Loading

tonypls commented Aug 1, 2024

tonypls left a comment

VIKTORVAV99 commented Aug 1, 2024 •

edited

Loading

VIKTORVAV99 commented Aug 1, 2024

tonypls commented Aug 2, 2024

feat: ranking panel rework #6867

feat: ranking panel rework #6867

Conversation

VIKTORVAV99 commented Jun 19, 2024 • edited Loading

Issue

Description

Preview

Double check

tonypls commented Jul 31, 2024

tonypls commented Jul 31, 2024

github-actions bot commented Jul 31, 2024

PR Reviewer Guide 🔍

VIKTORVAV99 commented Jul 31, 2024

VIKTORVAV99 commented Jul 31, 2024

tonypls left a comment

Choose a reason for hiding this comment

tonypls Aug 1, 2024

Choose a reason for hiding this comment

VIKTORVAV99 Aug 1, 2024

Choose a reason for hiding this comment

tonypls commented Aug 1, 2024 • edited Loading

VIKTORVAV99 commented Aug 1, 2024 • edited Loading

tonypls commented Aug 1, 2024

tonypls left a comment

Choose a reason for hiding this comment

VIKTORVAV99 commented Aug 1, 2024 • edited Loading

VIKTORVAV99 commented Aug 1, 2024

tonypls commented Aug 2, 2024

VIKTORVAV99 commented Jun 19, 2024 •

edited

Loading

tonypls commented Aug 1, 2024 •

edited

Loading

VIKTORVAV99 commented Aug 1, 2024 •

edited

Loading

VIKTORVAV99 commented Aug 1, 2024 •

edited

Loading