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.

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

x/pkgsite: various UI cleanups due to new fixed header on details page #40504

Open
6 of 11 tasks
andybons opened this issue Jul 30, 2020 · 7 comments
Open
6 of 11 tasks

x/pkgsite: various UI cleanups due to new fixed header on details page #40504

andybons opened this issue Jul 30, 2020 · 7 comments
Labels
NeedsFix The path to resolution is known, but the work has not been done. pkgsite
Milestone
pkgsite/unplanned

Comments

@andybons
Copy link
Member

andybons commented Jul 30, 2020 •
edited

  • The version string in the sticky header is all uppercase, which renders as GO1.14.6 on standard library packages. This should preserve the original casing
  • The :target selector in stylesheet.css (and in sidenav.css) that’s used to ensure that anchor targets aren’t scrolled below the sticky headers isn’t needed for pages that don’t have them (and need to be adjusted for the new sticky header on the details pages)
  • Should the homepage should have smart quotes around example searches? (unrelated to header but just noticed it)
  • overflow: auto on the html and body elements (used to fix an iOS focus bug) is causing other focus issues and the fixed header to appear over scrollbars
  • Search text is shown on mobile when the search input is collapsed
  • Ensure sidenav height is properly calculated
  • The IntersectionObserver logic to show the sticky header will trigger it if the inline nav is below the fold. Ensure it only shows if it is off the top of the screen
  • The search bar in the primary header looks a bit off re: spacing on iOS
  • Determine whether to keep uppercase “Package”, “Command”, etc.
  • Adjust IntersectionObserver margin on fixed header to have it show earlier
  • Fixed header hack to fix focus bug on iOS Safari breaks tap-to-top behavior

/cc @julieqiu @jamalc
@andybons andybons added NeedsFix The path to resolution is known, but the work has not been done. pkgsite labels Jul 30, 2020
@andybons andybons self-assigned this Jul 30, 2020
@julieqiu
Copy link
Member

julieqiu commented Jul 30, 2020 •
edited

The version string in the sticky header is all uppercase, which renders as GO1.14.6 on standard library packages. This should just be all lowercase

Would it be possible to keep the casing as it is in the main header? For pseudoversions, the version string will contain the commit hash, which may be a mix of uppercase and lowercase characters. Same with build metadata and pre-release identifiers.

@andybons
Copy link
Member Author

Sorry yeah. I meant to say casing should be preserved.

@gopherbot
Copy link

Change https://golang.org/cl/246478 mentions this issue: content/static/css: update CSS to only overflow: auto on mobile

gopherbot pushed a commit to golang/pkgsite that referenced this issue Aug 4, 2020
@andybons
content/static/css: constrain fixed position hack to mobile Safari
d1e3806 
overflow: auto was fixing an issue relating to the overflow menu
in the fixed header on iOS, but was causing a bunch of other issues.
Notably, the scrollbar was underneath the fixed header and anchor
links did not behave as expected. Only set this on mobile Safari
(where these issues don’t present themselves; I’m sure others will
pop up but they’re at least restricted to mobile Safari).

Updates golang/go#40504
Fixes golang/go#40552
Fixes golang/go#40556

Change-Id: Ib7e108672d6897421faefa3a0b45cc6d7835bb15
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/246478
Run-TryBot: Andrew Bonventre <andybons@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>
@gopherbot
Copy link

Change https://golang.org/cl/246577 mentions this issue: content/static/css: update target padding and restrict to details pages

@gopherbot
Copy link

Change https://golang.org/cl/246578 mentions this issue: content/static/css: preserve casing of version in fixed header

@gopherbot
Copy link

Change https://golang.org/cl/246580 mentions this issue: content/static/css: hide search text in header on small viewports

gopherbot pushed a commit to golang/pkgsite that referenced this issue Aug 4, 2020
@andybons
content/static/css: update target padding and restrict to details pages
f77b40c 
This change updates the styled :target pseudo-element to restrict
it to details pages since a fixed header is not present on others.

Updates golang/go#40504

Change-Id: Ifc528eb2ef6a10526615f29002f27abdb698605e
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/246577
Run-TryBot: Andrew Bonventre <andybons@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>
gopherbot pushed a commit to golang/pkgsite that referenced this issue Aug 4, 2020
@andybons
content/static/css: preserve casing of version in fixed header
25a3780 
Updates golang/go#40504

Change-Id: I74d1b5130f141e9db033ebec2a9ef309cd2e0229
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/246578
Run-TryBot: Andrew Bonventre <andybons@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>
gopherbot pushed a commit to golang/pkgsite that referenced this issue Aug 4, 2020
@andybons
content/static/css: hide search text in header on small viewports
f177a82 
Since the search input is collapsed when not in focus on small
viewports, the text should not be shown.

Updates golang/go#40504

Change-Id: Ie4ea3e37a3c22ab7e9cb3198ec3c50108978547d
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/246580
Run-TryBot: Andrew Bonventre <andybons@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>
@andybons andybons changed the title pkgsite: various UI cleanups due to new fixed header on details page x/pkgsite: various UI cleanups due to new fixed header on details page Aug 12, 2020
@gopherbot gopherbot added this to the Unreleased milestone Aug 12, 2020
@gopherbot
Copy link

Change https://golang.org/cl/248185 mentions this issue: content/static: fix various issues with homepage

gopherbot pushed a commit to golang/pkgsite that referenced this issue Aug 13, 2020
@andybons
content/static: fix various issues with homepage
a1b9579 
+ Add blank alt text to decorative images (including the main image)
+ Preserve the main image ratio when sizing using CSS
+ Reduce the intrinsic size of the main image since we were displaying
  a much smaller version on the page
+ Adjust CSS for smaller viewports. Specifically, reduce top margins
  at smaller viewports
+ Update CSS to be mobile by default, with media queries covering
  wider viewports (to be in line with the other CSS across the site)
+ Update the background color of one of the footers to ensure we have
  satisfactory contrast ratio as reported by Lighthouse
+ Use smart quotes around sample searches
+ Transform the label text for example searches using CSS instead
  of directly typing in all caps

Updates golang/go#40504

Change-Id: I55d2823094d9968d00c6d48e64b10af5abd965f6
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/248185
Run-TryBot: Andrew Bonventre <andybons@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Jamal Carvalho <jamal@golang.org>
@julieqiu julieqiu removed the website label Sep 19, 2020
@julieqiu julieqiu removed the website label Sep 19, 2020
@andybons andybons removed their assignment Oct 2, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
NeedsFix The path to resolution is known, but the work has not been done. pkgsite
Projects
None yet
Milestone
pkgsite/unplanned
Development

No branches or pull requests
3 participants
@andybons @julieqiu @gopherbot