migration from bootstrap v2.3.1 to v3.0.2

flask_admin/static/admin/css/admin.css

@@ -17,29 +17,51 @@ form.icon button {
     line-height: normal;
 }
 
-a.icon {
+a.icon, button span.glyphicon {
     text-decoration: none;
+    margin-left: 10px;
     color: black;
 }
 
 /* Model search form */
-form.search-form {
-    margin: 4px 0 0 0;
+form.navbar-form {
+    margin: 1px 0 0 0;
 }
 
-form.search-form a.clear i {
-    margin: 2px 0 0 0;
+form.navbar-form a.clear span {
+    margin-top: 8px;
+    margin-left: -20px;
+}
+
+form.navbar-form div.input-append {
+    display: inline-flex;
 }
 
 /* Filters */
+
 table.filters {
     border-collapse: none;
     border-spacing: 4px;
+    margin: 12px 0;
 }
 
-.filters input
-{
-    margin-bottom: 0;
+
+table.filters tr td {
+    padding-right: 20px;
+    padding-bottom: 3px;
+}
+
+table.flters tr td:nth-child(2){
+    width: 60%;
+}
+
+.filters input, .filters div.select2-container {
+    margin-bottom: 0px;
+    margin-left: 10px;
+}
+
+.filters div.select2-container {
+    width: 100% !important;
 }
 
 .filters a.remove-filter {
@@ -78,21 +100,23 @@ table.filters {
     float: right;
 }
 
-/* Image thumbnails */
-.image-thumbnail img {
-    max-width: 100px;
-    max-height: 100px;
+.inline-field .inline-form {
+    border-left: 1px solid #eeeeee;
+    padding-left: 8px;
+    margin-bottom: 4px;
 }
 
-/* Forms */
-.form-horizontal .control-label {
-    width: 100px;
-    text-align: left;
-    margin-left: 4px;
+.fa-inline-field-control .glyphicon-remove {
+    margin-left: -30px;
 }
 
-.form-horizontal .controls {
-    margin-left: 110px;
+.panel {
+    padding-top: 25px;
+    padding-left: 30px;
+}
+
+.fa-inline-field {
+    margin-bottom: 5px;
 }
 
 /* Inline forms */
@@ -102,7 +126,46 @@ table.filters {
     margin-bottom: 4px;
 }
 
+/* Image thumbnails */
+.image-thumbnail img {
+    max-width: 100px;
+    max-height: 100px;
+}
+
+/* Forms */
+.form-horizontal {
+    margin-top: 35px;
+}
+
 /* Patch Select2 */
 .select2-results li {
     min-height: 24px !important;
 }
+
+.select2-container.form-control {
+    height: auto !important;
+    padding: 0px;
+    border-width: 0px;
+}
+
+form .select2-choice {
+    height: 30px !important;
+}
+
+.select2-search-choice {
+    height: 24px !important;
+    margin-top: 4px !important;
+}
+
+/* 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;
+}

flask_admin/static/admin/js/filters.js

@@ -29,7 +29,7 @@ var AdminFilters = function(element, filters_element, operations, options, types
         // Filter list
         $el.append(
                 $('<td/>').append(
-                    $('<a href="#" class="btn remove-filter" />')
+                    $('<a href="#" class="btn btn-link remove-filter" />')
                         .append($('<span class="close-icon">&times;</span>'))
                         .append('&nbsp;')
                         .append(name)
@@ -69,7 +69,7 @@ var AdminFilters = function(element, filters_element, operations, options, types
             $field.select2({width: 'resolve'});
         } else
         {
-            $field = $('<input type="text" class="filter-val" />')
+            $field = $('<input type="text" class="filter-val form-control" />')
                         .attr('name', 'flt' + lastCount + '_' + optId);
             $el.append($('<td/>').append($field));
         }

flask_admin/templates/admin/layout.html

@@ -39,11 +39,11 @@
     {% if messages %}
       {% for category, m in messages %}
         {% if category %}
-        <div class="alert alert-{{ category }}">
+        <div class="alert alert-{{ category }} alert-dismissable">
         {% else %}
-        <div class="alert">
+        <div class="alert alert-dismissable">
         {% endif %}
-          <a href="javascript:void(0)" class="close" data-dismiss="alert">x</a>
+	  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
           {{ m }}
         </div>
       {% endfor %}

flask_admin/templates/admin/model/edit.html

@@ -3,7 +3,7 @@
 {% import 'admin/static.html' as admin_static with context %}
 
 {% macro extra() %}
-  <input name="_continue_editing" type="submit" class="btn btn-large" value="{{ _gettext('Save and Continue') }}" />
+  <input name="_continue_editing" type="submit" class="btn" value="{{ _gettext('Save and Continue') }}" />
 {% endmacro %}
 
 {% block head %}

flask_admin/templates/admin/model/inline_list_base.html

@@ -2,7 +2,7 @@
 <div class="inline-field">
     <div id="{{ field.id }}-fields">
         {% for subfield in field %}
-        <div id="{{ subfield.id }}" class="fa-inline-field">
+        <div id="{{ subfield.id }}" class="fa-inline-field well">
             {%- if not check or check(subfield) %}
             <div class="fa-inline-field-control">
                 <input type="checkbox" name="del-{{ subfield.id }}" id="del-{{ subfield.id }}" />
@@ -16,14 +16,14 @@
     </div>
     <div id="{{ field.id }}-template" class="hide">
         {% filter forceescape %}
-        <div class="fa-inline-field">
+        <div class="fa-inline-field panel panel-info">
             <div class="fa-inline-field-control">
-                <a href="javascript:void(0)" class="fa-remove-field"><i class="icon-remove"></i></a>
+                <a href="javascript:void(0)" class="fa-remove-field"><span class="glyphicon glyphicon-remove"></span></a>
             </div>
             {{ render(template) }}
         </div>
         {% endfilter %}
     </div>
-    <a id="{{ field.id }}-button" href="javascript:void(0)" class="btn" onclick="faForm.addInlineField('{{ field.id }}', '#{{ field.id }}-fields', '#{{ field.id }}-template');">{{ _gettext('Add') }} {{ field.label.text }}</a>
+    <a id="{{ field.id }}-button" href="javascript:void(0)" class="btn btn-default col-xs-offset-10" onclick="faForm.addInlineField('{{ field.id }}', '#{{ field.id }}-fields', '#{{ field.id }}-template');">{{ _gettext('Add') }} {{ field.label.text }}</a>
 </div>
 {% endmacro %}