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 { .sidebar {
padding-top: 70px; overflow: auto;
background-color: #f8f8f8; font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 225px;
height: 100%;
color: #FFF;
} }
body > div.container { .sidebar .brand {
min-height: 400px; background-color: #23282e;
}
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; 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; text-align: center;
font-weight: 200; padding: 25px 0;
margin-top: 0;
margin-bottom: 0;
} }
.modal-dialog { .sidebar .toggle-btn {
margin-top: 60px; display: none;
} }
/* .sidebar .menu-list ul,
* Side navigation .sidebar .menu-list li {
* list-style: none;
* Scrollspy and affixed enhanced navigation to highlight sections and secondary padding: 0px;
* sections of docs content. margin: 0px;
*/ line-height: 35px;
cursor: pointer;
/* By default it's not affixed in mobile views, so undo that */ /*
.bs-sidebar.affix { .collapsed{
position: static; .arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
} }
.bs-sidebar.well { .sidebar .menu-list ul :not(collapsed) .arrow:before,
padding: 0; .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;
} }
/* First level of nav */ .sidebar .menu-list ul .active,
.bs-sidenav { .sidebar .menu-list li .active {
padding-top: 10px; border-left: 3px solid #d19b3d;
padding-bottom: 10px; background-color: #4f5b69;
border-radius: 5px;
} }
/* All levels of nav */ .sidebar .menu-list ul .sub-menu li.active,
.bs-sidebar .nav > li > a { .sidebar .menu-list li .sub-menu li.active {
display: block; color: #d19b3d;
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) */ .sidebar .menu-list ul .sub-menu li.active a,
.bs-sidebar .nav .nav { .sidebar .menu-list li .sub-menu li.active a {
display: none; /* Hide by default, but at >768px, show it */ color: #d19b3d;
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 */ .sidebar .menu-list ul .sub-menu li,
@media (min-width: 992px) { .sidebar .menu-list li .sub-menu li {
.bs-sidebar .nav > .active > ul { background-color: #181c20;
display: block; border: none;
} border-bottom: 1px solid #23282e;
/* Widen the fixed sidebar */ margin-left: 0px;
.bs-sidebar.affix, text-indent: 10px;
.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) { .sidebar .menu-list ul .sub-menu li:hover,
// /* Widen the fixed sidebar again */ .sidebar .menu-list li .sub-menu li:hover {
// .bs-sidebar.affix-bottom, background-color: #020203;
// .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{ .sidebar .menu-list ul .sub-menu li:before,
display:inline-block; .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;
.admonition { border-left: 3px solid #2e353d;
padding: 15px; border-bottom: 1px solid #23282e;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
text-align: left;
} }
.admonition.note { .sidebar .menu-list li a {
color: #3a87ad; text-decoration: none;
background-color: #d9edf7; color: white;
border-color: #bce8f1;
} }
.admonition.warning { .sidebar .menu-list li a i {
color: #c09853; padding-left: 10px;
background-color: #fcf8e3; width: 20px;
border-color: #fbeed5; padding-right: 20px;
} }
.admonition.danger { .sidebar .menu-list li:hover {
color: #b94a48; border-left: 3px solid #d19b3d;
background-color: #f2dede; background-color: #4f5b69;
border-color: #eed3d7; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
} }
.admonition-title { @media (max-width: 767px) {
font-weight: bold; .sidebar {
text-align: left;
}
.dropdown-submenu {
position: relative; position: relative;
} width: 100%;
margin-bottom: 10px;
}
.dropdown-submenu>.dropdown-menu { .sidebar .toggle-btn {
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; 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;
}
} }
.dropdown-submenu>a:after { @media (min-width: 767px) {
.sidebar .menu-list .menu-content {
display: block; display: block;
content: " "; }
#main {
width:calc(100% - 225px);
float: right; 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 { body {
border-left-color: #fff; margin: 0px;
padding: 0px;
} }
.dropdown-submenu.pull-left { .coredocs-section {
float: none; margin-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid lightgrey;
} }
.dropdown-submenu.pull-left>.dropdown-menu { .coredocs-section:last-child {
left: -100%; margin-top: 0;
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 */ /* @group Language Switcher */
.code-samples { .sidebar .language-switcher {
padding-top: 20px; text-align: center;
margin-top: 20px;
margin-bottom: 20px;
} }
/* @end Code Samples */ .sidebar .language-switcher h6 {
margin-bottom: 15px;
}
.sidebar .language-switcher .btn {
padding: 3px 7px;
}
.sidebar .language-switcher .dropdown-menu {
margin-top: 5px;
margin-bottom: 20px;
border: 0;
border-radius: 0;
min-width: 130px;
}
.sidebar .language-switcher .dropdown-menu > li > a {
padding: 3px 10px;
}
.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;
}
.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;
}
/* @end Language Switcher */
/* @group Docs Content */
.docs-content .btn {
font-size: inherit;
}
.code-samples pre {
margin-top: 20px;
}
/* @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 %} {% 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 %} {% 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 %} {% for link_key, link in section.links.items %}
{% include "rest_framework/docs/link.html" %} {% include "rest_framework/docs/link.html" %}
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
{% for link_key, link in document.links.items %} {% for link_key, link in document.links.items %}
{% include "rest_framework/docs/llink.html" %} {% include "rest_framework/docs/link.html" %}
{% endfor %} {% endfor %}

View File

@ -8,14 +8,13 @@
<title>{{ document.title }}</title> <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/font-awesome-4.0.3.css' %}" rel="stylesheet">
<link href="{% static 'rest_framework/docs/css/base.css' %}" rel="stylesheet"> <link href="{% static 'rest_framework/docs/css/base.css' %}" rel="stylesheet">
<style>{{ code_style }}</style> <style>{{ code_style }}</style>
<style> <style>
.highlight {background-color: #f7f7f9} .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} .checkbox label.control-label {font-weight: bold}
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar-nav.navbar-right:last-child { .navbar-nav.navbar-right:last-child {
@ -23,20 +22,23 @@
} }
} }
</style> </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> </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="container" id="main">
<div class="col-md-2">{% include "rest_framework/docs/toc.html" %}</div> <div class="row">
<div class="col-md-10" role="main">{% include "rest_framework/docs/document.html" %}</div> <div class="col-md-12">
{% include "rest_framework/docs/document.html" %}
</div>
</div>
</div> </div>
<script src="{% static 'rest_framework/docs/js/jquery-1.10.2.min.js' %}"></script> <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> <script>
function getCookie(name) { function getCookie(name) {
var cookieValue = null; var cookieValue = null;
@ -61,8 +63,6 @@
const doc = codec.decode(schema) const doc = codec.decode(schema)
const client = new coreapi.Client(null, null, csrf) const client = new coreapi.Client(null, null, csrf)
$('body').scrollspy({ target: '#toc' })
// Language Control // Language Control
$('.language-control li a').click(function (event) { $('.language-control li a').click(function (event) {
event.preventDefault(); event.preventDefault();
@ -73,7 +73,7 @@
languageControls.not('[data-language="' + language +'"]').parent().removeClass("active") languageControls.not('[data-language="' + language +'"]').parent().removeClass("active")
languageControls.filter('[data-language="' + language +'"]').parent().addClass("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') var codeBlocks = $('pre.highlight')
codeBlocks.not('[data-language="' + language +'"]').addClass("hide") codeBlocks.not('[data-language="' + language +'"]').addClass("hide")
@ -121,8 +121,6 @@
} }
}) })
console.log(params)
client.action(doc, key, params).then(function (data) { client.action(doc, key, params).then(function (data) {
var response = JSON.stringify(data, null, 2); var response = JSON.stringify(data, null, 2);
form.find(".response-data").text(response) form.find(".response-data").text(response)

View File

@ -2,9 +2,9 @@
<div class="row coredocs-link"> <div class="row coredocs-link">
<div class="col-md-6 docs-content"> <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> <p>
<span class="label label-primary">{{ link.action|upper }}</span> <code>{{ link.url }}</code> <span class="label label-primary">{{ link.action|upper }}</span> <code>{{ link.url }}</code>
</p> </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>