Mobile layout fixes

ooni · Dec 20, 2023 · c398481 · c398481
1 parent 84944ac
commit c398481
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 26 deletions.
diff --git a/components/NavBar.js b/components/NavBar.js
@@ -37,6 +37,12 @@ const LanguageSelect = styled.select`
   font-size: inherit;
   padding: 0;
   padding-bottom: 6px;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
   &:hover {
     opacity: 1;
   }
@@ -57,7 +63,7 @@ const StyledNavBar = styled.div`
   background-color: ${(props) => props.$bgColor || props.theme.colors.blue5};
   padding-top: 16px;
   padding-bottom: 20px;
-  z-index: 999;
+  z-index: 9999;
 `
 
 const StyledResponsiveMenu = styled(Box)`
@@ -81,6 +87,7 @@ const StyledResponsiveMenu = styled(Box)`
     display: none;
 
     &.visible {
+      z-index: 999999;
       display: block;
       overflow-y: scroll;
       max-height: 100%;
@@ -90,7 +97,6 @@ const StyledResponsiveMenu = styled(Box)`
       top: 0;
       right: 0;
       background: ${(props) => props.theme.colors.gray0};
-      z-index: 999;
       
       .menuItems {
         padding-top: ${(props) => props.theme.space[2]}px;

diff --git a/components/SharedStyledComponents.js b/components/SharedStyledComponents.js
@@ -5,7 +5,7 @@ export const StyledSticky = styled.div`
 position: sticky;
 top: 0;
 background: white;
-z-index: 100;
+z-index: 99;
 border-bottom: 1px solid ${props => props.theme.colors.gray3};
 `
 
@@ -19,7 +19,7 @@ export const StyledStickySubMenu = styled.div`
 position: sticky;
 top: 66px;
 background: white;
-z-index: 100;
+z-index: 99;
 border-bottom: 1px solid ${props => props.theme.colors.gray3};
 `
 

diff --git a/components/findings/FindingDisplay.js b/components/findings/FindingDisplay.js
@@ -46,9 +46,9 @@ const FindingDisplay = ({ incident }) => {
       )}
       <Text color="gray6" mb={3}>{incident?.start_time && formatLongDate(incident?.start_time, intl.locale)} - {incident?.end_time ? formatLongDate(incident?.end_time, intl.locale) : 'ongoing'}</Text>
       {!!incident?.tags?.length && (
-        <Flex mb={3}>
+        <Flex mb={3} flexWrap='wrap' sx={{gap: 2}}>
           {incident.tags.map((tag) => (
-            <Box key={tag} mr={2}>
+            <Box key={tag}>
               <Badge>{tag}</Badge>
             </Box>
           ))}

diff --git a/pages/countries.js b/pages/countries.js
@@ -102,7 +102,7 @@ const StyledRegionLink = styled.a`
 `
 
 const RegionLink = ({ href, label }) => (
-  <Box px={[1,3]} py={[2,4]}>
+  <Box px={[2,3]} py={[2,2,4]}>
     <StyledRegionLink href={href}>
       <Text fontSize={[16, 20]}>{label}</Text>
     </StyledRegionLink>
@@ -164,12 +164,11 @@ const Countries = ({countries}) => {
       <StyledStickyNavBar>
         <NavBar />
         <RegionMenu>
-
           <Container>
             <Flex
-              flexDirection={['column', 'row']}
+              flexDirection={['column', 'column', 'row']}
               justifyContent={['flex-start', 'flex-end']}
-              alignItems={['flex-start', 'center']}
+              alignItems={['flex-start', 'flex-start', 'center']}
             >
               <Box my={2}>
                 <Input
@@ -178,12 +177,17 @@ const Countries = ({countries}) => {
                   error={filteredCountries.length === 0}
                 />
               </Box>
-              <RegionLink href={`#${getLocalisedRegionName('002', intl.locale)}`} label={getLocalisedRegionName('002', intl.locale)} />
-              <RegionLink href={`#${getLocalisedRegionName('019', intl.locale)}`} label={getLocalisedRegionName('019', intl.locale)} />
-              <RegionLink href={`#${getLocalisedRegionName('142', intl.locale)}`} label={getLocalisedRegionName('142', intl.locale)} />
-              <RegionLink href={`#${getLocalisedRegionName('150', intl.locale)}`} label={getLocalisedRegionName('150', intl.locale)} />
-              <RegionLink href={`#${getLocalisedRegionName('009', intl.locale)}`} label={getLocalisedRegionName('009', intl.locale)} />
-              <RegionLink href={`#${getLocalisedRegionName('AQ', intl.locale)}`} label={getLocalisedRegionName('AQ', intl.locale)} />
+              <Flex
+                flexDirection='row'
+                flexWrap='wrap'
+              >
+                <RegionLink href={`#${getLocalisedRegionName('002', intl.locale)}`} label={getLocalisedRegionName('002', intl.locale)} />
+                <RegionLink href={`#${getLocalisedRegionName('019', intl.locale)}`} label={getLocalisedRegionName('019', intl.locale)} />
+                <RegionLink href={`#${getLocalisedRegionName('142', intl.locale)}`} label={getLocalisedRegionName('142', intl.locale)} />
+                <RegionLink href={`#${getLocalisedRegionName('150', intl.locale)}`} label={getLocalisedRegionName('150', intl.locale)} />
+                <RegionLink href={`#${getLocalisedRegionName('009', intl.locale)}`} label={getLocalisedRegionName('009', intl.locale)} />
+                <RegionLink href={`#${getLocalisedRegionName('AQ', intl.locale)}`} label={getLocalisedRegionName('AQ', intl.locale)} />
+              </Flex>
             </Flex>
           </Container>
         </RegionMenu>

diff --git a/pages/domains.js b/pages/domains.js
@@ -98,15 +98,15 @@ const Domains = () => {
       </StyledStickyNavBar>
       <Container>
         <StyledStickySubMenu>
-          <Flex mt={5} mb={2} justifyContent='space-between' alignItems='baseline'>
-            <Heading h={1} mt={1} mb={0}>
+          <Flex mt={[0, 5]} mb={2} justifyContent='space-between' alignItems='baseline' flexDirection={['column', 'column', 'row']}>
+            <Heading h={1} mt={1} mb={0} fontSize={[4, 5]}>
               {
                 intl.formatMessage({id: 'Domains.Title'})
               } {!!sortedAndFilteredData.length && 
                 <>({new Intl.NumberFormat().format(sortedAndFilteredData.length)})</>
               }
             </Heading>
-            <Flex sx={{gap: 3}}>
+            <Flex sx={{gap: 3}} flexDirection={['column', 'column', 'row']} width={[1, 'auto']}>
               <Box>
                 <Input
                   onChange={(e) => debouncedSearchHandler(e.target.value)}

diff --git a/pages/findings/index.js b/pages/findings/index.js
@@ -23,8 +23,12 @@ const sortOptions = [
 
 const StyledGrid = styled(Box)`
 display: grid;
-grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
+grid-template-columns: 1fr 1fr;
 gap: 24px;
+
+@media screen and (max-width: 48em) {
+  grid-template-columns: 1fr;
+}
 `
 
 const Index = () => {
@@ -94,11 +98,11 @@ const Index = () => {
           <Flex justifyContent="end" mt={3}><NLink href="/findings/dashboard"><Button hollow>{intl.formatMessage({id: 'Findings.Dashboard.ShortTitle'})}</Button></NLink></Flex>
         )}
         <StyledStickySubMenu>
-          <Flex mt={user?.role === 'admin' ? 0 : 5} mb={2} justifyContent='space-between' alignItems='baseline'>
-            <Heading h={1} mt={1} mb={0}>
+          <Flex mt={user?.role === 'admin' ? 0 : [0, 5]} mb={2} justifyContent='space-between' alignItems='baseline' flexDirection={['column', 'column', 'row']}>
+            <Heading h={1} mt={1} mb={0} fontSize={[4, 5]}>
               {intl.formatMessage({id: 'Findings.Index.Title'}, {amount: sortedAndFilteredData.length})}
             </Heading>
-            <Flex sx={{gap: 3}}>
+            <Flex sx={{gap: 3}} flexDirection={['column', 'column', 'row']} width={[1, 'auto']}>
               <Box>
                 <Input
                   onChange={(e) => debouncedSearchHandler(e.target.value)}

diff --git a/pages/networks.js b/pages/networks.js
@@ -79,15 +79,15 @@ const Networks = () => {
       </StyledStickyNavBar>
       <Container>
         <StyledStickySubMenu>
-          <Flex mt={5} mb={2} justifyContent='space-between' alignItems='baseline'>
-            <Heading h={1} mt={1} mb={0}>
+          <Flex mt={[0, 5]} mb={2} justifyContent='space-between' alignItems='baseline' flexDirection={['column', 'column', 'row']}>
+            <Heading h={1} mt={1} mb={0} fontSize={[4, 5]}>
               {
                 intl.formatMessage({id: 'Networks.Title'})
               } {!!sortedAndFilteredData.length && 
                 <>({new Intl.NumberFormat().format(sortedAndFilteredData.length)})</>
               }
             </Heading>
-            <Flex sx={{gap: 3}}>
+            <Flex sx={{gap: 3}} flexDirection={['column', 'column', 'row']} width={[1, 'auto']}>
               <Box>
                 <Input
                   onChange={(e) => debouncedSearchHandler(e.target.value)}