climbing: Climbing Panel small fixes (#281)

zbycz · Mar 25, 2024 · 0fdf50c · 0fdf50c
1 parent 284001c
commit 0fdf50c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git 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 */}
           <div style={{ padding: '20px 15px 0 15px' }}>{footer}</div>
         </PanelScrollbars>
-        <div style={{ padding: '8px' }}>
+        <DetailButtonContainer>
           <Button
             color="primary"
             size="large"
@@ -156,7 +164,7 @@ export const ClimbingPanel = ({ footer, showTagsTable }) => {
           >
             Show crag detail
           </Button>
-        </div>
+        </DetailButtonContainer>
       </PanelWrapper>
     </>
   );

diff --git 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
@@ -7,8 +7,8 @@ import { useRouteNumberColors } from './utils/useRouteNumberColors';
 const Container = styled.div<{
   colors: Record<string, string>;
 }>`
-  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
@@ -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,
       );