From 0491694839620e7399a506d3ddd26ba227ff867b Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 15 Dec 2020 17:57:24 +0100 Subject: [PATCH 1/6] Set fixed width to aside menu --- src/common/AsideMenu.scss | 10 ++++++---- src/common/AsideMenu.tsx | 5 ++--- src/common/MenuLayout.scss | 4 ++-- src/common/MenuLayout.tsx | 8 ++++---- src/common/ShlinkVersionsContainer.scss | 9 +++++++++ src/common/ShlinkVersionsContainer.tsx | 13 +++++-------- src/utils/base.scss | 1 + test/common/ShlinkVersionsContainer.test.tsx | 10 +++++----- 8 files changed, 34 insertions(+), 26 deletions(-) create mode 100644 src/common/ShlinkVersionsContainer.scss diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss index 22547a50..09e0dc3e 100644 --- a/src/common/AsideMenu.scss +++ b/src/common/AsideMenu.scss @@ -1,9 +1,8 @@ @import '../utils/base'; @import '../utils/mixins/vertical-align'; -$asideMenuMobileWidth: 280px; - .aside-menu { + width: $asideMenuWidth; background-color: white; box-shadow: rgba(0, 0, 0, .05) 0 8px 15px; position: fixed !important; @@ -23,7 +22,6 @@ $asideMenuMobileWidth: 280px; } @media (max-width: $smMax) { - width: $asideMenuMobileWidth !important; transition: left 300ms; top: $headerHeight - 3px; box-shadow: -10px 0 50px 11px rgba(0, 0, 0, .55); @@ -32,7 +30,7 @@ $asideMenuMobileWidth: 280px; .aside-menu--hidden { @media (max-width: $smMax) { - left: -($asideMenuMobileWidth + 35px); + left: -($asideMenuWidth + 35px); } } @@ -45,6 +43,10 @@ $asideMenuMobileWidth: 280px; margin: 0 -15px; text-decoration: none !important; cursor: pointer; + + @media (max-width: $smMax) { + margin: 0; + } } .aside-menu__item:hover { diff --git a/src/common/AsideMenu.tsx b/src/common/AsideMenu.tsx index 28cfb9f7..3d9fd4b8 100644 --- a/src/common/AsideMenu.tsx +++ b/src/common/AsideMenu.tsx @@ -22,7 +22,6 @@ export interface AsideMenuProps { interface AsideMenuItemProps extends NavLinkProps { to: string; - className?: string; } const AsideMenuItem: FC = ({ children, to, className, ...rest }) => ( @@ -37,10 +36,10 @@ const AsideMenuItem: FC = ({ children, to, className, ...res ); const AsideMenu = (DeleteServerButton: FC) => ( - { selectedServer, className, showOnMobile = false }: AsideMenuProps, + { selectedServer, showOnMobile = false }: AsideMenuProps, ) => { const serverId = selectedServer ? selectedServer.id : ''; - const asideClass = classNames('aside-menu', className, { + const asideClass = classNames('aside-menu', { 'aside-menu--hidden': !showOnMobile, }); const shortUrlsIsActive = (_: null, location: Location) => location.pathname.match('/list-short-urls') !== null; diff --git a/src/common/MenuLayout.scss b/src/common/MenuLayout.scss index 0d4cce73..7eae132d 100644 --- a/src/common/MenuLayout.scss +++ b/src/common/MenuLayout.scss @@ -33,11 +33,11 @@ color: white; } -.menu-layout__container { +.menu-layout__container.menu-layout__container { padding: 20px 0 0; min-height: 100%; @media (min-width: $mdMin) { - padding: 30px 15px 0; + padding: 30px 0 0 $asideMenuWidth; } } diff --git a/src/common/MenuLayout.tsx b/src/common/MenuLayout.tsx index 15f8c491..e4a32144 100644 --- a/src/common/MenuLayout.tsx +++ b/src/common/MenuLayout.tsx @@ -56,10 +56,10 @@ const MenuLayout = (
-
- -
hideSidebar()}> -
+
+ +
hideSidebar()}> +
diff --git a/src/common/ShlinkVersionsContainer.scss b/src/common/ShlinkVersionsContainer.scss new file mode 100644 index 00000000..296731cf --- /dev/null +++ b/src/common/ShlinkVersionsContainer.scss @@ -0,0 +1,9 @@ +@import '../utils/base'; + +.shlink-versions-container--with-server { + margin-left: 0; + + @media (min-width: $mdMin) { + margin-left: $asideMenuWidth; + } +} diff --git a/src/common/ShlinkVersionsContainer.tsx b/src/common/ShlinkVersionsContainer.tsx index 894174fc..be3b9d74 100644 --- a/src/common/ShlinkVersionsContainer.tsx +++ b/src/common/ShlinkVersionsContainer.tsx @@ -1,23 +1,20 @@ import classNames from 'classnames'; import { isReachableServer, SelectedServer } from '../servers/data'; import ShlinkVersions from './ShlinkVersions'; +import './ShlinkVersionsContainer.scss'; export interface ShlinkVersionsContainerProps { selectedServer: SelectedServer; } const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => { - const serverIsReachable = isReachableServer(selectedServer); - const colClasses = classNames('text-center', { - 'col-12': !serverIsReachable, - 'col-lg-10 offset-lg-2 col-md-9 offset-md-3': serverIsReachable, + const classes = classNames('text-center', { + 'shlink-versions-container--with-server': isReachableServer(selectedServer), }); return ( -
-
- -
+
+
); }; diff --git a/src/utils/base.scss b/src/utils/base.scss index a26b7909..e87c9d0b 100644 --- a/src/utils/base.scss +++ b/src/utils/base.scss @@ -17,6 +17,7 @@ $mediumGrey: #dee2e6; // Misc $headerHeight: 57px; +$asideMenuWidth: 260px; $footer-height: 2.3rem; $footer-margin: .8rem; diff --git a/test/common/ShlinkVersionsContainer.test.tsx b/test/common/ShlinkVersionsContainer.test.tsx index 063dcdf4..ba4bec86 100644 --- a/test/common/ShlinkVersionsContainer.test.tsx +++ b/test/common/ShlinkVersionsContainer.test.tsx @@ -15,13 +15,13 @@ describe('', () => { afterEach(() => wrapper?.unmount()); test.each([ - [ null, 'col-12' ], - [ Mock.of({ serverNotFound: true }), 'col-12' ], - [ Mock.of({ serverNotReachable: true }), 'col-12' ], - [ Mock.of({ printableVersion: 'v1.0.0' }), 'col-lg-10 offset-lg-2 col-md-9 offset-md-3' ], + [ null, 'text-center' ], + [ Mock.of({ serverNotFound: true }), 'text-center' ], + [ Mock.of({ serverNotReachable: true }), 'text-center' ], + [ Mock.of({ printableVersion: 'v1.0.0' }), 'text-center shlink-versions-container--with-server' ], ])('renders proper col classes based on type of selected server', (selectedServer, expectedClasses) => { const wrapper = createWrapper(selectedServer); - expect(wrapper.find('div').at(1).prop('className')).toEqual(`text-center ${expectedClasses}`); + expect(wrapper.find('div').prop('className')).toEqual(`${expectedClasses}`); }); }); From 9dc6c756f291f9524bf3d1435e4859758d1207e0 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 15 Dec 2020 18:12:15 +0100 Subject: [PATCH 2/6] Fixed rendering of cards in overview page --- src/servers/Overview.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/servers/Overview.tsx b/src/servers/Overview.tsx index 974b928b..f6dd424e 100644 --- a/src/servers/Overview.tsx +++ b/src/servers/Overview.tsx @@ -50,7 +50,7 @@ export const Overview = ( return ( <>
-
+
Visits @@ -63,7 +63,7 @@ export const Overview = (
-
+
Short URLs @@ -71,7 +71,7 @@ export const Overview = (
-
+
Tags {loadingTags ? 'Loading...' : prettify(tagsList.tags.length)} From 0f23cdcd21969fd468e2a6bd6d4f80933980651e Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 15 Dec 2020 18:40:36 +0100 Subject: [PATCH 3/6] Updated initial interval for visits to be last 30 days --- src/visits/VisitsStats.tsx | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx index 9e69fa70..1e9dce11 100644 --- a/src/visits/VisitsStats.tsx +++ b/src/visits/VisitsStats.tsx @@ -4,11 +4,11 @@ import { Button, Card, Nav, NavLink, Progress } from 'reactstrap'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCalendarAlt, faMapMarkedAlt, faList, faChartPie } from '@fortawesome/free-solid-svg-icons'; import { IconDefinition } from '@fortawesome/fontawesome-common-types'; -import moment from 'moment'; import { DateRangeSelector } from '../utils/dates/DateRangeSelector'; import Message from '../utils/Message'; -import { formatDate } from '../utils/helpers/date'; +import { formatIsoDate } from '../utils/helpers/date'; import { ShlinkVisitsParams } from '../utils/services/types'; +import { DateInterval, DateRange, intervalToDateRange } from '../utils/dates/types'; import SortableBarGraph from './helpers/SortableBarGraph'; import GraphCard from './helpers/GraphCard'; import LineChartCard from './helpers/LineChartCard'; @@ -46,12 +46,11 @@ const highlightedVisitsToStats = ( return acc; }, {}); -const format = formatDate(); let selectedBar: string | undefined; +const initialInterval: DateInterval = 'last30Days'; const VisitsStats: FC = ({ children, visitsInfo, getVisits, cancelGetVisits }) => { - const [ startDate, setStartDate ] = useState(null); - const [ endDate, setEndDate ] = useState(null); + const [ dateRange, setDateRange ] = useState(intervalToDateRange(initialInterval)); const [ highlightedVisits, setHighlightedVisits ] = useState([]); const [ highlightedLabel, setHighlightedLabel ] = useState(); const [ activeSection, setActiveSection ] = useState
('byTime'); @@ -83,10 +82,12 @@ const VisitsStats: FC = ({ children, visitsInfo, getVisits, ca } }; - useEffect(() => () => cancelGetVisits(), []); + useEffect(() => cancelGetVisits, []); useEffect(() => { - getVisits({ startDate: format(startDate) ?? undefined, endDate: format(endDate) ?? undefined }); - }, [ startDate, endDate ]); + const { startDate, endDate } = dateRange; + + getVisits({ startDate: formatIsoDate(startDate) ?? undefined, endDate: formatIsoDate(endDate) ?? undefined }); + }, [ dateRange ]); const renderVisitsContent = () => { if (loadingLarge) { @@ -227,11 +228,9 @@ const VisitsStats: FC = ({ children, visitsInfo, getVisits, ca
{ - setStartDate(newStartDate ?? null); - setEndDate(newEndDate ?? null); - }} + onDatesChange={setDateRange} />
{visits.length > 0 && ( From 3cdcffaac34b24fda7ac8173ec7dc4c9fab21158 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 15 Dec 2020 18:45:15 +0100 Subject: [PATCH 4/6] Fixed mutation checks step in ci workflow --- .github/workflows/ci.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ea2f4f13..a6b9e968 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -39,12 +39,14 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v2 + with: + fetch-depth: 0 # needed so that the main branch is also fetched - name: Use node.js 14.15 uses: actions/setup-node@v1 with: node-version: 14.15 - run: npm ci - - run: npm run mutate -- --mutate=$(git diff origin/main --name-only | grep -E 'src\/(.*).(ts|tsx)$' | paste -sd ",") + - run: npm run mutate -- --mutate=$(git diff main --name-only | grep -E 'src\/(.*).(ts|tsx)$' | paste -sd ",") build-docker-image: runs-on: ubuntu-latest From f9ef7eccf88a5d2f37733c6e4c21bb073affe448 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 15 Dec 2020 18:53:41 +0100 Subject: [PATCH 5/6] Updated changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5715b9c7..0668033f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), * Charts are now grouped in tabs, so that only one part of the components is rendered at a time. * Amount of highlighted visits is now displayed. * Date filtering can be now selected through relative times (last 7 days, last 30 days, etc) or absolute dates using date pickers. + * Only the visits for last 30 days are loaded by default. You can change that at any moment if required. ### Changed * [#267](https://github.com/shlinkio/shlink-web-client/issues/267) Added some subtle but important improvements on UI/UX. From 3453d4ffd5295e426807098ab0caa05574d7b30d Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 15 Dec 2020 18:57:23 +0100 Subject: [PATCH 6/6] Fixed coding styles --- .github/workflows/ci.yml | 2 +- test/utils/dates/DateRangeSelector.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a6b9e968..382d9ebb 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -46,7 +46,7 @@ jobs: with: node-version: 14.15 - run: npm ci - - run: npm run mutate -- --mutate=$(git diff main --name-only | grep -E 'src\/(.*).(ts|tsx)$' | paste -sd ",") + - run: npm run mutate -- --mutate=$(git diff origin/main --name-only | grep -E 'src\/(.*).(ts|tsx)$' | paste -sd ",") build-docker-image: runs-on: ubuntu-latest diff --git a/test/utils/dates/DateRangeSelector.test.tsx b/test/utils/dates/DateRangeSelector.test.tsx index 0df6fa18..78a375c7 100644 --- a/test/utils/dates/DateRangeSelector.test.tsx +++ b/test/utils/dates/DateRangeSelector.test.tsx @@ -1,9 +1,9 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { DropdownItem } from 'reactstrap'; import moment from 'moment'; +import { Mock } from 'ts-mockery'; import { DateRangeSelector, DateRangeSelectorProps } from '../../../src/utils/dates/DateRangeSelector'; import { DateInterval } from '../../../src/utils/dates/types'; -import { Mock } from 'ts-mockery'; describe('', () => { let wrapper: ShallowWrapper;