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 */
body
{
padding-top: 4px;
}
/* Form customizations */
form.icon {
/* List View - fix trash icon inside table column */
.model-list form.icon {
display: inline;
}
form.icon button {
.model-list form.icon button {
border: none;
background: transparent;
text-decoration: none;
......@@ -17,21 +11,36 @@ form.icon button {
line-height: normal;
}
a.icon {
/* List View - link icons - prevent underline */
.model-list a.icon {
text-decoration: none;
}
/* Model search form */
form.search-form {
margin: 4px 0 0 0;
/* List View - fix checkbox column width */
.list-checkbox-column {
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 {
margin: 2px 0 0 0;
#filter_form {
margin-bottom: 0;
}
form.search-form div input {
margin: 0;
/* List View Search Form - fix gap between form and table */
.actions-nav form.search-form {
margin: -1px 0 0 0;
}
/* Filters */
......@@ -40,62 +49,24 @@ table.filters {
border-spacing: 4px;
}
/* prevents gap between table and actions while there are no filters set */
table.filters:not(:empty) {
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 {
padding-right: 5px;
padding-bottom: 3px;
}
.filters 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;
}
/* match filter operation drop-down height with bootstrap input */
.filters .filter-op > a {
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-thumbnail img {
max-width: 100px;
......@@ -109,32 +80,7 @@ table.filters tr td {
margin-left: 4px;
}
/* add spacing between labels and form fields */
.admin-form .controls {
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 */
body
{
padding-top: 4px;
}
/* Form customizations */
form.icon {
/* List View - fix trash icon inside table column */
.model-list form.icon {
display: inline;
}
form.icon button {
.model-list form.icon button {
border: none;
background: transparent;
text-decoration: none;
......@@ -17,29 +11,28 @@ form.icon button {
line-height: normal;
}
/* fix delete icon color */
a.icon, button span.glyphicon {
/* List View - prevent link icons from differing from trash icon */
.model-list a.icon {
text-decoration: none;
margin-left: 10px;
color: #333;
}
/* Model search form */
form.navbar-form {
margin: 1px 0 0 0;
color: inherit;
}
form.navbar-form a.clear span {
margin-top: 8px;
margin-left: -20px;
/* List View - fix checkbox column width */
.list-checkbox-column {
width: 14px;
}
form.navbar-form div.input-append {
display: inline-flex;
/* List View - fix overlapping border between actions and table */
.model-list {
position: relative;
margin-top: -1px;
z-index: 999;
}
form.search-form div input {
margin: 0;
/* List View Search Form - fix gap between form and table */
.actions-nav form.navbar-form {
margin: 1px 0 0 0;
}
/* Filters */
......@@ -48,39 +41,19 @@ table.filters {
border-spacing: 4px;
}
/* prevents gap between table and actions while there are no filters set */
table.filters:not(:empty) {
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 {
padding-right: 5px;
padding-bottom: 3px;
}
.filters a.remove-filter {
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 - Select2 Boxes */
.filters .filter-op {
width: 130px;
}
......@@ -89,30 +62,6 @@ table.filters tr td {
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-thumbnail img {
max-width: 100px;
......@@ -120,65 +69,14 @@ table.filters tr td {
}
/* Forms */
/* required because form-horizontal removes top padding */
.admin-form {
margin-top: 35px;
}
.submit-row {
margin-top: 5px;
}
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 {
/* Form Field Description - Appears when field has 'description' attribute */
/* Test with: form_args = {'name':{'description': 'test'}} */
/* prevents awkward gap after help-block - This is default for bootstrap2 */
.admin-form .help-block {
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
}
function addFilter(name, subfilters, selectedIndex, filterValue) {
var $el = $('<tr />').appendTo($container);
var $el = $('<tr class="form-horizontal" />').appendTo($container);
// Filter list
$el.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('&nbsp;')
.append(name)
......
flask_admin/templates/bootstrap2/admin/base.html
View file @ ba4e10ce
......@@ -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-responsive.css') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='admin/css/bootstrap2/admin.css') }}" rel="stylesheet">
<style>
body {
padding-top: 4px;
}
</style>
{% endblock %}
{% block head %}
{% endblock %}
......
flask_admin/templates/bootstrap2/admin/lib.html
View file @ ba4e10ce
......@@ -158,7 +158,7 @@
{{ extra }}
{% endif %}
{% 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 %}
</div>
</div>
......
flask_admin/templates/bootstrap2/admin/model/inline_list_base.html
View file @ ba4e10ce
{% macro render_inline_fields(field, template, render, check=None) %}
<div class="inline-field">
{# existing inline form fields #}
<div class="inline-field-list">
{% 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 subfield.get_pk and subfield.get_pk() %}
<div class="inline-field-control">
<legend>
{{ 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 }}" />
<label for="del-{{ subfield.id }}" style="display: inline">{{ _gettext('Delete?') }}</label>
</div>
{% else %}
<div class="inline-field-control">
{% else %}
<a href="javascript:void(0)" class="inline-remove-field"><i class="icon-remove"></i></a>
{% endif %}
</div>
{% endif %}
</legend>
{%- endif -%}
{{ render(subfield) }}
</div>
{% endfor %}
</div>
{# template for new inline form fields #}
<div class="inline-field-template hide">
{% filter forceescape %}
<div class="inline-field">
<div class="inline-field-control">
<a href="javascript:void(0)" class="inline-remove-field"><i class="icon-remove"></i></a>
</div>
<div class="inline-field well well-small">
<legend>
New {{ field.label.text }}
<div class="pull-right">
<a href="javascript:void(0)" class="inline-remove-field"><i class="icon-remove"></i></a>
</div>
</legend>
{{ render(template) }}
</div>
{% endfilter %}
</div>
<a id="{{ field.id }}-button" href="javascript:void(0)" class="btn" onclick="faForm.addInlineField(this, '{{ field.id }}');">{{ _gettext('Add') }} {{ field.label.text }}</a>
</div>
{% endmacro %}
flask_admin/templates/bootstrap3/admin/base.html
View file @ ba4e10ce
......@@ -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-theme.min.css') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='admin/css/bootstrap3/admin.css') }}" rel="stylesheet">
<style>
body {
padding-top: 4px;
}
</style>
{% endblock %}
{% block head %}
{% endblock %}
......
flask_admin/templates/bootstrap3/admin/lib.html
View file @ ba4e10ce
......@@ -88,10 +88,10 @@
<div class="{{ kwargs.get('column_class', 'col-md-10') }}">
{% set _dummy = kwargs.setdefault('class', 'form-control') %}
{{ field(**kwargs)|safe }}
{% if field.description %}
<p class="help-block">{{ field.description }}</p>
{% endif %}
</div>
{% if field.description %}
<span class="help-block">{{ field.description }}</span>
{% endif %}
{% if direct_error %}
<ul{% if direct_error %} class="input-errors"{% endif %}>
{% for e in field.errors if e is string %}
......@@ -144,15 +144,16 @@
{% endmacro %}
{% macro render_form_buttons(cancel_url, extra=None) %}
<hr>
<div class="form-group">
<div class="col-md-offset-2 col-md-10 submit-row">
<input type="submit" class="btn btn-primary" value="{{ _gettext('Submit') }}" />
{% if extra %}
{{ extra }}
{% endif %}
{% if cancel_url %}
<a href="{{ cancel_url }}" class="btn btn-cancel" role="button">{{ _gettext('Cancel') }}</a>
{% endif %}
<input type="submit" class="btn btn-primary" value="{{ _gettext('Submit') }}" />
{% if extra %}
{{ extra }}
{% endif %}
{% if cancel_url %}
<a href="{{ cancel_url }}" class="btn btn-danger" role="button">{{ _gettext('Cancel') }}</a>
{% endif %}
</div>
</div>
{% endmacro %}
......
flask_admin/templates/bootstrap3/admin/model/edit.html
View file @ ba4e10ce
......@@ -2,7 +2,7 @@
{% import 'admin/lib.html' as lib with context %}
{% 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 %}
{% block head %}
......
flask_admin/templates/bootstrap3/admin/model/inline_list_base.html
View file @ ba4e10ce
{% macro render_inline_fields(field, template, render, check=None) %}
<div class="inline-field">
{# existing inline form fields #}
<div class="inline-field-list">
{% 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 subfield.get_pk and subfield.get_pk() %}
<div class="inline-field-control">
<input type="checkbox" name="del-{{ subfield.id }}" id="del-{{ subfield.id }}" />
<label for="del-{{ subfield.id }}" style="display: inline">{{ _gettext('Delete?') }}</label>
</div>
{% else %}
<div class="inline-field-control">
<a href="javascript:void(0)" class="inline-remove-field"><i class="glyphicon glyphicon-remove"></i></a>
</div>
{% endif %}
<legend>
<small>
{{ 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 }}" />
<label for="del-{{ subfield.id }}" style="display: inline">{{ _gettext('Delete?') }}</label>
{% else %}
<a href="javascript:void(0)" class="inline-remove-field"><i class="glyphicon glyphicon-remove"></i></a>
{% endif %}
</div>
</small>
</legend>
<div class='clearfix'></div>
{%- endif -%}
{{ render(subfield) }}
</div>
{% endfor %}
</div>
{# template for new inline form fields #}
<div class="inline-field-template hide">
{% filter forceescape %}
<div class="inline-field panel panel-info">
<div class="inline-field-control">
<a href="javascript:void(0)" class="inline-remove-field"><span class="glyphicon glyphicon-remove"></span></a>
</div>
<div class="inline-field well well-sm">
<legend>
<small>New {{ field.label.text }}</small>
<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) }}
</div>
{% endfilter %}
......
flask_admin/templates/bootstrap3/admin/model/layout.html
View file @ ba4e10ce
......@@ -16,7 +16,7 @@
<div class="pull-right">
<button type="submit" class="btn btn-primary" style="display: none">{{ _gettext('Apply') }}</button>
{% 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 %}
</div>
......@@ -25,7 +25,7 @@
<div class="clearfix"></div>
{% 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">
{% if sort_column is not none %}
<input type="hidden" name="sort" value="{{ sort_column }}">
......@@ -34,11 +34,9 @@
<input type="hidden" name="desc" value="{{ sort_desc }}">
{% endif %}
{% if search %}
<div class="input-append form-group">
<input type="text" name="search" value="{{ search }}" class="{{ input_class }} form-control" placeholder="{{ _gettext('Search') }}">
<a href="{{ clear_search_url }}" class="clear add-on">
<span class="glyphicon glyphicon-remove"></span>
</a>
<div class="input-group">
<input type="text" name="search" value="{{ search }}" class="{{ input_class }} form-control" placeholder="{{ _gettext('Search') }}">
<a href="{{ clear_search_url }}" class="input-group-addon clear"><span class="glyphicon glyphicon-remove"></span></a>
</div>
{% else %}
<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