Awesome & responsive language switcher

This commit is contained in:
Emmanouil Konstantinidis 2017-02-08 16:49:28 +00:00
parent d20e0f2a19
commit c34c17d800
4 changed files with 102 additions and 82 deletions

View File

@ -129,58 +129,6 @@
transition: all 1s ease;
}
@media (max-width: 767px) {
.main-container {
padding-left: 15px;
padding-right: 15px;
}
.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;
@ -219,6 +167,11 @@ body {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.sidebar .language-switcher h6 {
@ -230,8 +183,7 @@ body {
}
.sidebar .language-switcher .dropdown-menu {
margin-top: 5px;
margin-bottom: 20px;
margin-bottom: 5px;
border: 0;
border-radius: 0;
min-width: 130px;
@ -279,3 +231,69 @@ body {
}
/* @end Docs Content */
@media (max-width: 767px) {
.main-container {
padding-left: 15px;
padding-right: 15px;
}
.sidebar {
position: relative;
width: 100%;
margin-bottom: 10px;
overflow: visible;
}
.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;
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 {
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;
}
}

View File

@ -0,0 +1,28 @@
{% load rest_framework %}
<!-- Modal -->
<div class="modal fade api-modal" id="{{ section_key }}_{{ link_key }}_modal" tabindex="-1" role="dialog" aria-labelledby="api explorer modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">{{ link.title|default:link_key }}</h4>
</div>
<div class="modal-body">
<form data-key='["{{ section_key }}", "{{ link_key }}"]'>
{% form_for_link link %}
<div id="response">
<div class="response-error alert alert-danger hide"></div>
<pre class="response-data hide"></pre>
</div>
<div class="text-right">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>

View File

@ -99,30 +99,4 @@
</div>
</div>
<!-- Modal -->
<div class="modal fade api-modal" id="{{ section_key }}_{{ link_key }}_modal" tabindex="-1" role="dialog" aria-labelledby="api explorer modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">{{ link.title|default:link_key }}</h4>
</div>
<div class="modal-body">
<form data-key='["{{ section_key }}", "{{ link_key }}"]'>
{% form_for_link link %}
<div id="response">
<div class="response-error alert alert-danger hide"></div>
<pre class="response-data hide"></pre>
</div>
<div class="text-right">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% include "rest_framework/docs/interact.html" with link=link schema=schema %}

View File

@ -18,7 +18,7 @@
<div class="language-switcher">
<h6>Choose Language</h6>
<div class="btn-group">
<div class="btn-group dropup">
<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>