From d69f878e7bc49ccd2e6825a3d08f53c71f87ad2b Mon Sep 17 00:00:00 2001 From: majakomel Date: Thu, 4 Apr 2024 22:39:41 +0200 Subject: [PATCH 1/5] Reuse one component for sticky headings --- components/SharedStyledComponents.js | 24 +++++++-- pages/countries.js | 66 +++++++---------------- pages/domains.js | 81 ++++++++++++++-------------- pages/findings/index.js | 49 ++++++++--------- pages/networks.js | 59 ++++++++++---------- 5 files changed, 132 insertions(+), 147 deletions(-) diff --git a/components/SharedStyledComponents.js b/components/SharedStyledComponents.js index 4aa4d56c..d1981b64 100644 --- a/components/SharedStyledComponents.js +++ b/components/SharedStyledComponents.js @@ -1,5 +1,5 @@ +import { Box, Button, Container, Flex, Heading } from 'ooni-components' import styled from 'styled-components' -import { Button } from 'ooni-components' export const StyledSticky = styled.div` position: sticky; @@ -15,14 +15,32 @@ top: 0; z-index: 100; ` -export const StyledStickySubMenu = styled.div` +export const StyledStickySubMenu = styled(Box)` position: sticky; -top: 66px; +top: 65.5px; background: white; z-index: 99; border-bottom: 1px solid ${props => props.theme.colors.gray3}; ` +const StyledContainer = styled(Container)` +border-bottom: 1px solid ${props => props.theme.colors.gray3}; +` +export const StickySubMenu = ({ title, children }) => { + return ( + + + + {title} + + + {children} + + + + ) +} + // port the design to ooni-components export const StyledHollowButton = styled(Button)` &:hover { diff --git a/pages/countries.js b/pages/countries.js index bd02f78a..64943d22 100644 --- a/pages/countries.js +++ b/pages/countries.js @@ -13,43 +13,22 @@ import CountryList from 'components/CountryBox' import { StyledStickySubMenu } from 'components/SharedStyledComponents' import countryUtil from 'country-util' import { getLocalisedRegionName } from 'utils/i18nCountries' - -const CountryLink = styled(Link)` - color: ${props => props.theme.colors.black}; - text-decoration: none; - &:hover { - color: ${props => props.theme.colors.blue5}; - } -` - -const StyledCountryCard = styled(Box)` - border: 1px solid ${props => props.theme.colors.gray3}; -` - -const Divider = styled.div` - border: 1px solid ${props => props.theme.colors.gray3}; - margin-bottom: 12px; -` +import { StickySubMenu } from '../components/SharedStyledComponents' // To compenstate for the sticky navigation bar // :target selector applies only the element with id that matches // the current URL fragment (e.g '/#Africa') const RegionHeaderAnchor = styled.div` - :target::before { - content: ' '; - display: block; - width: 0; - /* Height of the combined header (NavBar and Regions) */ - /* This is needed to compensate the for the sticky navbar and region - links bar when scrolling to the selected region. And the height of these - bars changes in the mobile layout. This has evolved to be a bad design - that needs to be replaced. */ - height: 145px; - margin-top: -145px; - @media(max-width: 768px) { - height: 375px; - margin-top: -375px; - } + /* Height of the combined header (NavBar and Regions) */ + /* This is needed to compensate the for the sticky navbar and region + links bar when scrolling to the selected region. And the height of these + bars changes in the mobile layout. This has evolved to be a bad design + that needs to be replaced. */ + height: 172px; + margin-top: -172px; + @media(max-width: 768px) { + height: 375px; + margin-top: -375px; } ` @@ -74,7 +53,7 @@ const RegionBlock = ({regionCode, countries}) => { return ( - {regionName} + {regionName} ( measuredCountriesInRegion.indexOf(c.alpha_2) > -1 ))).map((c) => ({country: c.alpha_2, measurements: c.count}))} itemsPerRow={4} @@ -86,18 +65,13 @@ const RegionBlock = ({regionCode, countries}) => { const StyledRegionLink = styled.a` display: block; color: ${(props) => props.theme.colors.blue5}; - text-decoration: none; - border-bottom: 2px solid transparent; - :hover { - border-bottom: 2px solid ${(props) => props.theme.colors.blue5}; - width: 100%; - } + text-decoration: underline; ` const RegionLink = ({ href, label }) => ( - + - {label} + {label} ) @@ -154,8 +128,8 @@ const Countries = ({countries}) => { {intl.formatMessage({id: 'Countries.PageTitle'})} - - + + { - - - - + + { // Show a message when there are no countries to show, when search is empty (filteredCountries.length === 0) diff --git a/pages/domains.js b/pages/domains.js index a0c852ba..28f0bbe1 100644 --- a/pages/domains.js +++ b/pages/domains.js @@ -1,10 +1,10 @@ import { CategoryBadge } from 'components/Badge' import GridLoader from 'components/GridLoader' -import { StyledStickySubMenu } from 'components/SharedStyledComponents' +import { StickySubMenu } from 'components/SharedStyledComponents' import { getCategoryCodesMap } from 'components/utils/categoryCodes' import useFilterWithSort from 'hooks/useFilterWithSort' import Head from 'next/head' -import { Box, Container, Flex, Heading, Input, Select, Text } from 'ooni-components' +import { Box, Container, Flex, Input, Select, Text } from 'ooni-components' import { useMemo } from 'react' import { useIntl } from 'react-intl' import { simpleFetcher } from 'services/fetchers' @@ -92,48 +92,47 @@ const Domains = () => { {intl.formatMessage({id: 'General.OoniExplorer'})} | {intl.formatMessage({id: 'Domains.Title'})} - - - - { - intl.formatMessage({id: 'Domains.Title'}) - } {!!sortedAndFilteredData.length && + + { intl.formatMessage({id: 'Domains.Title'})}{' '}{!!sortedAndFilteredData.length && <>({new Intl.NumberFormat().format(sortedAndFilteredData.length)}) } - - - - debouncedSearchHandler(e.target.value)} - placeholder={intl.formatMessage({id: 'Domains.SearchPlaceholder'})} - error={ - (searchValue && sortedAndFilteredData?.length === 0) && - <>{intl.formatMessage({id: 'Domains.SearchError'})} - } - /> - - - - - - - - + + } + > + + + debouncedSearchHandler(e.target.value)} + placeholder={intl.formatMessage({id: 'Domains.SearchPlaceholder'})} + error={ + (searchValue && sortedAndFilteredData?.length === 0) && + <>{intl.formatMessage({id: 'Domains.SearchError'})} + } + /> + + + + + + + - + {!!displayData.length ? : diff --git a/pages/findings/index.js b/pages/findings/index.js index 2a4ee237..dbffc39c 100644 --- a/pages/findings/index.js +++ b/pages/findings/index.js @@ -1,4 +1,4 @@ -import { StyledStickySubMenu } from 'components/SharedStyledComponents' +import { StickySubMenu } from 'components/SharedStyledComponents' import HighlightBox from 'components/landing/HighlightBox' import SpinLoader from 'components/vendor/SpinLoader' import useFilterWithSort from 'hooks/useFilterWithSort' @@ -93,32 +93,29 @@ const Index = () => { {user?.role === 'admin' && ( )} - - - - {intl.formatMessage({id: 'Findings.Index.Title'}, {amount: sortedAndFilteredData.length})} - - - - debouncedSearchHandler(e.target.value)} - placeholder={intl.formatMessage({id: 'Findings.Index.SearchPlaceholder'})} - error={ - (searchValue && sortedAndFilteredData?.length === 0) && - <>{intl.formatMessage({id: 'Findings.Index.SearchError'})} - } - /> - - - - - + {intl.formatMessage({id: 'Findings.Index.Title'}, {amount: sortedAndFilteredData.length})}} + > + + + debouncedSearchHandler(e.target.value)} + placeholder={intl.formatMessage({id: 'Findings.Index.SearchPlaceholder'})} + error={ + (searchValue && sortedAndFilteredData?.length === 0) && + <>{intl.formatMessage({id: 'Findings.Index.SearchError'})} + } + /> + + + + - + {isLoading && } diff --git a/pages/networks.js b/pages/networks.js index df12f392..226e7504 100644 --- a/pages/networks.js +++ b/pages/networks.js @@ -1,7 +1,7 @@ import { useMemo } from 'react' import GridLoader from 'components/GridLoader' -import { StyledStickySubMenu } from 'components/SharedStyledComponents' +import { StickySubMenu } from 'components/SharedStyledComponents' import VirtualizedGrid from 'components/VirtualizedGrid' import useFilterWithSort from 'hooks/useFilterWithSort' import Head from 'next/head' @@ -74,36 +74,35 @@ const Networks = () => { {intl.formatMessage({id: 'General.OoniExplorer'})} | {intl.formatMessage({id: 'Networks.Title'})} - - - - { - intl.formatMessage({id: 'Networks.Title'}) - } {!!sortedAndFilteredData.length && - <>({new Intl.NumberFormat().format(sortedAndFilteredData.length)}) - } - - - - debouncedSearchHandler(e.target.value)} - placeholder={intl.formatMessage({id: 'Networks.SearchPlaceholder'})} - error={ - (searchValue && !sortedAndFilteredData.length) && - <>{intl.formatMessage({id: 'Networks.SearchError'})} - } - /> - - - - - + + { + intl.formatMessage({id: 'Networks.Title'}) + } {!!sortedAndFilteredData.length && + <>({new Intl.NumberFormat().format(sortedAndFilteredData.length)}) + } + } + > + + + debouncedSearchHandler(e.target.value)} + placeholder={intl.formatMessage({id: 'Networks.SearchPlaceholder'})} + error={ + (searchValue && !sortedAndFilteredData.length) && + <>{intl.formatMessage({id: 'Networks.SearchError'})} + } + /> + + + + - + {!!displayData.length ? : From 559f15eca154a3de6c99d4f1e39358b24d7a17d5 Mon Sep 17 00:00:00 2001 From: majakomel Date: Thu, 11 Apr 2024 22:08:55 +0200 Subject: [PATCH 2/5] Fix tests --- cypress/e2e/countries.e2e.cy.js | 4 ++-- pages/countries.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/cypress/e2e/countries.e2e.cy.js b/cypress/e2e/countries.e2e.cy.js index 075281dd..2cc6c9bf 100644 --- a/cypress/e2e/countries.e2e.cy.js +++ b/cypress/e2e/countries.e2e.cy.js @@ -5,14 +5,14 @@ describe('Countries Page Tests', () => { }) it('first region (Africa) is visible', () => { - cy.get(':nth-child(1) > h1') + cy.get('h2') .contains('Africa') .should('be.visible') }) it('clicking on region in menu scrolls down to the correct region', () => { cy.get('a[href="#Europe"]').click({ force: true }) - cy.get(':nth-child(4) > h1') + cy.get('h2') .contains('Europe') .should('be.visible') }) diff --git a/pages/countries.js b/pages/countries.js index 2d0696c6..2470f928 100644 --- a/pages/countries.js +++ b/pages/countries.js @@ -23,8 +23,8 @@ const RegionHeaderAnchor = styled.div` links bar when scrolling to the selected region. And the height of these bars changes in the mobile layout. This has evolved to be a bad design that needs to be replaced. */ - height: 172px; - margin-top: -172px; + height: 140px; + margin-top: -140px; @media(max-width: 768px) { height: 375px; margin-top: -375px; From db3f852358fe02e9f27094ce2271f9aa84fbd803 Mon Sep 17 00:00:00 2001 From: majakomel Date: Fri, 12 Apr 2024 12:19:07 +0200 Subject: [PATCH 3/5] Minor fixes --- components/SharedStyledComponents.js | 7 ++----- pages/index.js | 6 +++--- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/components/SharedStyledComponents.js b/components/SharedStyledComponents.js index d1981b64..90ab5560 100644 --- a/components/SharedStyledComponents.js +++ b/components/SharedStyledComponents.js @@ -23,13 +23,10 @@ z-index: 99; border-bottom: 1px solid ${props => props.theme.colors.gray3}; ` -const StyledContainer = styled(Container)` -border-bottom: 1px solid ${props => props.theme.colors.gray3}; -` export const StickySubMenu = ({ title, children }) => { return ( - - + + {title} diff --git a/pages/index.js b/pages/index.js index 2c0aa90e..22de1905 100644 --- a/pages/index.js +++ b/pages/index.js @@ -71,7 +71,7 @@ const StyledStatsItem = styled(Box)` const StatsItem = ({label, unit, value }) => ( - + {value} {unit} @@ -154,7 +154,7 @@ const LandingPage = ({ measurementCount, asnCount, countryCount}) => { {intl.formatMessage({id: 'General.OoniExplorer'})} - + @@ -169,7 +169,7 @@ const LandingPage = ({ measurementCount, asnCount, countryCount}) => { - + } unit={measurementCount.unit} From 75f66d04383419f60b749b6ab4fae625ca5bb700 Mon Sep 17 00:00:00 2001 From: majakomel Date: Fri, 12 Apr 2024 12:34:57 +0200 Subject: [PATCH 4/5] Close mobile menu when path changes --- components/NavBar.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/NavBar.js b/components/NavBar.js index e39b0622..21573309 100644 --- a/components/NavBar.js +++ b/components/NavBar.js @@ -137,9 +137,14 @@ export const NavBar = ({ color }) => { const logoutUser = (e) => { e.preventDefault() + setShowMenu(false) logout() } + useEffect(() => { + setShowMenu(false) + }, [pathname]) + return ( From 5e51929fb4466982db74add9c1f183a7bc2599ef Mon Sep 17 00:00:00 2001 From: majakomel Date: Mon, 15 Apr 2024 12:11:23 +0200 Subject: [PATCH 5/5] Fix countries anchor position --- pages/countries.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/countries.js b/pages/countries.js index 2470f928..698ed487 100644 --- a/pages/countries.js +++ b/pages/countries.js @@ -26,8 +26,8 @@ const RegionHeaderAnchor = styled.div` height: 140px; margin-top: -140px; @media(max-width: 768px) { - height: 375px; - margin-top: -375px; + height: 200px; + margin-top: -200px; } `