New docs layout (alt) (#4879)

This commit is contained in:
Emmanouil Konstantinidis 2017-02-08 09:40:11 +00:00 committed by Tom Christie
parent 9dbdf34621
commit 75eebc39e2
12 changed files with 265 additions and 321 deletions

View File

@ -1,287 +1,242 @@
body {
padding-top: 70px;
background-color: #f8f8f8;
}
body > div.container {
min-height: 400px;
}
ul.nav li.main {
font-weight: bold;
}
div.col-md-3 {
padding-left: 0;
}
div.col-md-9 {
padding-bottom: 100px;
}
div.source-links {
float: right;
}
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;
.sidebar {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 225px;
height: 100%;
color: #FFF;
}
.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 {
.sidebar .brand {
background-color: #23282e;
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 {
text-align: center;
padding: 25px 0;
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;
.sidebar .toggle-btn {
display: none;
padding-left: .5em;
}
h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .headerlink, h5:hover .headerlink, h6:hover .headerlink{
.sidebar .menu-list ul,
.sidebar .menu-list li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
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: " ";
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
}
}
*/
}
.sidebar .menu-list ul :not(collapsed) .arrow:before,
.sidebar .menu-list li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.sidebar .menu-list ul .active,
.sidebar .menu-list li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.sidebar .menu-list ul .sub-menu li.active,
.sidebar .menu-list li .sub-menu li.active {
color: #d19b3d;
}
.sidebar .menu-list ul .sub-menu li.active a,
.sidebar .menu-list li .sub-menu li.active a {
color: #d19b3d;
}
.sidebar .menu-list ul .sub-menu li,
.sidebar .menu-list li .sub-menu li {
background-color: #181c20;
border: none;
border-bottom: 1px solid #23282e;
margin-left: 0px;
text-indent: 10px;
}
.sidebar .menu-list ul .sub-menu li:hover,
.sidebar .menu-list li .sub-menu li:hover {
background-color: #020203;
}
.sidebar .menu-list ul .sub-menu li:before,
.sidebar .menu-list li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.sidebar .menu-list li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.sidebar .menu-list li a {
text-decoration: none;
color: white;
}
.sidebar .menu-list li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.sidebar .menu-list li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px) {
.sidebar {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.sidebar .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
width: 40px;
text-align: center;
}
.sidebar .language-switcher {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
.sidebar .brand {
margin-top: 0;
margin-bottom: 0;
text-align: left !important;
font-size: 22px;
padding: 0;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px) {
.sidebar .menu-list .menu-content {
display: block;
}
#main {
width:calc(100% - 225px);
float: right;
}
}
body {
margin: 0px;
padding: 0px;
}
.coredocs-section {
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid lightgrey;
}
.coredocs-section:last-child {
margin-top: 0;
}
/* @group Language Switcher */
.sidebar .language-switcher {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.sidebar .language-switcher h6 {
margin-bottom: 15px;
}
.sidebar .language-switcher .btn {
padding: 3px 7px;
}
.sidebar .language-switcher .dropdown-menu {
margin-top: 5px;
margin-right: -10px;
margin-bottom: 20px;
border: 0;
border-radius: 0;
min-width: 130px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
.sidebar .language-switcher .dropdown-menu > li > a {
padding: 3px 10px;
}
.dropdown-submenu.pull-left {
float: none;
.sidebar .language-switcher .dropdown-menu > .active > a,
.sidebar .language-switcher .dropdown-menu > .active > a:hover,
.sidebar .language-switcher .dropdown-menu > .active > a:focus {
background-color: #17759c;
}
.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;
.sidebar .language-switcher .dropdown-menu > li > a,
.sidebar .language-switcher .dropdown-menu > li > a:hover,
.sidebar .language-switcher .dropdown-menu > li > a:focus {
background-color: #23282e;
}
pre.highlight code {
white-space: pre;
/* @end Language Switcher */
/* @group Docs Content */
.docs-content .btn {
font-size: inherit;
}
/* @group Code Samples */
.code-samples {
padding-top: 20px;
.code-samples pre {
margin-top: 20px;
}
/* @end Code Samples */
/* @end Docs Content */

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,19 +1,12 @@
{% 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>
<h2 id="{{ section_key }}" class="coredocs-section"><i class="fa fa-angle-right"></i> {{ section_key }}</h2>
{% for link_key, link in section.links.items %}
{% include "rest_framework/docs/link.html" %}
{% endfor %}
{% endfor %}
{% for link_key, link in document.links.items %}
{% include "rest_framework/docs/llink.html" %}
{% include "rest_framework/docs/link.html" %}
{% endfor %}

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,20 +22,23 @@
}
}
</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" %}
{% include "rest_framework/docs/sidebar.html" %}
<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 class="container" id="main">
<div class="row">
<div class="col-md-12">
{% 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>
function getCookie(name) {
var cookieValue = null;
@ -61,8 +63,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 +73,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")
@ -121,8 +121,6 @@
}
})
console.log(params)
client.action(doc, key, params).then(function (data) {
var response = JSON.stringify(data, null, 2);
form.find(".response-data").text(response)

View File

@ -2,9 +2,9 @@
<div class="row coredocs-link">
<div class="col-md-6 docs-content">
<button class="btn btn-success" style="float: right; margin-top: 20px" data-toggle="modal" data-target="#{{ section_key }}_{{ link_key }}_modal">Interact</button>
<button class="btn btn-sm btn-success" style="float: right; margin-top: 20px" data-toggle="modal" data-target="#{{ section_key }}_{{ link_key }}_modal">Interact</button>
<h2 id="{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</h2>
<h3 id="{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</h3>
<p>
<span class="label label-primary">{{ link.action|upper }}</span> <code>{{ link.url }}</code>
</p>

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,33 @@
<div class="sidebar">
<h3 class="brand">{{ document.title }}</h3>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
{% for section_key, section in document.data.items %}
<li data-toggle="collapse" data-target="#{{ section_key }}-dropdown" class="collapsed">
<a href="#{{ section_key }}"><i class="fa fa-dot-circle-o fa-lg"></i> {{ section_key }} <span class="arrow"></span></a>
</li>
<ul class="sub-menu collapse in" id="{{ section_key }}-dropdown">
{% for link_key, link in section.links.items %}
<li><a href="#{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</a></li>
{% endfor %}
</ul>
{% endfor %}
</ul>
<div class="language-switcher">
<h6>Choose Language</h6>
<div class="btn-group">
<button type="button" class="btn btn-info 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>
</div>
</div>

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>