Layout sample and some template modifications

examples/layout/simple.py

@@ -41,6 +41,9 @@ class CustomView(ModelView):
     create_template = 'create.html'
     edit_template = 'edit.html'
 
+    column_searchable_list = ('name',)
+    column_filters = ('name',)
+
 
 # Flask views
 @app.route('/')
@@ -61,4 +64,4 @@ if __name__ == '__main__':
 
     # Start app
     app.debug = True
-    app.run('0.0.0.0', 8000)
+    app.run('0.0.0.0', 8001)

examples/layout/static/layout.css

-.btn-title {
+body {
+	background: #EEE;
+}
+
+#content {
+	background: white;
+	border: 1px solid #CCC;
+	padding: 12px;
+}
+
+#brand {
+	float: left;
+	font-weight: 300;
+	margin: 0;
+}
+
+.search-form {
+	margin: 0 5px;
+}
+
+.search-form form {
+	margin: 0;
+}
+
+.btn-menu {
+    margin: 4px 5px 0 0;
     float: right;
+}
+
+.btn-menu a, .btn-menu input {
+	padding: 7px 16px !important;
+	border-radius: 0 !important;
+}
+
+.model-list {
+	border-radius: 0;
+}
+
+.form-buttons a, .form-buttons input, .form-buttons button {
+	border-radius: 0;
+}
+
+.nav-pills li > a {
+	border-radius: 0;
 }
\ No newline at end of file

examples/layout/templates/create.html

-{% extends 'admin/model/create.html' %}
+{% extends 'admin/model/create.html' %}
\ No newline at end of file
+
+{% block brand %}
+    <h2 id="brand">Create {{ admin_view.name|capitalize }}</h2>
+    <div class="clearfix"></div>
+    <hr>
+{% endblock %}
+
+{% block body %}
+  {% call lib.form_tag() %}
+      {{ lib.render_form_fields(form, widget_args=form_widget_args) }}
+      <div class="form-buttons">
+        {{ lib.render_form_buttons(return_url, extra()) }}
+      </div>
+  {% endcall %}
+{% endblock %}

examples/layout/templates/edit.html

-{% extends 'admin/model/edit.html' %}
+{% extends 'admin/model/edit.html' %}
\ No newline at end of file
+
+{% block brand %}
+    <h2 id="brand">Edit {{ admin_view.name|capitalize }}</h2>
+    <div class="clearfix"></div>
+    <hr>
+{% endblock %}
+
+{% block body %}
+  {% call lib.form_tag() %}
+      {{ lib.render_form_fields(form, widget_args=form_widget_args) }}
+      <div class="form-buttons">
+        {{ lib.render_form_buttons(return_url) }}
+      </div>
+  {% endcall %}
+{% endblock %}

examples/layout/templates/layout.html

@@ -16,9 +16,14 @@
       </ul>
     </div>
     <div class="span10">
-      {% block brand %}<h1>{{ admin_view.name|capitalize }}</h1>{% endblock %}
-      {{ layout.messages() }}
-      {% block body %}{% endblock %}
+      <div id="content">
+        {% block brand %}
+          <h2 id="brand">{{ admin_view.name|capitalize }}</h2>
+          <div class="clearfix"></div>
+        {% endblock %}
+        {{ layout.messages() }}
+        {% block body %}{% endblock %}
+      </div>
     </div>
   </div>
 </div>

examples/layout/templates/list.html

@@ -2,106 +2,33 @@
 {% import 'admin/model/layout.html' as model_layout with context %}
 
 {% block brand %}
-    <h1 style="float: left">{{ admin_view.name|capitalize }} model</h1>
+    <h2 id="brand">{{ admin_view.name|capitalize }} list</h2>
     {% if admin_view.can_create %}
-    <a href="{{ url_for('.create_view', url=return_url) }}" class="btn btn-primary btn-title">{{ _gettext('Create') }}</a>
+    <div class="btn-menu">
+        <a href="{{ url_for('.create_view', url=return_url) }}" class="btn btn-primary pull-right">{{ _gettext('Create') }}</a>
+    </div>
     {% endif %}
 
     {% if filter_groups %}
