Separate color picker as 2 components

oursky · May 27, 2024 · 7dda611 · 7dda611
1 parent 29346a6
commit 7dda611
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 23 deletions.
diff --git a/src/pages/model/[model]/color/[color].astro b/src/pages/model/[model]/color/[color].astro
@@ -147,24 +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"
-                        : ""
-                    }`}
-                    data-tippy-content={d.color.name}
-                  />
-                </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,17 +387,21 @@ 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: 12px 0;
   align-items: center;
-  margin: 0 0 8px 0;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+  margin: 0;
   justify-content: center;
+  width: max-content;
 }
 
 .color-picker-item {