Merge branch 'master' of papi.tkpups.com:tmiller/pokemon

src/assets/css/main.scss

@@ -1,16 +1,6 @@
-@import "_bootstrap";
-
 /* --------------------------------------------------
-   Root Variables
+   Bootstrap overrides
 -------------------------------------------------- */
-:root {
-  --total: 11;     /* Number of items in the energy wheel */
-  --radius: 40px;  /* Circle radius */
-}
-
-html {
-  scroll-behavior: smooth;
-}
 
 $grid-breakpoints: (
   xs: 0,
@@ -31,6 +21,22 @@ $container-max-widths: (
   xxxl: 1840px
 ) !default;
 
+
+@import "_bootstrap";
+
+/* --------------------------------------------------
+   Root Variables
+-------------------------------------------------- */
+:root {
+  --total: 11;     /* Number of items in the energy wheel */
+  --radius: 40px;  /* Circle radius */
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+
 /* --------------------------------------------------
    Layout
 -------------------------------------------------- */

src/assets/js/main.js

@@ -4,6 +4,7 @@ window.bootstrap = bootstrap;
 
 // trap browser back and close the modal if open
 const cardModal = document.getElementById('cardModal');
+const loadingMsg = cardModal.innerHTML;
 // Push a new history state when the modal is shown
 cardModal.addEventListener('shown.bs.modal', () => {
   history.pushState({ modalOpen: true }, null, '#cardModal');
@@ -19,6 +20,7 @@ window.addEventListener('popstate', (e) => {
 });
 // Trigger a back navigation when the modal is closed via its native controls (X, backdrop click)
 cardModal.addEventListener('hide.bs.modal', () => {
+  cardModal.innerHTML = loadingMsg;
   if (history.state && history.state.modalOpen) {
     history.back();
   }

src/components/CardGrid.astro

@@ -23,6 +23,7 @@ import BackToTop from "./BackToTop.astro"
 <div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true" transition:name="">
     <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
         <div class="modal-content">
+            Loading...
         </div>
     </div>
 </div>