Implement example notes handling in Diaper Change list

babybuddy/static_src/scss/global.scss

@@ -69,3 +69,26 @@
         color: theme-color('light') !important;
     }
 }
+
+// Basic table of model instances.
+.table-instances {
+    tr {
+        td, th {
+            vertical-align: middle;
+        }
+
+        &.odd {
+            background: $table-accent-bg;
+        }
+        &.even {
+            background: none;
+        }
+        &.row-details {
+            td {
+                color: $gray-500;
+                padding-top: 0;
+                border-top: 0;
+            }
+        }
+    }
+}

core/templates/core/diaperchange_list.html

@@ -18,7 +18,7 @@
     </h1>
     {% include 'babybuddy/filter.html' %}
     <div class="table-responsive">
-        <table class="table table-striped table-hover">
+        <table class="table table-instances">
             <thead class="thead-inverse">
                 <tr>
                     <th>{% trans "Child" %}</th>
@@ -32,7 +32,8 @@
             </thead>
             <tbody>
                 {% for change in object_list %}
-                    <tr>
+                    {% cycle "odd" "even" as row_class silent %}
+                    <tr class="{{ row_class }}">
                         <th scope="row"><a href="{% url 'core:child' change.child.slug %}">{{ change.child }}</a></th>
                         <td class="text-center">{{ change.wet|bool_icon }}</td>
                         <td class="text-center">{{ change.solid|bool_icon }}</td>
@@ -57,6 +58,11 @@
                             </div>
                         </td>
                     </tr>
+                    {% if change.notes %}
+                        <tr class="{{ row_class }} row-details">
+                            <td colspan="7"><i class="icon icon-note mr-2" aria-hidden="true"></i>{{ change.notes }}</td>
+                        </tr>
+                    {% endif %}
                 {% empty %}
                     <tr>
                         <th colspan="6">{% trans "No diaper changes found." %}</th>

static/babybuddy/css/app.css

@@ -7621,6 +7621,20 @@ a.text-error:hover, a.text-error:focus {
   .ptr--ptr .ptr--text, .ptr--ptr .ptr--icon {
     color: #f8f9fa !important; }
 
+.table-instances tr td, .table-instances tr th {
+  vertical-align: middle; }
+
+.table-instances tr.odd {
+  background: rgba(34, 111, 151, 0.1); }
+
+.table-instances tr.even {
+  background: none; }
+
+.table-instances tr.row-details td {
+  color: #adb5bd;
+  padding-top: 0;
+  border-top: 0; }
+
 /*!
  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)