-        {{ model_layout.filter_options() }}
+    <div class="btn-group btn-menu">
+        {{ model_layout.filter_options(btn_class='btn dropdown-toggle btn-title') }}
+    </div>
     {% endif %}
 
     {% if actions %}
-    <div class="btn-group btn-title">
-        {{ actionlib.dropdown(actions) }}
+    <div class="btn-group btn-menu">
+        {{ actionlib.dropdown(actions, btn_class='btn dropdown-toggle btn-title') }}
     </div>
     {% endif %}
 
     {% if search_supported %}
-        {{ model_layout.search_form() }}
+    <div class="search-form btn-menu">
+        {{ model_layout.search_form(input_class='span2 btn-title') }}
+    </div>
     {% endif %}
     <div class="clearfix"></div>
     <hr>
 {% endblock %}
 
-{% block body %}
-    {% if filter_groups %}
-        {{ model_layout.filter_form() }}
+{% block model_menu_bar %}
+{% endblock %}
\ No newline at end of file
-    {% endif %}
-
-    <table class="table table-striped table-bordered model-list">
-        <thead>
-            <tr>
-                {% block list_header scoped %}
-                    {% if actions %}
-                    <th class="span1">
-                        <input type="checkbox" name="rowtoggle" class="action-rowtoggle" />
-                    </th>
-                    {% endif %}
-                    <th class="span1">&nbsp;</th>
-                    {% set column = 0 %}
-                    {% for c, name in list_columns %}
-                    <th>
-                        {% if admin_view.is_sortable(c) %}
-                            {% if sort_column == column %}
-                                <a href="{{ sort_url(column, True) }}">
-                                    {{ name }}
-                                    {% if sort_desc %}
-                                        <i class="icon-chevron-up"></i>
-                                    {% else %}
-                                        <i class="icon-chevron-down"></i>
-                                    {% endif %}
-                                </a>
-                            {% else %}
-                                <a href="{{ sort_url(column) }}">{{ name }}</a>
-                            {% endif %}
-                        {% else %}
-                            {{ name }}
-                        {% endif %}
-                        {% if admin_view.column_descriptions.get(c) %}
-                            <a class="icon-question-sign"
-                               title="{{ admin_view.column_descriptions[c] }}"
-                               href="#" data-role="tooltip"
-                            ></a>
-                        {% endif %}
-                    </th>
-                    {% set column = column + 1 %}
-                    {% endfor %}
-                {% endblock %}
-            </tr>
-        </thead>
-        {% for row in data %}
-        <tr>
-            {% block list_row scoped %}
-                {% if actions %}
-                <td>
-                    <input type="checkbox" name="rowid" class="action-checkbox" value="{{ get_pk_value(row) }}" />
-                </td>
-                {% endif %}
-                <td>
-                    {% block list_row_actions scoped %}
-                        {%- if admin_view.can_edit -%}
-                        <a class="icon" href="{{ url_for('.edit_view', id=get_pk_value(row), url=return_url) }}">
-                            <i class="icon-pencil"></i>
-                        </a>
-                        {%- endif -%}
-                        {%- if admin_view.can_delete -%}
-                        <form class="icon" method="POST" action="{{ url_for('.delete_view', id=get_pk_value(row), url=return_url) }}">
-                            <button onclick="return confirm('{{ _gettext('You sure you want to delete this item?') }}');">
-                                <i class="icon-remove"></i>
-                            </button>
-                        </form>
-                        {%- endif -%}
-                    {% endblock %}
-                </td>
-                {% for c, name in list_columns %}
-                <td>{{ get_value(row, c) }}</td>
-                {% endfor %}
-            {% endblock %}
-        </tr>
-        {% endfor %}
-    </table>
-    {{ lib.pager(page, num_pages, pager_url) }}
-
-    {{ actionlib.form(actions, url_for('.action_view')) }}
-{% endblock %}

