vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-16 21:50:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

use consistent sizing for drag preview

Browse Source
This commit is contained in:
jeffvli
2025-11-28 19:29:00 -08:00
parent 4fc036f4ea
commit 503dfd6a55
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/drag-preview/drag-preview.module.css
+2 -2
View File
@@ -10,8 +10,8 @@
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 200px; width: 300px;
max-width: 300px; min-height: 80px;
padding: var(--theme-spacing-md); padding: var(--theme-spacing-md);
color: var(--theme-colors-foreground); color: var(--theme-colors-foreground);
background: var(--theme-colors-background); background: var(--theme-colors-background);
src/shared/components/drag-preview/drag-preview.tsx
+4 -4
View File
@@ -44,12 +44,12 @@ export const DragPreview = memo(({ data }: DragPreviewProps) => {
<div className={styles.preview}> <div className={styles.preview}>
<div className={styles.content}> <div className={styles.content}>
{itemImage ? ( {itemImage ? (
<div className={styles.imageContainer}> <div className={styles['image-container']}>
<img alt={itemName} className={styles.image} src={itemImage} /> <img alt={itemName} className={styles.image} src={itemImage} />
<div className={styles.imageOverlay} /> <div className={styles['image-overlay']} />
</div> </div>
) : ( ) : (
<div className={styles.iconContainer}> <div className={styles['icon-container']}>
{data.itemType === LibraryItem.ALBUM && <Icon icon="album" size="xl" />} {data.itemType === LibraryItem.ALBUM && <Icon icon="album" size="xl" />}
{data.itemType === LibraryItem.SONG && ( {data.itemType === LibraryItem.SONG && (
<Icon icon="itemSong" size="xl" /> <Icon icon="itemSong" size="xl" />
@@ -64,7 +64,7 @@ export const DragPreview = memo(({ data }: DragPreviewProps) => {
{!data.itemType && <Icon icon="library" size="xl" />} {!data.itemType && <Icon icon="library" size="xl" />}
</div> </div>
)} )}
<div className={styles.textContainer}> <div className={styles['text-container']}>
<div className={styles.name}>{itemName}</div> <div className={styles.name}>{itemName}</div>
{isMultiple && <div className={styles.count}>+{itemCount - 1} more</div>} {isMultiple && <div className={styles.count}>+{itemCount - 1} more</div>}
</div> </div>