forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-14 11:33:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added responsiveness to manage domains table

Browse Source
This commit is contained in:
Alejandro Celaya
2021-08-22 10:46:47 +02:00
parent d88f822125
commit b1d6f58619
8 changed files with 64 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/short-urls/ShortUrlsTable.scss
View File

@@ -1,11 +1,3 @@
@import '../utils/base';
.short-urls-table__header {
@media (max-width: $responsiveTableBreakpoint) {
display: none;
}
}
.short-urls-table__header-cell--with-action {
cursor: pointer;
}

2
src/short-urls/ShortUrlsTable.tsx
View File

@@ -60,7 +60,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
return (
<table className={tableClasses}>
<thead className="short-urls-table__header">
<thead className="responsive-table__header short-urls-table__header">
<tr>
<th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
Created at

31
src/short-urls/helpers/ShortUrlsRow.scss
View File

@@ -1,39 +1,8 @@
@import '../../utils/base';
@import '../../utils/mixins/vertical-align';
.short-urls-row {
@media (max-width: $responsiveTableBreakpoint) {
display: block;
margin-bottom: 10px;
border-bottom: 1px solid var(--border-color);
position: relative;
}
}
.short-urls-row__cell.short-urls-row__cell {
vertical-align: middle !important;
@media (max-width: $responsiveTableBreakpoint) {
display: block;
width: 100%;
position: relative;
padding: .5rem;
font-size: .9rem;
&:before {
content: attr(data-th);
font-weight: 700;
}
&:last-child {
position: absolute;
top: 3.5px;
right: .5rem;
width: auto;
padding: 0;
border: none;
}
}
}
.short-urls-row__cell--break {

16
src/short-urls/helpers/ShortUrlsRow.tsx
View File

@@ -51,11 +51,11 @@ const ShortUrlsRow = (
}, [ shortUrl.visitsCount ]);
return (
<tr className="short-urls-row">
<td className="indivisible short-urls-row__cell" data-th="Created at: ">
<tr className="responsive-table__row">
<td className="indivisible short-urls-row__cell responsive-table__cell" data-th="Created at">
<Time date={shortUrl.dateCreated} />
</td>
<td className="short-urls-row__cell" data-th="Short URL: ">
<td className="responsive-table__cell short-urls-row__cell" data-th="Short URL">
<span className="indivisible short-urls-row__cell--relative">
<ExternalLink href={shortUrl.shortUrl} />
<CopyToClipboardIcon text={shortUrl.shortUrl} onCopy={setCopiedToClipboard} />
@@ -64,16 +64,16 @@ const ShortUrlsRow = (
</span>
</span>
</td>
<td className="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 && (
<td className="short-urls-row__cell short-urls-row__cell--break d-lg-none" data-th="Long URL: ">
<td className="short-urls-row__cell responsive-table__cell short-urls-row__cell--break d-lg-none" data-th="Long URL">
<ExternalLink href={shortUrl.longUrl} />
</td>
)}
<td className="short-urls-row__cell" data-th="Tags: ">{renderTags(shortUrl.tags)}</td>
<td className="short-urls-row__cell text-md-right" data-th="Visits: ">
<td className="responsive-table__cell short-urls-row__cell" data-th="Tags">{renderTags(shortUrl.tags)}</td>
<td className="responsive-table__cell short-urls-row__cell text-lg-right" data-th="Visits">
<ShortUrlVisitsCount
visitsCount={shortUrl.visitsCount}
shortUrl={shortUrl}
@@ -81,7 +81,7 @@ const ShortUrlsRow = (
active={active}
/>
</td>
<td className="short-urls-row__cell">
<td className="responsive-table__cell short-urls-row__cell">
<ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} />
</td>
</tr>