From 4dd0fa87859e6ffa1b230eedd1388098a8ba81a1 Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Thu, 17 Oct 2024 12:40:50 +0800
Subject: feat: set "sticky" as one of default layouts

* move function addDraggable() into module scope
* showcase in sticky layout is draggable now
* add query paramerter for "use"
* FIX: set initialLayout after observer is set
---
 src/css/dumbymap.css | 56 ++++++++++++++++++++++++++++++++--------------------
 1 file changed, 35 insertions(+), 21 deletions(-)

(limited to 'src/css')

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index c0bb1a9..cc161fa 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -141,7 +141,7 @@ root {
   background-repeat: no-repeat;
   background-position: right 2px top 2px;
 
-  color: #555;
+  color: #555 !important;
   background-size: 12px 12px;
 
   &.geolink {
@@ -166,7 +166,7 @@ root {
   }
 }
 
-.Dumby:not([data-layout=""]) .dumby-block {
+.DumbyMap.Dumby[data-layout] .dumby-block {
   padding: 1rem 1rem 1rem 2rem;
 
   position: relative;
@@ -495,7 +495,7 @@ root {
   }
 }
 
-.Dumby[data-layout='normal'] {
+.DumbyMap.Dumby[data-layout='normal'] {
   max-width: 60em;
 
   &::after {
@@ -595,6 +595,35 @@ root {
   }
 }
 
+.Dumby[data-layout='sticky'] {
+  .SemanticHtml {
+    max-width: 60em;
+    margin: 0 auto;
+  }
+
+  .draggable-block {
+    position: fixed;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .Showcase {
+    display: block;
+    overflow: hidden;
+    width: 20vw;
+    min-width: 10vw;
+    height: 200px;
+    min-height: 100px;
+    resize: both;
+
+    .mapclay {
+      border-radius: 4px !important;
+    }
+  }
+}
+
 .utils {
   display: flex;
   padding-block: 1rem;
@@ -642,6 +671,7 @@ root {
 .draggable-block {
   overflow: visible;
   width: fit-content;
+  height: fit-content;
 
   position: absolute;
 
@@ -659,7 +689,7 @@ root {
   opacity: 0;
   pointer-events: auto;
 
-  &:has(.dumby-block.focus) {
+  &:has(.dumby-block.focus, .mapclay.focus) {
     visibility: visible;
     opacity: 1;
   }
@@ -730,7 +760,7 @@ root {
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 1;
+    z-index: 2;
     border-top-left-radius: 0.3rem;
     border-top-right-radius: 0.3rem;
   }
@@ -782,22 +812,6 @@ root {
   font-weight: bold;
 }
 
-.Dumby[data-layout='sticky'] {
-  max-width: 80em;
-
-  .Showcase {
-    display: block;
-    width: 20vw;
-    height: 40vh;
-
-    position: absolute;
-    right: 20px;
-    bottom: 20px;
-
-    background: red;
-  }
-}
-
 .dumby-block details {
   display: block;
   width: fit-content;
-- 
cgit v1.2.3-70-g09d2