diff --git a/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx b/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx index 83aa188d6..22ab76345 100644 --- a/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx +++ b/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx @@ -37,6 +37,14 @@ const HeadingContainer = styled.div` align-items: center; `; +const DetailButtonContainer = styled.div` + margin: 8px; + @supports (-webkit-touch-callout: none) { + /* CSS specific to iOS devices */ + margin-bottom: 28px; + } +`; + const ParentItem = styled.div` margin: 12px 8px -4px 8px; a { @@ -145,7 +153,7 @@ export const ClimbingPanel = ({ footer, showTagsTable }) => { {/* @TODO unite with parent panel */}
{footer}
-
+ -
+ ); diff --git a/src/components/FeaturePanel/Climbing/Editor/RouteNumber.tsx b/src/components/FeaturePanel/Climbing/Editor/RouteNumber.tsx index d24897acf..0b57f5e4b 100644 --- a/src/components/FeaturePanel/Climbing/Editor/RouteNumber.tsx +++ b/src/components/FeaturePanel/Climbing/Editor/RouteNumber.tsx @@ -36,12 +36,12 @@ export const RouteNumber = ({ children: routeNumber, x, y }: Props) => { setRouteIndexHovered, } = useClimbingContext(); const digits = String(routeNumber).length; - const RECT_WIDTH = ((digits > 2 ? digits : 0) * 3 + 20) / photoZoom.scale; - const RECT_HEIGHT = 20 / photoZoom.scale; - const RECT_Y_OFFSET = 10 / photoZoom.scale; + const RECT_WIDTH = ((digits > 2 ? digits : 0) * 3 + 18) / photoZoom.scale; + const RECT_HEIGHT = 18 / photoZoom.scale; + const RECT_Y_OFFSET = 8 / photoZoom.scale; const OUTLINE_WIDTH = 2 / photoZoom.scale; const HOVER_WIDTH = 10 / photoZoom.scale; - const TEXT_Y_SHIFT = 15 / photoZoom.scale; + const TEXT_Y_SHIFT = 13 / photoZoom.scale; const getX = () => { const isFarRight = x + RECT_WIDTH / 2 + OUTLINE_WIDTH > imageSize.width; diff --git a/src/components/FeaturePanel/Climbing/RouteNumber.tsx b/src/components/FeaturePanel/Climbing/RouteNumber.tsx index 65b8907e3..75714f3f9 100644 --- a/src/components/FeaturePanel/Climbing/RouteNumber.tsx +++ b/src/components/FeaturePanel/Climbing/RouteNumber.tsx @@ -7,8 +7,8 @@ import { useRouteNumberColors } from './utils/useRouteNumberColors'; const Container = styled.div<{ colors: Record; }>` - width: 22px; - height: 22px; + width: 20px; + height: 20px; line-height: 20px; border-radius: 50%; background: ${({ colors }) => colors.background}; diff --git a/src/components/FeaturePanel/Climbing/utils/useScrollShadow.tsx b/src/components/FeaturePanel/Climbing/utils/useScrollShadow.tsx index bb6091bf7..6367fa008 100644 --- a/src/components/FeaturePanel/Climbing/utils/useScrollShadow.tsx +++ b/src/components/FeaturePanel/Climbing/utils/useScrollShadow.tsx @@ -52,7 +52,7 @@ export const useScrollShadow = (deps = []) => { const { scrollTop, scrollHeight, clientHeight } = (scrollElementRef.current as any)?.view ?? scrollElementRef.current; // hack because of react-custom-scroll - setIsScrolledToTop(scrollTop === 0); + setIsScrolledToTop(scrollTop <= 0); setIsScrolledToBottom( Math.ceil(scrollTop + clientHeight) >= scrollHeight, );