Split examples in terms.tmpl, style as list-group if more than one

In CSS, make the list group flush (on the left/right) with other elements in the table

Author: peterdesmet

build/terms.tmpl

@@ -50,13 +50,14 @@ For more information on `UseWithIRI`, see [Section 2.5 of the RDF Guide](https:/
   <span id="{{ term.label }}"></span>
   {% endif %}
 </p>
+{% set examples = term.examples.split("; ") %}
 <table class="table">
   <tbody>
     <tr class="table-secondary"><th colspan="2">{{ term.label }}</th></tr>
     <tr><td>Identifier</td><td><a href="{{ term.iri }}">{{ term.iri }}</a></td></tr>
     <tr><td>Definition</td><td>{{ term.definition }}</td></tr>
     <tr><td>Comments</td><td>{{ term.comments }}</td></tr>
-    <tr><td>Examples</td><td>{{ term.examples }}</td></tr>
+    <tr><td>Examples</td><td>{% if examples | length == 1 %}{{ examples | first }}{% else %}<ul class="list-group list-group-flush">{% for example in examples %}<li class="list-group-item">{{ example }}</li>{% endfor %}</ul>{% endif %}</td></tr>
   </tbody>
 </table>
 {% endfor %}

docs/_sass/_custom.scss

@@ -5,5 +5,9 @@
     td:first-of-type {
       width: 120px; // Label column, long words will still push this wider
     }
+
+    .list-group-item {
+      padding: 0.5rem 0; // Examples
+    }
   }
 }