* /packages CGI HTML modernization
@ 2014-06-19 15:51 Warren Young
2014-06-20 4:43 ` Achim Gratz
0 siblings, 1 reply; 5+ messages in thread
From: Warren Young @ 2014-06-19 15:51 UTC (permalink / raw)
To: Cygwin Patches
[-- Attachment #1: Type: text/plain, Size: 1434 bytes --]
The current CGI code that generates the package and file lists for
http://cygwin.com/packages emits highly redundant HTML, and it is laid
out using a huge slow-to-render table. The attached patch shows a
minimal way to use <ul> instead of <table>, along with some CSS and JS
to style it in a similar way to the current look.
If JavaScript is verboten on cygwin.com, you can empirically find an
appropriate value for the width of the package name column and put that
in the CSS:
ul.pkglist span {
float: left;
width: 185px;
}
All the jQuery code does is find that width value programmatically,
which makes it robust in the face of different font sizes and such.
I have also attached a simple example HTML and CSS file, which show the
basic idea of the change with all the distractions of the real /packages
page stripped away. Just put packages.* in a directory and open
packages.html in your favorite browser.
I lack the ability to generate packages.inc here, but I expect applying
the same concept to that script as well will have a measurable effect on
the load time of cygwin.com/packages. I expect it to roughly halve the
size of the file and measurably reduce the page render time.
The contents of the attached CSS file should be inserted into one of
cygwin.com's normal CSS files.
(I've attached all this as a tarball only to placate the text/html MIME
filter on this list.)
[-- Attachment #2: pg-html5.tar.xz --]
[-- Type: application/octet-stream, Size: 1288 bytes --]
^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: /packages CGI HTML modernization
2014-06-19 15:51 /packages CGI HTML modernization Warren Young
@ 2014-06-20 4:43 ` Achim Gratz
2014-06-20 16:54 ` Warren Young
0 siblings, 1 reply; 5+ messages in thread
From: Achim Gratz @ 2014-06-20 4:43 UTC (permalink / raw)
To: cygwin-patches
Warren Young writes:
> The current CGI code that generates the package and file lists for
> http://cygwin.com/packages emits highly redundant HTML, and it is laid
> out using a huge slow-to-render table. The attached patch shows a
> minimal way to use <ul> instead of <table>, along with some CSS and JS
> to style it in a similar way to the current look.
+1
> If JavaScript is verboten on cygwin.com, you can empirically find an
> appropriate value for the width of the package name column and put
> that in the CSS:
>
> ul.pkglist span {
> float: left;
> width: 185px;
> }
I'd try something like this to keep it more nicely scalable:
ul.pkglist li {
background: url('http://sourceware.org/icons/ball.gray.gif')
no-repeat center left 0.2em;
background-size: 1em 1em;
padding-left: 1.4em;
display: block;
align: center;
}
ul.pkglist span {
float: left;
width: 30%;
}
Regards,
Achim.
--
+<[Q+ Matrix-12 WAVE#46+305 Neuron microQkb Andromeda XTk Blofeld]>+
Factory and User Sound Singles for Waldorf rackAttack:
http://Synth.Stromeko.net/Downloads.html#WaldorfSounds
^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: /packages CGI HTML modernization
2014-06-20 4:43 ` Achim Gratz
@ 2014-06-20 16:54 ` Warren Young
2014-06-20 17:09 ` Warren Young
0 siblings, 1 reply; 5+ messages in thread
From: Warren Young @ 2014-06-20 16:54 UTC (permalink / raw)
To: Cygwin Patches
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.
^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: /packages CGI HTML modernization
2014-06-20 16:54 ` Warren Young
@ 2014-06-20 17:09 ` Warren Young
2014-06-20 17:11 ` Christopher Faylor
0 siblings, 1 reply; 5+ messages in thread
From: Warren Young @ 2014-06-20 17:09 UTC (permalink / raw)
To: Cygwin Patches
On 6/20/2014 10:54, Warren Young wrote:
>
> The CSS is now:
Sorry, left a few things out:
ul.pkglist li {
display: block;
clear: both;
}
ul.pkglist a {
background: url('http://sourceware.org/icons/ball.gray.gif')
no-repeat;
background-position: 0px 0.7em;
background-size: 10px 10px;
padding-left: 20px;
padding-top: 0.4em;
float: left;
width: 30%;
}
ul.pkglist span {
float: left;
padding-top: 0.4em;
width: 67%;
}
The main thing is that I forgot to include the "ul.pkglist" parent
qualifiers on the second two CSS rules.
Note, however, that I also added the width attributes to the two <li>
children, which has the nice effect of making the JS completely
optional. The default values will make the package name column wrap,
but if JS is available, the jQuery script I posted previously will
increase the column width to fix that.
The (30%+67%) < 100% thing is another hack around the margins the
browser uses, just like the 40px magic constant in the JS.
^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: /packages CGI HTML modernization
2014-06-20 17:09 ` Warren Young
@ 2014-06-20 17:11 ` Christopher Faylor
0 siblings, 0 replies; 5+ messages in thread
From: Christopher Faylor @ 2014-06-20 17:11 UTC (permalink / raw)
To: cygwin-patches
Please take this elsewhere. website patches are off-topic for
cygwin-patches.
But, FYI, when it comes to the web site, I'm not really too interested
in fixing something that isn't broken.
cgf
^ permalink raw reply [flat|nested] 5+ messages in thread
end of thread, other threads:[~2014-06-20 17:11 UTC | newest]
Thread overview: 5+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2014-06-19 15:51 /packages CGI HTML modernization Warren Young
2014-06-20 4:43 ` Achim Gratz
2014-06-20 16:54 ` Warren Young
2014-06-20 17:09 ` Warren Young
2014-06-20 17:11 ` Christopher Faylor
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).