mirror of
https://github.com/encode/django-rest-framework.git
synced 2025-08-05 13:00:12 +03:00
Setup New Sidebar (Responsive)
This commit is contained in:
Emmanouil Konstantinidis
parent
40d7c355b4
commit
18d1088694
|
|
@ -1,154 +1,185 @@
|
|||
body {
|
||||
overflow-x: hidden;
|
||||
position: 'relative';
|
||||
}
|
||||
|
||||
/* 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;
|
||||
.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;
|
||||
}
|
||||
|
||||
#wrapper.toggled {
|
||||
padding-left: 250px;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
background: #E8EAEF;
|
||||
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
left: 250px;
|
||||
width: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#page-content-wrapper {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
#wrapper.toggled #page-content-wrapper {
|
||||
position: absolute;
|
||||
margin-right: -250px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.sidebar .brand {
|
||||
background-color: #23282e;
|
||||
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;
|
||||
padding: 25px 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sidebar-wrapper .language-switcher {
|
||||
.sidebar .menu-list {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar .toggle-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding-left:10px;
|
||||
padding-right: 10px;
|
||||
vertical-align: middle;
|
||||
float:right;
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-wrapper .language-switcher .dropdown-menu {
|
||||
min-width: 100px;
|
||||
@media (min-width: 767px) {
|
||||
.sidebar .menu-list .menu-content {
|
||||
display: block;
|
||||
}
|
||||
#main {
|
||||
width:calc(100% - 225px);
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
|
||||
.coredocs-section {
|
||||
border-top: 2px solid lightgrey;
|
||||
margin-top: 20px;
|
||||
|
|
@ -159,3 +190,18 @@
|
|||
border-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sidebar .language-switcher {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sidebar .language-switcher h6 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.sidebar .language-switcher .btn {
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -27,44 +27,19 @@
|
|||
|
||||
<body data-spy="scroll" data-target="#sidebar-nav" data-offset="50">
|
||||
|
||||
<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>
|
||||
{% include "rest_framework/docs/sidebar.html" %}
|
||||
|
||||
<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 class="container" id="main">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{% include "rest_framework/docs/document.html" %}
|
||||
</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.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 !== '') {
|
||||
|
|
@ -98,7 +73,7 @@
|
|||
languageControls.not('[data-language="' + language +'"]').parent().removeClass("active")
|
||||
languageControls.filter('[data-language="' + language +'"]').parent().addClass("active")
|
||||
|
||||
button.closest(".btn-group").find('.dropdown-toggle span').first().text(language)
|
||||
button.closest("li.dropdown").find('.dropdown-toggle span').text(language)
|
||||
|
||||
var codeBlocks = $('pre.highlight')
|
||||
codeBlocks.not('[data-language="' + language +'"]').addClass("hide")
|
||||
|
|
@ -146,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)
|
||||
|
|
|
|||
|
|
@ -1,30 +1,33 @@
|
|||
<!-- 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> <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 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 }}-{{ link_key }}" 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 }}-{{ link_key }}">
|
||||
{% 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> <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>
|
||||
|
||||
<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 -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user