diff options
author | Yorhel <git@yorhel.nl> | 2016-11-09 18:42:59 +0100 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2016-11-09 18:43:10 +0100 |
commit | 09af8817676d799ef1c64178bb50a75754295b05 (patch) | |
tree | f6ebc052e629fb18d1efa5f04cd71cfb3e74b992 /www | |
parent | 20141aa98027a33da8322292e0a1d93ae82a0c53 (diff) |
Add TOC listing + more section/lang select back into a nav menu
Diffstat (limited to 'www')
-rwxr-xr-x | www/index.pl | 91 | ||||
-rw-r--r-- | www/man.css | 11 | ||||
-rw-r--r-- | www/man.js | 10 |
3 files changed, 67 insertions, 45 deletions
diff --git a/www/index.pl b/www/index.pl index 6eec011..ef0f041 100755 --- a/www/index.pl +++ b/www/index.pl @@ -560,42 +560,60 @@ sub man_redir { }; -sub _man_langsect { - my($self, $man) = @_; +sub _man_nav { + my($self, $man, $toc) = @_; + + my @sect = $self->dbManSections($man->{name}); + my @lang = $self->dbManLanguages($man->{name}, $man->{section}); + return if !@sect && !@lang && !@$toc; # TODO: This is ugly, especially because clicking on a translation or # section, you can end up with a man page that is nowhere close to the man # page you're currently reading. Opening a version selector box might be a # better alternative. - my @sect = $self->dbManSections($man->{name}); - if(@sect > 1) { - div id => 'sectionselect', class => 'hidden'; - for (@sect) { - if($man->{section} eq $_) { - i $_; - } else { - a href => "/$man->{name}.$_", $_; - } - txt ' '; - } - end; - } + div id => 'nav'; + + if(@sect > 1) { + b 'Sections'; + p; + for (@sect) { + if($man->{section} eq $_) { + i $_; + } else { + a href => "/$man->{name}.$_", $_; + } + txt ' '; + } + end; + } - my @lang = $self->dbManLanguages($man->{name}, $man->{section}); - if(@lang > 1) { - div id => 'langselect', class => 'hidden'; - (my $cur = $man->{locale}||'') =~ s/\..*//; - for (@lang) { - if(($_||'') eq $cur) { - i $_ || 'default'; - } else { - a href => $_ ? "/lang/$_/$man->{name}.$man->{section}" : "/$man->{name}.$man->{section}", $_ || 'default'; - } - txt ' '; - } - end; - } + if(@lang > 1) { + b 'Languages'; + p; + (my $cur = $man->{locale}||'') =~ s/\..*//; + for (@lang) { + if(($_||'') eq $cur) { + i $_ || 'default'; + } else { + a href => $_ ? "/lang/$_/$man->{name}.$man->{section}" : "/$man->{name}.$man->{section}", $_ || 'default'; + } + txt ' '; + } + end; + } + + if(@$toc > 1) { + b 'Table of Contents'; + ul; + for (0..$#$toc) { + li; + a href => sprintf('#head%d', $_+1), lc $toc->[$_]; + end; + } + end; + } + end; } @@ -634,12 +652,21 @@ sub man { end; end; div id => 'manres', class => 'hidden'; - _man_langsect($self, $man); end; + my $c = $self->dbManContent($man->{hash}); + my $fmt = ManUtils::html(ManUtils::fmt_block $c); + my @toc; + $fmt =~ s{\n<b>(.+?)<\/b>\n}{ + push @toc, $1; + my $c = @toc; + qq{\n<a href="#head$c" id="head$c">$1</a>\n} + }eg; + + _man_nav($self, $man, \@toc); + div id => 'contents'; - my $c = $self->dbManContent($man->{hash}); - pre; lit ManUtils::html(ManUtils::fmt_block $c); end; + pre; lit $fmt; end; end; $self->htmlFooter(); } diff --git a/www/man.css b/www/man.css index 3a781c4..1ed29e9 100644 --- a/www/man.css +++ b/www/man.css @@ -104,8 +104,13 @@ i.grayedout { color: #aaa; font-size: 13px; } #manres table { margin: 2px 10px; } #manres table tr td:nth-child(1) { min-width: 80px } -#langselect, #sectionselect { padding-left: 50px } -#langselect a, #sectionselect a, #langselect i, #sectionselect i { padding: 3px 5px } +#nav { background: #f0f8ff; color: #036; float: right; padding: 8px; width: 250px; margin-bottom: 10px; border-radius: 8px; } +#nav b { text-transform: uppercase; font-size: 13px } +#nav p { margin: 3px 5px 20px 5px } +#nav p a, #nav p i { padding: 3px 5px; font-size: 13px; font-style: normal; text-decoration: none;} +#nav p a:hover, #nav p i { background: #cde; border-radius: 5px } +#nav ul { list-style-type: none; margin: 3px 10px 0 20px } +#nav ul li a { overflow: hidden; margin-left: -10px; text-decoration: none; text-transform: capitalize } #contents { margin: 10px 0 0 0 } @@ -115,7 +120,7 @@ i.grayedout { color: #aaa; font-size: 13px; } #footer a:hover { background: none; } pre, pre * { font-family: "Lucida Console", Monospace; font-size: 15px } -pre b { color: #369; font-weight: normal; } +pre b, pre a { color: #369; font-weight: normal; text-decoration: none } #ds_box { position: absolute; top: 0; border: 1px solid $border$; border-top: none; background: #f0f8ff; cursor: pointer; z-index: 2 } #ds_box b { padding: 2px 0 0 10px; font-size: 12px; } @@ -445,16 +445,6 @@ function dsResults(hr, obj) { var section = ul.getAttribute('data-section'); var locale = ul.getAttribute('data-locale'); - ul.appendChild(tag('li', byId('sectionselect') - ? tag('a', {href:'#', onclick: buttonclick, 'data-obj': byId('sectionselect')}, 'sections') - : tag('i', 'sections') - )); - - ul.appendChild(tag('li', byId('langselect') - ? tag('a', {href:'#', onclick: buttonclick, 'data-obj': byId('langselect')}, 'translations') - : tag('i', 'translations') - )); - ul.appendChild(tag('li', ul.getAttribute('data-hasversions') > 0 ? tag('a', {href:'#', onclick: buttonclick, 'data-url': '/json/tree.json?name='+name+';section='+section+';locale='+locale+';cur='+hash, |