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

Merge pull request #373 from acelaya-forks/feature/ui-fixes

Browse source 
Fixed minor UI glitches in visits section
This commit is contained in:
Alejandro Celaya 2020-12-30 19:52:24 +01:00 committed by GitHub
commit c0098ac7fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -19,6 +19,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Fixed ### Fixed
* [#364](https://github.com/shlinkio/shlink-web-client/issues/364) Fixed all dropdowns so that they are consistently styled. * [#364](https://github.com/shlinkio/shlink-web-client/issues/364) Fixed all dropdowns so that they are consistently styled.
* [#366](https://github.com/shlinkio/shlink-web-client/issues/366) Fixed text in visits menu jumping to next line in some tablet resolutions.
* [#367](https://github.com/shlinkio/shlink-web-client/issues/367) Removed conflicting overflow in visits table for mobile devices.
## [3.0.0] - 2020-12-22 ## [3.0.0] - 2020-12-22

4
src/visits/VisitsStats.scss
View file

@ -13,6 +13,10 @@
color: #5d6778; color: #5d6778;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
@media (min-width: $smMin) and (max-width: $mdMax) {
font-size: 89%;
}
} }
.visits-stats__nav-link:hover { .visits-stats__nav-link:hover {

14
src/visits/VisitsStats.tsx
View file

@ -1,6 +1,6 @@
import { isEmpty, propEq, values } from 'ramda'; import { isEmpty, propEq, values } from 'ramda';
import { useState, useEffect, useMemo, FC } from 'react'; import { useState, useEffect, useMemo, FC } from 'react';
import { Button, Card, Nav, NavLink, Progress } from 'reactstrap'; import { Button, Card, Nav, NavLink, Progress, Row } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendarAlt, faMapMarkedAlt, faList, faChartPie } from '@fortawesome/free-solid-svg-icons'; import { faCalendarAlt, faMapMarkedAlt, faList, faChartPie } from '@fortawesome/free-solid-svg-icons';
import { IconDefinition } from '@fortawesome/fontawesome-common-types'; import { IconDefinition } from '@fortawesome/fontawesome-common-types';
@ -61,11 +61,11 @@ const highlightedVisitsToStats = (
let selectedBar: string | undefined; let selectedBar: string | undefined;
const initialInterval: DateInterval = 'last30Days'; const initialInterval: DateInterval = 'last30Days';
const VisitsNavLink: FC<VisitsNavLinkProps> = ({ subPath, title, icon, children }) => ( const VisitsNavLink: FC<VisitsNavLinkProps & { to: string }> = ({ subPath, title, icon, to }) => (
<NavLink <NavLink
tag={RouterNavLink} tag={RouterNavLink}
className="visits-stats__nav-link" className="visits-stats__nav-link"
to={children} to={to}
isActive={(_: null, { pathname }: Location) => pathname.endsWith(`/visits${subPath}`)} isActive={(_: null, { pathname }: Location) => pathname.endsWith(`/visits${subPath}`)}
replace replace
> >
@ -146,12 +146,12 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
return ( return (
<> <>
<Card className="visits-stats__nav p-0 overflow-hidden" body> <Card className="visits-stats__nav p-0 overflow-hidden" body>
<Nav pills justified> <Nav pills fill>
{Object.entries(sections).map(([ section, props ]) => {Object.entries(sections).map(([ section, props ]) =>
<VisitsNavLink key={section} {...props}>{buildSectionUrl(props.subPath)}</VisitsNavLink>)} <VisitsNavLink key={section} {...props} to={buildSectionUrl(props.subPath)} />)}
</Nav> </Nav>
</Card> </Card>
<div className="row"> <Row>
<Switch> <Switch>
<Route exact path={baseUrl}> <Route exact path={baseUrl}>
<div className="col-12 mt-4"> <div className="col-12 mt-4">
@ -233,7 +233,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
<Redirect to={baseUrl} /> <Redirect to={baseUrl} />
</Switch> </Switch>
</div> </Row>
</> </>
); );
}; };

1
src/visits/VisitsTable.scss
View file

@ -5,6 +5,7 @@
margin: 1.5rem 0 0; margin: 1.5rem 0 0;
position: relative; position: relative;
background-color: white; background-color: white;
overflow-y: hidden;
} }
.visits-table__header-cell { .visits-table__header-cell {