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

Fixed responsive table headers

Browse source
This commit is contained in:
Alejandro Celaya 2022-03-07 09:09:30 +01:00
parent 3ecad0161b
commit 3f48ca401d
5 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/domains/ManageDomains.tsx
View file

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

2
src/servers/ManageServers.tsx
View file

@ -58,7 +58,7 @@ export const ManageServers = (
</Row>
<SimpleCard>
<table className="table table-hover mb-0">
<table className="table table-hover responsive-table mb-0">
<thead className="responsive-table__header">
<tr>
{hasAutoConnect && <th style={{ width: '50px' }} />}

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

@ -28,7 +28,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
const { error, loading, shortUrls } = shortUrlsList;
const actionableFieldClasses = classNames({ 'short-urls-table__header-cell--with-action': !!orderByColumn });
const orderableColumnsClasses = classNames('short-urls-table__header-cell', actionableFieldClasses);
const tableClasses = classNames('table table-hover', className);
const tableClasses = classNames('table table-hover responsive-table', className);
const supportsTitle = supportsShortUrlTitle(selectedServer);
const renderShortUrls = () => {

2
src/tags/TagsTable.tsx
View file

@ -38,7 +38,7 @@ export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => (
return (
<SimpleCard key={page} bodyClassName={showPaginator ? 'pb-1' : ''}>
<table className="table table-hover mb-0">
<table className="table table-hover responsive-table mb-0">
<thead className="responsive-table__header">
<tr>
<th className="tags-table__header-cell" onClick={orderByColumn('tag')}>

14
src/utils/table/ResponsiveTable.scss
View file

@ -6,11 +6,18 @@
}
}
.responsive-table.table > :not(:first-child) {
@media (max-width: $responsiveTableBreakpoint) {
border: none;
}
}
.responsive-table__row {
@media (max-width: $responsiveTableBreakpoint) {
display: block;
margin-bottom: 10px;
border-bottom: 1px solid var(--border-color);
border-top: 2px solid var(--border-color);
position: relative;
}
}
@ -40,3 +47,10 @@
}
}
}
.responsive-table__cell.responsive-table__cell .btn-sm {
@media (max-width: $responsiveTableBreakpoint) {
padding: 0.1rem 0.4rem;
margin-top: 0.16rem;
}
}