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
This commit is contained in:
Peter Desmet 2023-04-26 13:12:57 +02:00
parent 4500389c84
commit 15fae36df9
2 changed files with 6 additions and 1 deletions

View File

@ -50,13 +50,14 @@ For more information on `UseWithIRI`, see [Section 2.5 of the RDF Guide](https:/
<span id="{{ term.label }}"></span> <span id="{{ term.label }}"></span>
{% endif %} {% endif %}
</p> </p>
{% set examples = term.examples.split("; ") %}
<table class="table"> <table class="table">
<tbody> <tbody>
<tr class="table-secondary"><th colspan="2">{{ term.label }}</th></tr> <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>Identifier</td><td><a href="{{ term.iri }}">{{ term.iri }}</a></td></tr>
<tr><td>Definition</td><td>{{ term.definition }}</td></tr> <tr><td>Definition</td><td>{{ term.definition }}</td></tr>
<tr><td>Comments</td><td>{{ term.comments }}</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> </tbody>
</table> </table>
{% endfor %} {% endfor %}

View File

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