Skip to content

Implement new style and layout#24

Merged
nerik merged 8 commits intomainfrom
update/layout-style
Oct 2, 2023
Merged

Implement new style and layout#24
nerik merged 8 commits intomainfrom
update/layout-style

Conversation

@LanesGood
Copy link
Member

@LanesGood LanesGood commented Sep 12, 2023

This contains a big commit for style and layout updates. This PR:

  • uses DevSeed collecticons in place of image pngs
  • Combines the “Add team members” panel with “Select who’s coming” to create a single "Attendees" panel
  • Updates layout for a single sidepanel with two collapsable sections: Attendees and Meeting Locations
  • Condenses first two columns of each table to a single stacked column for each: Name + Group for attendees, Location + IATA code + Country + Flag for locations
  • Collapses the "Group Options" and "Delete" actions into a single "Options" dropdown on each row for the attendees table
    • visible in screenshots below, the group options are present only on members in groups
  • Updates theme and styling
  • Applies basic responsive views
Screen Shot 2023-09-12 at 2 41 42 PM Screen Shot 2023-09-12 at 2 41 34 PM Screen Shot 2023-09-12 at 2 41 51 PM Screen Shot 2023-09-12 at 2 42 01 PM Screen Shot 2023-09-12 at 2 42 06 PM Screen Shot 2023-09-12 at 2 42 12 PM

A few notes:

  • I think there is a more elegant way to set id's on the panels for the expand/collapse action - I didn't quite get there
  • The Popup is not inheriting the DevSeed theme UI - I'm not sure what the solution is here. Wrapping the Popup component in the ThemeProvider did not fix this fixed!

@LanesGood LanesGood requested a review from nerik September 12, 2023 19:01
@nerik nerik force-pushed the update/layout-style branch from a017f0e to 2044ca6 Compare September 28, 2023 08:16
Copy link
Contributor

@nerik nerik left a comment

Choose a reason for hiding this comment

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

This is looking amazing 🙏

One thing that I think was problematic with the collapsable panels is that you could easily end up in that "empty" state:

Screenshot 2023-09-28 at 10 03 26

So I tweaked the panel behavior a little bit:

  • You can't collapse a panel anymore if it's the only one visible
  • The app now opens with only the 'attendees' panel opened. The app seemed like a lot to take in at first load.
  • Clicking the 'done' button now opens the 'locations' in its entirety.

Thoughts @LanesGood

@LanesGood
Copy link
Member Author

@nerik thanks for these changes and the improvements to the panel state.

One slight suggested change: what if we had both panels open by default, but have the "Add at least 2 attendees to show results" line in the <Candidates> panel rendered when no results are present? Like the below:

image

@wrynearson wrynearson self-requested a review September 29, 2023 15:04
Copy link
Contributor

@wrynearson wrynearson left a comment

Choose a reason for hiding this comment

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

Fantastic work @LanesGood! I love the new UI layout and functionality.

Using @nerik's globe map style, I stress-tested this with 694 participants. Co2ordinate handles it very well 😄. It'd be nice to test with your map style.

Co2ordinate.stress.test.mp4

@wrynearson wrynearson self-requested a review September 29, 2023 15:15
Copy link
Contributor

@wrynearson wrynearson left a comment

Choose a reason for hiding this comment

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

However, I did find that the attendees checkbox status wasn't in sync when the select/deselect all members from group X functionality was used.

Co2ordinate.attendee.selection.bug.mp4

Show both tabs at mount

Co-authored-by: Lane Goodman <lane@developmentseed.org>

Update src/components/Planner.tsx

Co-authored-by: Lane Goodman <lane@developmentseed.org>
@nerik nerik force-pushed the update/layout-style branch from db96c8f to ce2fe15 Compare October 2, 2023 12:41
@nerik
Copy link
Contributor

nerik commented Oct 2, 2023

@wrynearson Thanks for reporting, tracking these here:
#20 (comment)
#26

@nerik nerik merged commit c7e14ca into main Oct 2, 2023
@nerik nerik deleted the update/layout-style branch October 2, 2023 12:52
@LanesGood LanesGood mentioned this pull request Oct 3, 2023
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants