#24277 closed enhancement (fixed)

Reduce vertical header size

Reported by: Hello71 Owned by: irl
Priority: Medium Milestone:
Component: Metrics/Website Version:
Severity: Minor Keywords:
Cc: Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

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.

Child Tickets

Change History (12)

comment:1 Changed 16 months ago by karsten

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.

comment:2 Changed 16 months ago by karsten

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

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

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!

comment:3 Changed 16 months ago by iwakeh

Summary: header takes up too much spaceReduce vertical header size

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

comment:4 Changed 16 months ago by karsten

Status: newneeds_review

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.

comment:5 Changed 16 months ago by irl

Owner: changed from metrics-team to irl
Status: needs_reviewaccepted

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.

comment:6 Changed 16 months ago by irl

Status: acceptedneeds_review

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

comment:7 Changed 16 months ago by karsten

Status: needs_reviewneeds_revision

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!

comment:8 Changed 15 months ago by irl

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

comment:9 Changed 15 months ago by karsten

Status: needs_revisionmerge_ready

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

comment:10 Changed 15 months ago by irl

Resolution: fixed
Status: merge_readyclosed

Merged and deployed for Relay Search.

Note: See TracTickets for help on using tickets.