mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/domains/DomainRow.tsx
View file

@ -36,15 +36,19 @@ export const DomainRow: FC<DomainRowProps> = ({ domain, editDomainRedirects, def
const domainId = `domainEdit${authority.replace('.', '')}`;
return (
<tr>
<td>{isDefault ? <DefaultDomain /> : ''}</td>
<th>{authority}</th>
<td>{redirects?.baseUrlRedirect ?? <Nr fallback={defaultRedirects?.baseUrlRedirect} />}</td>
<td>{redirects?.regular404Redirect ?? <Nr fallback={defaultRedirects?.regular404Redirect} />}</td>
<td>
<tr className="responsive-table__row">
<td className="responsive-table__cell" data-th="Is default domain">{isDefault ? <DefaultDomain /> : ''}</td>
<th className="responsive-table__cell" data-th="Domain">{authority}</th>
<td className="responsive-table__cell" data-th="Base path redirect">
{redirects?.baseUrlRedirect ?? <Nr fallback={defaultRedirects?.baseUrlRedirect} />}
</td>
<td className="responsive-table__cell" data-th="Regular 404 redirect">
{redirects?.regular404Redirect ?? <Nr fallback={defaultRedirects?.regular404Redirect} />}
</td>
<td className="responsive-table__cell" data-th="Invalid short URL redirect">
{redirects?.invalidShortUrlRedirect ?? <Nr fallback={defaultRedirects?.invalidShortUrlRedirect} />}
</td>
<td className="text-right">
<td className="responsive-table__cell text-right">
<span id={domainId}>
<Button outline size="sm" disabled={isDefault} onClick={isDefault ? undefined : toggle}>
<FontAwesomeIcon icon={isDefault ? forbiddenIcon : editIcon} />

2
src/domains/ManageDomains.tsx
View file

@ -43,7 +43,7 @@ export const ManageDomains: FC<ManageDomainsProps> = (
return (
<SimpleCard>
<table className="table table-hover mb-0">
<thead>
<thead className="responsive-table__header">
<tr>{headers.map((column, index) => <th key={index}>{column}</th>)}</tr>
</thead>
<tbody>

1
src/index.scss
View file

@ -4,6 +4,7 @@
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import './common/react-tag-autocomplete.scss';
@import './theme/theme';
@import './utils/table/ResponsiveTable';
* {
outline: none !important;

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>

42
src/utils/table/ResponsiveTable.scss Normal file
View file

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