Skip to content

D
django-rest-framework
Commit 4e7fffa9 by Tom Christie
Options

Merge pull request #284 from maximilianhurl/doc-styles 

Added sticky footer and styles to HTML API page
parents cc21948a 101f06b5
Showing with 181 additions and 79 deletions
docs/static/css/default.css
/* Set the body padding-top when above 980px to push the content down from /* Set the body padding-top when above 980px to push the content down from
below the navbar, which is fixed at >980px screen widths. */ below the navbar, which is fixed at >980px screen widths. */
@media (min-width: 980px) {
body {
padding-top: 71px;
}
}
body {
padding-bottom: 40px;
}
pre { pre {
font-size: 12px; font-size: 12px;
} }
...@@ -61,28 +51,9 @@ a.github:hover { ...@@ -61,28 +51,9 @@ a.github:hover {
text-decoration: none; text-decoration: none;
} }
/* Footer */
/*
.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;
}
*/
/* */ /* */
body hr { body hr {
border-top: 1px dotted #A30000 border-top: 1px dotted #A30000;
} }
/* Force TOC text to not overrun */ /* Force TOC text to not overrun */
...@@ -100,7 +71,7 @@ pre { ...@@ -100,7 +71,7 @@ pre {
/* Preserve the spacing of the navbar across different screen sizes. */ /* Preserve the spacing of the navbar across different screen sizes. */
.navbar-inner { .navbar-inner {
padding: 5px 0; /*padding: 5px 0;*/
} }
@media (max-width: 979px) { @media (max-width: 979px) {
...@@ -194,8 +165,9 @@ body{ ...@@ -194,8 +165,9 @@ body{
color: white; color: white;
} }
.nav-list > .active > a, .nav-list > .active > a:hover { .nav-list > .active > a, .navbar .navbar-inner .nav li a:hover {
background: #2c2c2c; background:#212121;
color:white;
} }
.navbar .navbar-inner .dropdown-menu li a, .navbar .navbar-inner .dropdown-menu li{ .navbar .navbar-inner .dropdown-menu li a, .navbar .navbar-inner .dropdown-menu li{
...@@ -233,3 +205,40 @@ body a:hover{ ...@@ -233,3 +205,40 @@ body a:hover{
} }
} }
/* sticky footer and footer */
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
.body-content{
padding-top: 70px;
padding-bottom: 70px;
}
footer, .push {
height: 60px; /* .push must be the same height as .footer */
}
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;
}
docs/template.html
...@@ -19,6 +19,8 @@ ...@@ -19,6 +19,8 @@
<![endif]--> <![endif]-->
<body onload="prettyPrint()" class="{{ page_id }}-page"> <body onload="prettyPrint()" class="{{ page_id }}-page">
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container-fluid"> <div class="container-fluid">
...@@ -90,35 +92,31 @@ ...@@ -90,35 +92,31 @@
</div> </div>
</div> </div>
<div id="wrap"> <div class="body-content">
<div class="container-fluid">
<div class="container-fluid"> <div class="row-fluid">
<div class="row-fluid">
<div class="span3"> <div class="span3">
<div id="table-of-contents"> <div id="table-of-contents">
<ul class="nav nav-list side-nav well sidebar-nav-fixed"> <ul class="nav nav-list side-nav well sidebar-nav-fixed">
{{ toc }} {{ toc }}
</ul> </ul>
</div>
</div> </div>
</div>
<div id="main-content" class="span9"> <div id="main-content" class="span9">
{{ content }} {{ content }}
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
</div><!--/.fluid-container--> </div><!--/.fluid-container-->
</div><!--/.body content-->
<div id="push"></div> <div id="push"></div>
</div> </div><!--/.wrapper -->
<!-- <footer class="span12">
<div class="row footer"> <p>Sponsored by <a href="http://dabapps.com/">Dab Apps</a>.</a></p>
<div class="span12"> </footer>
<p>Sponsored by <a href="http://dabapps.com/">Dab Apps</a>.</a></p>
</div>
</div>
-->
<!-- Le javascript <!-- Le javascript
================================================== --> ================================================== -->
......
rest_framework/static/rest_framework/css/default.css
body {
padding-top: 0;
padding-bottom: 1em;
}
/* The navbar is fixed at >= 980px wide, so add padding to the body to prevent /* The navbar is fixed at >= 980px wide, so add padding to the body to prevent
content running up underneath it. */ content running up underneath it. */
@media (min-width:980px) {
body {
padding-top: 60px;
}
}
h1 { h1 {
font-weight: 500; font-weight: 500;
...@@ -22,14 +13,6 @@ h2, h3 { ...@@ -22,14 +13,6 @@ h2, h3 {
.resource-description, .response-info { .resource-description, .response-info {
margin-bottom: 2em; margin-bottom: 2em;
} }
#footer {
border-top: 1px solid #eee;
margin-top: 2em;
padding-top: 1em;
text-align: right;
}
.version:before { .version:before {
content: "v"; content: "v";
opacity: 0.6; opacity: 0.6;
...@@ -68,4 +51,110 @@ pre { ...@@ -68,4 +51,110 @@ pre {
.page-header { .page-header {
border-bottom: none; border-bottom: none;
padding-bottom: 0px; padding-bottom: 0px;
} }
\ No newline at end of file
/*=== 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: 40px 0 0 0;
}
/* custom navigation styles */
.wrapper .navbar{
width:100%;
position: absolute;
left: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;
}
#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;
}
rest_framework/templates/rest_framework/base.html
...@@ -25,10 +25,12 @@ ...@@ -25,10 +25,12 @@
<body class="{% block bodyclass %}{% endblock %} container"> <body class="{% block bodyclass %}{% endblock %} container">
<div class="wrapper">
{% block navbar %} {% block navbar %}
<div class="navbar navbar-fixed-top {% block bootstrap_navbar_variant %}navbar-inverse{% endblock %}"> <div class="navbar {% block bootstrap_navbar_variant %}navbar-inverse{% endblock %}">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container-fluid">
<span class="brand" href="/"> <span class="brand" href="/">
{% block branding %}<a href='http://django-rest-framework.org'>Django REST framework <span class="version">{{ version }}</span></a>{% endblock %} {% block branding %}<a href='http://django-rest-framework.org'>Django REST framework <span class="version">{{ version }}</span></a>{% endblock %}
</span> </span>
...@@ -118,6 +120,7 @@ ...@@ -118,6 +120,7 @@
{% endfor %} {% endfor %}
</div>{{ content|urlize_quoted_links }}</pre>{% endautoescape %} </div>{{ content|urlize_quoted_links }}</pre>{% endautoescape %}
</div> </div>
</div>
{% if response.status_code != 403 %} {% if response.status_code != 403 %}
...@@ -181,14 +184,18 @@ ...@@ -181,14 +184,18 @@
</div> </div>
<!-- END Content --> <!-- END Content -->
<div id="push"></div>
</div>
</div><!-- ./wrapper -->
{% block footer %} {% block footer %}
<div id="footer"> <div id="footer">
<a class="powered-by" href='http://django-rest-framework.org'>Django REST framework</a> <span class="version">{{ version }}</span> <a class="powered-by" href='http://django-rest-framework.org'>Django REST framework</a> <span class="version">{{ version }}</span>
</div> </div>
{% endblock %} {% endblock %}
</div>
{% block script %} {% block script %}
<script src="{% get_static_prefix %}rest_framework/js/jquery-1.8.1-min.js"></script> <script src="{% get_static_prefix %}rest_framework/js/jquery-1.8.1-min.js"></script>
<script src="{% get_static_prefix %}rest_framework/js/bootstrap.min.js"></script> <script src="{% get_static_prefix %}rest_framework/js/bootstrap.min.js"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment