Skip to content

Commit 2d990a7

Browse files
devoncarewdevoncarew
authored
update header styles (#1422)
* make headers styles consistent with dartlang.org * regen test package * fix fonts in header * remove white-space nowarp on the column headers * remove empty styles * align the top of the page contents and the sidebars * fix html escaping in the header * deprecated
1 parent a64f20f commit 2d990a7

File tree

587 files changed

+1224
-12626
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

587 files changed

+1224
-12626
lines changed

‎lib/resources/script.js

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,3 @@
1-
// Adds a shadow for the top nav when the masthead is scrolled off the top.
2-
function initScroller() {
3-
var header = document.querySelector("header");
4-
var title = document.querySelector(".title-description");
5-
var selfName = document.querySelector('nav .self-name');
6-
7-
window.addEventListener('scroll', function(e) {
8-
var position = window.pageYOffset || document.documentElement.scrollTop;
9-
10-
if (header) {
11-
if (position >= 122) {
12-
header.classList.add("header-fixed");
13-
} else if (header.classList.contains("header-fixed")) {
14-
header.classList.remove("header-fixed");
15-
}
16-
}
17-
18-
if (selfName) {
19-
if (position >= 122) {
20-
selfName.classList.add('visible-xs-inline');
21-
} else {
22-
selfName.classList.remove('visible-xs-inline');
23-
}
24-
}
25-
});
26-
}
271

282
function initSideNav() {
293
var leftNavToggle = document.getElementById('sidenav-left-toggle');
@@ -53,11 +27,6 @@ function initSideNav() {
5327
}
5428
}
5529

56-
// Make sure the anchors scroll past the fixed page header (#648).
57-
function shiftWindow() {
58-
scrollBy(0, -68);
59-
}
60-
6130
function initSearch() {
6231
var searchIndex; // the JSON data
6332

@@ -225,11 +194,6 @@ function initSearch() {
225194

226195
document.addEventListener("DOMContentLoaded", function() {
227196
prettyPrint();
228-
initScroller();
229197
initSideNav();
230198
initSearch();
231-
232-
// Make sure the anchors scroll past the fixed page header (#648).
233-
if (location.hash) shiftWindow();
234-
window.addEventListener("hashchange", shiftWindow);
235199
});

‎lib/resources/styles.css

Lines changed: 27 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,10 @@ body {
2626
background-color: #fff;
2727
}
2828

29-
nav {
30-
font-size: 17px;
31-
}
32-
3329
/* some of this is to reset bootstrap */
3430
nav.navbar {
3531
background-color: inherit;
36-
min-height: 48px;
32+
min-height: 50px;
3733
border: 0;
3834
}
3935

@@ -80,7 +76,7 @@ header .contents {
8076
}
8177

8278
.body {
83-
margin-top: 24px;
79+
margin-top: 90px;
8480
}
8581

8682
section {
@@ -211,14 +207,6 @@ h2 .crossdart {
211207
}
212208

213209
@media (min-width: 768px) {
214-
.dl-horizontal dd {
215-
margin-left: 128px;
216-
}
217-
218-
.dl-horizontal dt {
219-
width: 128px;
220-
}
221-
222210
ul.subnav li {
223211
font-size: 17px;
224212
}
@@ -238,14 +226,6 @@ header li {
238226

239227
header h1 .kind {
240228
color: #555;
241-
font-size: 15px;
242-
display: block;
243-
}
244-
245-
@media screen and (max-width: 768px) {
246-
header h1 .kind {
247-
font-size: 14px;
248-
}
249229
}
250230

251231
dt {
@@ -267,23 +247,22 @@ dd p {
267247
margin-bottom: 0;
268248
}
269249

270-
section.summary h2 {
271-
}
272-
273250
/* indents wrapped lines */
274251
section.summary dt {
275252
margin-left: 24px;
276253
text-indent: -24px;
277254
}
278255

256+
.dl-horizontal dd {
257+
margin-left: initial;
258+
}
259+
279260
dl.dl-horizontal dt {
280261
font-style: normal;
281262
text-align: left;
282263
color: #727272;
283-
}
284-
285-
dl.dl-horizontal dt::after {
286-
content: ':';
264+
margin-right: 20px;
265+
width: initial;
287266
}
288267

289268
dt .name {
@@ -427,7 +406,6 @@ footer a, footer a:hover {
427406
.breadcrumbs {
428407
padding: 0;
429408
margin: 8px 0 8px 0;
430-
font-size: 17px;
431409
white-space: nowrap;
432410
line-height: 1;
433411
}
@@ -449,8 +427,8 @@ footer a, footer a:hover {
449427
color: #555;
450428
}
451429

452-
nav .self-name {
453-
color: #ddd;
430+
.self-name {
431+
color: #555;
454432
display: none;
455433
}
456434

@@ -544,16 +522,6 @@ ul.subnav li:last-of-type {
544522
padding: 0;
545523
}
546524

547-
.sidebar-offcanvas-left ol {
548-
}
549-
550-
.sidebar h5 {
551-
color: #727272;
552-
font-size: 18px;
553-
margin: 0 0 25px 0;
554-
white-space: nowrap;
555-
}
556-
557525
.sidebar h5 a,
558526
.sidebar h5 a:hover {
559527
color: #727272;
@@ -566,6 +534,13 @@ ul.subnav li:last-of-type {
566534
padding: 3px 0;
567535
}
568536

537+
.sidebar h5 {
538+
color: #727272;
539+
font-size: 18px;
540+
margin: 0 0 25px 0;
541+
padding-top: 0;
542+
}
543+
569544
.sidebar ol li.section-title a {
570545
color: inherit;
571546
}
@@ -596,7 +571,7 @@ button {
596571
@media screen and (max-width:768px) {
597572
#sidenav-left-toggle {
598573
display: inline;
599-
background: no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#FFFFFF' d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg>");
574+
background: no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#111' d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg>");
600575
background-position: center;
601576
width: 24px;
602577
height: 24px;
@@ -609,10 +584,10 @@ button {
609584
height: 100%;
610585
z-index: 1999;
611586
position: fixed;
612-
top: 0px;
613-
left: 0px;
614-
right: 0px;
615-
bottom: 0px;
587+
top: 0;
588+
left: 0;
589+
right: 0;
590+
bottom: 0;
616591
background-color: black;
617592
display: block;
618593
}
@@ -629,11 +604,16 @@ button {
629604
height: 100%;
630605
background-color: white;
631606
overflow-y: auto; /* TODO: how to hide scroll bars? */
607+
padding: 10px;
632608
}
633609

634610
.sidebar-offcanvas-left.active {
635611
left: 0; /* this animates our drawer into the page */
636612
}
613+
614+
.self-name {
615+
display: inline-block;
616+
}
637617
}
638618

639619
.sidebar-offcanvas-left h5 {

‎lib/src/html/template_data.dart

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,11 @@ abstract class TemplateData<T extends Documentable> {
5757
Iterable<Subnav> getSubNavItems() => <Subnav>[];
5858

5959
String _layoutTitle(String name, String kind, bool isDeprecated) {
60-
if (kind.isEmpty) kind = '&nbsp;';
61-
String str = '<span class="kind">$kind</span>';
62-
if (!isDeprecated) return '${str} ${name}';
63-
return '${str} <span class="deprecated">$name</span>';
60+
if (isDeprecated) {
61+
return '${kind} <span class="deprecated">${name}</span>';
62+
} else {
63+
return '${kind} ${name}';
64+
}
6465
}
6566

6667
Iterable<Subnav> _gatherSubnavForInvokable(ModelElement element) {
@@ -144,6 +145,7 @@ class LibraryTemplateData extends TemplateData<Library> {
144145
@override
145146
String get layoutTitle =>
146147
_layoutTitle(library.name, 'library', library.isDeprecated);
148+
147149
@override
148150
Library get self => library;
149151
}

‎lib/templates/_head.html

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

3131
<div id="overlay-under-drawer"></div>
3232

33-
<header class="container-fluid" id="title">
33+
<header class="container-fluid header-fixed" id="title">
3434
<nav class="navbar navbar-fixed-top">
3535
<div class="container">
3636
<div class="row">
@@ -42,7 +42,7 @@
4242
{{#navLinks}}
4343
<li><a href="{{href}}">{{name}}</a></li>
4444
{{/navLinks}}
45-
<li class="self-crumb">{{self.name}}</li>
45+
<li class="self-crumb">{{{ layoutTitle }}}</li>
4646
</ol>
4747
<div class="self-name">{{self.name}}</div>
4848
<form class="search navbar-right" role="search">
@@ -52,34 +52,6 @@
5252
</div> <!-- /row -->
5353
</div> <!-- /container -->
5454
</nav>
55-
56-
<div class="container masthead">
57-
<div class="row">
58-
<div class="col-sm-12 contents">
59-
<ol class="breadcrumbs gt-separated dark visible-xs">
60-
{{#navLinks}}
61-
<li><a href="{{href}}">{{name}}</a></li>
62-
{{/navLinks}}
63-
{{^navLinks.isEmpty}}
64-
<li class="self-crumb">{{self.name}}</li>
65-
{{/navLinks.isEmpty}}
66-
</ol>
67-
<div class="title-description">
68-
<h1 class="title">
69-
{{{ layoutTitle }}}
70-
</h1>
71-
</div>
72-
{{#hasSubNav}}
73-
<ul class="subnav">
74-
{{#subnavItems}}
75-
<li><a href="{{href}}">{{name}}</a></li>
76-
{{/subnavItems}}
77-
</ul>
78-
{{/hasSubNav}}
79-
</div> <!-- /col -->
80-
</div> <!-- /row -->
81-
</div> <!-- /container -->
82-
8355
</header>
8456

8557
<div class="container body">

‎testing/test_package_docs/anonymous_library/anonymous_library-library.html

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@
2121

2222
<div id="overlay-under-drawer"></div>
2323

24-
<header class="container-fluid" id="title">
24+
<header class="container-fluid header-fixed" id="title">
2525
<nav class="navbar navbar-fixed-top">
2626
<div class="container">
2727
<div class="row">
2828
<div class="col-sm-12 contents">
2929
<button id="sidenav-left-toggle" type="button">&nbsp;</button>
3030
<ol class="breadcrumbs gt-separated dark hidden-xs">
3131
<li><a href="index.html">test_package</a></li>
32-
<li class="self-crumb">anonymous_library</li>
32+
<li class="self-crumb">library anonymous_library</li>
3333
</ol>
3434
<div class="self-name">anonymous_library</div>
3535
<form class="search navbar-right" role="search">
@@ -39,26 +39,6 @@
3939
</div> <!-- /row -->
4040
</div> <!-- /container -->
4141
</nav>
42-
43-
<div class="container masthead">
44-
<div class="row">
45-
<div class="col-sm-12 contents">
46-
<ol class="breadcrumbs gt-separated dark visible-xs">
47-
<li><a href="index.html">test_package</a></li>
48-
<li class="self-crumb">anonymous_library</li>
49-
</ol>
50-
<div class="title-description">
51-
<h1 class="title">
52-
<span class="kind">library</span> anonymous_library
53-
</h1>
54-
</div>
55-
<ul class="subnav">
56-
<li><a href="anonymous_library/anonymous_library-library.html#functions">Functions</a></li>
57-
</ul>
58-
</div> <!-- /col -->
59-
</div> <!-- /row -->
60-
</div> <!-- /container -->
61-
6242
</header>
6343

6444
<div class="container body">

‎testing/test_package_docs/anonymous_library/doesStuff.html

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<div id="overlay-under-drawer"></div>
2323

24-
<header class="container-fluid" id="title">
24+
<header class="container-fluid header-fixed" id="title">
2525
<nav class="navbar navbar-fixed-top">
2626
<div class="container">
2727
<div class="row">
@@ -30,7 +30,7 @@
3030
<ol class="breadcrumbs gt-separated dark hidden-xs">
3131
<li><a href="index.html">test_package</a></li>
3232
<li><a href="anonymous_library/anonymous_library-library.html">anonymous_library</a></li>
33-
<li class="self-crumb">doesStuff</li>
33+
<li class="self-crumb">function doesStuff</li>
3434
</ol>
3535
<div class="self-name">doesStuff</div>
3636
<form class="search navbar-right" role="search">
@@ -40,24 +40,6 @@
4040
</div> <!-- /row -->
4141
</div> <!-- /container -->
4242
</nav>
43-
44-
<div class="container masthead">
45-
<div class="row">
46-
<div class="col-sm-12 contents">
47-
<ol class="breadcrumbs gt-separated dark visible-xs">
48-
<li><a href="index.html">test_package</a></li>
49-
<li><a href="anonymous_library/anonymous_library-library.html">anonymous_library</a></li>
50-
<li class="self-crumb">doesStuff</li>
51-
</ol>
52-
<div class="title-description">
53-
<h1 class="title">
54-
<span class="kind">function</span> doesStuff
55-
</h1>
56-
</div>
57-
</div> <!-- /col -->
58-
</div> <!-- /row -->
59-
</div> <!-- /container -->
60-
6143
</header>
6244

6345
<div class="container body">

0 commit comments

Comments
 (0)