diff --git a/uhepp-js/src/common.scss b/uhepp-js/src/common.scss index bad23f48848500ffd53b458bd52effaaa20182ea..6f137aa7905d3daedc8f752cb3a9ef7eaeb88e2b 100644 --- a/uhepp-js/src/common.scss +++ b/uhepp-js/src/common.scss @@ -170,5 +170,17 @@ body { .img-preview { width: 128px; - height: auto; + height: 128px; + object-fit: contain; +} + +.collection-plot-item { + @extend .rounded; + display: flex; + align-items: center; + border: 1px solid rgba(0, 0, 0, 0); + &:hover { + @extend .bg-light; + border-color: #dee2e6; + } } diff --git a/uhepp_org/uhepp_vault/templates/uhepp_vault/collection_detail.html b/uhepp_org/uhepp_vault/templates/uhepp_vault/collection_detail.html index ee4347b25c65d35132ec265a5623e9fb76cc0980..aa34cea743c88a8e8d2c408fa9f2075c3eebb2dd 100644 --- a/uhepp_org/uhepp_vault/templates/uhepp_vault/collection_detail.html +++ b/uhepp_org/uhepp_vault/templates/uhepp_vault/collection_detail.html @@ -99,20 +99,16 @@ uhepp push {{ collection.pk }} local_file.json {% if collection.plots.all.count %} <div class="d-flex flex-wrap"> {% for plot in collection.plots.all %} - <div class="col-4 col-md-3 p-2"> - <div class="card"> - <img src="{% url 'uhepp_vault:plot-preview' plot.uuid %}" alt="{{ plot }}" class="card-img-top img-preview mx-auto" /> - <div class="card-body"> - <p class="card-title"> - <a class="stretched-link" href="{% url 'uhepp_vault:plot-detail' plot.uuid %}">{{ plot }}</a> - </p> - </div> - <div class="card-footer"> - <small title="{{ plot.uploaded|date:"Y-m-d H:m" }}" class="text-muted"> +<div class="collection-plot-item col-12 col-lg-6 p-2"> + <img src="{% url 'uhepp_vault:plot-preview' plot.uuid %}" alt="{{ plot }}" class="img-preview mr-3" /> + <div class="media-body"> + <h5 class="mt-0"> + <a class="stretched-link" href="{% url 'uhepp_vault:plot-detail' plot.uuid %}">{{ plot }}</a> + </h5> + <small title="{{ plot.uploaded|date:"Y-m-d H:m" }}" class="text-muted"> {{ plot.uploaded|naturaltime }}</small> - </div> - </div> - </div> + </div> +</div> {% endfor %} </div>