css: Truncate long descriptions

In the index, if the descriptions are too long, it can make the table
quite awkward to read.

This patch makes them truncate automatically.
This commit is contained in:
Alberto Bertogli 2023-09-14 23:01:51 +01:00
parent 39cff29f4b
commit 722247c2be
2 changed files with 11 additions and 1 deletions

@ -159,6 +159,15 @@ table.projects td.name a {
}
/* Truncate long descriptions based on the viewport width. */
table.projects td.desc {
max-width: 50vw;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* Age of an object.
* Note this is hidden by default as we rely on javascript to show it. */
span.age {

@ -20,7 +20,8 @@
% for repo in sorted(repos.values(), key = lambda r: r.name):
<tr>
<td class="name"><a href="r/{{repo.name}}/">{{repo.name}}</a></td>
<td class="desc"><a href="r/{{repo.name}}/">{{repo.info.desc}}</a></td>
<td class="desc"><a href="r/{{repo.name}}/" title="{{repo.info.desc}}">
{{repo.info.desc}}</a></td>
<td><span class="age">{{repo.last_commit_timestamp()}}</span></td>
</tr>
%end