flask_admin/templates/admin/actions.html

 {% macro dropdown(actions, btn_class='dropdown-toggle') -%}
-    <a class="{{ btn_class }}" data-toggle="dropdown" href="#">
-        {{ _gettext('With selected') }}<b class="caret"></b>
-    </a>
+    <a class="{{ btn_class }}" data-toggle="dropdown" href="#">{{ _gettext('With selected') }}<b class="caret"></b></a>
     <ul class="dropdown-menu">
         {% for p in actions %}
         <li>

flask_admin/templates/admin/model/create.html

 {% extends 'admin/master.html' %}
 {% import 'admin/lib.html' as lib with context %}
 
+{% macro extra() %}
+  <input name="_add_another" type="submit" class="btn btn-large" value="{{ _gettext('Save and Add') }}" />
+{% endmacro %}
+
 {% block head %}
     <link href="{{ url_for('admin.static', filename='select2/select2.css') }}" rel="stylesheet">
     <link href="{{ url_for('admin.static', filename='css/datepicker.css') }}" rel="stylesheet">
@@ -16,10 +20,6 @@
       </li>
 	</ul>
 
-  {% macro extra() %}
-    <input name="_add_another" type="submit" class="btn btn-large" value="{{ _gettext('Save and Add') }}" />
-  {% endmacro %}
-
   {% call lib.form_tag() %}
       {{ lib.render_form_fields(form, widget_args=form_widget_args) }}
       {{ lib.render_form_buttons(return_url, extra()) }}

flask_admin/templates/admin/model/layout.html

-{% macro filter_options() %}
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+{% macro filter_options(btn_class='dropdown-toggle') %}
+    <a class="{{ btn_class }}" data-toggle="dropdown" href="#">
         {{ _gettext('Add Filter') }}<b class="caret"></b>
     </a>
     <ul class="dropdown-menu field-filters">
@@ -47,7 +47,7 @@
     </form>
 {% endmacro %}
 
-{% macro search_form() %}
+{% macro search_form(input_class="search-query span2") %}
 <form method="GET" action="{{ return_url }}" class="search-form">
     {% if sort_column is not none %}
     <input type="hidden" name="sort" value="{{ sort_column }}"></input>
@@ -55,11 +55,13 @@
     {% if sort_desc %}
     <input type="hidden" name="desc" value="{{ sort_desc }}"></input>
     {% endif %}
-    <input type="text" name="search" value="{{ search or '' }}" class="search-query span2" placeholder="{{ _gettext('Search') }}"></input>
-    {% if search %}
-        <a href="{{ clear_search_url }}" class="clear">
-            <i class="icon-remove"></i>
-        </a>
-    {% endif %}
+    <div class="input-append">
+        <input type="text" name="search" value="{{ search or '' }}" class="{{ input_class }}" placeholder="{{ _gettext('Search') }}"></input>
+        {% if search %}
+            <a href="{{ clear_search_url }}" class="clear add-on">
+                <i class="icon-remove"></i>
+            </a>
+        {% endif %}
+    </div>
 </form>
 {% endmacro %}

flask_admin/templates/admin/model/list.html

@@ -4,6 +4,7 @@
 {% import 'admin/actions.html' as actionlib with context %}
 
 {% block head %}
+    {{ super() }}
     <link href="{{ url_for('admin.static', filename='select2/select2.css') }}" rel="stylesheet">
     <link href="{{ url_for('admin.static', filename='css/datepicker.css') }}" rel="stylesheet">
 {% endblock %}
@@ -44,6 +45,7 @@
         {{ model_layout.filter_form() }}
     {% endif %}
 
+    {% block model_list_table %}
     <table class="table table-striped table-bordered model-list">
         <thead>
             <tr>
@@ -117,6 +119,7 @@
         {% endfor %}
     </table>
     {{ lib.pager(page, num_pages, pager_url) }}
+    {% endblock %}
 
     {{ actionlib.form(actions, url_for('.action_view')) }}
 {% endblock %}