Updated tabs in visits section to be sticky

This commit is contained in:
Alejandro Celaya 2020-12-12 21:05:54 +01:00
parent c74355e363
commit 6090f97347
6 changed files with 12 additions and 6 deletions

View file

@ -24,7 +24,7 @@ export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProp
return ( return (
<NoMenuLayout> <NoMenuLayout>
<ServerForm <ServerForm
title={<h5 className="mb-0">Edit "{selectedServer.name}"</h5>} title={<h5 className="mb-0">Edit &quot;{selectedServer.name}&quot;</h5>}
initialValues={selectedServer} initialValues={selectedServer}
onSubmit={handleSubmit} onSubmit={handleSubmit}
> >

View file

@ -9,9 +9,9 @@ import { ShortUrlsTableProps } from '../short-urls/ShortUrlsTable';
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub'; import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
import { CreateShortUrlProps } from '../short-urls/CreateShortUrl'; import { CreateShortUrlProps } from '../short-urls/CreateShortUrl';
import { VisitsOverview } from '../visits/reducers/visitsOverview'; import { VisitsOverview } from '../visits/reducers/visitsOverview';
import { Versions } from '../utils/helpers/version';
import { isServerWithId, SelectedServer } from './data'; import { isServerWithId, SelectedServer } from './data';
import './Overview.scss'; import './Overview.scss';
import { Versions } from '../utils/helpers/version';
interface OverviewConnectProps { interface OverviewConnectProps {
shortUrlsList: ShortUrlsListState; shortUrlsList: ShortUrlsListState;

View file

@ -1,4 +1,4 @@
@import "../base"; @import '../base';
@mixin sticky-cell() { @mixin sticky-cell() {
z-index: 1; z-index: 1;

View file

@ -1,5 +1,11 @@
@import '../utils/base'; @import '../utils/base';
.visits-stats__nav {
position: sticky !important;
top: $headerHeight - 1px;
z-index: 2;
}
.visits-stats__nav-link { .visits-stats__nav-link {
border-radius: 0 !important; border-radius: 0 !important;
padding-bottom: calc(.5rem - 3px) !important; padding-bottom: calc(.5rem - 3px) !important;

View file

@ -116,8 +116,8 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
return ( return (
<> <>
<Card className="p-0 mt-4 overflow-hidden" body> <Card className="visits-stats__nav p-0 mt-4 overflow-hidden" body>
<Nav className="visits-stats__nav" pills justified> <Nav pills justified>
{Object.entries(sections).map( {Object.entries(sections).map(
([ section, { title, icon }]) => ( ([ section, { title, icon }]) => (
<NavLink <NavLink

View file

@ -15,7 +15,7 @@
@media (min-width: $mdMin) { @media (min-width: $mdMin) {
&.visits-table__sticky { &.visits-table__sticky {
top: $headerHeight - 2px; top: $headerHeight + 40px;
} }
} }
} }