Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rearrange and update splash contents #952

Merged
merged 6 commits into from
Jul 29, 2024
Merged

Rearrange and update splash contents #952

merged 6 commits into from
Jul 29, 2024

Conversation

victorlin
Copy link
Member

@victorlin victorlin commented Jul 10, 2024 •
edited
Loading

preview

Description of proposed changes

Follow-up to #901 which added a section without much thinking on how it fits with the rest of the page. Design and contents directly reflects mockup by @trvrb.

Related issue(s)

Checklist

@victorlin victorlin self-assigned this Jul 10, 2024
@nextstrain-bot nextstrain-bot temporarily deployed to nextstrain-s-victorlin--xbfmig July 10, 2024 23:33 Inactive
@victorlin victorlin changed the base branch from master to victorlin/reorganize-splash July 10, 2024 23:33
@victorlin victorlin force-pushed the victorlin/rearrange-splash branch from 531a38b to 1e501d5 Compare July 10, 2024 23:40
@victorlin victorlin temporarily deployed to nextstrain-s-victorlin--xbfmig July 10, 2024 23:41 Inactive
@victorlin victorlin marked this pull request as ready for review July 10, 2024 23:42
@victorlin victorlin force-pushed the victorlin/rearrange-splash branch from 1e501d5 to c6d0ec3 Compare July 16, 2024 21:35
@victorlin victorlin temporarily deployed to nextstrain-s-victorlin--xbfmig July 16, 2024 21:35 Inactive
@victorlin victorlin temporarily deployed to nextstrain-s-victorlin--xbfmig July 25, 2024 18:34 Inactive
@victorlin victorlin temporarily deployed to nextstrain-s-victorlin--xbfmig July 25, 2024 18:43 Inactive
@victorlin victorlin temporarily deployed to nextstrain-s-victorlin--xbfmig July 25, 2024 18:47 Inactive
@victorlin victorlin force-pushed the victorlin/rearrange-splash branch from b598fe9 to 94ba4ca Compare July 25, 2024 19:24
@victorlin victorlin temporarily deployed to nextstrain-s-victorlin--xbfmig July 25, 2024 19:24 Inactive
@victorlin victorlin requested review from jameshadfield and trvrb July 25, 2024 19:28
@trvrb
Copy link
Member

trvrb commented Jul 25, 2024

Awesome work here @victorlin! One quick I just noticed is that the responsive behavior at phone width is not ideal. Here's what I just got:

Screenshot 2024-07-25 at 1 05 02 PM

I'd recommend:

  1. Dropping the circular logo when hitting phone width. The "Nextstrain" logotype should fit in this case.
  2. I'd think I'd drop to 1 entry per row when hitting phone width. The two columns feel squeezed when it's this narrow.

Exact breakpoint for both of the above would have to be experimented with.

@trvrb trvrb temporarily deployed to nextstrain-s-victorlin--xbfmig July 25, 2024 20:24 Inactive
@trvrb
Copy link
Member

trvrb commented Jul 25, 2024 •
edited
Loading

I also just made a few small tweaks to the language in the links (in part to make everything a noun rather than mix of nouns and verbs).

I also didn't know exactly where the "open source tooling" link should go, but it felt too much like dropping someone in the middle of nowhere to link directly to github.com/nextstrain. I instead linked to the install section of the docs.

@victorlin
Copy link
Member Author

Thanks @trvrb! I'll play around with it more at narrow widths and push some fixes for that.

👍 link to installation docs should be more meaningful to users. I'll change the icon from GitHub logo to something that represents "tooling".

@victorlin victorlin force-pushed the victorlin/reorganize-splash branch from bc353f1 to 74a3882 Compare July 27, 2024 00:39
@victorlin victorlin force-pushed the victorlin/rearrange-splash branch from 6054f5d to d6f513e Compare July 27, 2024 00:39
@victorlin victorlin temporarily deployed to nextstrain-s-victorlin--xbfmig July 27, 2024 00:39 Inactive
@victorlin victorlin force-pushed the victorlin/rearrange-splash branch from d6f513e to 13c2dd5 Compare July 27, 2024 02:09
@victorlin victorlin temporarily deployed to nextstrain-s-victorlin--xbfmig July 27, 2024 02:09 Inactive
@victorlin
Copy link
Member Author

Exact breakpoint for both of the above would have to be experimented with.

I felt myself reaching for the more precise breakpoints from Bootstrap v4 so I created a PR to switch to that and used it here. Responsive design now looks like:

responsive-splash.mov

@victorlin victorlin mentioned this pull request Jul 29, 2024
Closed
@victorlin victorlin mentioned this pull request Jul 29, 2024
Closed
@victorlin victorlin force-pushed the victorlin/rearrange-splash branch from 13c2dd5 to 9bc0937 Compare July 29, 2024 21:55
@victorlin victorlin force-pushed the victorlin/reorganize-splash branch from 74a3882 to fa40d2b Compare July 29, 2024 21:55
@victorlin victorlin temporarily deployed to nextstrain-s-victorlin--xbfmig July 29, 2024 21:56 Inactive
victorlin and others added 6 commits July 29, 2024 14:58
@victorlin
Move featured analyses below linked sections
962947f 
Tweak the design of the sections for the new placement.
@victorlin @trvrb
Update splash contents
1cd989d 
For the linked sections, replace 'Community' and 'Narratives' with
'About us' and 'Open source tooling'.

These new sections also replace the intro paragraph.

Co-authored-by: Trevor Bedford <[email protected]>
@victorlin
Redesign splash heading
d1402df 
Put this in a separate component.
@victorlin
Make title smaller at narrow widths
87b9cc5 
Previously, this overflowed at ~400px width. Now, it overflows at ~320px width.

For reference, the iPhone SE 2nd gen is 375px wide.
@victorlin
Don't show home link on home page
afad6da 
The link with logo+title is redundant with the large heading on the home
page.
@victorlin
Add icons to linked sections
0a4ccf4 
This adds visual flair between the heading and featured analyses.
@victorlin victorlin force-pushed the victorlin/rearrange-splash branch from 9bc0937 to 0a4ccf4 Compare July 29, 2024 21:58
@victorlin victorlin temporarily deployed to nextstrain-s-victorlin--xbfmig July 29, 2024 21:59 Inactive
Base automatically changed from victorlin/reorganize-splash to master July 29, 2024 22:01
@victorlin victorlin mentioned this pull request Jul 29, 2024
Closed
15 tasks
@victorlin victorlin merged commit 2039512 into master Jul 29, 2024
7 checks passed
@victorlin victorlin deleted the victorlin/rearrange-splash branch July 29, 2024 22:08
@trvrb
Copy link
Member

trvrb commented Jul 30, 2024

I really like what you ended up with here @victorlin in terms of responsive breakpoints.

@victorlin victorlin mentioned this pull request Jul 30, 2024
Closed
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@joverlee521 joverlee521 joverlee521 approved these changes

@genehack genehack genehack approved these changes

@jameshadfield jameshadfield Awaiting requested review from jameshadfield

@trvrb trvrb Awaiting requested review from trvrb

Assignees

@victorlin victorlin

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@victorlin @trvrb @genehack @joverlee521 @nextstrain-bot