From: Warren Young <warren@etr-usa.com>
To: Cygwin Patches <cygwin-patches@cygwin.com>
Subject: Re: /packages CGI HTML modernization
Date: Fri, 20 Jun 2014 16:54:00 -0000 [thread overview]
Message-ID: <53A4672C.9080304@etr-usa.com> (raw)
In-Reply-To: <87fvj0ur5y.fsf@Rainer.invalid>
On 6/19/2014 22:43, Achim Gratz wrote:
> background-size: 1em 1em;
No. The original gray ball bitmap is 20x20, and the current layout
scales it to 10x10, on purpose. Scaling it to "em"s makes the size
font-dependent.
Ideally, cygwin.com would have its own bullet image so it doesn't have
to be scaled in the browser. The result wouldn't need to be padded,
either, since CSS can take care of positioning and margins.
> width: 30%;
You can do both, of course. Set the width of the package name column to
30% -- or whatever -- in the static CSS, so that at least you'll have a
sensible default in the noscript case.
I do now see that the page already uses JavaScript.
On revisiting this, I've come up with several refinements, with the end
result that the new concept fully replicates the existing look.
First, the <span> around the <a> is redundant. You can address the
package name link element directly.
Second, by putting the description in a span, you can make it wrap
inside the second column width just as the current <table> based
implementation does.
The second change makes the gray ball list bullet disappear for some
reason if you leave it on the <li> element, but I figured out how to get
it to appear as part of the <a> element. It means the bullet is now
clickable, which is odd, but this doesn't bother me.
Each <li> now looks like this:
<li><a href="x86/pkg">pkg</a><span>description</span></li>
The CSS is now:
<style type="text/css">
ul.pkglist li {
display: block;
clear: both;
}
a {
background: url('http://sourceware.org/icons/ball.gray.gif')
no-repeat;
background-position: 0px 0.7em;
background-size: 10px 10px;
float: left;
padding-left: 20px;
padding-top: 0.4em;
}
span {
float: left;
padding-top: 0.4em;
}
</style>
and the JS is now:
<script type="text/javascript">
var lw = $('ul.pkglist').width();
var mw = 0;
$('ul.pkglist a').each(function(i, e) {
mw = Math.max(mw, $(e).width());
}).css('width', mw + 10 + 'px');
$('ul.pkglist span').css('width', lw - mw - 40 + 'px');
</script>
The "40" constant subtracts out some of the padding the browser adds.
If it gets too small -- or you leave it out -- the <span> becomes too
wide and has to wrap below the <a>.
I made these changes to a copy of the /packages generated HTML, and the
page weight and render time both dropped roughly in half.
next prev parent reply other threads:[~2014-06-20 16:54 UTC|newest]
Thread overview: 5+ messages / expand[flat|nested] mbox.gz Atom feed top
2014-06-19 15:51 Warren Young
2014-06-20 4:43 ` Achim Gratz
2014-06-20 16:54 ` Warren Young [this message]
2014-06-20 17:09 ` Warren Young
2014-06-20 17:11 ` Christopher Faylor
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=53A4672C.9080304@etr-usa.com \
--to=warren@etr-usa.com \
--cc=cygwin-patches@cygwin.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).