Fix overflown colors hidden

oursky · May 27, 2024 · 632e64c · 632e64c
2 parents 6b5efde + 7dda611
commit 632e64c
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 57 deletions.
diff --git a/public/scripts/upload.js b/public/scripts/upload.js
@@ -365,6 +365,13 @@ function updateFileListItem(itemNode, imageUpload) {
   }
 }
 
+function handleColorPickersTooltip() {
+  tippy("[data-tippy-content]", {
+    placement: "bottom-end",
+    theme: "light-border",
+  });
+}
+
 function main() {
   const htmlNode = document.querySelector("html");
   const uploadSection = document.querySelector("#above-file-uploaded");
@@ -378,6 +385,8 @@ function main() {
     ".generating-modal-dialog__cancel-btn",
   );
 
+  handleColorPickersTooltip();
+
   const fileListViewModel = new FileListViewModel(MAX_FILE_SIZE_BYTE);
   const viewModel = new RootViewModel(MAX_MOCKUP_WAIT_SEC, fileListViewModel);
 

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -39,6 +39,10 @@ const social_icon = "/Images/mockuphone-logo.png";
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
     />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/tippy.js@6/themes/light-border.css"
+    />
 
     <script type="text/javascript" src="/scripts/jquery/jquery-1.10.2.min.js"
     ></script>
@@ -56,6 +60,9 @@ const social_icon = "/Images/mockuphone-logo.png";
       defer
       data-domain="mockuphone.com"
       src="https://plausible.io/js/plausible.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/@popperjs/core@2"
+    ></script>
+    <script type="text/javascript" src="https://unpkg.com/tippy.js@6"></script>
     <script type="text/javascript" src="/scripts/main.js"></script>
     <!-- ${ self.javascript() } -->
 

diff --git a/src/pages/model/[model]/color/[color].astro b/src/pages/model/[model]/color/[color].astro
@@ -147,25 +147,26 @@ if (deviceDetail == null) {
         <div class="color-section">
           <h3 class="color-section__heading">COLOR</h3>
           <p class="color-section__description">{deviceDetail.color.name}</p>
-          <ul class="color-picker">
-            {
-              sameModelDevices.map((d) => (
-                <li class="color-picker-item-container">
-                  <a
-                    href={`/model/${targetModel}/color/${d.color.id}`}
-                    style={{ backgroundColor: d.color.hexcode }}
-                    class={`color-picker-item ${
-                      d.color.id === targetColor
-                        ? "color-picker-item--selected"
-                        : ""
-                    }`}
-                  >
-                    <div class="color-picker-item__tooltip">{d.color.name}</div>
-                  </a>
-                </li>
-              ))
-            }
-          </ul>
+          <div class="color-picker-scrollable">
+            <ul class="color-picker">
+              {
+                sameModelDevices.map((d) => (
+                  <li class="color-picker-item-container">
+                    <a
+                      href={`/model/${targetModel}/color/${d.color.id}`}
+                      style={{ backgroundColor: d.color.hexcode }}
+                      class={`color-picker-item ${
+                        d.color.id === targetColor
+                          ? "color-picker-item--selected"
+                          : ""
+                      }`}
+                      data-tippy-content={d.color.name}
+                    />
+                  </li>
+                ))
+              }
+            </ul>
+          </div>
         </div>
         <button disabled class="generate-btn">Generate product mockups</button>
         <button style="display:none" class="start-mockup-btn"

diff --git a/src/styles/upload.css b/src/styles/upload.css
@@ -387,16 +387,24 @@ main {
   background-image: url("/Images/droplet.svg");
 }
 
+.color-picker-scrollable {
+  margin: 0 0 8px 0;
+  overflow: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 .color-picker {
   list-style: none;
   display: flex;
-  padding: 0;
+  padding: 12px 0;
   align-items: center;
-  margin: 12px 0 20px 0;
+  margin: 0;
+  justify-content: center;
+  width: max-content;
 }
 
 .color-picker-item {
-  position: relative;
   width: 30px;
   height: 30px;
   border: 3px white solid;
@@ -417,14 +425,7 @@ main {
 }
 
 .color-picker-item--selected {
-  width: 30px;
-  height: 30px;
   border: 3px #0043e0 solid;
-  display: inline-block;
-  border-radius: 9999px;
-  box-sizing: content-box;
-  background-clip: content-box;
-  padding: 3px;
 }
 
 .color-picker-item-container {
@@ -437,34 +438,6 @@ main {
   margin-left: 18px;
 }
 
-.color-picker-item .color-picker-item__tooltip {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.3s;
-
-  background-color: white;
-
-  padding: 4px 8px;
-  border-radius: 4px;
-  border: 1px #e7e7e7 solid;
-
-  color: black;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 18.5px;
-  text-align: center;
-  text-wrap: nowrap;
-
-  position: absolute;
-  z-index: 1;
-  top: 45px;
-  left: 30px;
-}
-.color-picker-item:hover .color-picker-item__tooltip {
-  visibility: visible;
-  opacity: 1;
-}
-
 .generate-btn {
   margin: 20px 0 0 0;
   padding: 8px 50px;