improve dataset detail visualization

NINAnor · Oct 22, 2024 · bbd1128 · bbd1128
1 parent 9e56ea5
commit bbd1128
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 7 deletions.
diff --git a/metadata_catalogue/templates/datasets/dataset_detail.html b/metadata_catalogue/templates/datasets/dataset_detail.html
@@ -3,19 +3,38 @@
 {% load render_table from django_tables2 %}
 
 {% block article %}
-  <div>
+  <div class="dataset-metadata">
     <div class="flex my-5 justify-between items-center">
       <h1 class="font-bold text-4xl">{{ dataset.metadata.title }}</h1>
       <div class="flex">
         <a href="{% url 'dataset-list' %}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Back</a>
       </div>
     </div>
-    <div>
-      <b>Publish date:</b> <em>{{ dataset.metadata.date_publication|date:"d/m/Y" }}</em>
+    <div class="dataset-metadata-section">
+      <b>Publication date:</b> <em>{{ dataset.metadata.date_publication|date:"d/m/Y" }}</em>
+    </div>
+    <div class="dataset-metadata-section">
+      <h2>Abstract</h2>
+      <div class="free-text">{{ dataset.metadata.abstract  }}</div>
+    </div>
+    <div class="dataset-metadata-section">
+      <h2>People involved</h2>
+      {% render_table people_table %}
+    </div>
+    <div class="dataset-metadata-section">
+      <h2>Geographic Coverage</h2>
+      <div class="free-text">{{ dataset.metadata.geographic_description }}</div>
+      <div class="dataset-metadata-section-values">
+        <div>Bounding coordinates</div>
+        <div>{{ dataset.metadata.bounding_box.coords }}</div>
+      </div>
+    </div>
+    <div class="dataset-metadata-section">
+      <h2>Temporal Coverage</h2>
+      <div class="dataset-metadata-section-values">
+        <div>Formation period</div>
+        <div>{{ dataset.metadata.formation_period_start|date:'Y' }}-{{ dataset.metadata.formation_period_end|date:'Y' }}</div>
+      </div>
     </div>
-    <h2 class="font-bold text-3xl mt-5">Abstract</h2>
-    <div class="prose lg:prose-lg max-w-full">{{ dataset.metadata.abstract  }}</div>
-    <h2 class="font-bold text-3xl mt-5">People involved</h2>
-    {% render_table people_table %}
   </div>
 {% endblock article %}
diff --git a/metadata_catalogue/theme/static_src/src/styles.css b/metadata_catalogue/theme/static_src/src/styles.css
@@ -22,3 +22,27 @@
 .pagination>li.active a {
     @apply btn-active;
 }
+
+.dataset-metadata .dataset-metadata-section {
+    @apply mb-20;
+}
+
+.dataset-metadata .dataset-metadata-section>h2 {
+    @apply font-bold text-3xl;
+}
+
+.dataset-metadata .dataset-metadata-section .free-text {
+    @apply prose lg:prose-lg max-w-full;
+}
+
+.dataset-metadata-section-values {
+    @apply grid grid-cols-4 my-3;
+}
+
+.dataset-metadata-section-values *:first-child {
+    @apply font-bold;
+}
+
+.dataset-metadata-section-values *:nth-child(2) {
+    @apply col-span-3;
+}