This commit is contained in:
Emmanouil Konstantinidis 2017-02-01 16:05:53 +00:00 committed by GitHub
commit b1c49ff57b
11 changed files with 231 additions and 344 deletions

View File

@ -1,287 +1,161 @@
body {
padding-top: 70px;
background-color: #f8f8f8;
}
body {
overflow-x: hidden;
position: 'relative';
}
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 {
background: #E8EAEF;
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;
}
h1, h2, h3 {
color: #444;
}
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;
}
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;
}
.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 {
padding: 0;
}
/* First level of nav */
.bs-sidenav {
padding-top: 10px;
padding-bottom: 10px;
border-radius: 5px;
}
/* All levels of nav */
.bs-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;
}
/* 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%;
}
/* Show and affix the side nav when space allows it */
@media (min-width: 992px) {
.bs-sidebar .nav > .active > ul {
display: block;
}
/* Widen the fixed sidebar */
.bs-sidebar.affix,
.bs-sidebar.affix-bottom {
width: 213px;
}
.bs-sidebar.affix {
position: fixed; /* Undo the static from mobile first approach */
top: 80px;
}
.bs-sidebar.affix-bottom {
position: absolute; /* Undo the static from mobile first approach */
}
.bs-sidebar.affix-bottom .bs-sidenav,
.bs-sidebar.affix .bs-sidenav {
margin-top: 0;
margin-bottom: 0;
}
}
// @media (min-width: 1200px) {
// /* Widen the fixed sidebar again */
// .bs-sidebar.affix-bottom,
// .bs-sidebar.affix {
// width: 263px;
// }
// }
.headerlink {
font-family: FontAwesome;
font-size: 14px;
display: none;
padding-left: .5em;
}
h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .headerlink, h5:hover .headerlink, h6:hover .headerlink{
display:inline-block;
}
.admonition {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
text-align: left;
}
.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;
z-index: 1000;
position: fixed;
top: 60px;
left: 250px;
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;
height: 100%;
margin-left: -250px;
overflow-y: auto;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
.dropdown-submenu.pull-left {
float: none;
#page-content-wrapper {
width: 100%;
position: absolute;
top: 80px;
}
.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;
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
pre.highlight code {
white-space: pre;
.top-navbar {
border-radius: 0;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 80px;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 10px;
}
.sidebar-nav > li > .nav > li {
text-indent: 30px;
}
.sidebar-nav li a {
display: block;
border: 0;
border-radius: 0;
font-size: 12px;
font-weight: normal;
color: #999999;
text-decoration: none;
text-transform: none;
padding: 8px 15px;
}
.sidebar-nav li.active > a {
background: none;
}
.sidebar-nav li.active > a:hover {
background: white;
}
.sidebar-nav > li.active > .nav > li.active > a,
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
background: white;
border: 0;
border: 0;
text-decoration: none;
}
.sidebar-wrapper > .sidebar-brand {
text-align: center;
margin-bottom: 20px;
width: 250px;
}
.sidebar-wrapper .language-switcher {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
width: 250px;
}
.sidebar-wrapper .language-switcher .dropdown-menu {
min-width: 100px;
}
@media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
/* @group Code Samples */
.code-samples {
padding-top: 20px;
.coredocs-section {
border-top: 2px solid lightgrey;
margin-top: 20px;
padding-top: 20px
}
/* @end Code Samples */
.coredocs-section:first-child {
border-top: 0;
margin-top: 0;
}

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,14 +8,13 @@
<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>
<style>
.highlight {background-color: #f7f7f9}
.coredocs-link {border-top: 1px solid lightgrey; margin-top: 20px}
.coredocs-section {border-top: 2px solid lightgrey; margin-top: 20px; padding-top: 20px}
.checkbox label.control-label {font-weight: bold}
@media (min-width: 768px) {
.navbar-nav.navbar-right:last-child {
@ -23,21 +22,49 @@
}
}
</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>
<body data-spy="scroll" data-target="#sidebar-nav" data-offset="50">
{% include "rest_framework/docs/nav.html" %}
<nav class="navbar navbar-default navbar-fixed-top top-navbar">
<div class="container-fluid">
<div class="navbar-header">
<a href="#document-title" class="navbar-toggle collapsed" id="menu-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">{{ document.title }}</a>
</div>
</div>
</nav>
<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 id="wrapper">
{% 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">
{% include "rest_framework/docs/document.html" %}
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</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 !== '') {
@ -61,8 +88,6 @@
const doc = codec.decode(schema)
const client = new coreapi.Client(null, null, csrf)
$('body').scrollspy({ target: '#toc' })
// Language Control
$('.language-control li a').click(function (event) {
event.preventDefault();
@ -73,7 +98,7 @@
languageControls.not('[data-language="' + language +'"]').parent().removeClass("active")
languageControls.filter('[data-language="' + language +'"]').parent().addClass("active")
button.closest("li.dropdown").find('.dropdown-toggle span').text(language)
button.closest(".btn-group").find('.dropdown-toggle span').first().text(language)
var codeBlocks = $('pre.highlight')
codeBlocks.not('[data-language="' + language +'"]').addClass("hide")

View File

@ -1,34 +0,0 @@
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Collapsed navigation -->
<div class="navbar-header">
<!-- Expander button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Main title -->
<a class="navbar-brand" href="{{ homepage_url }}">{{ document.title }}</a>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>shell</span> <b class="caret"></b></a>
<ul class="dropdown-menu language-control">
<li class="active"><a href="#" data-language="shell">shell</a></li>
<li><a href="#" data-language="javascript">javascript</a></li>
<li><a href="#" data-language="python">python</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

View File

@ -0,0 +1,30 @@
<!-- Sidebar -->
<div id="sidebar-wrapper" class="sidebar-wrapper">
<div class="language-switcher">
<div class="btn-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>shell</span> &nbsp;&nbsp;<span class="caret"></span>
</button>
<ul class="dropdown-menu language-control">
<li class="active"><a href="#" data-language="shell">shell</a></li>
<li><a href="#" data-language="javascript">javascript</a></li>
<li><a href="#" data-language="python">python</a></li>
</ul>
</div>
</div>
<ul id="sidebar-nav" class="nav nav-pills nav-stacked sidebar-nav">
{% for section_key, section in document.data.items %}
<li role="navigation">
<a href="#{{ section_key }}">{{ section_key }}</a>
<ul class="nav nav-pills nav-stacked">
{% for link_key, link in section.links.items %}
<li role="navigation"><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>