improve look and feel of the html documentation

This commit is contained in:
Emil Axelsson
2016-09-27 14:45:26 +02:00
parent 77db054959
commit 15e83394c3
16 changed files with 5063 additions and 75 deletions
File diff suppressed because one or more lines are too long
+28
View File
@@ -0,0 +1,28 @@
{{#each entries}}
<div class="documentation-item">
<div class="row">
<div class="col-lg-12">
<p>
<a href="#{{urlify key}}" name="{{urlify key}}">
<span class="documentation-type">{{type}}</span>
<span class="documentation-key">{{key}}</span>
{{#if optional}}
<span class="documentation-type">(Optional)</span>
{{/if}}
</a>
</p>
<p class="documentation-description">{{description}}</p>
{{#with restrictions}}
{{>documentation}}
{{/with}}
{{#if reference}}
{{#if reference.found}}
<p class="documentation-description">An object of type '<a href="#{{reference.identifier}}">{{reference.name}}</a>'</p>
{{else}}
<p class="documentation-description">Missing reference</p>
{{/if}}
{{/if}}
</div>
</div>
</div>
{{/each}}
File diff suppressed because one or more lines are too long
+34
View File
@@ -0,0 +1,34 @@
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
OpenSpace Documentation
</a>
</li>
{{#each documentation}}
<li>
<a href="#{{id}}">{{name}}</a>
</li>
{{/each}}
</ul>
</div>
<!-- /#sidebar-wrapper -->
<div id="page-content-wrapper">
<div class="container-fluid documentation-container">
<h1>OpenSpace Documentation</h1>
<p>Version: {{version.[0]}}.{{version.[1]}}.{{version.[2]}}</p>
{{#each documentation}}
<div class="row">
<div class="col-lg-12">
<h2><a class="documentation-name" href="#{{id}}" name="{{id}}">{{name}}</a></h2>
{{> documentation}}
</div>
</div>
{{/each}}
</div>
</div>
</div>
+28
View File
@@ -0,0 +1,28 @@
window.onload = function () {
var mainTemplateElement = document.getElementById('mainTemplate');
var mainTemplate = Handlebars.compile(mainTemplateElement.innerHTML);
var documentationTemplateElement = document.getElementById('documentationTemplate');
Handlebars.registerPartial('documentation', documentationTemplateElement.innerHTML);
Handlebars.registerHelper('urlify', function(options, context) {
var data = context.data;
var identifier = options.replace(" ", "-").toLowerCase();
while (data = data._parent) {
if (data.key !== undefined) {
identifier = data.key + "-" + identifier;
}
}
return identifier;
});
var data = {
documentation: documentation,
version: version
}
var contents = mainTemplate(data);
document.body.innerHTML = contents;
}
+187
View File
@@ -0,0 +1,187 @@
.container {
padding-top: 70px;
}
.documentation-name, .documentation-name:hover, .documentation-name:focus {
text-decoration: none;
color: #333;
outline: none;
}
.documentation-item {
background-color: #f4f4f4;
border-left: 2px solid #888;
padding-left: 10px;
padding-top: 5px;
padding-right: 5px;
margin-bottom: 5px;
}
.documentation-item .documentation-item {
border-left: 2px solid #f00;
background-color: #fff;
}
.documentation-item .documentation-item .documentation-item {
border-left: 2px solid #080;
background-color: #f4f4f4;
}
.documentation-item .documentation-item .documentation-item .documentation-item {
border-left: 2px solid #00f;
background-color: #fff;
}
.documentation-type {
color: #888;
font-size: 0.8em;
font-style: italic;
}
.documentation-key {
color: #333;
font-weight: bold;
}
.documentation-description {
font-size: 0.9em;
}
.documentation-container {
font-size: 1.2em;
}
/*!
* Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
overflow-x: hidden;
}
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 280px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 280px;
width: 0;
height: 100%;
margin-left: -280px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 280px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -280px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 280px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 280px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 280px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}