Let's try without the big drag button, extend beyond the column a touch

This commit is contained in:
Jason Zimdars
2025-01-24 14:54:10 -06:00
parent 3e7fbbd401
commit 7e97f1b672
2 changed files with 4 additions and 6 deletions
+2
View File
@@ -402,8 +402,10 @@
--border-size: 2px;
--divider-color: var(--color-subtle-dark);
block-size: calc(100% + 4ch);
font-size: 1rem;
cursor: grab;
margin-inline: -1rem;
visibility: hidden;
}
+2 -6
View File
@@ -1,12 +1,8 @@
<li class="bubbles-list__divider flex align-center gap-half full-width" draggable="true" data-divider-target="divider">
<li class="bubbles-list__divider flex align-center gap-half" draggable="true" data-divider-target="divider">
<div class="divider-drag-image" data-divider-target="dragImage">Drag up or down</div>
<button class="bubbles-list__handle btn btn--reversed">
<%= image_tag "drag.svg", aria: { hidden: true }, size: 16 %>
<span class="for-screen-reader">Drag to change number of bubbles shown above</span>
</button>
<hr class="separator--horizontal flex-item-grow">
<strong class="bubbles-list__count border-radius">
Top <span data-divider-target="count">10</span>
Bubble up <span data-divider-target="count">10</span>
</strong>
<hr class="separator--horizontal flex-item-grow">
<span></span>