tonyair/silverstripe-docsviewer
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-docsviewer synced 2024-10-22 09:05:56 +00:00
Code Issues Projects Releases Wiki Activity

Create sidebar hamburger menu for mobile (#121)

Browse Source 
* Create sidebar hamburger menu for mobile

* Improve sidebar UX and mobile menu

* Fixed sidebar UX bug where blue text breadcrumb didn't appear and fixed hover/focus styling

* Improved UX of hamburger by applying toggle animations
This commit is contained in:
Cam Findlay 2016-10-21 10:49:50 +13:00 committed by GitHub
parent 8ae26f1271
commit e38b740d88
9 changed files with 356 additions and 306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

278
css/layout.css
View File

@ -1,5 +1,5 @@
html { html {
background: #fff; background: #fff;
font: 15px/1.5 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; font: 15px/1.5 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #586667; color: #586667;
padding-bottom: 40px; padding-bottom: 40px;
@ -29,7 +29,7 @@ html {
.introduction p { .introduction p {
font-size: 20px; font-size: 20px;
margin-bottom: 10px; margin-bottom: 10px;
max-width: 80%; max-width: 80%;
} }
.no-box { .no-box {
@ -43,7 +43,7 @@ html {
} }
#content .box { #content .box {
padding: 30px; padding: 30px 5px;
} }
/*! sidebar */ /*! sidebar */
@ -60,39 +60,48 @@ html {
} }
#sidebar .nav { #sidebar .nav {
font-size: 16px; font-size: 16px;
} }
#sidebar .nav .top { #sidebar .nav .top {
width: 100%; width: 100%;
display: block; display: block;
line-height: 15px; line-height: 15px;
color: #808c8d; color: #808c8d;
padding: 15px 15px 14px; padding: 15px 15px 14px;
text-transform: uppercase; text-transform: uppercase;
}
#sidebar .nav .current .top {
color: #1389CE;
font-weight: 700;
} }
#sidebar .nav a { #sidebar .nav a {
display:block; display:block;
padding-top:8px; padding-top:7px;
padding-bottom:8px; padding-bottom:7px;
padding-right:12px; padding-right:12px;
} }
#sidebar .nav a:hover { /* Sidebar hover states */
text-decoration: none; #sidebar .nav a:hover,
background:#eee; #sidebar .nav a.top:hover,
color:#808c8d; #sidebar .nav .section ul li .section:hover,
} #sidebar .nav a.current:hover,
/* Sidebar focus states */
#sidebar .nav a.current:hover { #sidebar .nav a:focus,
background-color: #03527a; #sidebar .nav a.top:focus,
#sidebar .nav .section ul li .section:focus,
#sidebar .nav a.current:focus {
background-color: #1389ce;
color: #fff; color: #fff;
text-decoration: none;
} }
#sidebar .nav .section .top { #sidebar .nav .section .top {
background: #f6f7f8; border: none;
border: none; color: #1389CE;
} }
#sidebar li { #sidebar li {
@ -101,15 +110,13 @@ html {
} }
#sidebar li a.current { #sidebar li a.current {
background:rgb(3, 91, 136);
color:#fff; color:#fff;
} }
#sidebar .nav > li {} #sidebar .nav > li {}
#sidebar .nav .section ul, #sidebar .nav .section ul,
#sidebar .nav .current ul { #sidebar .nav .current ul {
background: #f6f7f8;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
margin: 0; margin: 0;
padding:0; padding:0;
@ -117,17 +124,24 @@ html {
#sidebar .nav .section ul li a, #sidebar .nav .section ul li a,
#sidebar .nav .current ul li a { #sidebar .nav .current ul li a {
padding-left:24px; padding-left:30px;
}
#sidebar .nav .section ul li a.section {
color: #1389CE;
} }
#sidebar .nav .section ul li ul li a, #sidebar .nav .section ul li ul li a,
#sidebar .nav .current ul li ul li a { #sidebar .nav .current ul li ul li a {
padding-left:42px; padding-left:48px;
font-size:14px; font-size:14px;
} }
#sidebar .nav a.current {} #sidebar .nav a.current {
color: #1389CE;
font-weight: 700;
}
#sidebar .minor-nav a { #sidebar .minor-nav a {
color: #181C17; color: #181C17;
opacity: 0.4; opacity: 0.4;
@ -164,7 +178,7 @@ html {
} }
#masthead { #masthead {
padding: 50px 0; padding: 50px 0;
background:#f6f7f8; background:#f6f7f8;
position:relative; position:relative;
} }
@ -206,71 +220,61 @@ html {
.versions .current { .versions .current {
background: #fff; background: #fff;
} }
.menu-toggle {
position:absolute;
right:20px;
top:14px;
}
.menu-toggle img {
width:32px;
}
/*! language */ /*! language */
#language {} #language {}
#language label { #language label {
float: left; float: left;
width: 830px; width: 830px;
line-height: 19px; line-height: 19px;
text-align: right; text-align: right;
font-size: 11px; font-size: 11px;
color: #999; color: #999;
} }
#language select { #language select {
float: right; float: right;
width: 120px; width: 120px;
} }
#language input.action { #language input.action {
float: right; float: right;
margin-top: 4px; margin-top: 4px;
} }
/* Header */ /* Header */
#header { #header {
padding: 0 0 14px 0; padding: 0 0 14px 0;
overflow: hidden; overflow: hidden;
} }
#header h1 { #header h1 {
margin: 0; margin: 0;
line-height: 38px; line-height: 38px;
float: left; float: left;
} }
#header h1 a { #header h1 a {
text-decoration: none; text-decoration: none;
font-size: 22px; font-size: 22px;
color: #0973A6; color: #0973A6;
letter-spacing: -1px; letter-spacing: -1px;
} }
#header .logo { #header .logo {
background: #fff url(../../docsviewer/images/logo.jpg) no-repeat bottom left; background: #fff url(../../docsviewer/images/logo.jpg) no-repeat bottom left;
height: 36px; width: 140px; height: 36px; width: 140px;
display: inline-block; display: inline-block;
} }
/* Search Results */ /* Search Results */
#search-results {} #search-results {}
#search-results li { #search-results li {
list-style: none; list-style: none;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
padding: 0 0 19px 0; padding: 0 0 19px 0;
margin: 0 0 20px 0; margin: 0 0 20px 0;
background: none; background: none;
} }
@ -286,16 +290,16 @@ html {
} }
/* Footer */ /* Footer */
#footer { #footer {
margin: 20px auto; margin: 20px auto;
padding: 0 30px; padding: 0 30px;
} }
#footer p { #footer p {
color: #798D85; color: #798D85;
} }
#footer p a { #footer p a {
color: #798D85; color: #798D85;
} }
@ -313,7 +317,7 @@ html {
} }
.pagination { .pagination {
margin: 27px 0; margin: 27px 0;
} }
.pagination li { .pagination li {
@ -409,17 +413,17 @@ html {
* <a href="#" class="close" title="Close notification">close</a> * <a href="#" class="close" title="Close notification">close</a>
* </div> * </div>
*/ */
#content .warningBox h5, #content .warningBox h5,
#content .hint h5, #content .hint h5,
#content .notice h5, #content .notice h5,
#content .warning h5, #content .warning h5,
#content .info h5 { #content .info h5 {
margin-bottom: 0px; margin-bottom: 0px;
} }
.hint a.close, .hint a.close,
.notice a.close, .notice a.close,
.warning a.close, .warning a.close,
.info a.close { .info a.close {
background:url(../../docsviewer/images/ico_close_off.png) no-repeat scroll left top transparent; background:url(../../docsviewer/images/ico_close_off.png) no-repeat scroll left top transparent;
display:block; display:block;
@ -496,7 +500,7 @@ html {
background: #f4f4f4; background: #f4f4f4;
} }
.info { .info {
background: #CAF7FF; background: #CAF7FF;
} }
@ -509,24 +513,24 @@ html {
background: url(../../docsviewer/images/warning.png) no-repeat 18px 14px; background: url(../../docsviewer/images/warning.png) no-repeat 18px 14px;
} }
.warningBoxTop h1 { .warningBoxTop h1 {
margin-bottom: 0; margin-bottom: 0;
} }
.warningBoxTop ul { .warningBoxTop ul {
margin: 9px 0 18px; margin: 9px 0 18px;
} }
.warningBoxTop li { .warningBoxTop li {
margin-bottom: 0; margin-bottom: 0;
} }
.warningBox { .warningBox {
margin-top: 0; margin-top: 0;
} }
.warningBoxBottom { .warningBoxBottom {
background-color: #0973A6; background-color: #0973A6;
padding: 12px 0 16px; padding: 12px 0 16px;
} }
@ -537,20 +541,20 @@ html {
.doc-breadcrumbs {} .doc-breadcrumbs {}
.doc-breadcrumbs p { .doc-breadcrumbs p {
margin: 0 0 5px 0; margin: 0 0 5px 0;
color: #999; color: #999;
font-size: 38px; font-size: 38px;
} }
.doc-breadcrumbs p a { .doc-breadcrumbs p a {
color: rgb(3, 91, 136); color: rgb(3, 91, 136);
text-decoration:none; text-decoration:none;
font-weight:200; font-weight:200;
} }
.doc-breadcrumbs p a.current { .doc-breadcrumbs p a.current {
color:#696868; color:#696868;
} }
.menu-toggle { .menu-toggle {
@ -700,7 +704,7 @@ html {
bottom: 0; bottom: 0;
top: 0; top: 0;
z-index: 9999; z-index: 9999;
box-shadow: -2px 1px 12px -3px #ccc; box-shadow: -2px 1px 40px -3px #999;
overflow-y:auto; overflow-y:auto;
overflow-x:hidden; overflow-x:hidden;
} }
@ -711,19 +715,99 @@ html {
} }
#masthead { #masthead {
padding:20px 0; padding:20px 0;
} }
.doc-breadcrumbs p { .doc-breadcrumbs p {
font-size:18px; font-size:18px;
} }
.introduction p { .introduction p {
font-size:14px; font-size:14px;
} }
.menu-toggle { .wrapper .menu-toggle {
display:block; display: block;
position: relative;
margin-left: auto;
margin-bottom: 20px;
width: 30px;
height: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.menu-toggle span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #1389ce;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
.menu-toggle span:nth-child(1) {
top: 8px;
}
.menu-toggle span:nth-child(2),
.menu-toggle span:nth-child(3) {
top: 18px;
}
.menu-toggle span:nth-child(4) {
top: 28px;
}
.menu-toggle.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
.menu-toggle.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-toggle.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-toggle.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
}
@media (max-width:992px) {
#content {
float: right;
width: 100%;
} }
} }

