Fixed the issue with the non-draggable horizontal scrollbar

This commit is contained in:
Cezar Pendarovski 2014-08-22 09:53:03 +02:00
parent e85ef3b479
commit 1e2bd1294e
3 changed files with 343 additions and 290 deletions

View File

@ -6,7 +6,6 @@ a single block in the template.
*/ */
.form-actions { .form-actions {
background: transparent; background: transparent;
border-top-color: transparent; border-top-color: transparent;
@ -14,7 +13,7 @@ a single block in the template.
} }
.navbar-inverse .brand a { .navbar-inverse .brand a {
color: #999; color: #999999;
} }
.navbar-inverse .brand:hover a { .navbar-inverse .brand:hover a {
color: white; color: white;
@ -22,14 +21,15 @@ a single block in the template.
} }
/* custom navigation styles */ /* custom navigation styles */
.wrapper .navbar{ .navbar {
width: 100%; width: 100%;
position: absolute; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
z-index: 3;
} }
.navbar .navbar-inner{ .navbar .navbar-inner {
background: #2C2C2C; background: #2C2C2C;
color: white; color: white;
border: none; border: none;
@ -37,7 +37,7 @@ a single block in the template.
border-radius: 0px; border-radius: 0px;
} }
.navbar .navbar-inner .nav li, .navbar .navbar-inner .nav li a, .navbar .navbar-inner .brand:hover{ .navbar .navbar-inner .nav li, .navbar .navbar-inner .nav li a, .navbar .navbar-inner .brand:hover {
color: white; color: white;
} }
@ -45,17 +45,18 @@ a single block in the template.
background: #2c2c2c; background: #2c2c2c;
} }
.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 {
color: #A30000; color: #A30000;
} }
.navbar .navbar-inner .dropdown-menu li a:hover{
.navbar .navbar-inner .dropdown-menu li a:hover {
background: #eeeeee; background: #eeeeee;
color: #c20000; color: #c20000;
} }
/*=== dabapps bootstrap styles ====*/ /*=== dabapps bootstrap styles ====*/
html{ html {
width:100%; width:100%;
background: none; background: none;
} }
@ -65,24 +66,28 @@ body, .navbar .navbar-inner .container-fluid {
margin: 0 auto; margin: 0 auto;
} }
body{ body {
background: url("../img/grid.png") repeat-x; background: url("../img/grid.png") repeat-x;
background-attachment: fixed; background-attachment: fixed;
} }
#content{ #content {
margin: 0; margin: 0;
padding-bottom: 60px;
} }
/* sticky footer and footer */ /* sticky footer and footer */
html, body { html, body {
height: 100%; height: 100%;
} }
.wrapper { .wrapper {
position: relative;
top: 0;
left: 0;
padding-top: 60px;
margin: -60px 0;
min-height: 100%; min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
} }
.form-switcher { .form-switcher {
@ -105,7 +110,7 @@ html, body {
} }
.well form .help-block { .well form .help-block {
color: #999; color: #999999;
} }
.nav-tabs { .nav-tabs {
@ -121,39 +126,41 @@ html, body {
} }
.nav-tabs > .active > a { .nav-tabs > .active > a {
background: #f5f5f5; background: #F5F5F5;
} }
.nav-tabs > .active > a:hover { .nav-tabs > .active > a:hover {
background: #f5f5f5; background: #F5F5F5;
} }
.tabbable.first-tab-active .tab-content .tabbable.first-tab-active .tab-content {
{
border-top-right-radius: 0; border-top-right-radius: 0;
} }
#footer, #push { footer {
height: 60px; /* .push must be the same height as .footer */ position: absolute;
bottom: 0;
left: 0;
clear: both;
z-index: 10;
height: 60px;
width: 95%;
margin: 0 2.5%;
} }
#footer{ footer p {
text-align: right;
}
#footer p {
text-align: center; text-align: center;
color: gray; color: gray;
border-top: 1px solid #DDD; border-top: 1px solid #DDD;
padding-top: 10px; padding-top: 10px;
} }
#footer a { footer a {
color: gray; color: gray !important;
font-weight: bold; font-weight: bold;
} }
#footer a:hover { footer a:hover {
color: gray; color: gray;
} }
@ -164,19 +171,19 @@ html, body {
} }
/* custom general page styles */ /* custom general page styles */
.hero-unit h2, .hero-unit h1{ .hero-unit h1, .hero-unit h2 {
color: #A30000; color: #A30000;
} }
body a, body a{ body a {
color: #A30000; color: #A30000;
} }
body a:hover{ body a:hover {
color: #c20000; color: #c20000;
} }
#content a span{ #content a span {
text-decoration: underline; text-decoration: underline;
} }

