Merge pull request #284 from maximilianhurl/doc-styles

Added sticky footer and styles to HTML API page
author: Tom Christie 2012-10-05 09:04:17 -0700
committer: Tom Christie 2012-10-05 09:04:17 -0700
commit: 4e7fffa993a40b705e77580a5fd589170e2e602b (patch)
tree: ed65a47f253b06787531b3579d16a408c9ac466e
parent: cc21948a69f5cea90ca02042549af29c20e0268a (diff)
parent: 101f06b50b7e767aa1580d7d2bd48c8b1233cc83 (diff)
download: django-rest-framework-4e7fffa993a40b705e77580a5fd589170e2e602b.tar.bz2
5 files changed, 181 insertions, 78 deletions
diff --git a/docs/static/css/default.css b/docs/static/css/default.css
index 8401687d..742a4147 100644
--- a/docs/static/css/default.css
+++ b/docs/static/css/default.css
@@ -1,15 +1,5 @@
 /* Set the body padding-top when above 980px to push the content down from
    below the navbar, which is fixed at >980px screen widths. */
-@media (min-width: 980px) {
-  body {
-    padding-top: 71px;
-  }
-}
-
-body {
-  padding-bottom: 40px;
-}
-
 pre {
   font-size: 12px;
 }
@@ -61,28 +51,9 @@ a.github:hover {
   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 {
-  border-top: 1px dotted #A30000
+  border-top: 1px dotted #A30000;
 }
 
 /* Force TOC text to not overrun */
@@ -100,7 +71,7 @@ pre {
 
 /* Preserve the spacing of the navbar across different screen sizes. */
 .navbar-inner {
-  padding: 5px 0; 
+  /*padding: 5px 0;*/
 }
 
 @media (max-width: 979px) {
@@ -194,8 +165,9 @@ body{
   color: white; 
 }
 
-.nav-list > .active > a, .nav-list > .active > a:hover {
-  background: #2c2c2c;
+.nav-list > .active > a, .navbar .navbar-inner .nav li a:hover {
+  background:#212121;
+  color:white;
 }
 
 .navbar .navbar-inner .dropdown-menu li a, .navbar .navbar-inner .dropdown-menu li{
@@ -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;
+}
diff --git a/docs/template.html b/docs/template.html
index 352116b6..11a5e0f0 100644
--- a/docs/template.html
+++ b/docs/template.html
@@ -19,6 +19,8 @@
     <![endif]-->
   <body onload="prettyPrint()" class="{{ page_id }}-page">
 
+  <div class="wrapper">
+
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container-fluid">
@@ -90,35 +92,31 @@
       </div>
     </div>
 
-    <div id="wrap">
-
-    <div class="container-fluid">
-      <div class="row-fluid">
+    <div class="body-content">
+      <div class="container-fluid">
+        <div class="row-fluid">
 
-        <div class="span3">
-          <div id="table-of-contents">
-            <ul class="nav nav-list side-nav well sidebar-nav-fixed">
-              {{ toc }}
-            </ul>
+          <div class="span3">
+            <div id="table-of-contents">
+              <ul class="nav nav-list side-nav well sidebar-nav-fixed">
+                {{ toc }}
+              </ul>
+            </div>
           </div>
-        </div>
 
-        <div id="main-content" class="span9">
-          {{ content }}
-        </div><!--/span-->
-      </div><!--/row-->
-    </div><!--/.fluid-container-->
+          <div id="main-content" class="span9">
+            {{ content }}
+          </div><!--/span-->
+        </div><!--/row-->
+      </div><!--/.fluid-container-->
+    </div><!--/.body content-->
 
       <div id="push"></div>
-    </div>
+  </div><!--/.wrapper -->
 
-      <!--
-      <div class="row footer">
-          <div class="span12">
-              <p>Sponsored by <a href="http://dabapps.com/">Dab Apps</a>.</a></p>
-          </div>
-      </div>
-    -->
+  <footer class="span12">
+    <p>Sponsored by <a href="http://dabapps.com/">Dab Apps</a>.</a></p>
+  </footer>
 
     <!-- Le javascript
     ================================================== -->
diff --git a/rest_framework/static/rest_framework/css/default.css b/rest_framework/static/rest_framework/css/default.css
index b569b1f5..4d61ac8f 100644
--- a/rest_framework/static/rest_framework/css/default.css
+++ b/rest_framework/static/rest_framework/css/default.css
@@ -1,15 +1,6 @@
-body {
-    padding-top: 0;
-    padding-bottom: 1em;
-}
 
 /* The navbar is fixed at >= 980px wide, so add padding to the body to prevent
 content running up underneath it. */
-@media (min-width:980px) {
-    body {
-        padding-top: 60px;
-    }
-}
 
 h1 {
     font-weight: 500;
@@ -22,14 +13,6 @@ h2, h3 {
 .resource-description, .response-info {
     margin-bottom: 2em;
 }
-
-#footer {
-    border-top: 1px solid #eee;
-    margin-top: 2em;
-    padding-top: 1em;
-    text-align: right;
-}
-
 .version:before {
     content: "v";
     opacity: 0.6;
@@ -68,4 +51,110 @@ pre {
 .page-header {
     border-bottom: none;
     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;
+}
+
diff --git a/rest_framework/static/rest_framework/img/grid.png b/rest_framework/static/rest_framework/img/grid.png
new file mode 100644
index 00000000..878c3ed5
--- /dev/null
+++ b/rest_framework/static/rest_framework/img/grid.png
diff --git a/rest_framework/templates/rest_framework/base.html b/rest_framework/templates/rest_framework/base.html
index a5e08942..f213554b 100644
--- a/rest_framework/templates/rest_framework/base.html
+++ b/rest_framework/templates/rest_framework/base.html
@@ -25,10 +25,12 @@
 
   <body class="{% block bodyclass %}{% endblock %} container">
 
+    <div class="wrapper">
+
     {% 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="container">
+            <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>
@@ -118,6 +120,7 @@
 {% endfor %}
 </div>{{ content|urlize_quoted_links }}</pre>{% endautoescape %}
             </div>
+        </div>
 
             {% if response.status_code != 403 %}
 
@@ -181,14 +184,18 @@
     </div>
     <!-- END Content -->
 
+        <div id="push"></div>
+
+    </div>
+
+    </div><!-- ./wrapper -->
+
     {% block footer %}
     <div id="footer">
         <a class="powered-by" href='http://django-rest-framework.org'>Django REST framework</a> <span class="version">{{ version }}</span>
     </div>
     {% endblock %}
 
-    </div>
-
     {% 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/bootstrap.min.js"></script>
author	Tom Christie	2012-10-05 09:04:17 -0700
committer	Tom Christie	2012-10-05 09:04:17 -0700
commit	4e7fffa993a40b705e77580a5fd589170e2e602b (patch)
tree	ed65a47f253b06787531b3579d16a408c9ac466e
parent	cc21948a69f5cea90ca02042549af29c20e0268a (diff)
parent	101f06b50b7e767aa1580d7d2bd48c8b1233cc83 (diff)
download	django-rest-framework-4e7fffa993a40b705e77580a5fd589170e2e602b.tar.bz2