mirror of
https://github.com/encode/django-rest-framework.git
synced 2025-08-05 13:00:12 +03:00
Language Switcher (#4891)
* More padding in the main container & Remove links from parents in sidebar * Layout link meta * Section & Link Titles * Awesome & responsive language switcher
This commit is contained in:
parent
d37994821d
commit
b9a9d02162
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
28
rest_framework/templates/rest_framework/docs/interact.html
Normal file
28
rest_framework/templates/rest_framework/docs/interact.html
Normal 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">×</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>
|
|
@ -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">×</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 %}
|
||||
|
|
|
@ -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> <span class="caret"></span>
|
||||
</button>
|
||||
|
|
Loading…
Reference in New Issue
Block a user