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

Freshen up tha header a little #458

Merged
merged 3 commits into from
Aug 2, 2024

Conversation

sneakers-the-rat
Copy link
Contributor

Fix: #456

needed something to procrastinate on for an hour or two this afternoon bc couldn't think about data modeling anymore.

OK so here is a tour of widths on the current homepage:

pyos_widths_pre.mp4

and here is this PR

pyos_widths_post.mp4

so not THAT different but here are the highlights.

  • save the search button on mobile! the issue there was that it and the burger menu button were absolutely positioned, and in particular the search button had a media query that pushed it off the page when the screen was small. So i turned the header bar into a flexbox instead and added a spacer element to push everything to the right with and without the link buttons being present. I also unnested the multiple levels of wrapping elements that were making it a bit hard to work with the header bar bc padding was specified in multiple places, etc. Then the rest of the changes in masthead.html are me reformatting the template html a bit with prettier.
  • clean up the stylesheets! there were a decent number of redundant styles for the same classes and elements split across two files, masthead and pyos_dropdown. I could tell there was a bit of frustration from that from all the !important tags there, where the styles were conflicting with one another. I cleaned it up so all the "top-level" layout stuff of where stuff is on the header bar is in masthead and then everything for the dropdown menus was in pyos_dropdown, and i grouped together definitions for nested classes that were also defined in multiple places so that way we aren't mixing levels and confusing ourselves :). This was for maintenance's sake but also since we are having some perf problems, specifically in the css rendering part, i figure we might as well start to trim down unused/conflicting styles so the first render can start getting a little faster.
  • similarly, i started setting some explicit heights to the topmost things so we can avoid unnecessary reflows/recomputes, but that wasn't the main goal, more prep for more focused perf work in the future.
  • I noticed that the card items were a little hard to read at narrow widths:
    Screenshot 2024-08-01 at 7 39 01 PM
    so i made this breakpoint a bit wider and added some stuff to keep the images from getting humongous when that happened.
  • I also noticed that the menus had this sort of odd shadow border to them that looked unintentional, so i removed it, but lmk if that was intentional and i can add it back:
pre post
Screenshot 2024-08-01 at 7 41 01 PM Screenshot 2024-08-01 at 7 41 55 PM
  • and then finally i made the bar a little narrower because imo it's sort of large at desktop sizes, and then to keep the logo prominent i put it in a little bubble with a retro border :)
pre post
Screenshot 2024-08-01 at 7 43 56 PM Screenshot 2024-08-01 at 7 44 57 PM

anyway i know this is not a modular PR, so if we don't like any of these changes it's no problem to take them out. just once i got started i sorta couldn't stop touchin stuff and here we are

@lwasser
Copy link
Member

lwasser commented Aug 2, 2024

@sneakers-the-rat wow a video and everything! thank you for the detailed and well documented pr. i've been fighting with that positioning for a while. it seems like flex boxes are the better way to go.

the redundant styles are probably a combination of

  1. my moving things around in a haphazard way 🙃
  2. breaking out of the minimal mistakes theme which i had previously only overridden styles but NOW we can just update the existing style sheets.

thank you for doing this . i'll review and will merge if it all is working locally as it is in the videos!! THANK YOU SO MUCH.

i've tested this on various screens and it looks good! i like the pyopensci bubble. let's add it and see what folks think about it.

@lwasser lwasser merged commit 0cc8418 into pyOpenSci:main Aug 2, 2024
4 checks passed
@sneakers-the-rat
Copy link
Contributor Author

great! i figured the css had lots of history from doing exactly that :) v normal problem. crossing my fingers i didn't cause 10 new problems here lol

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.

Search icon doesn't stay in the right spot on mobile
2 participants