Skip to content

GitLab

T
tangled
Commit ca6caf8c authored by pearlchen@chromium.org's avatar pearlchen@chromium.org
Browse files
Options

Change log: 

* Sidenav subnav has a grey bg. 
* Only the article page ToC is sticky when scrolling (not entire sidenav area)
* In ToC, can now click through on h2 headings when there are child h3 headings (previously it would only expand the menu and not go to the anchor link)
* Fixed bug where sidebar overlapped with article body
* Removed misleading mouse pointer cursor on fatnav for non-clickable items.
* Removed -webkit and other prefixes for box shadows and linear gradients
* Added .video-container class so YouTube video will be responsive

BUG=

Review URL: https://codereview.chromium.org/291663002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@275629 0039d316-1c4b-4281-b951-d872f2087c98
parent 542d317d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 160 deletions
chrome/common/extensions/docs/static/js/article.js
View file @ ca6caf8c
......@@ -9,18 +9,27 @@
// button: click logic, and when to show it.
(function() {
var isLargerThanMobileQuery =
window.matchMedia('screen and (min-width: 581px)');
var sidebar = document.querySelector('.inline-toc');
var sidebarOffsetTop = null;
var articleBody = document.querySelector('[itemprop="articleBody"]');
// Bomb out unless we're on an article page and have a TOC.
// Ideally, template shouldn't load this JS file on a non-article page
if (!(sidebar && articleBody)) {
return;
}
var isLargerThanMobileQuery =
window.matchMedia('screen and (min-width: 581px)');
var toc = sidebar.querySelector('#toc');
var tocOffsetTop = sidebar.offsetParent.offsetTop + toc.offsetTop;
function updateTocOffsetTop() {
// Note: Attempting to read offsetTop with sticky on causes toc overlap
toc.classList.remove('sticky');
tocOffsetTop = sidebar.offsetParent.offsetTop + toc.offsetTop;
}
function addPermalink(el) {
el.classList.add('has-permalink');
var id = el.id || el.textContent.toLowerCase().replace(' ', '-');
......@@ -37,17 +46,21 @@ function addPermalinkHeadings(container) {
}
}
function toggleStickySidenav(){
toc.classList.toggle('sticky', window.scrollY >= tocOffsetTop);
}
function onScroll(e) {
window.scrollY >= sidebarOffsetTop ? sidebar.classList.add('sticky') :
sidebar.classList.remove('sticky');
toggleStickySidenav();
}
function onMediaQuery(e) {
if (e.matches) {
// On tablet & desktop, show permalinks, manage TOC position.
document.body.classList.remove('no-permalink');
sidebarOffsetTop = sidebar.offsetParent.offsetTop
document.addEventListener('scroll', onScroll);
updateTocOffsetTop();
toggleStickySidenav();
} else {
// On mobile, hide permalinks. TOC is hidden, doesn't need to scroll.
document.body.classList.add('no-permalink');
......@@ -62,14 +75,20 @@ articleBody.addEventListener('click', function(e) {
}
});
sidebar.querySelector('#toc').addEventListener('click', function(e) {
var parent = e.target.parentElement;
if (e.target.localName == 'a' && parent.classList.contains('toplevel')) {
// Allow normal link click if h2 toplevel heading doesn't have h3s.
if (parent.querySelector('.toc')) {
e.preventDefault();
parent.classList.toggle('active');
}
toc.addEventListener('click', function(e) {
// React only if clicking on a toplevel menu anchor item
// that is not currently open
if (e.target.classList.contains('hastoc') &&
!e.target.parentElement.classList.contains('active')) {
e.stopPropagation();
// close any previously open subnavs
[].forEach.call(toc.querySelectorAll('.active'), function(li) {
li.classList.remove('active');
});
// then open the clicked one
e.target.parentElement.classList.add('active');
}
});
......
chrome/common/extensions/docs/static/js/search.js
View file @ ca6caf8c
// Activate the search box:
(function() {
var form = document.getElementById('chrome-docs-cse-search-form');
var searchInput = document.getElementById('chrome-docs-cse-input');
var cx = '010997258251033819707:7owyldxmpkc';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
var executeQuery = function(e) {
var element = google.search.cse.element.getElement('results');
if (searchInput.value == '') {
element.clearAllResults();
} else {
element.execute(searchInput.value);
}
e.preventDefault();
return true;
// Copyright 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Activate the search box:
(function() {
var form = document.getElementById('chrome-docs-cse-search-form');
var searchInput = document.getElementById('chrome-docs-cse-input');
var cx = '010997258251033819707:7owyldxmpkc';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
var executeQuery = function(e) {
var element = google.search.cse.element.getElement('results');
if (searchInput.value == '') {
element.clearAllResults();
} else {
element.execute(searchInput.value);
}
e.preventDefault();
return true;
}
form.addEventListener('submit', executeQuery);
// Attach autocomplete to the search box
var enableAutoComplete = function() {
google.search.CustomSearchControl.attachAutoCompletionWithOptions(
cx, searchInput, form,
// set to true to prevent the search box form from being submitted, since
// the search control displaying the results is on the same page.
{'preferOnSubmitToSubmit': true}
);
};
var myAutocompleteCallback = function() {
// Search module is loaded.
if (document.readyState == 'complete') {
enableAutoComplete();
} else {
google.setOnLoadCallback(enableAutoComplete, true);
}
};
window.__gcse = {
callback: myAutocompleteCallback
};
form.addEventListener('submit', executeQuery);
// Attach autocomplete to the search box
var enableAutoComplete = function() {
console.log("running enableAutoComplete");
google.search.CustomSearchControl.attachAutoCompletionWithOptions(
cx, searchInput, form,
// set to true to prevent the search box form from being submitted, since
// the search control displaying the results is on the same page.
{'preferOnSubmitToSubmit': true}
);
};
var myAutocompleteCallback = function() {
// Search module is loaded.
if (document.readyState == 'complete') {
enableAutoComplete();
} else {
google.setOnLoadCallback(enableAutoComplete, true);
}
};
window.__gcse = {
callback: myAutocompleteCallback
};
})();
// End of autocomplete
})();
chrome/common/extensions/docs/static/js/site.js
View file @ ca6caf8c
// Copyright 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
(function() {
function addGplusButton() {
......
chrome/common/extensions/docs/static/sass/_article.scss
View file @ ca6caf8c
$toc-width: 240px;
$toc-margin-left: 195px;
$article-width: 70%;
$toc-width: 28%;
// TOC on article pages
.inline-toc {
......@@ -34,11 +34,22 @@ $toc-margin-left: 195px;
.related {
display: block;
background-color: $gray-light;
box-shadow: $nav-box-shadow;
padding: 1em 1em 0.5em 1em;
margin-bottom: 1em; /* so the box shadow doesn't get cut off */
h3 {
margin-top: 0;
}
li a {
&.active {
color: $black;
}
&:hover {
background-image: $nav-hover-gradient;
}
}
}
......@@ -66,7 +77,7 @@ $toc-margin-left: 195px;
}
> a.hastoc {
&::after {
content: '-';
content: ''; /* don't make it look like you can toggle it closed */
}
}
}
......@@ -75,7 +86,7 @@ $toc-margin-left: 195px;
.toc {
margin: 0;
padding: 0;
padding: 0.3em 0 0 0;
border-top: $default-border;
.toc {
......@@ -111,39 +122,32 @@ $toc-margin-left: 195px;
.inline-toc {
position: absolute;
top: 0;
left: 50%;
margin-left: $toc-margin-left;
width: $toc-width;
right: 0;
overflow: auto;
overflow-x: hidden;
// scroll.js adds and removes the floating class depending on the scroll position.
&.sticky {
position: fixed;
}
#toc {
display: block;
// article.js adds and removes the fixed nav depending on the scroll position.
&.sticky {
top: 0;
position: fixed;
-webkit-transform: translateZ(0); /* repaint issue */
}
}
}
.article-content {
width: 70%;
width: $article-width;
padding-right: 5%;
border-right: 1px solid $gray-light;
min-height: 250px; /* add min-height so fatnav and sidenav doesn't overlap badly */
}
.cc-logo {
margin: 0 0 0 auto;
}
}
// Tablet
@media only screen and (min-width: $break-small + 1) and (max-width: $break-large) {
.inline-toc {
width: $toc-width - 40;
margin-left: $toc-margin-left - 30;
}
}
// Phone
@media only screen and (max-width: $break-small) {
.article-content [itemprop="articleBody"] {
......
chrome/common/extensions/docs/static/sass/_html.scss
View file @ ca6caf8c
......@@ -57,11 +57,7 @@ pre {
}
strike {
text-decoration: none;
background-image: -webkit-linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
background-image: -moz-linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
background-image: -ms-linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
background-image: -o-linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}
&[data-filename]::after {
visibility: hidden;
......@@ -134,7 +130,7 @@ pre {
// Big blue buttonz!
.button {
background: #0370ea;
@include background-image(linear-gradient(top, #008dfd 0%,#0370ea 100%));
background-image: linear-gradient(top, #008dfd 0%,#0370ea 100%);
border: 1px solid #076bd2;
border-radius: 3px;
color: $white !important;
......@@ -148,7 +144,7 @@ pre {
text-shadow: 1px 1px 1px #076bd2;
&:hover {
@include background-image(linear-gradient(top, #008dfd 30%,#0370ea 100%));
background-image: linear-gradient(top, #008dfd 30%,#0370ea 100%);
cursor: pointer;
}
......@@ -159,7 +155,7 @@ pre {
.button-alt {
background: #eee;
@include background-image(linear-gradient(bottom, #DCDCDC 46%, #FAFAFA 87%));
background-image: linear-gradient(bottom, #DCDCDC 46%, #FAFAFA 87%);
border: 1px solid #d6d6d6;
border-radius: 3px;
color: #333 !important;
......@@ -173,7 +169,7 @@ pre {
text-shadow: none;
&:hover {
@include background-image(linear-gradient(bottom, #DCDCDC 20%, #FAFAFA 87%));
background-image: linear-gradient(bottom, #DCDCDC 20%, #FAFAFA 87%);
cursor: pointer;
}
}
......@@ -189,11 +185,11 @@ pre {
&:hover {
border-color: #c6c6c6;
@include box-shadow(0 -1px 1px rgba(0,0,0,0.1));
box-shadow: 0 -1px 1px rgba(0,0,0,0.1);
}
&:active {
background-color: #f1f1f1;
@include box-shadow(inset 0 0px 2px rgba(0,0,0,0.2));
box-shadow: inset 0 0px 2px rgba(0,0,0,0.2);
}
}
......@@ -202,6 +198,24 @@ pre {
margin: 1em 0;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin: 0 0 20px 0;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
p, div, aside {
&.note,
&.caution,
......@@ -215,7 +229,6 @@ p, div, aside {
padding: 1em;
//border: none;
//box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15);
//background-image: -webkit-linear-gradient(top, rgba(51, 102, 204, 0.1), transparent, rgba(51, 102, 204, 0.1));
}
&.note {
......
chrome/common/extensions/docs/static/sass/_navbar.scss
View file @ ca6caf8c
......@@ -2,6 +2,8 @@ $nav-item-shaded-bg: $gray-light url(data:image/png;base64,iVBORw0KGgoAAAANSUhEU
$nav-border-color: rgb(232, 232, 232);
$nav-font-size: 0.9em;
$z-index-nav-hover: 1001;
$nav-hover-gradient: linear-gradient(205deg,rgba(229,229,229,.7) 0,rgba(233,233,233,.7) 20%, rgba(244,244,244,.7) 100%);
$nav-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12);
#topnav {
@include display-flex();
......@@ -116,7 +118,7 @@ $z-index-nav-hover: 1001;
color: $gray-dark;
&:hover {
@include background-image(linear-gradient(205deg,rgba(229,229,229,.7) 0,rgba(233,233,233,.7) 20%, rgba(244,244,244,.7) 100%));
background-image: $nav-hover-gradient;
}
}
......@@ -127,11 +129,10 @@ $z-index-nav-hover: 1001;
color: #333;;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
@include flex(1);
&.active {
@include background-image(linear-gradient(205deg,rgba(229,229,229,.7) 0,rgba(233,233,233,.7) 20%, rgba(244,244,244,.7) 100%));
background-image: $nav-hover-gradient;
}
> ul {
......@@ -227,7 +228,7 @@ $z-index-nav-hover: 1001;
&::after {
position: absolute;
@include background-image(linear-gradient(bottom,rgba(255, 255, 255, 0) 0,rgba(211, 211, 211, 0.5) 25%,rgb(211, 211, 211) 50%,rgba(211, 211, 211, 0.5) 75%,rgba(255, 255, 255, 0) 100%));
background-image: linear-gradient(bottom,rgba(255, 255, 255, 0) 0,rgba(211, 211, 211, 0.5) 25%,rgb(211, 211, 211) 50%,rgba(211, 211, 211, 0.5) 75%,rgba(255, 255, 255, 0) 100%);
right: 0;
top: 0;
content: '';
......@@ -240,7 +241,7 @@ $z-index-nav-hover: 1001;
.expandee {
min-height: 400px;
font-size: $nav-font-size;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12);
box-shadow: $nav-box-shadow;
top: $top-nav-height;
.submenu {
......
chrome/common/extensions/docs/static/sass/_typography.scss
View file @ ca6caf8c
......@@ -248,10 +248,6 @@ hr {
padding: 0.1em 0.6em;
margin: 0 0.1em;
white-space: nowrap;
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
chrome/common/extensions/docs/templates/articles/about_apps.html
View file @ ca6caf8c
......@@ -11,9 +11,9 @@ and they have native-like capabilities
that are much more powerful than those available to web apps.
</p>
<p>
<iframe title="YouTube video player" width="610" height="380" src="//www.youtube.com/embed/lBUGTVIJVfM" frameborder="0" allowfullscreen></iframe>
</p>
<div class="video-container">
<iframe title="YouTube video player" width="610" height="380" src="//www.youtube.com/embed/lBUGTVIJVfM" frameborder="0" allowfullscreen></iframe>
</div>
<p>
Chrome Apps have access to Chrome APIs and services not available to
......@@ -23,9 +23,9 @@ examples:
</p>
<ul>
<li>Shells (VMWare, Citrix, SSH, RDP or VNC clients)</li>
<li>Music/video streaming</li>
<li>Photo/video/music editing</li>
<li>Shells (VMWare, Citrix, SSH, RDP or VNC clients)</li>
<li>Music/video streaming</li>
<li>Photo/video/music editing</li>
</ul>
<p>
......@@ -50,11 +50,8 @@ When launched, Chrome Apps can open in windows
that look like this (and you can style
your windows in all different ways):
</p>
<br>
<img src="{{static}}/images/editor.png"
width="770"
height="586"
alt="Text editor Chrome App in a standalone window">
<h2 id="behave">How they behave</h2>
......@@ -96,24 +93,24 @@ To learn more about how to develop Chrome Apps:
</p>
<ul>
<li>
<a href="app_architecture">Understanding the Architecture</a>
introduces the app container, programming, and security models.
</li>
<li>
<a href="app_lifecycle">The Fundamentals</a>
shows how to use this architecture and how to build
for offline, manage data, and embed external content.
</li>
<li>
<a href="app_network">Advanced Technologies</a>
shows how to use the powerful network and hardware APIs.
</li>
<li>
<a href="app_deprecated">Disabled Features</a>
describes the web features that have been disabled
and what to use in their place, where relevant.
</li>
<li>
<a href="app_architecture">Understanding the Architecture</a>
introduces the app container, programming, and security models.
</li>
<li>
<a href="app_lifecycle">The Fundamentals</a>
shows how to use this architecture and how to build
for offline, manage data, and embed external content.
</li>
<li>
<a href="app_network">Advanced Technologies</a>
shows how to use the powerful network and hardware APIs.
</li>
<li>
<a href="app_deprecated">Disabled Features</a>
describes the web features that have been disabled
and what to use in their place, where relevant.
</li>
</ul>
<p class="backtotop"><a href="#top">Back to top</a></p>
chrome/common/extensions/docs/templates/articles/api_index.html
View file @ ca6caf8c
......@@ -45,6 +45,6 @@ then you pass a callback function into the method.
For more information, watch this video:
</p>
<p class="doc-family extensions">
<iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/bmxr75CV36A?rel=0" frameborder="0" allowfullscreen></iframe>
</p>
<div class="video-container doc-family extensions">
<iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/bmxr75CV36A?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
chrome/common/extensions/docs/templates/articles/app_architecture.html
View file @ ca6caf8c
......@@ -66,9 +66,9 @@ when the app is started or terminated.
There can only be one “event page” for a Chrome App.
<p>
<p>
<iframe title="YouTube video player" width="610" height="380" src="//www.youtube.com/embed/yr1jgREbH8U" frameborder="0" allowfullscreen></iframe>
</p>
<div class="video-container">
<iframe title="YouTube video player" width="610" height="380" src="//www.youtube.com/embed/yr1jgREbH8U" frameborder="0" allowfullscreen></iframe>
</div>
<h3 id="lifecycle">App lifecycle at a glance</h3>
......@@ -166,8 +166,6 @@ You can use the <code>object</code> tag to
this content runs in a separate process from the app.
</p>
<p>
<iframe title="YouTube video player" width="610" height="380" src="//www.youtube.com/embed/EDtiWN42lHs" frameborder="0" allowfullscreen></iframe>
</p>
<p class="backtotop"><a href="#top">Back to top</a></p>
<div class="video-container">
<iframe title="YouTube video player" width="610" height="380" src="//www.youtube.com/embed/EDtiWN42lHs" frameborder="0" allowfullscreen></iframe>
</div>
chrome/common/extensions/docs/templates/articles/content_scripts.html
View file @ ca6caf8c
......@@ -460,9 +460,9 @@ The following videos discuss concepts that are important for content scripts.
The first video describes content scripts and isolated worlds.
</p>
<p>
<iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/laLudeUmXHM?rel=0" frameborder="0" allowfullscreen></iframe>
</p>
<div class="video-container">
<iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/laLudeUmXHM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<p>
The next video describes message passing,
......@@ -470,6 +470,6 @@ featuring an example of a content script
sending a request to its parent extension.
</p>
<p>
<iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/B4M_a7xejYI?rel=0" frameborder="0" allowfullscreen></iframe>
</p>
<div class="video-container">
<iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/B4M_a7xejYI?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
chrome/common/extensions/docs/templates/articles/extensions_index.html
View file @ ca6caf8c
......@@ -64,6 +64,6 @@
<a href="http://www.youtube.com/view_play_list?p=38DF05697DE372B1">Developer snapshots</a> (below)
</p>
<p>
<iframe title="YouTube video player" width="300" height="199" src="//www.youtube.com/embed/wRDPTnY3yO8?rel=0" frameborder="0" allowfullscreen=""></iframe>
</p>
<div class="video-container">
<iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/wRDPTnY3yO8?rel=0" frameborder="0" allowfullscreen=""></iframe>
</div>
chrome/common/extensions/docs/templates/articles/overview.html
View file @ ca6caf8c
......@@ -510,9 +510,9 @@ For more information, see the
and watch this video:
</p>
<p>
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/bmxr75CV36A?rel=0" frameborder="0" allowfullscreen></iframe>
</p>
<div class="video-container">
<iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/bmxr75CV36A?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<h2 id="pageComm">Communication between pages </h2>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment