kotovalexarian-likes-github
/
jashkenas--coffeescript
mirror of https://github.com/jashkenas/coffeescript.git
1
0
Fork 0
Code Releases Activity

Add some links to header navbar; fix sidebar to work at various breakpoints, including navigating to anchors

This commit is contained in:
Geoffrey Booth 2016-12-18 23:03:17 -08:00
parent 28d077c08a
commit 7ced071934
6 changed files with 211 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
documentation/v2/body.html
View File

@ -1,19 +1,9 @@
<nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
<a class="navbar-brand" href="#"><%= include('documentation/images/logo.svg') %></a>
<button type="button" class="navbar-menu-button hidden-lg-up" data-toggle="offcanvas" aria-label="Toggle navigation">
<div class="menu-button">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</button>
</nav>
<%= include('navbar.html') %>
<div class="container-fluid" id="top">
<div class="row row-offcanvas row-offcanvas-left">
<nav class="sidebar col-xs-12 col-lg-3 sidebar-offcanvas">
<%= include('nav.html') %>
<nav class="sidebar sidebar-offcanvas col-xs-12 col-lg-3">
<%= include('sidebar.html') %>
</nav>
<main class="main col-xs-12 col-lg-9 offset-lg-3">

13
documentation/v2/docs.coffee
View File

@ -1,10 +1,21 @@
$(document).ready ->
# Mobile navigation
$('[data-toggle="offcanvas"]').click ->
toggleSidebar = ->
$('.menu-button, .row-offcanvas').toggleClass 'active'
$('[data-toggle="offcanvas"]').click toggleSidebar
$('[data-action="sidebar-nav"]').click (event) ->
if $('.menu-button').is(':visible')
event.preventDefault()
toggleSidebar()
setTimeout ->
window.location = event.target.href
, 260 # Wait for the sidebar to slide away before navigating
# Initialize Scrollspy for sidebar navigation; http://v4-alpha.getbootstrap.com/components/scrollspy/
# See also http://www.codingeverything.com/2014/02/BootstrapDocsSideBar.html and http://jsfiddle.net/KyleMit/v6zhz/
$('body').scrollspy
target: '#contents'
offset: Math.round $('main').css('padding-top').replace('px', '')

89
documentation/v2/docs.css
View File

@ -35,14 +35,35 @@ a:focus, a:hover, a:active {
/*
* Header
*/
.navbar-fixed-top {
height: 3.5rem;
}
.navbar-brand {
height: 2em;
margin-right: 2em;
}
.navbar-dark path {
fill: #fff;
}
.navbar-nav {
font-family: Lato;
font-weight: 400;
font-size: 1.1em;
}
.navbar-nav .nav-link {
padding-left: 0.6em;
padding-right: 0.6em;
border-radius: 0.4em;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:active {
background-color: #4e342e;
}
/* Adapted from https://codepen.io/GeoffreyBooth/pen/QGzwYK */
.navbar-menu-button,
.navbar-menu-button:focus {
@ -109,41 +130,45 @@ a:focus, a:hover, a:active {
.sidebar {
background-color: #efebe9;
border-right: 1px solid #eee;
position: fixed;
top: 0;
top: 3.5rem;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding-top: 1.3em;
padding-left: 1.6em;
padding-right: 1.6em;
overflow-x: hidden;
padding: 0;
}
.sidebar .contents {
height: 100%;
/* Scrollable contents if viewport is shorter than content */
overflow-y: auto;
overflow-x: hidden;
font-family: 'Alegreya Sans';
font-weight: 400;
font-size: 1.2em;
line-height: 2;
}
.sidebar::-webkit-scrollbar {
display: none;
}
@media screen and (max-width: 991px) {
.sidebar .contents {
position: fixed;
}0
height: calc(100% - 3.5rem);
padding: 1em 1.6em;
}
}
@media screen and (min-width: 992px) {
.sidebar {
/* Push below header bar */
margin-top: 3.5rem;
position: fixed;
}
.sidebar .contents {
padding: 1.3em;
}
.sidebar .contents::-webkit-scrollbar {
display: none;
}
}
.nav-link.active,
.nav-link.active, a:hover,
.nav-link.active, a:focus {
.sidebar .nav-link.active,
.sidebar .nav-link.active a:hover,
.sidebar .nav-link.active a:focus {
font-weight: 800;
}
@ -162,25 +187,31 @@ a:focus, a:hover, a:active {
position: relative;
transition: all .25s ease-in-out;
}
.row-offcanvas-left {
left: 0;
left: 0;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -66.667%;
}
.row-offcanvas-right.active {
right: calc(66.667% + 1em);
}
.row-offcanvas-left.active {
left: calc(66.667% + 1em);
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
@media screen and (max-width: 767px) {
.row-offcanvas-left .sidebar-offcanvas {
left: -100%;
}
.row-offcanvas-left.active {
left: calc(100% + 30px)
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.row-offcanvas-left .sidebar-offcanvas {
left: calc(-66.667% - 15px);
width: 66.667%;
}
.row-offcanvas-left.active {
left: calc(66.667% + 30px);
}
.row-offcanvas-left .sidebar-offcanvas .contents {
width: 66.667%;
}
}

119
documentation/v2/nav.html
View File

@ -1,119 +0,0 @@
<nav class="contents" id="contents">
<ul class="nav">
<li class="nav-item">
<a href="#top" class="nav-link active">Overview</a>
</li>
<li class="nav-item">
<a href="#installation" class="nav-link">Installation</a>
</li>
<li class="nav-item">
<a href="#usage" class="nav-link">Usage</a>
</li>
<li class="nav-item">
<a href="#language" class="nav-link">Language Reference</a>
<ul class="nav">
<li class="nav-item">
<a href="#functions" class="nav-link">Functions</a>
</li>
<li class="nav-item">
<a href="#strings" class="nav-link">Strings</a>
</li>
<li class="nav-item">
<a href="#objects-and-arrays" class="nav-link">Objects and Arrays</a>
</li>
<li class="nav-item">
<a href="#comments" class="nav-link">Comments</a>
</li>
<li class="nav-item">
<a href="#lexical-scope" class="nav-link">Lexical Scoping and Variable Safety</a>
</li>
<li class="nav-item">
<a href="#conditionals" class="nav-link">If, Else, Unless, and Conditional Assignment</a>
</li>
<li class="nav-item">
<a href="#splats" class="nav-link">Splats…</a>
</li>
<li class="nav-item">
<a href="#loops" class="nav-link">Loops and Comprehensions</a>
</li>
<li class="nav-item">
<a href="#slices" class="nav-link">Array Slicing and Splicing</a>
</li>
<li class="nav-item">
<a href="#expressions" class="nav-link">Everything is an Expression</a>
</li>
<li class="nav-item">
<a href="#operators" class="nav-link">Operators and Aliases</a>
</li>
<li class="nav-item">
<a href="#existential-operator" class="nav-link">Existential Operator</a>
</li>
<li class="nav-item">
<a href="#classes" class="nav-link">Classes, Inheritance, and Super</a>
</li>
<li class="nav-item">
<a href="#destructuring" class="nav-link">Destructuring Assignment</a>
</li>
<li class="nav-item">
<a href="#fat-arrow" class="nav-link">Bound and Generator Functions</a>
</li>
<li class="nav-item">
<a href="#embedded" class="nav-link">Embedded JavaScript</a>
</li>
<li class="nav-item">
<a href="#switch" class="nav-link">Switch and Try/Catch</a>
</li>
<li class="nav-item">
<a href="#comparisons" class="nav-link">Chained Comparisons</a>
</li>
<li class="nav-item">
<a href="#regexes" class="nav-link">Block Regular Expressions</a>
</li>
<li class="nav-item">
<a href="#tagged-template-literals" class="nav-link">Tagged Template Literals</a>
</li>
<li class="nav-item">
<a href="#modules" class="nav-link">Modules</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#literate" class="nav-link">Literate CoffeeScript</a>
</li>
<li class="nav-item">
<a href="#source-maps" class="nav-link">Source Maps</a>
</li>
<li class="nav-item">
<a href="#cake" class="nav-link">Cake, and Cakefiles</a>
</li>
<li class="nav-item">
<a href="#scripts" class="nav-link"><code>"text/coffeescript"</code> Script Tags</a>
</li>
<li class="nav-item">
<a href="#test" class="nav-link">Browser-Based Tests</a>
</li>
<li class="nav-item">
<a href="#resources" class="nav-link">Resources</a>
<ul class="nav">
<li class="nav-item">
<a href="#books">Books</a>
</li>
<li class="nav-item">
<a href="#screencasts">Screencasts</a>
</li>
<li class="nav-item">
<a href="#examples">Examples</a>
</li>
<li class="nav-item">
<a href="#chat">Chat</a>
</li>
<li class="nav-item">
<a href="#annotated-source">Annotated Source</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#changelog" class="nav-link">Change Log</a>
</li>
</ul>
</nav>

17
documentation/v2/navbar.html Normal file
View File

@ -0,0 +1,17 @@
<nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
<a class="navbar-brand" href="#"><%= include('documentation/images/logo.svg') %></a>
<nav class="nav navbar-nav float-xs-left hidden-md-down">
<a href="#try" class="nav-item nav-link">Try CoffeeScript</a>
<a href="#language" class="nav-item nav-link">Language Reference</a>
<a href="#resources" class="nav-item nav-link">Resources</a>
<a href="http://github.com/jashkenas/coffeescript/" class="nav-item nav-link">GitHub</a>
</nav>
<button type="button" class="navbar-menu-button hidden-lg-up" data-toggle="offcanvas" aria-label="Toggle sidebar">
<div class="menu-button">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</button>
</nav>

119
documentation/v2/sidebar.html Normal file
View File

@ -0,0 +1,119 @@
<nav class="contents" id="contents">
<ul class="nav">
<li class="nav-item">
<a href="#top" class="nav-link" data-action="sidebar-nav">Overview</a>
</li>
<li class="nav-item">
<a href="#installation" class="nav-link" data-action="sidebar-nav">Installation</a>
</li>
<li class="nav-item">
<a href="#usage" class="nav-link" data-action="sidebar-nav">Usage</a>
</li>
<li class="nav-item">
<a href="#language" class="nav-link" data-action="sidebar-nav">Language Reference</a>
<ul class="nav">
<li class="nav-item">
<a href="#functions" class="nav-link" data-action="sidebar-nav">Functions</a>
</li>
<li class="nav-item">
<a href="#strings" class="nav-link" data-action="sidebar-nav">Strings</a>
</li>
<li class="nav-item">
<a href="#objects-and-arrays" class="nav-link" data-action="sidebar-nav">Objects and Arrays</a>
</li>
<li class="nav-item">
<a href="#comments" class="nav-link" data-action="sidebar-nav">Comments</a>
</li>
<li class="nav-item">
<a href="#lexical-scope" class="nav-link" data-action="sidebar-nav">Lexical Scoping and Variable Safety</a>
</li>
<li class="nav-item">
<a href="#conditionals" class="nav-link" data-action="sidebar-nav">If, Else, Unless, and Conditional Assignment</a>
</li>
<li class="nav-item">
<a href="#splats" class="nav-link" data-action="sidebar-nav">Splats…</a>
</li>
<li class="nav-item">
<a href="#loops" class="nav-link" data-action="sidebar-nav">Loops and Comprehensions</a>
</li>
<li class="nav-item">
<a href="#slices" class="nav-link" data-action="sidebar-nav">Array Slicing and Splicing</a>
</li>
<li class="nav-item">
<a href="#expressions" class="nav-link" data-action="sidebar-nav">Everything is an Expression</a>
</li>
<li class="nav-item">
<a href="#operators" class="nav-link" data-action="sidebar-nav">Operators and Aliases</a>
</li>
<li class="nav-item">
<a href="#existential-operator" class="nav-link" data-action="sidebar-nav">Existential Operator</a>
</li>
<li class="nav-item">
<a href="#classes" class="nav-link" data-action="sidebar-nav">Classes, Inheritance, and Super</a>
</li>
<li class="nav-item">
<a href="#destructuring" class="nav-link" data-action="sidebar-nav">Destructuring Assignment</a>
</li>
<li class="nav-item">
<a href="#fat-arrow" class="nav-link" data-action="sidebar-nav">Bound and Generator Functions</a>
</li>
<li class="nav-item">
<a href="#embedded" class="nav-link" data-action="sidebar-nav">Embedded JavaScript</a>
</li>
<li class="nav-item">
<a href="#switch" class="nav-link" data-action="sidebar-nav">Switch and Try/Catch</a>
</li>
<li class="nav-item">
<a href="#comparisons" class="nav-link" data-action="sidebar-nav">Chained Comparisons</a>
</li>
<li class="nav-item">
<a href="#regexes" class="nav-link" data-action="sidebar-nav">Block Regular Expressions</a>
</li>
<li class="nav-item">
<a href="#tagged-template-literals" class="nav-link" data-action="sidebar-nav">Tagged Template Literals</a>
</li>
<li class="nav-item">
<a href="#modules" class="nav-link" data-action="sidebar-nav">Modules</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#literate" class="nav-link" data-action="sidebar-nav">Literate CoffeeScript</a>
</li>
<li class="nav-item">
<a href="#source-maps" class="nav-link" data-action="sidebar-nav">Source Maps</a>
</li>
<li class="nav-item">
<a href="#cake" class="nav-link" data-action="sidebar-nav">Cake, and Cakefiles</a>
</li>
<li class="nav-item">
<a href="#scripts" class="nav-link" data-action="sidebar-nav"><code>"text/coffeescript"</code> Script Tags</a>
</li>
<li class="nav-item">
<a href="#test" class="nav-link" data-action="sidebar-nav">Browser-Based Tests</a>
</li>
<li class="nav-item">
<a href="#resources" class="nav-link" data-action="sidebar-nav">Resources</a>
<ul class="nav">
<li class="nav-item">
<a href="#books">Books</a>
</li>
<li class="nav-item">
<a href="#screencasts">Screencasts</a>
</li>
<li class="nav-item">
<a href="#examples">Examples</a>
</li>
<li class="nav-item">
<a href="#chat">Chat</a>
</li>
<li class="nav-item">
<a href="#annotated-source">Annotated Source</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#changelog" class="nav-link" data-action="sidebar-nav">Change Log</a>
</li>
</ul>
</nav>