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.

1 files changed, 59 insertions, 2 deletions

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;