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

Revamp header layout #205

Merged

Conversation

Eric-Arellano
Copy link
Contributor

@Eric-Arellano Eric-Arellano commented Jul 4, 2024

This improves the header:

  • Makes all touch targets at least 44px, the accessibility minimum
  • Moves copy link icon to the header
  • Removes the "Parking Lot Map" text
  • adds a teal border underneath

It also adds more explanatory text to the header in the scorecard, now saying "Parking lots in City, ST" to better explain what people are seeing.

before: mobile Screenshot 2024-07-07 at 4 27 36 PM
before: desktop Screenshot 2024-07-07 at 4 26 40 PM
after: mobile Screenshot 2024-07-07 at 4 27 00 PM
after: desktop Screenshot 2024-07-07 at 4 25 55 PM

--

Removing the "Parking Lot Map" text achieves two things:

  • Allows us to fit the header on a single line, even on mobile. This allows more screen real estate for the map itself and scorecard
  • Improves information hierarchy. The name of the map is not as important as the map itself and explaining what you're seeing on the map (i.e. the unexpanded accordion)

People will still see the name of the map because it's often accessed from the resources folder with all the additional context.

--

Finally, this improves the size and positioning of the donate button.

@Eric-Arellano Eric-Arellano changed the title [wip] Revamp site layout Revamp header layout Jul 7, 2024
@Eric-Arellano Eric-Arellano marked this pull request as ready for review July 7, 2024 20:32
@Eric-Arellano Eric-Arellano merged commit 147db96 into ParkingReformNetwork:main Jul 7, 2024
1 check passed
@Eric-Arellano Eric-Arellano deleted the EA/no-title-in-header branch July 7, 2024 20:46
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.

1 participant