Rename #modal-info to #info-modal for consistency.

3 files changed, 23 insertions, 23 deletions

diff --git a/index.html b/index.html
index 6fced1d..96410ba 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
       <div id="map-menu"></div>
     </div>
     <div id="popup"></div>
-    <div class="modal" id="modal-info" tabindex="-1" aria-hidden="true">
+    <div class="modal" id="info-modal" tabindex="-1" aria-hidden="true">
       <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
         <div class="modal-content">
           <div class="modal-header">
diff --git a/main.js b/main.js
index 693dd99..333a1d3 100644
--- a/main.js
+++ b/main.js
@@ -187,11 +187,11 @@ const container = document.getElementById('map-control-container');
   const container0 = map.getViewport().getElementsByClassName('ol-overlaycontainer-stopevent')[0];
   container0.appendChild(document.getElementById('zoom-control'));
   container0.appendChild(container);
-  container0.appendChild(document.getElementById('modal-info'));
+  container0.appendChild(document.getElementById('info-modal'));
 
-  const backdrop = document.createElement('div');
-  container0.appendChild(backdrop);
-  backdrop.id = 'modal-info-backdrop';
+  const info_backdrop = document.createElement('div');
+  container0.appendChild(info_backdrop);
+  info_backdrop.id = 'info-modal-backdrop';
 })();
 
 /* zoom in/out */
@@ -457,12 +457,12 @@ if (window.location === window.parent.location) {
   btn.appendChild(i);
   i.classList.add('bi', 'bi-info-lg');
 
-  const panel = document.getElementById('modal-info');
+  const panel = document.getElementById('info-modal');
   const modal = new Modal(panel, {
     backdrop: false,
   });
 
-  const backdrop = document.getElementById('modal-info-backdrop');
+  const backdrop = document.getElementById('info-modal-backdrop');
   backdrop.onclick = function(event) {
     modal.hide();
   };
diff --git a/style.css b/style.css
index f979bd0..21ebfdd 100644
--- a/style.css
+++ b/style.css
@@ -288,7 +288,7 @@ body.inprogress {
     --bs-btn-padding-y: 0.4rem;
   }
 }
-#modal-info {
+#info-modal {
   /* close the modal when clicking the backdrop */
   pointer-events: none;
   -webkit-user-select: text;
@@ -299,11 +299,11 @@ body.inprogress {
   --modal-info-padding-y: .5rem;
   --modal-info-bg-light: rgba(0, 0, 0, .08);
 }
-#modal-info .modal-header {
+#info-modal .modal-header {
   padding: var(--modal-info-padding-y) var(--modal-info-padding-x);
 }
-#modal-info .list-group-item,
-#modal-info {
+#info-modal .list-group-item,
+#info-modal {
   --bs-list-group-border-width: 1px;
 }
 #info-accordion {
@@ -317,20 +317,20 @@ body.inprogress {
   --bs-accordion-btn-active-bg: var(--modal-info-bg-light);
   padding: 0 var(--modal-info-padding-x);
 }
-#modal-info .accordion-item {
+#info-modal .accordion-item {
   border: none;
 }
-#modal-info .accordion-header > .accordion-button[aria-expanded="false"]:hover {
+#info-modal .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"] {
+#info-modal .accordion-header > .accordion-button[aria-expanded="true"] {
   background-color: var(--bs-accordion-btn-active-bg);
 }
-#modal-info ul.list-group > li.list-group-item {
+#info-modal ul.list-group > li.list-group-item {
   padding: .3rem 0;
   border: none;
 }
-#modal-info ul.list-group > li.list-group-item:last-child {
+#info-modal ul.list-group > li.list-group-item:last-child {
   padding-bottom: var(--modal-info-padding-y);
 }
 #info-body > ul.list-group {
@@ -338,36 +338,36 @@ body.inprogress {
   border-top: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
   padding: 0 var(--modal-info-padding-x);
 }
-#modal-info ul.list-group > li.list-group-item:not(:first-child) {
+#info-modal 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-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 {
+#info-modal .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: var(--modal-info-padding-y) 0;
 }
 #info-body > ul.list-group > li.list-group-item p,
-#modal-info .accordion-body ul.list-group > li.list-group-item p {
+#info-modal .accordion-body ul.list-group > li.list-group-item p {
   margin: 0;
 }
 #info-body > ul.list-group > li.list-group-item h6,
-#modal-info .accordion-body ul.list-group > li.list-group-item h6 {
+#info-modal .accordion-body ul.list-group > li.list-group-item h6 {
   margin: .05rem 0 .15rem 0;
   font-size: 1.15rem;
 }
-#modal-info .modal-body a {
+#info-modal .modal-body a {
   color: inherit;
   text-decoration: none;
 }
-#modal-info .modal-body a:hover {
+#info-modal .modal-body a:hover {
   opacity: .8;
   text-decoration: underline;
 }
-#modal-info .modal-body .info-credits {
+#info-modal .modal-body .info-credits {
   border-top: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
   padding: var(--modal-info-padding-y) var(--modal-info-padding-x) 0 var(--modal-info-padding-x);
   margin: 0;