Merge pull request #293 from aodn/bugfix/6301-map-dot-click-card

🐛 fix list card and map card
aodn · Feb 12, 2025 · f4aadf7 · f4aadf7
2 parents a0a48b1 + f681193
commit f4aadf7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 21 deletions.
diff --git a/src/components/map/mapbox/component/CardPopup.tsx b/src/components/map/mapbox/component/CardPopup.tsx
@@ -10,10 +10,11 @@ import {
   fontColor,
   fontSize,
   fontWeight,
+  gap,
   padding,
   zIndex,
 } from "../../../../styles/constants";
-import { Card, CardContent, CardMedia, Typography } from "@mui/material";
+import { Box, Card, CardContent, CardMedia, Typography } from "@mui/material";
 import MapContext from "../MapContext";
 import { useAppDispatch } from "../../../common/store/hooks";
 import { fetchResultByUuidNoStore } from "../../../common/store/searchReducer";
@@ -26,6 +27,7 @@ import Layers from "../layers/Layers";
 import GeojsonLayer from "../layers/GeojsonLayer";
 import ResultCardButtonGroup from "../../../result/ResultCardButtonGroup";
 import { SEARCH_PAGE_REFERER } from "../../../../pages/search-page/constants";
+import BookmarkButton from "../../../bookmark/BookmarkButton";
 
 interface CardPopupProps {
   layerId: string;
@@ -169,11 +171,20 @@ const CardPopup: React.FC<CardPopupProps> = ({
             </Map>
           </CardMedia>
         )}
-        <CardContent sx={{ width: isTablet ? "calc(100% - 250px)" : "100%" }}>
+        <CardContent
+          sx={{
+            position: "relative",
+            width: isTablet ? "calc(100% - 250px)" : "100%",
+          }}
+        >
+          <Box position="absolute" sx={{ top: gap.md, right: gap.md }}>
+            <BookmarkButton dataset={content} />
+          </Box>
           <Typography
             fontWeight={fontWeight.bold}
             fontSize={fontSize.info}
             sx={{
+              width: "95%",
               padding: 0,
               overflow: "hidden",
               textOverflow: "ellipsis",

diff --git a/src/components/result/ListResultCard.tsx b/src/components/result/ListResultCard.tsx
@@ -71,6 +71,9 @@ const ListResultCard: FC<ListResultCardProps> = ({
         onMouseLeave={() => setShowButtons(false)}
         data-testid="result-card-list"
       >
+        <Box position="absolute" top={gap.md} right={gap.md}>
+          <BookmarkButton dataset={content} />
+        </Box>
         <Box
           display="flex"
           flexDirection="column"
@@ -80,14 +83,20 @@ const ListResultCard: FC<ListResultCardProps> = ({
         >
           <Box maxHeight={isSimplified ? "100%" : "80%"}>
             <CardHeader
-              sx={{ p: 0 }}
+              sx={{
+                p: 0,
+                "& .MuiCardHeader-action": {
+                  margin: 0,
+                },
+              }}
               title={
                 <Typography
                   onClick={() => onClickDetail(uuid)}
                   color={fontColor.gray.dark}
                   fontSize={fontSize.resultCardTitle}
                   fontWeight={fontWeight.bold}
                   title={title}
+                  padding={0}
                   sx={{
                     overflow: "hidden",
                     textOverflow: "ellipsis",
@@ -111,7 +120,8 @@ const ListResultCard: FC<ListResultCardProps> = ({
                     width: "auto",
                     maxWidth: "200px",
                     height: LIST_CARD_TITLE_HEIGHT,
-                    paddingX: padding.double,
+                    pr: padding.double,
+                    pl: padding.large,
                   }}
                 />
               }
@@ -182,23 +192,6 @@ const ListResultCard: FC<ListResultCardProps> = ({
             </Box>
           )}
         </Box>
-        <Stack
-          direction="column"
-          flexWrap="nowrap"
-          justifyContent="space-around"
-          alignItems="center"
-          height="100%"
-        >
-          <Box
-            position="absolute"
-            top={gap.lg}
-            right={gap.lg}
-            height="20px"
-            width="auto"
-          >
-            <BookmarkButton dataset={content} />
-          </Box>
-        </Stack>
       </Card>
     );
   }