merged correctly

Author: davidsklar99

pages/dev/test-site/explore/+Page.client.ts

@@ -140,7 +140,7 @@ function FeatureDetails() {
     }, [bounds]);
   }
 
-  if (result == null) return h(Spinner);
+  if (result == null) return h("div.checkin-container",Spinner);
   result = result.success.data;
   console.log("result:",result)
 
@@ -240,7 +240,6 @@ function WeaverMap({
   const style = useMapStyle(type, mapboxToken);
 
   const [featuredCheckins, setFeaturedCheckin] = useState(h(Spinner));
-
   // overlay
   const [isOpenSelected, setOpenSelected] = useState(true);
 
@@ -292,7 +291,6 @@ function WeaverMap({
     ]);
   }
 
-
   if(style == null) return null;
 
   return h(
@@ -302,7 +300,6 @@ function WeaverMap({
       h(
         MapAreaContainer,
         {
-          detailPanel: detailElement,
           contextPanelOpen: isOpen,
         },
         [
@@ -328,15 +325,15 @@ function getSelectedCheckins(result) {
 
   // Selected checkin
   if (result == null) {
-    return h(Spinner);
+    return null;
   } else {
     result = result.success.data;
     checkins = createCheckins(result, mapRef, false);
 
     if (checkins.length > 0) {
       return h("div", {className: 'checkin-container'}, checkins);
     } else {
-      return h('h1', { className: 'no-checkins' }, "No Checkin(s) Selected");
+      return null;
     }
   }
 }

pages/dev/test-site/explore/main.styl

@@ -133,8 +133,63 @@ h3,h4,p
   border-radius: 4px;
   width 100%
 
-.no-checkins
-  color black
+.sidebox
+  position absolute
+  z-index 1000
+  height 100vh
+  width 30%
+  top 0
+  left 0
+  background rgba(255, 255, 255, 0.8)
+
+  .title
+    color black
+    position fixed
+    width 30%
+    background rgba(255, 255, 255, 0.85)
+    margin 0
+    height 10vh
+    display flex
+    flex-direction column
+    align-items center
+    justify-content center
+
+    h1
+      margin-bottom 0
+      margin-top 0
+
+.close-btn
+  position absolute
+  top 10px
+  right 10px
+  background-color #333
+  color white
+  border none
+  border-radius 50%
+  width 30px
+  height 30px
+  display flex
+  justify-content center
+  align-items center
+  font-size 15px
+  cursor pointer
+  box-shadow 0 4px 8px rgba(0, 0, 0, 0.2)
+  transition background-color 0.3s, box-shadow 0.3s
+
+.close-btn:hover
+  background-color #555
+  box-shadow 0 6px 12px rgba(0, 0, 0, 0.3)
+
+.marker
+  height 7vh
+  display grid
+  margin auto
+  margin-right 10px
+
+.details-image
+  width 40px
+  margin-left 10px
+  margin-top 4px
 
 .checkin-footer
   display flex
@@ -216,4 +271,4 @@ h3,h4,p
 
 .close-btn:hover
   background-color #555
-  box-shadow 0 6px 12px rgba(0, 0, 0, 0.3)
+  box-shadow 0 6px 12px rgba(0, 0, 0, 0.3)