mirror of
https://github.com/encode/django-rest-framework.git
synced 2024-11-23 01:57:00 +03:00
Merge branch 'master' of https://github.com/mmcardle/django-rest-framework into styling-fixes
This commit is contained in:
Tom Christie
commit
794413734f
|
|
@ -35,6 +35,17 @@ A suitable replacement theme can be generated using Bootstrap's [Customize Tool]
|
|||
|
||||
You can also change the navbar variant, which by default is `navbar-inverse`, using the `bootstrap_navbar_variant` block. The empty `{% block bootstrap_navbar_variant %}{% endblock %}` will use the original Bootstrap navbar style.
|
||||
|
||||
Full Example
|
||||
|
||||
{% extends "rest_framework/base.html" %}
|
||||
|
||||
{% block bootstrap_theme %}
|
||||
<link rel="stylesheet" href="/path/to/yourtheme/bootstrap.min.css' type="text/css">
|
||||
{% endblock %}
|
||||
|
||||
{% block bootstrap_navbar_variant %}{% endblock %}
|
||||
|
||||
|
||||
For more specific CSS tweaks, use the `style` block instead.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,4 +19,163 @@ a single block in the template.
|
|||
.navbar-inverse .brand:hover a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* custom navigation styles */
|
||||
.wrapper .navbar{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar .navbar-inner{
|
||||
background: #2C2C2C;
|
||||
color: white;
|
||||
border: none;
|
||||
border-top: 5px solid #A30000;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.navbar .navbar-inner .nav li, .navbar .navbar-inner .nav li a, .navbar .navbar-inner .brand{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-list > .active > a, .nav-list > .active > a:hover {
|
||||
background: #2c2c2c;
|
||||
}
|
||||
|
||||
.navbar .navbar-inner .dropdown-menu li a, .navbar .navbar-inner .dropdown-menu li{
|
||||
color: #A30000;
|
||||
}
|
||||
.navbar .navbar-inner .dropdown-menu li a:hover{
|
||||
background: #eeeeee;
|
||||
color: #c20000;
|
||||
}
|
||||
|
||||
/*=== dabapps bootstrap styles ====*/
|
||||
|
||||
html{
|
||||
width:100%;
|
||||
background: none;
|
||||
}
|
||||
|
||||
body, .navbar .navbar-inner .container-fluid {
|
||||
max-width: 1150px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body{
|
||||
background: url("../img/grid.png") repeat-x;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
#content{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* sticky footer and footer */
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
.wrapper {
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
margin: 0 auto -60px;
|
||||
}
|
||||
|
||||
.form-switcher {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.well {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.well .form-actions {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.well form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.nav-tabs > li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.nav-tabs li a {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.nav-tabs > .active > a {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.nav-tabs > .active > a:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.tabbable.first-tab-active .tab-content
|
||||
{
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
#footer, #push {
|
||||
height: 60px; /* .push must be the same height as .footer */
|
||||
}
|
||||
|
||||
#footer{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#footer p {
|
||||
text-align: center;
|
||||
color: gray;
|
||||
border-top: 1px solid #DDD;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: gray;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#footer a:hover {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* custom general page styles */
|
||||
.hero-unit h2, .hero-unit h1{
|
||||
color: #A30000;
|
||||
}
|
||||
|
||||
body a, body a{
|
||||
color: #A30000;
|
||||
}
|
||||
|
||||
body a:hover{
|
||||
color: #c20000;
|
||||
}
|
||||
|
||||
#content a span{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.request-info {
|
||||
clear:both;
|
||||
}
|
||||
|
|
@ -69,152 +69,3 @@ pre {
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
/*=== dabapps bootstrap styles ====*/
|
||||
|
||||
html{
|
||||
width:100%;
|
||||
background: none;
|
||||
}
|
||||
|
||||
body, .navbar .navbar-inner .container-fluid {
|
||||
max-width: 1150px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body{
|
||||
background: url("../img/grid.png") repeat-x;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
#content{
|
||||
margin: 0;
|
||||
}
|
||||
/* custom navigation styles */
|
||||
.wrapper .navbar{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar .navbar-inner{
|
||||
background: #2C2C2C;
|
||||
color: white;
|
||||
border: none;
|
||||
border-top: 5px solid #A30000;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.navbar .navbar-inner .nav li, .navbar .navbar-inner .nav li a, .navbar .navbar-inner .brand{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-list > .active > a, .nav-list > .active > a:hover {
|
||||
background: #2c2c2c;
|
||||
}
|
||||
|
||||
.navbar .navbar-inner .dropdown-menu li a, .navbar .navbar-inner .dropdown-menu li{
|
||||
color: #A30000;
|
||||
}
|
||||
.navbar .navbar-inner .dropdown-menu li a:hover{
|
||||
background: #eeeeee;
|
||||
color: #c20000;
|
||||
}
|
||||
|
||||
/* custom general page styles */
|
||||
.hero-unit h2, .hero-unit h1{
|
||||
color: #A30000;
|
||||
}
|
||||
|
||||
body a, body a{
|
||||
color: #A30000;
|
||||
}
|
||||
|
||||
body a:hover{
|
||||
color: #c20000;
|
||||
}
|
||||
|
||||
#content a span{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* sticky footer and footer */
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
.wrapper {
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
margin: 0 auto -60px;
|
||||
}
|
||||
|
||||
.form-switcher {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.well {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.well .form-actions {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.well form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.nav-tabs > li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.nav-tabs li a {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.nav-tabs > .active > a {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.nav-tabs > .active > a:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.tabbable.first-tab-active .tab-content
|
||||
{
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
#footer, #push {
|
||||
height: 60px; /* .push must be the same height as .footer */
|
||||
}
|
||||
|
||||
#footer{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#footer p {
|
||||
text-align: center;
|
||||
color: gray;
|
||||
border-top: 1px solid #DDD;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: gray;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#footer a:hover {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,8 +13,10 @@
|
|||
<title>{% block title %}Django REST framework{% endblock %}</title>
|
||||
|
||||
{% block style %}
|
||||
{% block bootstrap_theme %}<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap.min.css" %}"/>{% endblock %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap-tweaks.css" %}"/>
|
||||
{% block bootstrap_theme %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap.min.css" %}"/>
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap-tweaks.css" %}"/>
|
||||
{% endblock %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/prettify.css" %}"/>
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/default.css" %}"/>
|
||||
{% endblock %}
|
||||
|
|
@ -30,8 +32,8 @@
|
|||
<div class="navbar {% block bootstrap_navbar_variant %}navbar-inverse{% endblock %}">
|
||||
<div class="navbar-inner">
|
||||
<div class="container-fluid">
|
||||
<span class="brand" href="/">
|
||||
{% block branding %}<a href='http://django-rest-framework.org'>Django REST framework <span class="version">{{ version }}</span></a>{% endblock %}
|
||||
<span href="/">
|
||||
{% block branding %}<a class='brand' href='http://django-rest-framework.org'>Django REST framework <span class="version">{{ version }}</span></a>{% endblock %}
|
||||
</span>
|
||||
<ul class="nav pull-right">
|
||||
{% block userlinks %}
|
||||
|
|
@ -109,8 +111,7 @@
|
|||
<div class="content-main">
|
||||
<div class="page-header"><h1>{{ name }}</h1></div>
|
||||
{{ description }}
|
||||
|
||||
<div class="request-info">
|
||||
<div class="request-info" style="clear: both" >
|
||||
<pre class="prettyprint"><b>{{ request.method }}</b> {{ request.get_full_path }}</pre>
|
||||
</div>
|
||||
<div class="response-info">
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@
|
|||
|
||||
<head>
|
||||
{% block style %}
|
||||
{% block bootstrap_theme %}<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap.min.css" %}"/>{% endblock %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap-tweaks.css" %}"/>
|
||||
{% block bootstrap_theme %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap.min.css" %}"/>
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap-tweaks.css" %}"/>
|
||||
{% endblock %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/default.css" %}"/>
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user