Reduce vertical header size

including the two navigation bars plus the quote, but excluding the cookie bar, it occupies about 32% of my available screen space (compared to a web page displaying just text). I suggest that the quote be moved, preferably to the bottom, but floated to the top right of the content would work too, since usually this area is cleared by a short header. then, the logo could be moved to be in line with the top navigation bar. additionally, the bottom navigation bar could be moved to the left side of the screen, similar to the MediaWiki layout.

added component::metrics/website owner::irl priority::medium resolution::fixed severity::minor status::closed type::enhancement labels

Agreed, the header occupies more space than necessary. You'll notice that that changes when you reduce the window height. Maybe we should use that header height for all window heights?

Or do you want to create a quick mockup with those changes and make it available here for further discussion?

By the way, we'll probably want to fully integrate Relay Search into Tor Metrics before making these changes, because right now we'd have to make them in two separate places. But that shouldn't stop us from planning improvements for after that integration.

See also #24349 (moved) which I just closed as duplicate and which contained this annotated screenshot:


Copying over the rest from that ticket:

Hi Karsten. I know you're proud of the quote from Bruce but the metrics banner is needlessly large. I suspect Atlas gets more traffic than the rest of metrics combined so by folding it in we should be wary of not making its inclusion a step backward for its users.

I'd suggest only including Bruce's quote on the frontpage of metrics and shrinking the top banner...

https://www.atagar.com/transfer/tmp/metrics_banner.png

Thanks!

Rewording the summary a little to make clear what this ticket wants to achieve.

Trac:
Summary: header takes up too much space to Reduce vertical header size

Let's start with the first step that I suggested above and make the header height independent of media height. Please review this trivial commit in my task-24277 branch. (It's a bit of a hack to change the height threshold from 800 to 8000px, but at least it made me relatively confident that I didn't break anything by moving around CSS parts.)

irl, if this change looks okay to you, do you want to coordinate the update of Relay Search and Tor Metrics?

To be clear, we can certainly do more after this change. But maybe we need a web designer for that.

Trac:
Status: new to needs_review

As discussed in today's meeting, I'll update this patch to do things in a less hacky way and then we will coordinate on updating metrics-web and Relay Search together.

Trac:
Owner: metrics-team to irl
Status: needs_review to accepted

Trac:
0001-Reduces-default-vertical-header-size-Fixes-24277.patch

I've attached a solution that does not use the 8000px hack.

Trac:
Status: accepted to needs_review

Hmm, or can we take out everything related to media height? Basically, take my patch and remove the (min-height:8000px) blocks and the (max-height:8000px) conditions? Untested!

Trac:
Status: needs_review to needs_revision

Trac:
0001-Reduces-default-vertical-header-size-Fixes-24277.2.patch

Yes, we can. See above. Tested in responsive design view in Firefox, I'm unable to find a size where things break.

Looks good! Merged and deployed. (You should probably update Relay Search in the next couple days, too.) Thanks!

Trac:
Status: needs_revision to merge_ready

Merged and deployed for Relay Search.

Trac:
Resolution: N/A to fixed
Status: merge_ready to closed

closed

mentioned in issue #24349 (moved)

mentioned in issue #24461 (moved)