From f2c3e05955bec324b7e2a011fdde3894aa53ebd5 Mon Sep 17 00:00:00 2001
From: Guilhem Moulin <guilhem@fripost.org>
Date: Tue, 27 May 2025 12:27:16 +0200
Subject: info-modal: Fetch source copyright and mtime remotely from
 metadata.json.

Source URL and copyright information are now defined tools' config.yml.
This change exposes MVT creation time as well as source mtime to the
info modal.

See 052536f62d2e58f6b9b142e035c49cb033458d7f in tools for the generation
logic behind metadata.json.
---
 style.css | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 59 insertions(+), 2 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 273c213..cb675a3 100644
--- a/style.css
+++ b/style.css
@@ -278,9 +278,60 @@ body.inprogress {
   -webkit-user-select: text;
   -moz-user-select: text;
   user-select: text;
+  --modal-info-padding-x: .5rem;
+  --modal-info-bg-light: rgba(0, 0, 0, .08);
 }
-#modal-info .modal-body ul > li {
-  padding: 0.05rem 0;
+#modal-info .list-group-item,
+#modal-info {
+  --bs-list-group-border-width: 1px;
+}
+#modal-info .accordion {
+  --bs-accordion-active-bg: var(--bs-accordion-bg);
+  --bs-accordion-active-color: var(--bs-body-color);
+  --bs-accordion-btn-padding-x: .5rem;
+  --bs-accordion-btn-padding-y: .025rem;
+  --bs-accordion-btn-focus-box-shadow: none;
+  --bs-accordion-body-padding-x: var(--modal-info-padding-x);
+  --bs-accordion-body-padding-y: 0;
+  --bs-accordion-btn-active-bg: var(--modal-info-bg-light);
+  margin: 0 calc(var(--bs-accordion-btn-padding-x)*-1);
+}
+#modal-info .accordion-item {
+  border: none;
+}
+#modal-info .accordion-header > .accordion-button[aria-expanded="false"]:hover {
+  background-color: rgb(from var(--modal-info-bg-light) r g b / calc(alpha*.4));
+}
+#modal-info .accordion-header > .accordion-button[aria-expanded="true"] {
+  background-color: var(--bs-accordion-btn-active-bg);
+}
+#modal-info ul.list-group > li.list-group-item {
+  padding: .3rem var(--modal-info-padding-x);
+  margin: 0 calc(var(--modal-info-padding-x)*-1);
+  border: none;
+}
+#modal-info ul.list-group > li.list-group-item:not(:first-child) {
+  border-top: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
+}
+#info-body > ul.list-group > li.list-group-item:last-child,
+#info-accordion > .accordion-item:not(:last-child) ul.list-group > li.list-group-item:last-child {
+  border-bottom: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
+}
+#modal-info .modal-body ul.list-group > li.list-group-item:not(.text-muted):hover {
+  background-color: rgb(from var(--modal-info-bg-light) r g b / calc(alpha*.4));
+}
+#info-body {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+#info-body > ul.list-group > li.list-group-item p,
+#modal-info .accordion-body ul.list-group > li.list-group-item p {
+  margin: .05rem 0 0 0;
+}
+#info-body > ul.list-group > li.list-group-item h6,
+#modal-info .accordion-body ul.list-group > li.list-group-item h6 {
+  margin: .05rem 0 0 0;
+  font-size: 1.15rem
 }
 #modal-info .modal-body a {
   color: inherit;
@@ -290,6 +341,12 @@ body.inprogress {
   opacity: .8;
   text-decoration: underline;
 }
+#modal-info .modal-body .info-credits {
+  margin: 0 calc(var(--modal-info-padding-x)*-1);
+  padding: .3rem var(--modal-info-padding-x);
+  margin-top: .3rem;
+  border-top: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
+}
 
 .ol-overlaycontainer-stopevent .modal-backdrop.show {
   pointer-events: auto;
-- 
cgit v1.2.3