rustdoc: Tweak the main template and CSS for semantic mark-up.

- section.sidebar -> nav.sidebar, also added an unordered list.
- div#help -> aside#help, also added a hidden heading.
- the current crate is now emphasized in the sidebar.

Fixes #16310.
This commit is contained in:
Kang Seonghoon 2015-09-09 00:46:44 +09:00
parent 6f142404d6
commit e98fa0e88f
3 changed files with 28 additions and 16 deletions

View file

@ -62,10 +62,10 @@ r##"<!DOCTYPE html>
{before_content} {before_content}
<section class="sidebar"> <nav class="sidebar">
{logo} {logo}
{sidebar} {sidebar}
</section> </nav>
<nav class="sub"> <nav class="sub">
<form class="search-form js-only"> <form class="search-form js-only">
@ -83,10 +83,12 @@ r##"<!DOCTYPE html>
<section class="footer"></section> <section class="footer"></section>
<div id="help" class="hidden"> <aside id="help" class="hidden">
<div> <div>
<h1 class="hidden">Help</h1>
<div class="shortcuts"> <div class="shortcuts">
<h1>Keyboard Shortcuts</h1> <h2>Keyboard Shortcuts</h2>
<dl> <dl>
<dt>?</dt> <dt>?</dt>
@ -103,7 +105,7 @@ r##"<!DOCTYPE html>
</div> </div>
<div class="infos"> <div class="infos">
<h1>Search Tricks</h1> <h2>Search Tricks</h2>
<p> <p>
Prefix searches with a type followed by a colon (e.g. Prefix searches with a type followed by a colon (e.g.
@ -123,7 +125,7 @@ r##"<!DOCTYPE html>
</p> </p>
</div> </div>
</div> </div>
</div> </aside>
{after_content} {after_content}

View file

@ -104,7 +104,7 @@ h3.impl, h3.method, h4.method, h3.type, h4.type {
h3.impl, h3.method, h3.type { h3.impl, h3.method, h3.type {
margin-top: 15px; margin-top: 15px;
} }
h1, h2, h3, h4, section.sidebar, a.source, .search-input, .content table :not(code)>a, .collapse-toggle { h1, h2, h3, h4, .sidebar, a.source, .search-input, .content table :not(code)>a, .collapse-toggle {
font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
@ -189,11 +189,16 @@ nav.sub {
padding: 0 10px; padding: 0 10px;
margin-bottom: 14px; margin-bottom: 14px;
} }
.block h2 { .block h2, .block h3 {
margin-top: 0; margin-top: 0;
margin-bottom: 8px; margin-bottom: 8px;
text-align: center; text-align: center;
} }
.block ul, .block li {
margin: 0;
padding: 0;
list-style: none;
}
.block a { .block a {
display: block; display: block;
@ -381,7 +386,7 @@ nav.main .separator {
nav.sum { text-align: right; } nav.sum { text-align: right; }
nav.sub form { display: inline; } nav.sub form { display: inline; }
nav, .content { nav.sub, .content {
margin-left: 230px; margin-left: 230px;
} }
@ -407,6 +412,7 @@ a {
.content span.method, .content a.method, .block a.current.method { color: #8c6067; } .content span.method, .content a.method, .block a.current.method { color: #8c6067; }
.content span.tymethod, .content a.tymethod, .block a.current.tymethod { color: #8c6067; } .content span.tymethod, .content a.tymethod, .block a.current.tymethod { color: #8c6067; }
.content .fnname { color: #8c6067; } .content .fnname { color: #8c6067; }
.block a.current.crate { font-weight: 500; }
.search-input { .search-input {
width: 100%; width: 100%;
@ -489,7 +495,7 @@ body.blur > :not(#help) {
} }
#help dd { margin: 5px 33px; } #help dd { margin: 5px 33px; }
#help .infos { padding-left: 0; } #help .infos { padding-left: 0; }
#help h1 { margin-top: 0; } #help h1, #help h2 { margin-top: 0; }
#help > div div { #help > div div {
width: 50%; width: 50%;
float: left; float: left;

View file

@ -773,7 +773,8 @@
if (rootPath === '../') { if (rootPath === '../') {
var sidebar = $('.sidebar'); var sidebar = $('.sidebar');
var div = $('<div>').attr('class', 'block crate'); var div = $('<div>').attr('class', 'block crate');
div.append($('<h2>').text('Crates')); div.append($('<h3>').text('Crates'));
var ul = $('<ul>').appendTo(div);
var crates = []; var crates = [];
for (var crate in rawSearchIndex) { for (var crate in rawSearchIndex) {
@ -788,9 +789,10 @@
} }
if (rawSearchIndex[crates[i]].items[0]) { if (rawSearchIndex[crates[i]].items[0]) {
var desc = rawSearchIndex[crates[i]].items[0][3]; var desc = rawSearchIndex[crates[i]].items[0][3];
div.append($('<a>', {'href': '../' + crates[i] + '/index.html', var link = $('<a>', {'href': '../' + crates[i] + '/index.html',
'title': plainSummaryLine(desc), 'title': plainSummaryLine(desc),
'class': klass}).text(crates[i])); 'class': klass}).text(crates[i]);
ul.append($('<li>').append(link));
} }
} }
sidebar.append(div); sidebar.append(div);
@ -809,7 +811,8 @@
if (!filtered) { return; } if (!filtered) { return; }
var div = $('<div>').attr('class', 'block ' + shortty); var div = $('<div>').attr('class', 'block ' + shortty);
div.append($('<h2>').text(longty)); div.append($('<h3>').text(longty));
var ul = $('<ul>').appendTo(div);
for (var i = 0; i < filtered.length; ++i) { for (var i = 0; i < filtered.length; ++i) {
var item = filtered[i]; var item = filtered[i];
@ -826,9 +829,10 @@
} else { } else {
path = shortty + '.' + name + '.html'; path = shortty + '.' + name + '.html';
} }
div.append($('<a>', {'href': current.relpath + path, var link = $('<a>', {'href': current.relpath + path,
'title': desc, 'title': desc,
'class': klass}).text(name)); 'class': klass}).text(name);
ul.append($('<li>').append(link));
} }
sidebar.append(div); sidebar.append(div);
} }