#1933 Pagure pages are very whitespace-ey
Opened 5 years ago by tibbs. Modified 3 years ago

In general, the styling of pagure pages includes a very large amount of whitespace. This is fine, I guess, but it does make it really difficult to look at a large amount of information without scrolling endlessly. My desktop is 4880 pixels across and is not hidpi; most of the pagure interface is squeezed into a narrow strip in the middle of the window.

After migrating from trac I find that especially the issues page suffers terribly from having far more whitespace than actual content and I started playing with the styling and greasemonkey to get something which I find usable.

The first thing I did was:

$('.container').addClass('container-fluid').removeClass('container')

Fluid containers will occupy the screen width but otherwise seem to be identically responsive. The fact that isn't the default has always baffled me about bootstrap, but regardless, it really does help pagure in general. Unfortunately doing it in greasemonkey for all of pagure breaks the comment entry boxes, and I haven't dug into why.

The other thing that really helps is

$('#pagure-issues-list td').css({ 'padding-top': '0px', 'padding-bottom': '0px'})

The extra padding is more than half of the vertical width of the #pagure-issues-list table. Afterwards this lets me look at a reasonable set of issues in a not massively huge browser window without scrolling.


That last one is now the way I always see the issue page thanks to the following greasemonkey script:

// ==UserScript==
// @name        Widen pagure
// @namespace   tibbs@fedoraproject.org
// @description Widens pagure pages to occupy the entire browser width
// @match       *://pagure.io/*/issues* 
// @version     1
// @grant       none
// @require     https://code.jquery.com/jquery-3.1.1.min.js
// ==/UserScript==

$('.container').addClass('container-fluid').removeClass('container')

$('#pagure-issues-list td').css({ 'padding-top': '0px', 'padding-bottom': '0px'})

// This widens the setting list a bit
// $('.col-md-8.col-md-offset-2').addClass('col-md-10').removeClass('col-md-8').addClass('col-md-offset-1').removeClass('col-md-offset-2')

Anyway, I wanted to get this written down somewhere in case someone else runs into the same problem. I'm thinking it might not even be all that hard for tighter issue list spacing and wide pages to be user configurables within pagure itself, but then that makes testing less pleasant and so I don't know if anyone would be amenable to doing it.

Also, I note that if I "widen" the issues page (by replacing container with container-fluid) and then widening the issue portion to be 9 columns wide while shrinking the other boxes from 4 to 3 columns then the layout is extremely functional. Still can't figure out why doing this in greasemonkey screws up the comment boxes, though.

pagure4.png

I'm not entirely fan of the height of the rows in

[screenshot(https://pagure.io/pagure/issue/raw/files/f1f6f58593a649e36b7585e31b0eceff738d7093f4639e5d4075d775f1c1d7b6-pagure3.png))

The rest would need a little testing and likely some feedback from @ryanlerch but sounds reasonable to me (from the screenshots)

I think there's more than enough whitespace between the rows in that screenshot, and would even go for squeezing out another pixel or two, but that's where I ended up with two lines of javascript. I really do want to see all of that content on one page. Sadly I can't now show you a screenshot of a trac report, but it was at least as dense as what that screenshot shows.

I understand that there's a conflict between having pretty pages and displaying information in a way that allows me to get work done. Sadly I can only crank the font down so small before it becomes unreadable to my aging eyes, and getting rid of wasted space lets me keep larger fonts while still keeping what I need to see on the page.

In any case, greasemonkey will suffice if the above is just too extreme, though it shouldn't really be all that difficult to make this list spacing, or spacing in general, a per-user configurable. The related CSS items would need to be pulled out into a separate file and then modified for the two or three different configurable spacings, and then the different versions of that file would be sent on each page depending on a user setting. It's not much different from how you'd do a theme. which is also something I'd love to see, because pagure is really quite bright and tends to give me eye strain.

So with the 5.0 layout things are quite different but still very whitespace-y. I have updated my greasemonkey script which currently lives at https://www.math.uh.edu/~tibbs/greasemonkey/Widen_pagure.user.js. It looks like this:

pagure.png

It switches container to container-fluid (on the wiki, too), moves the badges back onto the line with the text, eliminates extra padding, and adds lg and xl layouts (because md is for windows up to 768px wide). Though don't really like boostrap's default breakpoints and using a 10/2 split in xl mode at the default breakpoint (1200px) makes the sidebar a little bit thin. So I may come up with my own breakpoints, set up a more fine-grained layout or switch to a fixed-width sidebar.

What I think I'd really like to do is to have a toggle/dropdown for switching between layouts. It's certainly possible in a userscript but I still wonder if this is something that shouldn't be part of pagure. In any case, I will continue to share my hacks in the hope that they will be useful.

Login to comment on this ticket.

Metadata