Skip to content

F
flask-admin
Commit ba4e10ce authored by Serge S. Koval's avatar Serge S. Koval
Browse files
Options

Merge pull request #753 from pawl/fixbs2gap 

Simplify CSS, Improve Inline Form Styling, Make Admin.css More Flask-Admin Specific
parents e00b2482 ba4f1140
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 262 deletions
flask_admin/static/admin/css/bootstrap2/admin.css
View file @ ba4e10ce
/* Global styles */ /* List View - fix trash icon inside table column */
body .model-list form.icon {
{
padding-top: 4px;
}
/* Form customizations */
form.icon {
display: inline; display: inline;
} }
form.icon button { .model-list form.icon button {
border: none; border: none;
background: transparent; background: transparent;
text-decoration: none; text-decoration: none;
...@@ -17,21 +11,36 @@ form.icon button { ...@@ -17,21 +11,36 @@ form.icon button {
line-height: normal; line-height: normal;
} }
a.icon { /* List View - link icons - prevent underline */
.model-list a.icon {
text-decoration: none; text-decoration: none;
} }
/* Model search form */ /* List View - fix checkbox column width */
form.search-form { .list-checkbox-column {
margin: 4px 0 0 0; width: 14px;
}
/* List View - fix gap between actions and table */
.model-list {
position: relative;
margin-top: -1px;
z-index: 999;
}
.actions-nav {
margin-bottom: 0;
margin-left: 4px;
margin-right: 4px;
} }
form.search-form .clear i { #filter_form {
margin: 2px 0 0 0; margin-bottom: 0;
} }
form.search-form div input { /* List View Search Form - fix gap between form and table */
margin: 0; .actions-nav form.search-form {
margin: -1px 0 0 0;
} }
/* Filters */ /* Filters */
...@@ -40,62 +49,24 @@ table.filters { ...@@ -40,62 +49,24 @@ table.filters {
border-spacing: 4px; border-spacing: 4px;
} }
/* prevents gap between table and actions while there are no filters set */
table.filters:not(:empty) { table.filters:not(:empty) {
margin: 12px 0px 20px 0px; margin: 12px 0px 20px 0px;
} }
/* spacing between filter X button, operation, and value field */
/* uses tables instead of form classes for bootstrap2-3 compatibility */
table.filters tr td { table.filters tr td {
padding-right: 5px; padding-right: 5px;
padding-bottom: 3px; padding-bottom: 3px;
} }
.filters input /* match filter operation drop-down height with bootstrap input */
{
margin-bottom: 0;
}
.filters a.remove-filter {
margin-bottom: 0;
display: block;
text-align: left;
}
.filters .remove-filter
{
vertical-align: middle;
}
.filters .remove-filter .close-icon
{
font-size: 16px;
}
.filters .remove-filter .close-icon:hover
{
color: black;
opacity: 0.4;
}
.filters .filter-op > a { .filters .filter-op > a {
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
} }
/* Inline forms */
.inline-field {
padding-bottom: 0.5em;
}
.inline-field-control {
float: right;
}
.inline-field .inline-form-field {
border-left: 1px solid #eeeeee;
padding-left: 8px;
margin-bottom: 4px;
}
/* Image thumbnails */ /* Image thumbnails */
.image-thumbnail img { .image-thumbnail img {
max-width: 100px; max-width: 100px;
...@@ -109,32 +80,7 @@ table.filters tr td { ...@@ -109,32 +80,7 @@ table.filters tr td {
margin-left: 4px; margin-left: 4px;
} }
/* add spacing between labels and form fields */
.admin-form .controls { .admin-form .controls {
margin-left: 110px; margin-left: 110px;
}
/* Patch Select2 */
.select2-results li {
min-height: 24px !important;
}
.list-checkbox-column {
width: 14px;
}
/* Fix gap between actions and table */
.model-list {
position: relative;
margin-top: -1px;
z-index: 999;
}
.actions-nav {
margin-bottom: 0;
margin-left: 4px;
margin-right: 4px;
}
#filter_form {
margin-bottom: 0;
} }
\ No newline at end of file
flask_admin/static/admin/css/bootstrap3/admin.css
View file @ ba4e10ce
/* Global styles */ /* List View - fix trash icon inside table column */
body .model-list form.icon {
{
padding-top: 4px;
}
/* Form customizations */
form.icon {
display: inline; display: inline;
} }
form.icon button { .model-list form.icon button {
border: none; border: none;
background: transparent; background: transparent;
text-decoration: none; text-decoration: none;
...@@ -17,29 +11,28 @@ form.icon button { ...@@ -17,29 +11,28 @@ form.icon button {
line-height: normal; line-height: normal;
} }
/* fix delete icon color */ /* List View - prevent link icons from differing from trash icon */
a.icon, button span.glyphicon { .model-list a.icon {
text-decoration: none; text-decoration: none;
margin-left: 10px; margin-left: 10px;
color: #333; color: inherit;
}
/* Model search form */
form.navbar-form {
margin: 1px 0 0 0;
} }
form.navbar-form a.clear span { /* List View - fix checkbox column width */
margin-top: 8px; .list-checkbox-column {
margin-left: -20px; width: 14px;
} }
form.navbar-form div.input-append { /* List View - fix overlapping border between actions and table */
display: inline-flex; .model-list {
position: relative;
margin-top: -1px;
z-index: 999;
} }
form.search-form div input { /* List View Search Form - fix gap between form and table */
margin: 0; .actions-nav form.navbar-form {
margin: 1px 0 0 0;
} }
/* Filters */ /* Filters */
...@@ -48,39 +41,19 @@ table.filters { ...@@ -48,39 +41,19 @@ table.filters {
border-spacing: 4px; border-spacing: 4px;
} }
/* prevents gap between table and actions while there are no filters set */
table.filters:not(:empty) { table.filters:not(:empty) {
margin: 12px 0px 20px 0px; margin: 12px 0px 20px 0px;
} }
/* spacing between filter X button, operation, and value field */
/* uses tables instead of form classes for bootstrap2-3 compatibility */
table.filters tr td { table.filters tr td {
padding-right: 5px; padding-right: 5px;
padding-bottom: 3px; padding-bottom: 3px;
} }
.filters a.remove-filter { /* Filters - Select2 Boxes */
margin-bottom: 0;
display: block;
text-align: left;
text-decoration: none;
}
.filters .remove-filter
{
vertical-align: middle;
}
.filters .remove-filter .close-icon
{
font-size: 16px;
}
.filters .remove-filter .close-icon:hover
{
color: black;
opacity: 0.4;
}
/* filters */
.filters .filter-op { .filters .filter-op {
width: 130px; width: 130px;
} }
...@@ -89,30 +62,6 @@ table.filters tr td { ...@@ -89,30 +62,6 @@ table.filters tr td {
width: 220px; width: 220px;
} }
/* Inline forms */
.inline-field {
margin-bottom: 5px;
}
.inline-field-control {
float: right;
}
.inline-field .inline-form {
border-left: 1px solid #eeeeee;
padding-left: 8px;
margin-bottom: 4px;
}
.inline-field-control .glyphicon-remove {
margin-left: -30px;
}
.panel {
padding-top: 25px;
padding-left: 30px;
}
/* Image thumbnails */ /* Image thumbnails */
.image-thumbnail img { .image-thumbnail img {
max-width: 100px; max-width: 100px;
...@@ -120,65 +69,14 @@ table.filters tr td { ...@@ -120,65 +69,14 @@ table.filters tr td {
} }
/* Forms */ /* Forms */
/* required because form-horizontal removes top padding */
.admin-form { .admin-form {
margin-top: 35px; margin-top: 35px;
} }
.submit-row { /* Form Field Description - Appears when field has 'description' attribute */
margin-top: 5px; /* Test with: form_args = {'name':{'description': 'test'}} */
} /* prevents awkward gap after help-block - This is default for bootstrap2 */
.admin-form .help-block {
td>span.glyphicon {
padding-left: 35%;
}
/* link style */
a.btn-cancel {
border-radius: 4px;
border-color: #a08c8c;
color: #333;
background-color: #f0b8b8;
}
a.btn-link {
border-radius: 4px;
border-color: #95bee2;
}
a.btn-filter, a.btn-filter:hover {
border-radius: 4px;
border-color: #adadad;
color: #333;
background-color: #ebebeb;
max-height: 32px;
line-height: 16px;
}
.help-block {
margin-bottom: 0px; margin-bottom: 0px;
}
ul.has-error {
margin-bottom: -8px;
}
.tooltip.top {
font-size: 1.1em;
top: -35px;
}
.checkbox input[type="checkbox"] {
margin-left: 0px;
margin-right: 15px;
}
.list-checkbox-column {
width: 14px;
}
/* fix overlapping border between actions and table */
.model-list {
position: relative;
margin-top: -1px;
z-index: 999;
} }
\ No newline at end of file
flask_admin/static/admin/js/filters-1.0.0.js
View file @ ba4e10ce
...@@ -101,12 +101,12 @@ var AdminFilters = function(element, filtersElement, filterGroups, activeFilters ...@@ -101,12 +101,12 @@ var AdminFilters = function(element, filtersElement, filterGroups, activeFilters
} }
function addFilter(name, subfilters, selectedIndex, filterValue) { function addFilter(name, subfilters, selectedIndex, filterValue) {
var $el = $('<tr />').appendTo($container); var $el = $('<tr class="form-horizontal" />').appendTo($container);
// Filter list // Filter list
$el.append( $el.append(
$('<td/>').append( $('<td/>').append(
$('<a href="#" class="btn btn-filter remove-filter" />') $('<a href="#" class="btn btn-default remove-filter" />')
.append($('<span class="close-icon">&times;</span>')) .append($('<span class="close-icon">&times;</span>'))
.append('&nbsp;') .append('&nbsp;')
.append(name) .append(name)
......
flask_admin/templates/bootstrap2/admin/base.html
View file @ ba4e10ce
...@@ -13,6 +13,11 @@ ...@@ -13,6 +13,11 @@
<link href="{{ admin_static.url(filename='bootstrap/bootstrap2/css/bootstrap.css') }}" rel="stylesheet"> <link href="{{ admin_static.url(filename='bootstrap/bootstrap2/css/bootstrap.css') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='bootstrap/bootstrap2/css/bootstrap-responsive.css') }}" rel="stylesheet"> <link href="{{ admin_static.url(filename='bootstrap/bootstrap2/css/bootstrap-responsive.css') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='admin/css/bootstrap2/admin.css') }}" rel="stylesheet"> <link href="{{ admin_static.url(filename='admin/css/bootstrap2/admin.css') }}" rel="stylesheet">
<style>
body {
padding-top: 4px;
}
</style>
{% endblock %} {% endblock %}
{% block head %} {% block head %}
{% endblock %} {% endblock %}
......
flask_admin/templates/bootstrap2/admin/lib.html
View file @ ba4e10ce
...@@ -158,7 +158,7 @@ ...@@ -158,7 +158,7 @@
{{ extra }} {{ extra }}
{% endif %} {% endif %}
{% if cancel_url %} {% if cancel_url %}
<a href="{{ cancel_url }}" class="btn btn-large">{{ _gettext('Cancel') }}</a> <a href="{{ cancel_url }}" class="btn btn-large btn-danger">{{ _gettext('Cancel') }}</a>
{% endif %} {% endif %}
</div> </div>
</div> </div>
......
flask_admin/templates/bootstrap2/admin/model/inline_list_base.html
View file @ ba4e10ce
{% macro render_inline_fields(field, template, render, check=None) %} {% macro render_inline_fields(field, template, render, check=None) %}
<div class="inline-field"> <div class="inline-field">
{# existing inline form fields #}
<div class="inline-field-list"> <div class="inline-field-list">
{% for subfield in field %} {% for subfield in field %}
<div id="{{ subfield.id }}" class="inline-field"> <div id="{{ subfield.id }}" class="inline-field well well-small">
{%- if not check or check(subfield) %} {%- if not check or check(subfield) %}
{% if subfield.get_pk and subfield.get_pk() %} <legend>
<div class="inline-field-control"> {{ field.label.text }} #{{ loop.index }}
<div class="pull-right">
{% if subfield.get_pk and subfield.get_pk() %}
<input type="checkbox" name="del-{{ subfield.id }}" id="del-{{ subfield.id }}" /> <input type="checkbox" name="del-{{ subfield.id }}" id="del-{{ subfield.id }}" />
<label for="del-{{ subfield.id }}" style="display: inline">{{ _gettext('Delete?') }}</label> <label for="del-{{ subfield.id }}" style="display: inline">{{ _gettext('Delete?') }}</label>
</div> {% else %}
{% else %}
<div class="inline-field-control">
<a href="javascript:void(0)" class="inline-remove-field"><i class="icon-remove"></i></a> <a href="javascript:void(0)" class="inline-remove-field"><i class="icon-remove"></i></a>
{% endif %}
</div> </div>
{% endif %} </legend>
{%- endif -%} {%- endif -%}
{{ render(subfield) }} {{ render(subfield) }}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{# template for new inline form fields #}
<div class="inline-field-template hide"> <div class="inline-field-template hide">
{% filter forceescape %} {% filter forceescape %}
<div class="inline-field"> <div class="inline-field well well-small">
<div class="inline-field-control"> <legend>
<a href="javascript:void(0)" class="inline-remove-field"><i class="icon-remove"></i></a> New {{ field.label.text }}
</div> <div class="pull-right">
<a href="javascript:void(0)" class="inline-remove-field"><i class="icon-remove"></i></a>
</div>
</legend>
{{ render(template) }} {{ render(template) }}
</div> </div>
{% endfilter %} {% endfilter %}
</div> </div>
<a id="{{ field.id }}-button" href="javascript:void(0)" class="btn" onclick="faForm.addInlineField(this, '{{ field.id }}');">{{ _gettext('Add') }} {{ field.label.text }}</a> <a id="{{ field.id }}-button" href="javascript:void(0)" class="btn" onclick="faForm.addInlineField(this, '{{ field.id }}');">{{ _gettext('Add') }} {{ field.label.text }}</a>
</div> </div>
{% endmacro %} {% endmacro %}
flask_admin/templates/bootstrap3/admin/base.html
View file @ ba4e10ce
...@@ -15,6 +15,11 @@ ...@@ -15,6 +15,11 @@
<link href="{{ admin_static.url(filename='bootstrap/bootstrap3/css/bootstrap.min.css') }}" rel="stylesheet"> <link href="{{ admin_static.url(filename='bootstrap/bootstrap3/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='bootstrap/bootstrap3/css/bootstrap-theme.min.css') }}" rel="stylesheet"> <link href="{{ admin_static.url(filename='bootstrap/bootstrap3/css/bootstrap-theme.min.css') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='admin/css/bootstrap3/admin.css') }}" rel="stylesheet"> <link href="{{ admin_static.url(filename='admin/css/bootstrap3/admin.css') }}" rel="stylesheet">
<style>
body {
padding-top: 4px;
}
</style>
{% endblock %} {% endblock %}
{% block head %} {% block head %}
{% endblock %} {% endblock %}
......
flask_admin/templates/bootstrap3/admin/lib.html
View file @ ba4e10ce
...@@ -88,10 +88,10 @@ ...@@ -88,10 +88,10 @@
<div class="{{ kwargs.get('column_class', 'col-md-10') }}"> <div class="{{ kwargs.get('column_class', 'col-md-10') }}">
{% set _dummy = kwargs.setdefault('class', 'form-control') %} {% set _dummy = kwargs.setdefault('class', 'form-control') %}
{{ field(**kwargs)|safe }} {{ field(**kwargs)|safe }}
{% if field.description %}
<p class="help-block">{{ field.description }}</p>
{% endif %}
</div> </div>
{% if field.description %}
<span class="help-block">{{ field.description }}</span>
{% endif %}
{% if direct_error %} {% if direct_error %}
<ul{% if direct_error %} class="input-errors"{% endif %}> <ul{% if direct_error %} class="input-errors"{% endif %}>
{% for e in field.errors if e is string %} {% for e in field.errors if e is string %}
...@@ -144,15 +144,16 @@ ...@@ -144,15 +144,16 @@
{% endmacro %} {% endmacro %}
{% macro render_form_buttons(cancel_url, extra=None) %} {% macro render_form_buttons(cancel_url, extra=None) %}
<hr>
<div class="form-group"> <div class="form-group">
<div class="col-md-offset-2 col-md-10 submit-row"> <div class="col-md-offset-2 col-md-10 submit-row">
<input type="submit" class="btn btn-primary" value="{{ _gettext('Submit') }}" /> <input type="submit" class="btn btn-primary" value="{{ _gettext('Submit') }}" />
{% if extra %} {% if extra %}
{{ extra }} {{ extra }}
{% endif %} {% endif %}
{% if cancel_url %} {% if cancel_url %}
<a href="{{ cancel_url }}" class="btn btn-cancel" role="button">{{ _gettext('Cancel') }}</a> <a href="{{ cancel_url }}" class="btn btn-danger" role="button">{{ _gettext('Cancel') }}</a>
{% endif %} {% endif %}
</div> </div>
</div> </div>
{% endmacro %} {% endmacro %}
......
flask_admin/templates/bootstrap3/admin/model/edit.html
View file @ ba4e10ce
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% import 'admin/lib.html' as lib with context %} {% import 'admin/lib.html' as lib with context %}
{% macro extra() %} {% macro extra() %}
<input name="_continue_editing" type="submit" class="btn" value="{{ _gettext('Save and Continue') }}" /> <input name="_continue_editing" type="submit" class="btn btn-default" value="{{ _gettext('Save and Continue') }}" />
{% endmacro %} {% endmacro %}
{% block head %} {% block head %}
......
flask_admin/templates/bootstrap3/admin/model/inline_list_base.html
View file @ ba4e10ce
{% macro render_inline_fields(field, template, render, check=None) %} {% macro render_inline_fields(field, template, render, check=None) %}
<div class="inline-field"> <div class="inline-field">
{# existing inline form fields #}
<div class="inline-field-list"> <div class="inline-field-list">
{% for subfield in field %} {% for subfield in field %}
<div id="{{ subfield.id }}" class="inline-field well"> <div id="{{ subfield.id }}" class="inline-field well well-sm">
{%- if not check or check(subfield) %} {%- if not check or check(subfield) %}
{% if subfield.get_pk and subfield.get_pk() %} <legend>
<div class="inline-field-control"> <small>
<input type="checkbox" name="del-{{ subfield.id }}" id="del-{{ subfield.id }}" /> {{ field.label.text }} #{{ loop.index }}
<label for="del-{{ subfield.id }}" style="display: inline">{{ _gettext('Delete?') }}</label> <div class="pull-right">
</div> {% if subfield.get_pk and subfield.get_pk() %}
{% else %} <input type="checkbox" name="del-{{ subfield.id }}" id="del-{{ subfield.id }}" />
<div class="inline-field-control"> <label for="del-{{ subfield.id }}" style="display: inline">{{ _gettext('Delete?') }}</label>
<a href="javascript:void(0)" class="inline-remove-field"><i class="glyphicon glyphicon-remove"></i></a> {% else %}
</div> <a href="javascript:void(0)" class="inline-remove-field"><i class="glyphicon glyphicon-remove"></i></a>
{% endif %} {% endif %}
</div>
</small>
</legend>
<div class='clearfix'></div>
{%- endif -%} {%- endif -%}
{{ render(subfield) }} {{ render(subfield) }}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{# template for new inline form fields #}
<div class="inline-field-template hide"> <div class="inline-field-template hide">
{% filter forceescape %} {% filter forceescape %}
<div class="inline-field panel panel-info"> <div class="inline-field well well-sm">
<div class="inline-field-control"> <legend>
<a href="javascript:void(0)" class="inline-remove-field"><span class="glyphicon glyphicon-remove"></span></a> <small>New {{ field.label.text }}</small>
</div> <div class="pull-right">
<a href="javascript:void(0)" class="inline-remove-field"><span class="glyphicon glyphicon-remove"></span></a>
</div>
</legend>
<div class='clearfix'></div>
{{ render(template) }} {{ render(template) }}
</div> </div>
{% endfilter %} {% endfilter %}
......
flask_admin/templates/bootstrap3/admin/model/layout.html
View file @ ba4e10ce
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="pull-right"> <div class="pull-right">
<button type="submit" class="btn btn-primary" style="display: none">{{ _gettext('Apply') }}</button> <button type="submit" class="btn btn-primary" style="display: none">{{ _gettext('Apply') }}</button>
{% if active_filters %} {% if active_filters %}
<a href="{{ clear_search_url }}" class="btn btn-link">{{ _gettext('Reset Filters') }}</a> <a href="{{ clear_search_url }}" class="btn btn-default">{{ _gettext('Reset Filters') }}</a>
{% endif %} {% endif %}
</div> </div>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
{% endmacro %} {% endmacro %}
{% macro search_form(input_class="span2") %} {% macro search_form(input_class="col-md-2") %}
<form method="GET" action="{{ return_url }}" class="navbar-form navbar-left" role="search"> <form method="GET" action="{{ return_url }}" class="navbar-form navbar-left" role="search">
{% if sort_column is not none %} {% if sort_column is not none %}
<input type="hidden" name="sort" value="{{ sort_column }}"> <input type="hidden" name="sort" value="{{ sort_column }}">
...@@ -34,11 +34,9 @@ ...@@ -34,11 +34,9 @@
<input type="hidden" name="desc" value="{{ sort_desc }}"> <input type="hidden" name="desc" value="{{ sort_desc }}">
{% endif %} {% endif %}
{% if search %} {% if search %}
<div class="input-append form-group"> <div class="input-group">
<input type="text" name="search" value="{{ search }}" class="{{ input_class }} form-control" placeholder="{{ _gettext('Search') }}"> <input type="text" name="search" value="{{ search }}" class="{{ input_class }} form-control" placeholder="{{ _gettext('Search') }}">
<a href="{{ clear_search_url }}" class="clear add-on"> <a href="{{ clear_search_url }}" class="input-group-addon clear"><span class="glyphicon glyphicon-remove"></span></a>
<span class="glyphicon glyphicon-remove"></span>
</a>
</div> </div>
{% else %} {% else %}
<div class="form-group"> <div class="form-group">
......
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