mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 12:30:12 +02:00
handle title combined column on compact sizing
This commit is contained in:
+6
-2
@@ -9,10 +9,14 @@
|
||||
.text-container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 2px;
|
||||
gap: var(--theme-spacing-xs);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.text-container.compact {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -23,7 +27,7 @@
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.875rem;
|
||||
font-size: var(--theme-font-size-xs) !important;
|
||||
color: var(--theme-colors-foreground-muted);
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
|
||||
+13
-5
@@ -1,3 +1,4 @@
|
||||
import clsx from 'clsx';
|
||||
import { CSSProperties, useMemo } from 'react';
|
||||
import { generatePath, Link } from 'react-router';
|
||||
|
||||
@@ -46,13 +47,13 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
|
||||
|
||||
return (
|
||||
<TableColumnContainer
|
||||
className={styles['title-combined']}
|
||||
className={styles.titleCombined}
|
||||
containerStyle={{ '--row-height': `${rowHeight}px` } as CSSProperties}
|
||||
{...props}
|
||||
>
|
||||
<Image containerClassName={styles.image} src={row.imageUrl as string} />
|
||||
<div className={styles['text-container']}>
|
||||
<Text className={styles.title} isNoSelect {...titleLinkProps}>
|
||||
<div className={styles.textContainer}>
|
||||
<Text className={styles.title} isNoSelect size="md" {...titleLinkProps}>
|
||||
{row.name as string}
|
||||
</Text>
|
||||
<div className={styles.artists}>
|
||||
@@ -63,6 +64,7 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
|
||||
isLink
|
||||
isMuted
|
||||
isNoSelect
|
||||
size="sm"
|
||||
state={{ item: artist }}
|
||||
to={artist.path}
|
||||
>
|
||||
@@ -122,15 +124,20 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
|
||||
|
||||
return (
|
||||
<TableColumnContainer
|
||||
className={styles['title-combined']}
|
||||
className={styles.titleCombined}
|
||||
containerStyle={{ '--row-height': `${rowHeight}px` } as CSSProperties}
|
||||
{...props}
|
||||
>
|
||||
<Image containerClassName={styles.image} src={row.imageUrl as string} />
|
||||
<div className={styles['text-container']}>
|
||||
<div
|
||||
className={clsx(styles.textContainer, {
|
||||
[styles.compact]: props.size === 'compact',
|
||||
})}
|
||||
>
|
||||
<Text
|
||||
className={styles.title}
|
||||
isNoSelect
|
||||
size="md"
|
||||
{...titleLinkProps}
|
||||
style={textStyles}
|
||||
>
|
||||
@@ -144,6 +151,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
|
||||
isLink
|
||||
isMuted
|
||||
isNoSelect
|
||||
size="sm"
|
||||
state={{ item: artist }}
|
||||
to={artist.path}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user