View File

@ -33,7 +33,7 @@ h2, h3 {
} }
ul.breadcrumb { ul.breadcrumb {
margin: 58px 0 0 0; margin: 80px 0 0 0;
} }
form select, form input, form textarea { form select, form input, form textarea {
@ -43,6 +43,7 @@ form select, form input, form textarea {
form select[multiple] { form select[multiple] {
height: 150px; height: 150px;
} }
/* To allow tooltips to work on disabled elements */ /* To allow tooltips to work on disabled elements */
.disabled-tooltip-shield { .disabled-tooltip-shield {
position: absolute; position: absolute;
@ -68,4 +69,3 @@ pre {
padding-bottom: 0px; padding-bottom: 0px;
margin-bottom: 20px; margin-bottom: 20px;
} }

View File

@ -33,7 +33,11 @@
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container-fluid"> <div class="container-fluid">
<span href="/"> <span href="/">
{% block branding %}<a class='brand' rel="nofollow" href='http://www.django-rest-framework.org'>Django REST framework <span class="version">{{ version }}</span></a>{% endblock %} {% block branding %}
<a class='brand' rel="nofollow" href='http://www.django-rest-framework.org'>
Django REST framework <span class="version">{{ version }}</span>
</a>
{% endblock %}
</span> </span>
<ul class="nav pull-right"> <ul class="nav pull-right">
{% block userlinks %} {% block userlinks %}
@ -61,7 +65,10 @@
<ul class="breadcrumb"> <ul class="breadcrumb">
{% for breadcrumb_name, breadcrumb_url in breadcrumblist %} {% for breadcrumb_name, breadcrumb_url in breadcrumblist %}
<li> <li>
<a href="{{ breadcrumb_url }}" {% if forloop.last %}class="active"{% endif %}>{{ breadcrumb_name }}</a> {% if not forloop.last %}<span class="divider">&rsaquo;</span>{% endif %} <a href="{{ breadcrumb_url }}" {% if forloop.last %}class="active"{% endif %}>
{{ breadcrumb_name }}
</a>
{% if not forloop.last %}<span class="divider">&rsaquo;</span>{% endif %}
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
@ -74,20 +81,28 @@
<form id="get-form" class="pull-right"> <form id="get-form" class="pull-right">
<fieldset> <fieldset>
<div class="btn-group format-selection"> <div class="btn-group format-selection">
<a class="btn btn-primary js-tooltip" href='{{ request.get_full_path }}' rel="nofollow" title="Make a GET request on the {{ name }} resource">GET</a> <a class="btn btn-primary js-tooltip" href='{{ request.get_full_path }}'
rel="nofollow" title="Make a GET request on the {{ name }} resource">
GET
</a>
<button class="btn btn-primary dropdown-toggle js-tooltip" data-toggle="dropdown" title="Specify a format for the GET request"> <button class="btn btn-primary dropdown-toggle js-tooltip" data-toggle="dropdown"
title="Specify a format for the GET request">
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
{% for format in available_formats %} {% for format in available_formats %}
<li> <li>
<a class="js-tooltip format-option" href='{% add_query_param request api_settings.URL_FORMAT_OVERRIDE format %}' rel="nofollow" title="Make a GET request on the {{ name }} resource with the format set to `{{ format }}`">{{ format }}</a> <a class="js-tooltip format-option"
href='{% add_query_param request api_settings.URL_FORMAT_OVERRIDE format %}'
rel="nofollow"
title="Make a GET request on the {{ name }} resource with the format set to `{{ format }}`">
{{ format }}
</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</fieldset> </fieldset>
</form> </form>
{% endif %} {% endif %}
@ -96,7 +111,10 @@
<form class="button-form" action="{{ request.get_full_path }}" method="POST"> <form class="button-form" action="{{ request.get_full_path }}" method="POST">
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="OPTIONS" /> <input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="OPTIONS" />
<button class="btn btn-primary js-tooltip" title="Make an OPTIONS request on the {{ name }} resource">OPTIONS</button> <button class="btn btn-primary js-tooltip"
title="Make an OPTIONS request on the {{ name }} resource">
OPTIONS
</button>
</form> </form>
{% endif %} {% endif %}
@ -104,12 +122,17 @@
<form class="button-form" action="{{ request.get_full_path }}" method="POST"> <form class="button-form" action="{{ request.get_full_path }}" method="POST">
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="DELETE" /> <input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="DELETE" />
<button class="btn btn-danger js-tooltip" title="Make a DELETE request on the {{ name }} resource">DELETE</button> <button class="btn btn-danger js-tooltip"
title="Make a DELETE request on the {{ name }} resource">
DELETE
</button>
</form> </form>
{% endif %} {% endif %}
<div class="content-main"> <div class="content-main">
<div class="page-header"><h1>{{ name }}</h1></div> <div class="page-header">
<h1>{{ name }}</h1>
</div>
{% block description %} {% block description %}
{{ description }} {{ description }}
{% endblock %} {% endblock %}
@ -130,19 +153,27 @@
<div {% if post_form %}class="tabbable"{% endif %}> <div {% if post_form %}class="tabbable"{% endif %}>
{% if post_form %} {% if post_form %}
<ul class="nav nav-tabs form-switcher"> <ul class="nav nav-tabs form-switcher">
<li><a name='html-tab' href="#object-form" data-toggle="tab">HTML form</a></li> <li>
<li><a name='raw-tab' href="#generic-content-form" data-toggle="tab">Raw data</a></li> <a name='html-tab' href="#object-form" data-toggle="tab">HTML form</a>
</li>
<li>
<a name='raw-tab' href="#generic-content-form" data-toggle="tab">Raw data</a>
</li>
</ul> </ul>
{% endif %} {% endif %}
<div class="well tab-content"> <div class="well tab-content">
{% if post_form %} {% if post_form %}
<div class="tab-pane" id="object-form"> <div class="tab-pane" id="object-form">
{% with form=post_form %} {% with form=post_form %}
<form action="{{ request.get_full_path }}" method="POST" enctype="multipart/form-data" class="form-horizontal"> <form action="{{ request.get_full_path }}"
method="POST" enctype="multipart/form-data" class="form-horizontal">
<fieldset> <fieldset>
{{ post_form }} {{ post_form }}
<div class="form-actions"> <div class="form-actions">
<button class="btn btn-primary" title="Make a POST request on the {{ name }} resource">POST</button> <button class="btn btn-primary"
title="Make a POST request on the {{ name }} resource">
POST
</button>
</div> </div>
</fieldset> </fieldset>
</form> </form>
@ -155,7 +186,10 @@
<fieldset> <fieldset>
{% include "rest_framework/raw_data_form.html" %} {% include "rest_framework/raw_data_form.html" %}
<div class="form-actions"> <div class="form-actions">
<button class="btn btn-primary" title="Make a POST request on the {{ name }} resource">POST</button> <button class="btn btn-primary"
title="Make a POST request on the {{ name }} resource">
POST
</button>
</div> </div>
</fieldset> </fieldset>
</form> </form>
@ -169,18 +203,27 @@
<div {% if put_form %}class="tabbable"{% endif %}> <div {% if put_form %}class="tabbable"{% endif %}>
{% if put_form %} {% if put_form %}
<ul class="nav nav-tabs form-switcher"> <ul class="nav nav-tabs form-switcher">
<li><a name='html-tab' href="#object-form" data-toggle="tab">HTML form</a></li> <li>
<li><a name='raw-tab' href="#generic-content-form" data-toggle="tab">Raw data</a></li> <a name='html-tab' href="#object-form" data-toggle="tab">HTML form</a>
</li>
<li>
<a name='raw-tab' href="#generic-content-form" data-toggle="tab">Raw data</a>
</li>
</ul> </ul>
{% endif %} {% endif %}
<div class="well tab-content"> <div class="well tab-content">
{% if put_form %} {% if put_form %}
<div class="tab-pane" id="object-form"> <div class="tab-pane" id="object-form">
<form action="{{ request.get_full_path }}" method="POST" enctype="multipart/form-data" class="form-horizontal"> <form action="{{ request.get_full_path }}"
method="POST" enctype="multipart/form-data" class="form-horizontal">
<fieldset> <fieldset>
{{ put_form }} {{ put_form }}
<div class="form-actions"> <div class="form-actions">
<button class="btn btn-primary js-tooltip" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="PUT" title="Make a PUT request on the {{ name }} resource">PUT</button> <button class="btn btn-primary js-tooltip"
name="{{ api_settings.FORM_METHOD_OVERRIDE }}"
value="PUT" title="Make a PUT request on the {{ name }} resource">
PUT
</button>
</div> </div>
</fieldset> </fieldset>
</form> </form>
@ -193,10 +236,18 @@
{% include "rest_framework/raw_data_form.html" %} {% include "rest_framework/raw_data_form.html" %}
<div class="form-actions"> <div class="form-actions">
{% if raw_data_put_form %} {% if raw_data_put_form %}
<button class="btn btn-primary js-tooltip" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="PUT" title="Make a PUT request on the {{ name }} resource">PUT</button> <button class="btn btn-primary js-tooltip"
name="{{ api_settings.FORM_METHOD_OVERRIDE }}"
value="PUT" title="Make a PUT request on the {{ name }} resource">
PUT
</button>
{% endif %} {% endif %}
{% if raw_data_patch_form %} {% if raw_data_patch_form %}
<button class="btn btn-primary js-tooltip" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="PATCH" title="Make a PATCH request on the {{ name }} resource">PATCH</button> <button class="btn btn-primary js-tooltip"
name="{{ api_settings.FORM_METHOD_OVERRIDE }}"
value="PATCH" title="Make a PATCH request on the {{ name }} resource">
PATCH
</button>
{% endif %} {% endif %}
</div> </div>
</fieldset> </fieldset>
@ -207,22 +258,17 @@
</div> </div>
{% endif %} {% endif %}
{% endif %} {% endif %}
</div>
<!-- END content-main -->
</div> </div>
<!-- END Content --> <!-- END Content -->
<div id="push"></div> <footer>
{% block footer %}
</div> <p>Sponsored by <a href="http://dabapps.com/">DabApps</a>.</p>
{% endblock %}
</footer>
</div><!-- ./wrapper --> </div><!-- ./wrapper -->
{% block footer %}
{% endblock %}
{% block script %} {% block script %}
<script src="{% static "rest_framework/js/jquery-1.8.1-min.js" %}"></script> <script src="{% static "rest_framework/js/jquery-1.8.1-min.js" %}"></script>
<script src="{% static "rest_framework/js/bootstrap.min.js" %}"></script> <script src="{% static "rest_framework/js/bootstrap.min.js" %}"></script>