Improved CSS browser compat. + misc layout improvements
This commit is contained in:
Yorhel
parent
e74ae0ae67
commit
1f4328a72c
3 changed files with 81 additions and 38 deletions
|
|
@ -50,6 +50,7 @@ CREATE TABLE man (
|
|||
|
||||
|
||||
CREATE INDEX ON man USING hash (hash);
|
||||
CREATE INDEX ON man (name);
|
||||
|
||||
|
||||
INSERT INTO systems (id, name, release, short, relorder) VALUES
|
||||
|
|
|
|||
51
www/index.pl
51
www/index.pl
|
|
@ -21,7 +21,7 @@ TUWF::set(
|
|||
logfile => $ENV{TUWF_LOG},
|
||||
db_login => [undef, undef, undef],
|
||||
debug => 1,
|
||||
xml_pretty => 2,
|
||||
xml_pretty => 0,
|
||||
# Cache the system information
|
||||
pre_request_handler => sub {
|
||||
my $self = shift;
|
||||
|
|
@ -56,7 +56,7 @@ sub home {
|
|||
p style => 'float: none';
|
||||
# Relevant query: SELECT count(distinct hash), count(distinct name), count(*), count(distinct package) FROM man;
|
||||
# It's far too slow to run that on every pageview. :-(
|
||||
lit 'Indexing <b>483,771</b> versions of <b>119,397</b> manual pages found in <b>1,574,505</b> files of <b>169,949</b> packages.';
|
||||
lit 'Indexing <b>485,506</b> versions of <b>119,406</b> manual pages found in <b>1,578,498</b> files of <b>170,215</b> packages.';
|
||||
br;
|
||||
txt 'At this point only Arch Linux and Ubuntu have been indexed. More systems and repositories will be added later on.';
|
||||
end;
|
||||
|
|
@ -71,11 +71,11 @@ sub home {
|
|||
li;
|
||||
a href => "/browse/$sys->[0]{short}" if @$sys == 1;
|
||||
span style => "background-image: url('images/$img.png')", '';
|
||||
txt $sys->[0]{name};
|
||||
b $sys->[0]{name};
|
||||
if(@$sys > 1) {
|
||||
for(@$sys) {
|
||||
a href => "/browse/$_->{short}", $_->{release};
|
||||
}
|
||||
my $i = 0;
|
||||
a href => "/browse/$_->{short}", ++$i > 3 ? (class => "old") : (), $_->{release} for(reverse @$sys);
|
||||
a href => "#", 'more...' if $i > 3;
|
||||
}
|
||||
end 'a' if @$sys == 1;
|
||||
end;
|
||||
|
|
@ -83,7 +83,7 @@ sub home {
|
|||
end;
|
||||
|
||||
h2 'Other sites';
|
||||
ul;
|
||||
ul id => 'external';
|
||||
li; a href => 'http://man.cx/', 'Man.cx'; end;
|
||||
li; a href => 'http://man.he.net/', 'Man.he.net'; end;
|
||||
li; a href => 'http://linux.die.net/man/', 'Die.net'; end;
|
||||
|
|
@ -261,7 +261,10 @@ sub manselect {
|
|||
dd;
|
||||
for my $pkg (sort { $pkgs{$a}[0]{package} cmp $pkgs{$b}[0]{package} || $pkgs{$b}[0]{released} cmp $pkgs{$a}[0]{released} } keys %pkgs) {
|
||||
dl;
|
||||
dt $pkg;
|
||||
dt;
|
||||
txt $pkgs{$pkg}[0]{package};
|
||||
i $pkgs{$pkg}[0]{version};
|
||||
end;
|
||||
dd;
|
||||
for my $man (sort { $a->{section} cmp $b->{section} || ($a->{locale}||'') cmp ($b->{locale}||'') } @{$pkgs{$pkg}}) {
|
||||
my $t = $man->{locale} ? "$man->{section}.$man->{locale}" : $man->{section};
|
||||
|
|
@ -391,9 +394,15 @@ sub man {
|
|||
|
||||
h1 $man->{name};
|
||||
p;
|
||||
a href => "/$man->{name}/".substr($hash, 0, 8), 'permalink';
|
||||
a href => "/$man->{name}/".substr($man->{hash}, 0, 8), 'permalink';
|
||||
txt ' - ';
|
||||
a href => "/$man->{name}/".substr($hash, 0, 8).'/src', 'source';
|
||||
a href => "/$man->{name}/".substr($man->{hash}, 0, 8).'/src', 'source';
|
||||
end;
|
||||
|
||||
div id => 'contents';
|
||||
my $c = $self->dbManContent($man->{hash});
|
||||
($c = GrottyParser::html(manfmt $c)) =~ s/[\t\s\r\n]+$//; # TODO: <- Do this in GrottyParser
|
||||
pre; lit $c; end;
|
||||
end;
|
||||
|
||||
div id => 'locations';
|
||||
|
|
@ -406,8 +415,13 @@ sub man {
|
|||
td 'Name';
|
||||
td 'Filename';
|
||||
end; end;
|
||||
my $l = $self->dbManInfo(hash => $man->{hash});
|
||||
for(@$l) {
|
||||
my @l = sort {
|
||||
$self->{sysbyid}{$a->{system}}{name} cmp $self->{sysbyid}{$b->{system}}{name}
|
||||
|| $self->{sysbyid}{$b->{system}}{relorder} <=> $self->{sysbyid}{$a->{system}}{relorder}
|
||||
|| $b->{released} cmp $a->{released}
|
||||
|| $a->{filename} cmp $b->{filename}
|
||||
} @{$self->dbManInfo(hash => $man->{hash})};
|
||||
for(@l) {
|
||||
Tr;
|
||||
td $self->{sysbyid}{$_->{system}}{full};
|
||||
td "$_->{category}/$_->{package}";
|
||||
|
|
@ -423,11 +437,6 @@ sub man {
|
|||
end;
|
||||
end;
|
||||
|
||||
div id => 'contents';
|
||||
h2 'Contents';
|
||||
my $c = $self->dbManContent($man->{hash});
|
||||
pre; lit GrottyParser::html(manfmt $c); end;
|
||||
end;
|
||||
$self->htmlFooter;
|
||||
}
|
||||
|
||||
|
|
@ -472,17 +481,21 @@ sub htmlHeader {
|
|||
input type => 'submit', value => 'Search';
|
||||
end;
|
||||
end;
|
||||
|
||||
div id => 'body';
|
||||
}
|
||||
|
||||
|
||||
sub htmlFooter {
|
||||
my $self = shift;
|
||||
|
||||
br style => 'clear: both';
|
||||
end;
|
||||
div id => 'footer';
|
||||
lit 'All manual pages are copyrighted by their respective authors.
|
||||
| <a href="/info/about">About manned.org</a> | <a href="mailto:contact@manned.org">Contact</a>.';
|
||||
| <a href="/info/about">About manned.org</a> | <a href="mailto:contact@manned.org">Contact</a>';
|
||||
end;
|
||||
end 'body';
|
||||
end;
|
||||
end 'html';
|
||||
|
||||
# write the SQL queries as a HTML comment when debugging is enabled
|
||||
|
|
|
|||
67
www/man.css
67
www/man.css
|
|
@ -1,46 +1,75 @@
|
|||
* { margin: 0; padding: 0; font-family: Trebuchet MS, sans-serif; }
|
||||
/* TODO:
|
||||
* - The linear-gradient() functions are fairly new - perhaps want to provide background images for those.
|
||||
* - column-width is better done in Perl? (More like a column-count, then)
|
||||
*/
|
||||
|
||||
* { margin: 0; padding: 0; font-family: "Trebuchet MS", sans-serif; }
|
||||
html { background: #333; padding: 0 10px; }
|
||||
body { margin: 20px auto; max-width: 1250px; background: #fff; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
|
||||
-webkit-box-shadow: 0 10px 10px #def; }
|
||||
body { margin: 10px auto 50px auto; max-width: 1250px; border-collapse: separate; padding-bottom: 10px;
|
||||
-webkit-border-radius: 10px; -moz-border-radius: 10px;
|
||||
-webkit-box-shadow: 0 10px 10px #def; -moz-box-shadow: 0 10px 10px #def; box-shadow: 0 10px 10px #def; }
|
||||
h1 { font-size: 24px; font-weight: normal; color: #abc; }
|
||||
h1 + p { float: right; }
|
||||
h2 { font-size: 21px; margin-top: 40px; color: #468; font-weight: normal; clear: left }
|
||||
h2 + i { font-size: 12px; }
|
||||
dd { margin-left: 20px; }
|
||||
a { color: #048; font-family: Verdana; font-weight: normal; text-decoration: underline; padding: 3px 5px;
|
||||
-webkit-border-radius: 4px; -moz-border-radius: 4px; }
|
||||
dd { margin-left: 15px; }
|
||||
a { color: #048; font-family: "Verdana"; font-weight: normal; text-decoration: underline; padding: 3px 5px;
|
||||
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
|
||||
a:hover { text-decoration: none; background: #cde; }
|
||||
table { background: #eee; border: 5px solid #f8f8f8; margin: 10px 0; }
|
||||
td { padding: 1px 5px; font-size: 12px; }
|
||||
|
||||
#header { padding: 4px 20px; background: -webkit-linear-gradient(#40556a, #b0c5da); margin: -10px -10px 20px -10px; -webkit-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0;
|
||||
border-bottom: 1px solid #888; font: 24px Arial; }
|
||||
#header { padding: 4px 20px; border-bottom: 1px solid #888; font: 24px "Arial";
|
||||
-webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
|
||||
background: -webkit-linear-gradient(#40556a, #b0c5da);
|
||||
background: -moz-linear-gradient(#40556a, #b0c5da);
|
||||
background: -ms-linear-gradient(#40556a, #b0c5da);
|
||||
background: -o-linear-gradient(#40556a, #b0c5da);
|
||||
background: linear-gradient(#40556a, #b0c5da); }
|
||||
#header a { color: #f8f8f8; text-decoration: none; font-weight: bold; }
|
||||
#header a:hover { background: none; }
|
||||
#header form { float: right; }
|
||||
#header input { -webkit-box-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; }
|
||||
#header input { -webkit-box-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; -moz-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; box-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; }
|
||||
#header input[type=text] { width: 260px; padding: 2px; border: 1px solid #444; border-radius: 12px 0 0 12px;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#89a), to(white), color-stop(.9, #cde)); padding-left: 15px; }
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#89a), to(white), color-stop(.9, #cde)); padding-left: 15px; }
|
||||
#header input[type=text]:hover, #header input[type=text]:focus { background: -webkit-linear-gradient(#abc, #f0f8ff); outline: none; }
|
||||
#header input[type=submit] { padding: 2px 8px; border: 1px solid #444; border-radius: 0 12px 12px 0; color: #EEE; padding-right: 12px;
|
||||
margin-left: -5px; cursor: pointer; background: -webkit-gradient(linear, left top, left bottom, from(#556), to(#223)); }
|
||||
margin-left: -5px; cursor: pointer; background: -webkit-gradient(linear, left top, left bottom, from(#556), to(#223)); }
|
||||
|
||||
#nav { background: #f0f8ff; color: #036; float: right; padding: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; width: 250px; margin-bottom: 10px; }
|
||||
#body { padding: 10px 10px 20px 10px; background: #fff }
|
||||
|
||||
#nav { background: #f0f8ff; color: #036; float: right; padding: 8px; width: 250px; margin-bottom: 10px;
|
||||
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
|
||||
#nav > dt { font-weight: bold; }
|
||||
#nav a { font-size: 13px; }
|
||||
#nav b { font-family: Verdana; font-size: 13px; background: #cde; padding: 3px 5px;
|
||||
-webkit-border-radius: 4px; -moz-border-radius: 4px; }
|
||||
#nav i { font-style: normal; font-size: 12px; padding-left: 7px; color: #aaa }
|
||||
#nav b { font-family: "Verdana"; font-size: 13px; background: #cde; padding: 3px 5px;
|
||||
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
|
||||
|
||||
#systems li { display: block; float: left; font-size: 24px; width: 360px; margin: 20px; }
|
||||
#systems span { display: block; float: left; width: 50px; height: 50px; margin: 5px; background-size: contain; background-repeat: no-repeat; }
|
||||
#systems li { display: block; float: left; width: 360px; margin: 20px; }
|
||||
#systems span { display: block; float: left; width: 50px; height: 50px; margin: 5px; background-repeat: no-repeat; }
|
||||
#systems b { font-size: 24px; display: block; }
|
||||
#systems .old { display: none; }
|
||||
|
||||
#external { list-style-type: none }
|
||||
|
||||
#packages { margin: 20px 0; -webkit-column-width: 500px; -moz-column-width: 500px; column-width: 500px }
|
||||
#packages li { display: block; }
|
||||
#packages i { color: #ccc; font-size: 13px; }
|
||||
|
||||
#footer { height: 60px; clear: both; padding: 4px 10px; color: #f8f8f8; background: -webkit-linear-gradient(#b0c5da, #40556a); margin: 10px -10px -20px -10px; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px;
|
||||
border-top: 1px solid #888; }
|
||||
#footer { height: 60px; clear: both; padding: 4px 10px; color: #f8f8f8; margin: 0 0 -20px 0;
|
||||
border-top: 1px solid #888; font-size: 13px;
|
||||
-webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
|
||||
background: -webkit-linear-gradient(#b0c5da, #40556a);
|
||||
background: -moz-linear-gradient(#b0c5da, #40556a);
|
||||
background: -ms-linear-gradient(#b0c5da, #40556a);
|
||||
background: -o-linear-gradient(#b0c5da, #40556a);
|
||||
background: linear-gradient(#b0c5da, #40556a); }
|
||||
#footer a { font-size: 13px; padding: 0; color: #f8f8f8; }
|
||||
#footer a:hover { background: none; }
|
||||
|
||||
pre, pre * { font-family: Lucida Console, Monospace; }
|
||||
pre, pre * { font-family: "Lucida Console", Monospace; font-size: 15px }
|
||||
pre b { color: #369; font-weight: normal; }
|
||||
pre a { padding: 0; font-weight: normal; }
|
||||
pre a:hover { background: none; text-decoration: underline; color: #48B;}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue