Setup new docs layout

This commit is contained in:
Emmanouil Konstantinidis 2017-02-01 12:19:18 +00:00
parent 0b0a55c9a0
commit f65b80849a
10 changed files with 229 additions and 285 deletions

View File

@ -1,287 +1,194 @@
body {
padding-top: 70px;
background-color: #f8f8f8;
}
body {
overflow-x: hidden;
}
body > div.container {
min-height: 400px;
}
/* Toggle Styles */
ul.nav li.main {
font-weight: bold;
}
div.col-md-3 {
#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;
}
div.col-md-9 {
padding-bottom: 100px;
#wrapper.toggled {
padding-left: 250px;
}
div.source-links {
float: right;
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #F7F7F9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
div.col-md-9 img {
max-width: 100%;
display: inline;
padding: 4px;
line-height: 1.428571429;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
margin: 20px auto 30px auto;
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
h1, h2, h3 {
color: #444;
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
h1[id]:before, h2[id]:before, h3[id]:before, h4[id]:before, h5[id]:before, h6[id]:before {
content: "";
display: block;
margin-top: -75px;
height: 75px;
pointer-events: none;
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
h1 {
font-weight: 400;
font-size: 42px;
}
/* Sidebar Styles */
h2, h3, h4, h5, h6 {
font-weight: 300;
}
hr {
border-top: 1px solid #aaa;
}
pre, .rst-content tt {
max-width: 100%;
background: #fff;
border: solid 1px #e1e4e5;
color: #e74c3c;
overflow-x: auto;
}
code.code-large, .rst-content tt.code-large {
font-size: 90%;
}
code {
padding: 2px 5px;
color: #c7254e;
background-color: #f9f2f4;
font-size: 75%;
}
code, kbd, pre, samp {
font-family: monospace,serif;
font-size: 12px !important;
}
footer {
margin-top: 30px;
margin-bottom: 10px;
text-align: center;
font-weight: 200;
}
.modal-dialog {
margin-top: 60px;
}
/*
* Side navigation
*
* Scrollspy and affixed enhanced navigation to highlight sections and secondary
* sections of docs content.
*/
/* By default it's not affixed in mobile views, so undo that */
.bs-sidebar.affix {
position: static;
}
.bs-sidebar.well {
.sidebar-nav {
// position: absolute;
// top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
/* First level of nav */
.bs-sidenav {
padding-top: 10px;
padding-bottom: 10px;
border-radius: 5px;
.sidebar-nav li {
text-indent: 10px;
}
/* All levels of nav */
.bs-sidebar .nav > li > a {
.sidebar-nav li a {
display: block;
padding: 5px 20px;
z-index: 1;
}
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
text-decoration: none;
border-right: 1px solid;
}
.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a {
font-weight: bold;
background-color: transparent;
border-right: 1px solid;
color: #999999;
border: 0;
}
/* Nav: second level (shown on .active) */
.bs-sidebar .nav .nav {
display: none; /* Hide by default, but at >768px, show it */
margin-bottom: 8px;
}
.bs-sidebar .nav .nav > li > a {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 30px;
font-size: 90%;
.sidebar-nav li a:hover {
text-decoration: none;
background: rgba(255,255,255,0.9);
border: 0;
}
/* Show and affix the side nav when space allows it */
@media (min-width: 992px) {
.bs-sidebar .nav > .active > ul {
display: block;
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
border: 0;
text-decoration: none;
}
.sidebar-wrapper > .sidebar-brand {
text-align: center;
margin-bottom: 20px;
}
@media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
/* Widen the fixed sidebar */
.bs-sidebar.affix,
.bs-sidebar.affix-bottom {
width: 213px;
#wrapper.toggled {
padding-left: 0;
}
.bs-sidebar.affix {
position: fixed; /* Undo the static from mobile first approach */
top: 80px;
#sidebar-wrapper {
width: 250px;
}
.bs-sidebar.affix-bottom {
position: absolute; /* Undo the static from mobile first approach */
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
.bs-sidebar.affix-bottom .bs-sidenav,
.bs-sidebar.affix .bs-sidenav {
margin-top: 0;
margin-bottom: 0;
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
// @media (min-width: 1200px) {
// /* Widen the fixed sidebar again */
// .bs-sidebar.affix-bottom,
// .bs-sidebar.affix {
// width: 263px;
// }
// body {
// // padding-top: 70px;
// background-color: #f8f8f8;
// }
.headerlink {
font-family: FontAwesome;
font-size: 14px;
display: none;
padding-left: .5em;
}
// ul.nav li.main {
// font-weight: bold;
// }
h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .headerlink, h5:hover .headerlink, h6:hover .headerlink{
display:inline-block;
}
// div.source-links {
// float: right;
// }
// h1, h2, h3 {
// color: #444;
// }
// h1 {
// font-weight: 400;
// font-size: 42px;
// }
// h2, h3, h4, h5, h6 {
// font-weight: 300;
// }
// hr {
// border-top: 1px solid #aaa;
// }
// pre, .rst-content tt {
// max-width: 100%;
// background: #fff;
// border: solid 1px #e1e4e5;
// color: #e74c3c;
// overflow-x: auto;
// }
// code.code-large, .rst-content tt.code-large {
// font-size: 90%;
// }
// code {
// padding: 2px 5px;
// color: #c7254e;
// background-color: #f9f2f4;
// font-size: 75%;
// }
// code, kbd, pre, samp {
// font-family: monospace,serif;
// font-size: 12px !important;
// }
// footer {
// margin-top: 30px;
// margin-bottom: 10px;
// text-align: center;
// font-weight: 200;
// }
// pre.highlight code {
// white-space: pre;
// }
// /* @group Code Samples */
.admonition {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
text-align: left;
}
// .code-samples {
// padding-top: 20px;
// }
.admonition.note {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
.admonition.warning {
color: #c09853;
background-color: #fcf8e3;
border-color: #fbeed5;
}
.admonition.danger {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.admonition-title {
font-weight: bold;
text-align: left;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
pre.highlight code {
white-space: pre;
}
/* @group Code Samples */
.code-samples {
padding-top: 20px;
}
/* @end Code Samples */
// /* @end Code Samples */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,11 +1,4 @@
{% load rest_framework %}
<div class="row">
<div class="col-md-6">
<h1 id="document-title">{{ document.title }}</h1>
<p>{% render_markdown document.description %}</p>
</div>
<div class="col-md-6"></div>
</div>
{% for section_key, section in document.data.items %}
<h1 id="{{ section_key }}" class="coredocs-section">{{ section_key }}</h1>

View File

@ -8,7 +8,8 @@
<title>{{ document.title }}</title>
<link href="{% static 'rest_framework/docs/css/bootstrap-custom.min.css' %}" rel="stylesheet">
<link href="{% static 'rest_framework/docs/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'rest_framework/docs/css/bootstrap-theme.min.css' %}" rel="stylesheet">
<link href="{% static 'rest_framework/docs/css/font-awesome-4.0.3.css' %}" rel="stylesheet">
<link href="{% static 'rest_framework/docs/css/base.css' %}" rel="stylesheet">
<style>{{ code_style }}</style>
@ -23,21 +24,43 @@
}
}
</style>
<script src="https://unpkg.com/coreapi@0.0.17/dist/coreapi.js"></script>
<script src="https://unpkg.com/coreapi@0.0.18/dist/coreapi.js"></script>
</head>
<body>
{% include "rest_framework/docs/nav.html" %}
<div id="wrapper">
<div class="container-fluid">
<div class="col-md-2">{% include "rest_framework/docs/toc.html" %}</div>
<div class="col-md-10" role="main">{% include "rest_framework/docs/document.html" %}</div>
{% include "rest_framework/docs/sidebar.html" %}
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
{% include "rest_framework/docs/document.html" %}
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
<!-- <div class="container-fluid">
<div class="col-md-2">include "rest_framework/docs/toc.html" </div>
<div class="col-md-10" role="main">include "rest_framework/docs/document.html</div>
</div>
-->
</div>
<script src="{% static 'rest_framework/docs/js/jquery-1.10.2.min.js' %}"></script>
<script src="{% static 'rest_framework/docs/js/bootstrap-3.0.3.min.js' %}"></script>
<script src="{% static 'rest_framework/docs/js/bootstrap.min.js' %}"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {

View File

@ -0,0 +1,22 @@
<!-- Sidebar -->
<div id="sidebar-wrapper" class="sidebar-wrapper">
<h3 class="sidebar-brand"><a href="#document-title">{{ document.title }}</a></h3>
<ul class="nav nav-pills nav-stacked sidebar-nav">
{% for section_key, section in document.data.items %}
<li>
<a href="#{{ section_key }}">{{ section_key }}</a>
<!-- TOC -->
<ul class="nav nav-pills nav-stacked">
{% for link_key, link in section.links.items %}
<li><a href="#{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>
<!-- /#sidebar-wrapper -->

View File

@ -1,17 +0,0 @@
<div id="toc" class="bs-sidebar hidden-print affix" role="complementary">
<ul class="nav bs-sidenav">
<li class="active">
<a href="#document-title">{{ document.title }}</a>
</li>
{% for section_key, section in document.data.items %}
<li>
<a href="#{{ section_key }}">{{ section_key }}</a>
<ul class="nav">
{% for link_key, link in section.links.items %}
<li><a href="#{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>