Sidebar Language Switcher

This commit is contained in:
Emmanouil Konstantinidis 2017-02-15 17:15:42 +00:00
parent 3b13872ed3
commit 0ed8059faf
3 changed files with 26 additions and 66 deletions

View File

@ -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;

View File

@ -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")

View File

@ -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> &nbsp;&nbsp;<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>