this commit fixes issues from previous commit and probably adds more …

…issues. - added `isMobile` media query - redesigned homepage and feature panel - added red background araud search bar on mobile - changed `layerswitcher.button` from "Mapy" to "Warstwy" in polish translation
zbycz · May 6, 2023 · 49781f3 · 49781f3
1 parent 4b85fe2
commit 49781f3
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 31 deletions.
diff --git a/src/components/FeaturePanel/ImageSection/FeatureImage.tsx b/src/components/FeaturePanel/ImageSection/FeatureImage.tsx
@@ -38,11 +38,9 @@ const Wrapper = styled.div`
 `;
 
 const Bottom = styled.div`
-  position: absolute;
-  bottom: 0;
   display: flex;
   align-items: center;
-  width: 100%;
+  flex: 1;
   height: 44px;
 `;
 
@@ -61,22 +59,26 @@ const IconWrapper = styled.div`
 `;
 
 const AttributionLink = styled.a`
-  position: absolute;
-  right: 1px;
-  top: 1px;
   text-align: right;
   padding-right: 3px;
   font-size: 80%;
   text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
   color: #fff;
   text-decoration: none;
+  align-self: flex-end;
   opacity: ${({ portrait }) => (portrait ? 1 : 0.8)};
-
+  flex: 0;
   &:hover {
     opacity: 1;
     text-shadow: 1px 1px 10px rgba(0, 0, 0, 1), 0 0 4px rgba(0, 0, 0, 1);
   }
 `;
+const AttributionAndBottomWrapper = styled.div`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+`;
 
 interface Props {
   feature: Feature;
@@ -116,20 +118,22 @@ export const FeatureImage = ({ feature, ico, children }: Props) => {
           <img src={`/icons/${ico}_11.svg`} alt={ico} title={ico} />
         </IconWrapper>
       )}
-      {source && (
-        <Tooltip title={nl2br(`© ${attribution}${uncertainTitle}`)} arrow>
-          <AttributionLink
-            href={link}
-            target="_blank"
-            rel="noopener"
-            portrait={portrait}
-          >
-            {attribution}
-          </AttributionLink>
-        </Tooltip>
-      )}
       {!feature.skeleton && image === LOADING && <InlineSpinner />}
-      <Bottom>{children}</Bottom>
+      <AttributionAndBottomWrapper>
+        <Bottom>{children}</Bottom>
+        {source && (
+          <Tooltip title={nl2br(`© ${attribution}${uncertainTitle}`)} arrow>
+            <AttributionLink
+              href={link}
+              target="_blank"
+              rel="noopener"
+              portrait={portrait}
+            >
+              {attribution}
+            </AttributionLink>
+          </Tooltip>
+        )}
+      </AttributionAndBottomWrapper>
     </Wrapper>
   );
 };
diff --git a/src/components/HomepagePanel/HomepagePanel.tsx b/src/components/HomepagePanel/HomepagePanel.tsx
@@ -53,6 +53,14 @@ const Center = styled.div`
   ${({ mb }) => mb && 'margin-bottom: 2em;'}
   ${({ mt }) => mt && 'margin-top: 2em;'}
 `;
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: sticky;
+  top: 0px;
+  right: 0px;
+`;
 
 const Spacer = styled.div`
   padding-bottom: 2em;
@@ -74,7 +82,9 @@ export const HomepagePanel = () => {
   return (
     <PanelWrapper>
       <PanelScrollbars>
-        <ClosePanelButton right onClick={persistHideHomepage} />
+        <ButtonWrapper>
+          <ClosePanelButton onClick={persistHideHomepage} />
+        </ButtonWrapper>
         <Content>
           <div>
             <Center mb>

diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
@@ -11,16 +11,19 @@ import { useFeatureContext } from '../utils/FeatureContext';
 import { AutocompleteInput } from './AutocompleteInput';
 import { t } from '../../services/intl';
 import { ClosePanelButton } from '../utils/ClosePanelButton';
-import { isDesktop, useMobileMode } from '../helpers';
+import { isDesktop, useMobileMode, isMobile } from '../helpers';
 
 const TopPanel = styled.div`
   position: absolute;
   height: 72px;
   padding: 12px;
   box-sizing: border-box;
-  border-radius: 30px;
   z-index: 1200;
-
+  @media ${isMobile} {
+    background-color: ${({ theme }) => theme.palette.background.searchBox};
+    height: 68px;
+    padding: 8px;
+  }
   width: 100%;
   @media ${isDesktop} {
     width: 434px;

diff --git a/src/components/helpers.tsx b/src/components/helpers.tsx
@@ -92,3 +92,6 @@ export const useMobileMode = () => useMediaQuery('(max-width: 700px)');
 
 // (>= mobile size) This changes just the app layout
 export const isDesktop = '(min-width: 500px)';
+
+// (<= mobile size) This changes just the app layout (revesed variable from above)
+export const isMobile = '(max-width: 500px)';
diff --git a/src/components/utils/ClosePanelButton.tsx b/src/components/utils/ClosePanelButton.tsx
@@ -3,12 +3,11 @@ import CloseIcon from '@material-ui/icons/Close';
 import React from 'react';
 import { t } from '../../services/intl';
 
-export const ClosePanelButton = ({ onClick, right = false, style = {} }) => (
+export const ClosePanelButton = ({ onClick, style = {} }) => (
   <IconButton
     aria-label={t('close_panel')}
     onClick={onClick}
     style={{
-      ...(right ? { position: 'fixed', right: 12 } : {}),
       ...style,
     }}
   >

diff --git a/src/components/utils/PanelHelpers.tsx b/src/components/utils/PanelHelpers.tsx
@@ -1,25 +1,41 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Scrollbars } from 'react-custom-scrollbars';
-import { isDesktop } from '../helpers';
+import { isDesktop, isMobile } from '../helpers';
 
 // custom scrollbar
 // better: https://github.com/rommguy/react-custom-scroll
 // maybe https://github.com/malte-wessel/react-custom-scrollbars (larger)
 export const PanelWrapper = styled.div`
   position: absolute;
   left: 12px;
+  @media ${isMobile} {
+    left: 0px;
+  }
   top: 72px; // TopPanel
+  @media ${isMobile} {
+    top: 68px;
+  }
+
   bottom: 12px;
-  border-radius: 12px;
+  @media ${isMobile} {
+    bottom: 0px;
+  }
+  @media ${isDesktop} {
+    border-radius: 12px;
+    // height: calc(100vh - 72px - 12px - 24px);
+    border: 1px solid ${({ theme }) => theme.palette.divider};
+  }
+
   background: ${({ theme }) => theme.palette.panelBackground};
   overflow: hidden;
   z-index: 1100;
 
   display: flex;
   flex-direction: column;
-
-  width: calc(100% - 24px);
+  @media ${isMobile} {
+    width: 100%;
+  }
   @media ${isDesktop} {
     width: 410px;
   }

diff --git a/src/locales/pl.js b/src/locales/pl.js
@@ -139,7 +139,7 @@ export default {
   'tags.phone': 'Telefon',
   'tags.opening_hours': 'Godziny otwarcia',
 
-  'layerswitcher.button': 'Mapy',
+  'layerswitcher.button': 'Warstwy',
   'layerswitcher.heading': 'Warstwy mapy',
   'layerswitcher.intro': 'Dzięki temu, że OpenStreetMap oferuje dane źródłowe, każdy może stworzyć różne warianty mapy.',
   'layerswitcher.add_layer_button': 'Dodaj własną warstwę',