Convert crud detail to bootstrap

static/styles/app.scss

@@ -1,5 +1,4 @@
 
-//@import "bootstrap";
 @import "bootstrap/variables.scss";
 @import "header";
 
@@ -36,11 +35,50 @@
   padding: 0px;
 }
 
-// TODO: ajust all the hx sizes from drunken parrot
-h1,
-.h1 {
+// ADJUST DRUNKEN PARROT STYLES ########################################
+h1, .h1 {
   font-size: 30px;
 }
+h2, .h2 {
+  font-size: 24px;
+}
+h3, .h3 {
+  font-size: 20px;
+}
+h4, .h4 {
+  font-size: 16px;
+}
+h5, .h5 {
+  font-size: 14px;
+}
+h6, .h6 {
+  font-size: 12px;
+}
+
 .page-header {
     margin: 20px 0px 10px;
 }
+
+// #### CRUD DETAIL ########################################
+p.control-label {
+  font-weight: bold;
+}
+
+// copied from bootstrap _forms.scss legend
+// using @extend would require importing parts of bootstrap again and overriding drunken parrot css
+//   @import "bootstrap/mixins.scss";
+//   @import "bootstrap/forms.scss";
+
+.legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: $line-height-computed;
+  font-size: ($font-size-base * 1.5);
+  line-height: inherit;
+  color: $legend-color;
+  border: 0;
+  border-bottom: 1px solid $legend-border-color;
+}
+
+

templates/crud/detail.html

@@ -11,27 +11,26 @@
         <dd><a href="{{ view.delete_url }}" class="button alert">{% trans 'Excluir' %}</a></dd>
       </dl>
     {% endblock actions %}
-
   </div>
 
   {% block detail_content %}
     {# TODO replace fieldset for something semantically correct, but with similar visual grouping style #}
     {% for fieldset in view.fieldsets %}
-    <fieldset>
-      <legend>{{ fieldset.legend }}</legend>
-      {% for row in fieldset.rows %}
-      <div class="row">
-          {% for column in row %}
-          <div class="columns large-{{ column.span }}">
-              <div id="div_id_{{ column.id }}" class="holder">
-                  <label>{{ column.verbose_name }}</label> {# TODO replace labels, probably (are they correct here?) #}
-                  <p>{{ column.text }}</p>
-              </div>
+    <h2 class="legend">{{ fieldset.legend }}</h2>
+    {% for row in fieldset.rows %}
+    <div class="row-fluid">
+      {% for column in row %}
+      <div class="col-sm-{{ column.span }}">
+        <div id="div_id_{{ column.id }}" class="form-group">
+          <p class="control-label">{{ column.verbose_name }}</p>
+          <div class="controls">
+            <p class="form-control-static">{{ column.text }}</p>
           </div>
-          {% endfor %}
+        </div>
       </div>
       {% endfor %}
-    </fieldset>
+    </div>
+    {% endfor %}
     {% endfor %}
   {% endblock detail_content %}