188
css/typography.css
View File

@ -1,51 +1,51 @@
/*! text selection */ /*! text selection */
::-moz-selection { ::-moz-selection {
text-shadow:none; text-shadow:none;
color: #ffffff; color: #ffffff;
background: #1389CE; background: #1389CE;
} }
::selection { ::selection {
text-shadow: none; text-shadow: none;
color: #ffffff; color: #ffffff;
background: #1389CE; background: #1389CE;
} }
/*! links */ /*! links */
a { a {
color: #1389ce; color: #808c8d;
text-decoration: none; text-decoration: none;
} }
a:hover, a:hover,
a:focus { a:focus {
text-decoration: underline; text-decoration: underline;
} }
a[href$=".pdf"], a[href$=".pdf"],
a[href$=".PDF"], a[href$=".PDF"],
a.pdf { a.pdf {
padding: 2px; padding: 2px;
padding-left: 20px; padding-left: 20px;
background: url(../../docsviewer/images/icons/page_white_acrobat.png) no-repeat left center; background: url(../../docsviewer/images/icons/page_white_acrobat.png) no-repeat left center;
} }
a[href$=".doc"], a[href$=".doc"],
a[href$=".DOC"], a[href$=".DOC"],
a.doc { a.doc {
padding: 2px; padding: 2px;
padding-left: 20px; padding-left: 20px;
background: url(../../docsviewer/images/icons/page_word.png) no-repeat left center; background: url(../../docsviewer/images/icons/page_word.png) no-repeat left center;
} }
a[href$=".xls"], a[href$=".xls"],
a[href$=".XLS"], a[href$=".XLS"],
a.xls { a.xls {
padding: 2px; padding: 2px;
padding-left: 20px; padding-left: 20px;
background: url(../../docsviewer/images/icons/page_excel.png) no-repeat left center; background: url(../../docsviewer/images/icons/page_excel.png) no-repeat left center;
} }
a[href$=".gz"], a[href$=".gz"],
a[href$=".GZ"], a[href$=".GZ"],
a[href$=".gzip"], a[href$=".gzip"],
@ -54,22 +54,22 @@ a[href$=".zip"],
a[href$=".ZIP"], a[href$=".ZIP"],
a.archive { a.archive {
padding: 2px; padding: 2px;
padding-left: 20px; padding-left: 20px;
background: url(../../docsviewer/images/icons/page_white_zip.png) no-repeat left center; background: url(../../docsviewer/images/icons/page_white_zip.png) no-repeat left center;
} }
a[href$=".exe"], a[href$=".exe"],
a[href$=".EXE"], a[href$=".EXE"],
a.application { a.application {
padding: 2px; padding: 2px;
padding-left: 20px; padding-left: 20px;
background: url(../../docsviewer/images/icons/application.png) no-repeat left center; background: url(../../docsviewer/images/icons/application.png) no-repeat left center;
} }
/*! pargraphs */ /*! pargraphs */
p { p {
font-size: 15px; font-size: 15px;
line-height: 1.5; line-height: 1.5;
margin: 0 0 25px; margin: 0 0 25px;
} }
@ -78,36 +78,36 @@ p {
} }
/*! lists */ /*! lists */
ul { ul {
margin: 10px 0 20px 20px; margin: 10px 0 20px 20px;
padding: 0; padding: 0;
} }
li, dd, li p { li, dd, li p {
font-size: 15px; font-size: 15px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
line-height: 1.5; line-height: 1.5;
} }
li { li {
list-style-position: inside; list-style-position: inside;
} }
li ul, li ul,
li ol { li ol {
margin: 0 0 5px 20px; margin: 0 0 5px 20px;
} }
dl { dl {
margin: 7px 0 21px 0; margin: 7px 0 21px 0;
} }
dt { dt {
font-weight: bold; font-weight: bold;
} }
dd { dd {
margin: 5px 0 10px 20px; margin: 5px 0 10px 20px;
} }
.semantic { .semantic {
@ -132,10 +132,10 @@ ul.third {
} }
/*! headers */ /*! headers */
h1 { h1 {
font-size: 35px; font-size: 35px;
line-height: 40px; line-height: 40px;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 0; margin-top: 0;
letter-spacing: -1px; letter-spacing: -1px;
color:rgb(3, 91, 136); color:rgb(3, 91, 136);
@ -145,44 +145,44 @@ h1 {
font-size: 18px; font-size: 18px;
line-height: 20px; line-height: 20px;
} }
h1 + p { h1 + p {
margin-top: 30px; margin-top: 30px;
} }
h2 { h2 {
font-size: 28px; font-size: 28px;
line-height: 30px; line-height: 30px;
margin: 40px 0 20px; margin: 40px 0 20px;
border-top: 1px solid #eee; border-top: 1px solid #eee;
padding-top: 29px; padding-top: 29px;
letter-spacing: -1px; letter-spacing: -1px;
color: rgb(3, 91, 136); color: rgb(3, 91, 136);
} }
h3 { h3 {
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 20px;
margin: 30px 0 10px; margin: 30px 0 10px;
color: #181c1d; color: #181c1d;
} }
h4 { h4 {
font-size: 16px; font-size: 16px;
margin-bottom: 14px; margin-bottom: 14px;
line-height: 21px; line-height: 21px;
} }
h5 { h5 {
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
margin-bottom: 7px; margin-bottom: 7px;
} }
h6 { h6 {
font-size: 12px; font-size: 12px;
line-height: 15px; line-height: 15px;
margin-bottom: 10px; margin-bottom: 10px;
} }
h1 .heading-anchor-link, h1 .heading-anchor-link,
@ -210,16 +210,16 @@ h6 .heading-anchor-link {
/*! images */ /*! images */
img { img {
max-width: 100%; max-width: 100%;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 6px; padding: 6px;
margin: 10px 0; margin: 10px 0;
border-radius: 3px; border-radius: 3px;
} }
/*! code */ /*! code */
pre { pre {
margin: 20px 0 30px; margin: 20px 0 30px;
font: 13px/20px Monaco, 'Bitstream Vera Sans Mono', 'Courier New', monospace; font: 13px/20px Monaco, 'Bitstream Vera Sans Mono', 'Courier New', monospace;
background-color: #f6f7f8; background-color: #f6f7f8;
border: 1px solid #e9eaed; border: 1px solid #e9eaed;
padding: 14px; padding: 14px;
@ -228,27 +228,27 @@ pre {
color: #4E5661; color: #4E5661;
} }
pre code { pre code {
background: none; background: none;
font-weight: normal; font-weight: normal;
padding: 0; padding: 0;
} }
code { code {
font: 13px/15px Monaco, 'Bitstream Vera Sans Mono', Courier, monospace; font: 13px/15px Monaco, 'Bitstream Vera Sans Mono', Courier, monospace;
background: #ecf0f1; background: #ecf0f1;
padding: 2px; padding: 2px;
} }
code a { code a {
color: #4E5661; color: #4E5661;
} }
/*! quotes */ /*! quotes */
blockquote { blockquote {
margin: 28px 0; margin: 28px 0;
padding: 14px 14px 0 38px; padding: 14px 14px 0 38px;
background: #f8f9fa url(../../docsviewer/images/quote.gif) no-repeat 9px 18px; background: #f8f9fa url(../../docsviewer/images/quote.gif) no-repeat 9px 18px;
overflow: hidden; overflow: hidden;
} }
@ -257,42 +257,42 @@ blockquote {
blockquote h3, blockquote h3,
blockquote h4, blockquote h4,
blockquote h5, blockquote h5,
blockquote h6 { blockquote h6 {
font-style: italic; font-style: italic;
color: #627871; color: #627871;
} }
blockquote h4 { blockquote h4 {
font-size: 18px; font-size: 18px;
} }
blockquote p { blockquote p {
font-style: italic; font-style: italic;
font-size: 14px; font-size: 14px;
color: #667D76; color: #667D76;
} }
/*! tables */ /*! tables */
table { table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
background-color: #fafafa; background-color: #fafafa;
margin-bottom: 28px; margin-bottom: 28px;
border: 1px solid #c3cdca; border: 1px solid #c3cdca;
} }
table tr:nth-child(even) { table tr:nth-child(even) {
background: #eef4f6; background: #eef4f6;
} }
table caption { table caption {
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
line-height: 21px; line-height: 21px;
} }
table thead { table thead {
background: #fafafa; background: #fafafa;
} }
@ -303,12 +303,12 @@ table {
border-right: 1px solid #c3cdca; border-right: 1px solid #c3cdca;
} }
table tbody tr { table tbody tr {
border-top: 1px solid #c3cdca; border-top: 1px solid #c3cdca;
} }
table td { table td {
font-size: 15px; font-size: 15px;
line-height: 21px; line-height: 21px;
padding: 7px; padding: 7px;
border-right: 1px solid #c3cdca; border-right: 1px solid #c3cdca;
@ -342,7 +342,7 @@ table {
border-radius: 3px; border-radius: 3px;
float: left; float: left;
} }
#edit-link a:hover, #edit-link a:hover,
#edit-link a:focus { #edit-link a:focus {
color: #fff; color: #fff;

97
javascript/DocumentationViewer.js
View File

@ -1,20 +1,31 @@
;(function($) { ;(function($) {
$(document).ready(function() { $(document).ready(function() {
//toggle the side menu when in mobile
$('.menu-toggle').on('click', function (e) {
e.preventDefault();
var left = $('#sidebar').is('.visible') ? -270 : 0;
$('#sidebar').animate({ left: left}, 'fast', function() {
$(this).toggleClass('visible');
});
$(this).toggleClass('open');
})
var switched = false; var switched = false;
var updateTables = function() { var updateTables = function() {
if (($(window).width() < 540) && !switched ){ if (($(window).width() < 540) && !switched ){
switched = true; switched = true;
$("table").each(function(i, element) { $("table").each(function(i, element) {
splitTable($(element)); splitTable($(element));
}); });
return true; return true;
} }
else if (switched && ($(window).width() > 540)) { else if (switched && ($(window).width() > 540)) {
switched = false; switched = false;
$("table").each(function(i, element) { $("table").each(function(i, element) {
unsplitTable($(element)); unsplitTable($(element));
}); });
@ -62,7 +73,7 @@
tx.each(function () { tx.each(function () {
var height = $(this).outerHeight(true); var height = $(this).outerHeight(true);
heights[index] = heights[index] || 0; heights[index] = heights[index] || 0;
if (height > heights[index]) heights[index] = height; if (height > heights[index]) heights[index] = height;
}); });
}); });
@ -121,74 +132,21 @@
* Automatically adds anchor links to headings that have IDs * Automatically adds anchor links to headings that have IDs
*/ */
var url = window.location.href.replace(/#[a-zA-Z0-9\-\_]*/g, ''); var url = window.location.href.replace(/#[a-zA-Z0-9\-\_]*/g, '');
$("#content h1[id], #content h2[id], #content h3[id], #content h4[id], #content h5[id], #content h6[id]").each(function() { $("#content h1[id], #content h2[id], #content h3[id], #content h4[id], #content h5[id], #content h6[id]").each(function() {
var link = '<a class="heading-anchor-link" title="Link to this section" href="'+ url + '#' + $(this).attr('id') + '">&para;</a>'; var link = '<a class="heading-anchor-link" title="Link to this section" href="'+ url + '#' + $(this).attr('id') + '">&para;</a>';
$(this).append(' ' + link); $(this).append(' ' + link);
}); });
$("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").mouseenter(function() { $("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").mouseenter(function() {
$(this).addClass('hover'); $(this).addClass('hover');
}); });
$("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").mouseleave(function() { $("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").mouseleave(function() {
$(this).removeClass('hover'); $(this).removeClass('hover');
}); });
/*
$(".search input").live("keyup", function(e) {
clearTimeout($.data(this, 'timer'));
var string = $(this).val();
var self = $(this);
if (string == '') {
$(".search .autocomplete-results").hide();
} else {
var container;
if($(this).siblings('.autocomplete-results').length == 0) {
container = $("<div class='autocomplete-results'></div");
$(this).after(container);
} else {
container = $(this).siblings('.autocomplete-results').first();
}
$(this).data('timer', setTimeout(function() {
if(string !== '') {
$.getJSON(
self.parents('form').attr('action'),
{ query: string },
function(results) {
if(results) {
var list = $("<ul></ul>");
$.each(results, function(i, elem) {
list.append(
$("<li></li>")
.append(
$("<a></a>").attr('href', elem.link).text(elem.title)
).append(
elem.path
)
);
});
container.append(list);
} else {
container.hide().removeClass('loading');
}
}
);
}
return false;
}, 100));
};
});
*/
/** --------------------------------------------- /** ---------------------------------------------
* LANGAUGE SELECTER * LANGAUGE SELECTER
@ -196,13 +154,13 @@
* Hide the change button and do it onclick * Hide the change button and do it onclick
*/ */
$("#Form_LanguageForm .Actions").hide(); $("#Form_LanguageForm .Actions").hide();
$("#Form_LanguageForm select").change(function() { $("#Form_LanguageForm select").change(function() {
$("#Form_LanguageForm").submit(); $("#Form_LanguageForm").submit();
}); });
/** --------------------------------------------- /** ---------------------------------------------
* SYNTAX HIGHLIGHTER * SYNTAX HIGHLIGHTER
* *
* As the Markdown parser now uses the GFM structure (```yml) this does * As the Markdown parser now uses the GFM structure (```yml) this does
* not work with SyntaxHighlighter. The below translates the GFM output * not work with SyntaxHighlighter. The below translates the GFM output
@ -218,13 +176,6 @@
} }
}); });
$('.menu-toggle').on('click', function (e) {
e.preventDefault();
var left = $('#sidebar').is('.visible') ? -270 : 0;
$('#sidebar').animate({ left: left}, 'fast', function() {
$(this).toggleClass('visible');
});
})
}); });
})(jQuery); })(jQuery);

21
templates/DocumentationViewer.ss
View File

@ -1,11 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<% include DocumentationHead %> <% include DocumentationHead %>
<div id="masthead" <% if Versions %>class="has_versions"<% end_if %>> <div id="masthead" <% if Versions %>class="has_versions"<% end_if %>>
<div class="wrapper"> <div class="wrapper">
<% if Breadcrumbs.count > 1 %> <a class="menu-toggle">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<% if Breadcrumbs.count > 1 %>
<% include DocumentationBreadcrumbs %> <% include DocumentationBreadcrumbs %>
<% else_if Page.Title %> <% else_if Page.Title %>
<h1>$Page.Title</h1> <h1>$Page.Title</h1>
@ -18,8 +25,8 @@
<% include DocumentationVersions %> <% include DocumentationVersions %>
</div> </div>
</div> </div>
<div class="wrapper"> <div class="wrapper">
<div id="layout" class="clearfix"> <div id="layout" class="clearfix">
@ -27,12 +34,12 @@
<div id="content"> <div id="content">
$Layout $Layout
<% include DocumentationFooter %> <% include DocumentationFooter %>
</div> </div>
</div> </div>
</div> </div>
<% include DocumentationGA %> <% include DocumentationGA %>
<% include DocumentationEnd %> <% include DocumentationEnd %>

31
templates/DocumentationViewer_all.ss
View File

@ -1,35 +1,40 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<% include DocumentationHead %> <% include DocumentationHead %>
<div id="masthead" <% if Versions %>class="has_versions"<% end_if %>> <div id="masthead" <% if Versions %>class="has_versions"<% end_if %>>
<div class="wrapper"> <div class="wrapper">
<div class="doc-breadcrumbs"> <div class="doc-breadcrumbs">
<p> <p>
<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a> <a class="menu-toggle">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<a class="breadcrumb" href="$BaseHref">Documentation</a> <a class="breadcrumb" href="$BaseHref">Documentation</a>
<span>/</span> <span>/</span>
<a class="breadcrumb current">Index</a> <a class="breadcrumb current">Index</a>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="wrapper"> <div class="wrapper">
<div id="layout" class="clearfix"> <div id="layout" class="clearfix">
$Layout $Layout
<% include DocumentationFooter %> <% include DocumentationFooter %>
</div> </div>
</div> </div>
<% include DocumentationGA %> <% include DocumentationGA %>
<% include DocumentationEnd %> <% include DocumentationEnd %>

33
templates/DocumentationViewer_results.ss
View File

@ -1,35 +1,40 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<% include DocumentationHead %> <% include DocumentationHead %>
<div id="masthead" <% if Versions %>class="has_versions"<% end_if %>> <div id="masthead" <% if Versions %>class="has_versions"<% end_if %>>
<div class="wrapper"> <div class="wrapper">
<div class="doc-breadcrumbs"> <div class="doc-breadcrumbs">
<p> <p>
<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a> <a class="menu-toggle">
<a class="breadcrumb" href="$BaseHref">Documentation</a> <span></span>
<span>/</span> <span></span>
<a class="breadcrumb current">Search</a> <span></span>
<span></span>
</a>
<a class="breadcrumb" href="$BaseHref">Documentation</a>
<span>/</span>
<a class="breadcrumb current">Search</a>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="wrapper"> <div class="wrapper">
<div id="layout" class="clearfix"> <div id="layout" class="clearfix">
$Layout $Layout
<% include DocumentationFooter %> <% include DocumentationFooter %>
</div> </div>
</div> </div>
<% include DocumentationGA %> <% include DocumentationGA %>
<% include DocumentationEnd %> <% include DocumentationEnd %>

7
templates/Includes/DocumentationBreadcrumbs.ss
View File

@ -1,11 +1,10 @@
<div class="doc-breadcrumbs"> <div class="doc-breadcrumbs">
<p> <p>
<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a>
<% loop Breadcrumbs %> <% loop Breadcrumbs %>
<% if not First %> <% if not First %>
<a class="breadcrumb <% if Last %>current<% end_if %>" href="$Link">$Title</a> <% if Last %><% else %><span>/</span><% end_if %> <a class="breadcrumb <% if Last %>current<% end_if %>" href="$Link">$Title</a> <% if Last %><% else %><span>/</span><% end_if %>
<% end_if %> <% end_if %>
<% end_loop %> <% end_loop %>
</p> </p>
</div> </div>

5
templates/Includes/DocumentationSidebar.ss
View File

@ -1,16 +1,15 @@
<div id="sidebar"> <div id="sidebar">
<div class="box"> <div class="box">
$DocumentationSearchForm $DocumentationSearchForm
<ul class="nav"> <ul class="nav">
<% if not HasDefaultEntity %> <% if not HasDefaultEntity %>
<li><a href="$Link" class="top">Home</a></li> <li><a href="$Link" class="top">Home</a></li>
<% end_if %> <% end_if %>
<% loop Menu %> <% loop Menu %>
<% if DefaultEntity %> <% if DefaultEntity %>
<li><a href="$Link" class="top">Home</a></li> <li><a href="$Link" class="top">Home</a></li>
<% loop Children %> <% loop Children %>
<li class="$LinkingMode <% if Last %>last<% end_if %>"> <li class="$LinkingMode <% if Last %>last<% end_if %>">
<a href="$Link" class="top">$Title</a> <a href="$Link" class="top">$Title</a>

2
templates/Includes/DocumentationTableContents.ss
View File

@ -1 +1 @@
<div id="table-contents-holder"></div> <div id="table-contents-holder"></div>