Use cards in place of document table.

sourcing/templates/home.html

@@ -5,26 +5,31 @@
 {% block content %}
   <h1>{{ self.title() }}</h1>
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>item</th>
-      <th>type</th>
-      <th>user</th>
-      <th>date</th>
-    </tr>
-  </thead>
-  <tbody>
+<div class="container-fluid">
+<div class="row">
+  <div class="col-md-2">
+    item type<br>
+    {% for item_type in 'xanadoc', 'xanalink', 'sourcedoc' %}
+      <input type="checkbox" checked="checked" id="{{ item_type }}" value="{{ item_type }}"> <label for="{{ item_type }}"> {{ item_type }}</label><br>
+    {% endfor %}
+  </div>
+  <div class="col-md-10">
 {% for doc in docs %}
-  <tr>
-    <td><a href="{{ doc.url }}">{{ doc.title() }}</a></td>
-    <td>{{ doc.type }}</td>
-    <td>{{ doc.user.username }}</td>
-    <td>{{ doc.created | datetime }}</td>
-  </tr>
+    <div class="card border-primary w-50 my-2">
+      <h5 class="card-header"><a href="{{ doc.url }}">{{ doc.title() }}</a>
+        &mdash; {{ doc.user.username }} &mdash; {{ doc.created | datetime }}</h5>
+      <div class="card-body">
+        <p class="card-text">
+        {%- for line in doc.snippet().splitlines() -%}
+        {{ nbsp_at_start(line) }}<br/>
+        {%- endfor -%}
+        </p>
+      </div>
+    </div>
 {% endfor %}
-  </tbody>
-</table>
+</div>
+</div>
+</div>
 
 <p>
 <a href="{{ url_for('.new_sourcedoc') }}" class="btn btn-primary">new source document</a>