Moved short URL status to the last column in the table

This commit is contained in:
Alejandro Celaya 2022-12-19 19:40:04 +01:00
parent d1a1b7426e
commit f8bcaed3ad
3 changed files with 9 additions and 11 deletions

View file

@ -65,7 +65,6 @@ export const ShortUrlsTable = (ShortUrlsRow: ShortUrlsRowType) => ({
<th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
Created at {renderOrderIcon?.('dateCreated')}
</th>
<th className="short-urls-table__header-cell" />
<th className={orderableColumnsClasses} onClick={orderByColumn?.('shortCode')}>
Short URL {renderOrderIcon?.('shortCode')}
</th>
@ -82,7 +81,7 @@ export const ShortUrlsTable = (ShortUrlsRow: ShortUrlsRowType) => ({
<th className={orderableColumnsClasses} onClick={orderByColumn?.('visits')}>
<span className="indivisible">Visits {renderOrderIcon?.('visits')}</span>
</th>
<th className="short-urls-table__header-cell">&nbsp;</th>
<th className="short-urls-table__header-cell" colSpan={2} />
</tr>
</thead>
<tbody>

View file

@ -15,7 +15,7 @@ interface ShortUrlStatusProps {
interface StatusResult {
icon: IconDefinition;
className: string;
description?: ReactNode;
description: ReactNode;
}
const resolveShortUrlStatus = (shortUrl: ShortUrl): StatusResult => {
@ -65,6 +65,7 @@ const resolveShortUrlStatus = (shortUrl: ShortUrl): StatusResult => {
return {
icon: faCheck,
className: 'text-primary',
description: 'This short URL can be visited normally.',
};
};
@ -81,11 +82,9 @@ export const ShortUrlStatus: FC<ShortUrlStatusProps> = ({ shortUrl }) => {
>
<FontAwesomeIcon icon={icon} />
</span>
{description && (
<UncontrolledTooltip target={(() => tooltipRef.current) as any} placement="right">
<UncontrolledTooltip target={(() => tooltipRef.current) as any} placement="bottom">
{description}
</UncontrolledTooltip>
)}
</>
);
};

View file

@ -37,9 +37,6 @@ export const ShortUrlsRow = (
<td className="indivisible short-urls-row__cell responsive-table__cell" data-th="Created at">
<Time date={shortUrl.dateCreated} />
</td>
<td className="responsive-table__cell short-urls-row__cell" data-th="Status">
<ShortUrlStatus shortUrl={shortUrl} />
</td>
<td className="responsive-table__cell short-urls-row__cell" data-th="Short URL">
<span className="position-relative short-urls-row__cell--indivisible">
<span className="short-urls-row__short-url-wrapper">
@ -73,6 +70,9 @@ export const ShortUrlsRow = (
active={active}
/>
</td>
<td className="responsive-table__cell short-urls-row__cell" data-th="Status">
<ShortUrlStatus shortUrl={shortUrl} />
</td>
<td className="responsive-table__cell short-urls-row__cell">
<ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} />
</td>