mirror of
https://github.com/nimbold/Firelink.git
synced 2026-08-31 13:08:17 +00:00
style(ui): center align download list columns for better spacing
This commit is contained in:
@@ -187,7 +187,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
|
|||||||
|
|
||||||
<div className="download-cell-right">
|
<div className="download-cell-right">
|
||||||
<span
|
<span
|
||||||
className="truncate group-hover:hidden tabular-nums ml-auto"
|
className="truncate group-hover:hidden tabular-nums"
|
||||||
title={download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'}
|
title={download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'}
|
||||||
>
|
>
|
||||||
{download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'}
|
{download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'}
|
||||||
|
|||||||
@@ -454,7 +454,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
|||||||
className={`${index === 5 ? 'download-cell-right' : ''} ${filter.startsWith('queue:') ? 'opacity-70 cursor-default' : 'cursor-pointer hover:text-text-primary transition-colors'} flex items-center justify-between`}
|
className={`${index === 5 ? 'download-cell-right' : ''} ${filter.startsWith('queue:') ? 'opacity-70 cursor-default' : 'cursor-pointer hover:text-text-primary transition-colors'} flex items-center justify-between`}
|
||||||
onClick={() => handleSort(label)}
|
onClick={() => handleSort(label)}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-1 w-full h-full select-none">
|
<div className={`flex items-center gap-1 w-full h-full select-none ${index > 0 ? 'justify-center' : ''}`}>
|
||||||
<span>{label}</span>
|
<span>{label}</span>
|
||||||
{sortConfig?.column === label && (
|
{sortConfig?.column === label && (
|
||||||
sortConfig.direction === 'asc' ? <ChevronUp size={14} /> : <ChevronDown size={14} />
|
sortConfig.direction === 'asc' ? <ChevronUp size={14} /> : <ChevronDown size={14} />
|
||||||
|
|||||||
+5
-3
@@ -1562,6 +1562,7 @@ html[data-list-density="relaxed"] .download-ghost-row {
|
|||||||
.download-cell-truncate {
|
.download-cell-truncate {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -1581,9 +1582,9 @@ html[data-list-density="relaxed"] .download-ghost-row {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.download-cell-right {
|
.download-cell-right {
|
||||||
text-align: right;
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -1613,6 +1614,7 @@ html[data-list-density="relaxed"] .download-ghost-row {
|
|||||||
.download-status-cell {
|
.download-status-cell {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -1621,7 +1623,7 @@ html[data-list-density="relaxed"] .download-ghost-row {
|
|||||||
.download-status-cell > span {
|
.download-status-cell > span {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
flex: 0 0 72px;
|
flex: 0 0 auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|||||||
Reference in New Issue
Block a user