mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added sticky header to tags table

Browse source
This commit is contained in:
Alejandro Celaya 2021-11-01 11:13:47 +01:00
parent 16d2e437b6
commit b0c1549005
3 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/tags/TagsTable.scss Normal file
View file

@ -0,0 +1,9 @@
@import '../utils/base';
@import '../utils/mixins/sticky-cell';
.tags-table__header-cell.tags-table__header-cell {
@include sticky-cell(false);
top: $headerHeight;
position: sticky;
}

10
src/tags/TagsTable.tsx
View file

@ -8,6 +8,7 @@ import { useQueryState } from '../utils/helpers/hooks';
import { parseQuery } from '../utils/helpers/query'; import { parseQuery } from '../utils/helpers/query';
import { TagsListChildrenProps } from './data/TagsListChildrenProps'; import { TagsListChildrenProps } from './data/TagsListChildrenProps';
import { TagsTableRowProps } from './TagsTableRow'; import { TagsTableRowProps } from './TagsTableRow';
import './TagsTable.scss';
const TAGS_PER_PAGE = 20; // TODO Allow customizing this value in settings const TAGS_PER_PAGE = 20; // TODO Allow customizing this value in settings
@ -35,11 +36,12 @@ export const TagsTable = (colorGenerator: ColorGenerator, TagsTableRow: FC<TagsT
<table className="table table-hover mb-0"> <table className="table table-hover mb-0">
<thead className="responsive-table__header"> <thead className="responsive-table__header">
<tr> <tr>
<th>Tag</th> <th className="tags-table__header-cell">Tag</th>
<th className="text-lg-right">Short URLs</th> <th className="tags-table__header-cell text-lg-right">Short URLs</th>
<th className="text-lg-right">Visits</th> <th className="tags-table__header-cell text-lg-right">Visits</th>
<th /> <th className="tags-table__header-cell" />
</tr> </tr>
<tr><th colSpan={4} className="p-0 border-top-0" /></tr>
</thead> </thead>
<tbody> <tbody>
{currentPage.length === 0 && <tr><td colSpan={4} className="text-center">No results found</td></tr>} {currentPage.length === 0 && <tr><td colSpan={4} className="text-center">No results found</td></tr>}

8
src/utils/mixins/sticky-cell.scss
View file

@ -1,6 +1,6 @@
@import '../base'; @import '../base';
@mixin sticky-cell() { @mixin sticky-cell($with-separators: true) {
z-index: 1; z-index: 1;
border: none !important; border: none !important;
position: relative; position: relative;
@ -11,20 +11,20 @@
top: -1px; top: -1px;
left: 0; left: 0;
bottom: -1px; bottom: -1px;
right: -1px; right: if($with-separators, -1px, 0);
background: var(--table-border-color); background: var(--table-border-color);
z-index: -2; z-index: -2;
} }
&:first-child:before { &:first-child:before {
left: -1px; left: if($with-separators, -1px, 0);
} }
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 1px; left: if($with-separators, 1px, 0);
bottom: 0; bottom: 0;
right: 0; right: 0;
background: var(--primary-color); background: var(--primary-color);