From 9fc4374b96129ee81592990eb3a4011db24c7151 Mon Sep 17 00:00:00 2001
From: Frank Sauerburger <frank@sauerburger.com>
Date: Thu, 7 Oct 2021 18:25:05 +0200
Subject: [PATCH] Update collection detail template
---
uhepp-js/src/common.scss | 14 +++++++++++-
.../uhepp_vault/collection_detail.html | 22 ++++++++-----------
2 files changed, 22 insertions(+), 14 deletions(-)
diff --git a/uhepp-js/src/common.scss b/uhepp-js/src/common.scss
index bad23f4..6f137aa 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 ee4347b..aa34cea 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>
--
GitLab