Fixed broken short URLs table when creating short URL with too long slug

This commit is contained in:
Alejandro Celaya 2022-11-25 18:34:21 +01:00
parent e368e618f3
commit b79dced185
5 changed files with 40 additions and 13 deletions

View file

@ -3,7 +3,8 @@
@import './utils/base';
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import './common/react-tag-autocomplete.scss';
@import 'utils/theme/theme';
@import './utils/theme/theme';
@import './utils/mixins/text-ellipsis';
@import './utils/table/ResponsiveTable';
@import './utils/StickyCardPaginator';
@ -222,9 +223,7 @@ hr {
}
.text-ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@include text-ellipsis();
}
.progress-bar {

View file

@ -1,4 +1,5 @@
@import '../../utils/base';
@import '../../utils/mixins/text-ellipsis';
@import '../../utils/mixins/vertical-align';
.short-urls-row__cell.short-urls-row__cell {
@ -13,6 +14,26 @@
position: relative;
}
.short-urls-row__cell--indivisible {
@media (min-width: $lgMin) {
white-space: nowrap;
}
}
.short-urls-row__short-url-wrapper {
@media (max-width: $mdMax) {
word-break: break-all;
}
@media (min-width: $lgMin) {
@include text-ellipsis();
vertical-align: bottom;
display: inline-block;
max-width: 18rem;
}
}
.short-urls-row__copy-hint {
@include vertical-align(translateX(10px));

View file

@ -43,11 +43,8 @@ export const ShortUrlsRow = (
};
useEffect(() => {
if (isFirstRun.current) {
!isFirstRun.current && setActive();
isFirstRun.current = false;
} else {
setActive();
}
}, [shortUrl.visitsCount]);
return (
@ -56,15 +53,20 @@ export const ShortUrlsRow = (
<Time date={shortUrl.dateCreated} />
</td>
<td className="responsive-table__cell short-urls-row__cell" data-th="Short URL">
<span className="indivisible short-urls-row__cell--relative">
<span className="short-urls-row__cell--relative short-urls-row__cell--indivisible">
<span className="short-urls-row__short-url-wrapper">
<ExternalLink href={shortUrl.shortUrl} />
</span>
<CopyToClipboardIcon text={shortUrl.shortUrl} onCopy={setCopiedToClipboard} />
<span className="badge bg-warning text-black short-urls-row__copy-hint" hidden={!copiedToClipboard}>
Copied short URL!
</span>
</span>
</td>
<td className="responsive-table__cell short-urls-row__cell short-urls-row__cell--break" data-th={`${shortUrl.title ? 'Title' : 'Long URL'}`}>
<td
className="responsive-table__cell short-urls-row__cell short-urls-row__cell--break"
data-th={`${shortUrl.title ? 'Title' : 'Long URL'}`}
>
<ExternalLink href={shortUrl.longUrl}>{shortUrl.title ?? shortUrl.longUrl}</ExternalLink>
</td>
{shortUrl.title && (

View file

@ -27,7 +27,7 @@ export const useTimeoutToggle = (
return [flag, callback];
};
type ToggleResult = [ boolean, () => void, () => void, () => void ];
type ToggleResult = [boolean, () => void, () => void, () => void];
export const useToggle = (initialValue = false): ToggleResult => {
const [flag, setFlag] = useState<boolean>(initialValue);

View file

@ -0,0 +1,5 @@
@mixin text-ellipsis() {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}