github/meteor
1
1
Fork 0
mirror of https://github.com/meteor/meteor.git synced 2026-05-02 03:01:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add collapsing TOC to Meteor Docs

Browse Source 
On small devices (< 768 px) make the Table of Contents hide by default.
This commit is contained in:
emgee3
2014-04-23 14:07:02 -07:00
committed by Slava Kim
parent 9fb63da3c7
commit cbd55698fd
3 changed files with 89 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
docs/client/docs.css
View File

@@ -173,7 +173,7 @@ a:hover {
/** Main pane **/
#main {
margin: 10px;
margin: 10px 10px 10px 60px;
line-height: 1.3;
color: #333333;
}
@@ -407,10 +407,34 @@ dl.callbacks {
/** layout control **/
/* default to no sidebar */
#nav {
#menu-ico {
font-size: 30px;
float: right;
position: fixed;
top: 3px;
left: 6px;
}
#menu-ico.hidden {
display: none;
}
/* default to no sidebar */
#nav {
display: block;
background: #FFF;
position: fixed;
width: 260px;
height: 100%;
top: 0;
left: -220px;
}
#nav.show {
left: 0;
overflow: auto;
}
.github-ribbon {
display: none;
}
@@ -419,37 +443,44 @@ pre {
}
@media (min-width: 768px) {
/* ipad portrait or better */
#main {
width: 440px;
height: 100%;
margin-left: 260px; /* nav width + padding */
padding: 30px;
}
#nav {
display: block;
width: 200px;
position: fixed;
overflow: auto;
height: 100%;
top: 0;
left: 0;
}
.main-headline {
display: none;
}
/* ipad portrait or better */
#main {
width: 440px;
height: 100%;
margin-left: 260px; /* nav width + padding */
padding: 30px;
}
#nav {
display: block;
width: 200px;
position: fixed;
overflow: auto;
height: 100%;
top: 0;
left: 0;
}
.main-headline {
display: none;
}
#menu-ico {
display: none;
}
}
@media (min-width: 1024px) {
/* ipad landscape and desktop */
#main {
width: 610px;
margin-left: 330px; /* nav width + padding */
}
#nav {
width: 270px;
}
.github-ribbon {
display: block;
}
/* ipad landscape and desktop */
#main {
width: 610px;
margin-left: 330px; /* nav width + padding */
}
#nav {
width: 270px;
}
.github-ribbon {
display: block;
}
#menu-ico {
display: none;
}
}

3
docs/client/docs.html
View File

@@ -8,7 +8,7 @@
</head>
<body>
<div id="nav">
<div id="nav" class="hide">
{{> nav }}
</div>
<div id="main">
@@ -23,6 +23,7 @@
</body>
<template name="nav">
<div id="menu-ico"><a href="#">&#9776;</a></div>
<div id="nav-inner">
{{#each sections}}
{{#if type "spacer"}}

24
docs/client/docs.js
View File

@@ -88,8 +88,18 @@ Meteor.startup(function () {
// Make external links open in a new tab.
$('a:not([href^="#"])').attr('target', '_blank');
// Hide menu by tapping on background
$('#main').on('click', function () {
hideMenu();
});
});
var hideMenu = function () {
$('#nav').removeClass('show');
$('#menu-ico').removeClass('hidden');
};
var toc = [
{name: "Meteor " + Template.headline.release(), id: "top"}, [
"Quick start",
@@ -406,7 +416,7 @@ Template.nav.sections = function () {
Template.nav.type = function (what) {
return this.type === what;
}
};
Template.nav.maybe_current = function () {
return Session.equals("section", this.id) ? "current" : "";
@@ -416,6 +426,18 @@ Template.nav_section.depthIs = function (n) {
return this.depth === n;
};
// Show hidden TOC when menu icon is tapped
Template.nav.events({
'click #menu-ico' : function () {
$('#nav').addClass('show');
$('#menu-ico').addClass('hidden');
},
// Hide TOC when selecting an item
'click a' : function () {
hideMenu();
}
});
UI.registerHelper('dstache', function() {
return '{{';
});