mirror of
https://github.com/encode/django-rest-framework.git
synced 2025-08-06 05:20:12 +03:00
Sidebar Language Switcher
This commit is contained in:
parent
3b13872ed3
commit
0ed8059faf
|
@ -168,46 +168,19 @@ body {
|
||||||
|
|
||||||
/* @group Language Switcher */
|
/* @group Language Switcher */
|
||||||
|
|
||||||
.sidebar .language-switcher {
|
.sidebar .menu-list.menu-list-bottom {
|
||||||
text-align: center;
|
margin-bottom: 0;
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
border-top: 1px solid #23282e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .language-switcher h6 {
|
.sidebar .menu-list-bottom li span {
|
||||||
margin-bottom: 15px;
|
float: right;
|
||||||
}
|
margin-right: 20px;
|
||||||
|
color: #d19b3d;
|
||||||
.sidebar .language-switcher .btn {
|
|
||||||
padding: 3px 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .language-switcher .dropdown-menu {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
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 */
|
/* @end Language Switcher */
|
||||||
|
@ -263,24 +236,10 @@ body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .language-switcher {
|
.sidebar .menu-list.menu-list-bottom {
|
||||||
text-align: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .language-switcher .btn .caret {
|
|
||||||
margin-left: 0;
|
|
||||||
border-bottom: 0;
|
|
||||||
border-top: 4px dashed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .language-switcher .dropup .dropdown-menu {
|
|
||||||
top: 30px;
|
|
||||||
bottom: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .brand {
|
.sidebar .brand {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
|
@ -72,16 +72,16 @@
|
||||||
const doc = codec.decode(schema)
|
const doc = codec.decode(schema)
|
||||||
|
|
||||||
// Language Control
|
// Language Control
|
||||||
$('.language-control li a').click(function (event) {
|
$('#language-control li').click(function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
var button = $(this)
|
const languageMenuItem = $(this).find('a');
|
||||||
var language = button.data("language")
|
var language = languageMenuItem.data("language")
|
||||||
|
|
||||||
var languageControls = $('.language-control li a')
|
var languageControls = $(this).closest('ul').find('li');
|
||||||
languageControls.not('[data-language="' + language +'"]').parent().removeClass("active")
|
languageControls.find('a').not('[data-language="' + language +'"]').parent().removeClass("active")
|
||||||
languageControls.filter('[data-language="' + language +'"]').parent().addClass("active")
|
languageControls.find('a').filter('[data-language="' + language +'"]').parent().addClass("active")
|
||||||
|
|
||||||
button.closest(".btn-group").find('.dropdown-toggle span').first().text(language)
|
$('#selected-language').text(language)
|
||||||
|
|
||||||
var codeBlocks = $('pre.highlight')
|
var codeBlocks = $('pre.highlight')
|
||||||
codeBlocks.not('[data-language="' + language +'"]').addClass("hide")
|
codeBlocks.not('[data-language="' + language +'"]').addClass("hide")
|
||||||
|
|
|
@ -16,18 +16,19 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="language-switcher">
|
<ul class="menu-list menu-list-bottom">
|
||||||
<h6>Choose Language</h6>
|
<li>
|
||||||
<div class="btn-group dropup">
|
<a><i class="fa fa-user fa-lg"></i> Authentication</a> <span>none</span>
|
||||||
<button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
</li>
|
||||||
<span>shell</span> <span class="caret"></span>
|
<li data-toggle="collapse" data-target="#language-control" class="collapsed">
|
||||||
</button>
|
<a><i class="fa fa-code fa-lg"></i> Source Code</a> <span id="selected-language">shell</span>
|
||||||
<ul class="dropdown-menu language-control">
|
</li>
|
||||||
|
<ul class="sub-menu collapse out" id="language-control">
|
||||||
<li class="active"><a href="#" data-language="shell">shell</a></li>
|
<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="javascript">javascript</a></li>
|
||||||
<li><a href="#" data-language="python">python</a></li>
|
<li><a href="#" data-language="python">python</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user