updates to mobile

Author: R-Sandor

frontend/components/Bookmark/BookmarkCard.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject, useEffect, useRef, useState } from "react";
-import { Card, CloseButton } from "react-bootstrap";
+import { Card } from "react-bootstrap";
 import { useTagsDispatch } from "@/contexts/TagContext";
 import Bookmark from "@/types/Bookmarks/Bookmark";
 import TagAction from "@/types/Bookmarks/TagAction";
@@ -46,6 +46,67 @@ async function addTagToBookmark(
   return action;
 }
 
+function OverlayCard({
+  url,
+  currentBookmark,
+  bookmark,
+  inEditMode,
+  edit,
+  changeEditMode,
+}: {
+  url: string;
+  currentBookmark: RefObject<Bookmark>;
+  bookmark: Bookmark;
+  inEditMode: boolean;
+  edit: RefObject<Bookmark>;
+  changeEditMode: () => void;
+}): ReactNode {
+  return (
+    <Card className={style.bookmarkCard}>
+      <div className="row g-0">
+        <div className="col-12">
+          <Card.Img
+            className={`${style.cImg}`}
+            src={url + bookmark.screenshotUrl}
+            alt="screenshot preview"
+          ></Card.Img>
+        </div>
+        <div className="col-12">
+          <PlainCard
+            changeEditMode={changeEditMode}
+            bookmark={bookmark}
+            currentBookmark={currentBookmark}
+            inEditMode={inEditMode}
+            edit={edit}
+          ></PlainCard>
+        </div>
+      </div>
+    </Card>
+  );
+}
+function PlainCard({
+  currentBookmark,
+  bookmark,
+  inEditMode,
+  edit,
+  changeEditMode,
+}: {
+  currentBookmark: RefObject<Bookmark>;
+  bookmark: Bookmark;
+  inEditMode: boolean;
+  edit: RefObject<Bookmark>;
+  changeEditMode: () => void;
+}): ReactNode {
+  return (
+    <CardBody
+      bookmark={currentBookmark.current}
+      highlight={bookmark.textHighlight}
+      inEditMode={inEditMode}
+      edit={edit}
+      changeEditMode={changeEditMode}
+    />
+  );
+}
 export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
   const dispatch = useTagsDispatch();
   const bkmkDispatch = useBookmarkDispatch();
@@ -195,20 +256,24 @@ export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
     }
   }
 
-  function resolveCardType(): ReactNode {
-    return bookmark.screenshotUrl ? overlayCard() : plainCard();
-  }
-
-  function overlayCard(): ReactNode {
-    return (
-      <Card className={style.bookmarkCard}>
-        <img
-          className="card-img-top"
-          src={imgApi + bookmark.screenshotUrl}
-          alt="screenshot preview"
-        />
-        {plainCard()}
-      </Card>
+  function Content(): ReactNode {
+    return bookmark.screenshotUrl ? (
+      <OverlayCard
+        url={imgApi}
+        changeEditMode={changeEditMode}
+        bookmark={bookmark}
+        currentBookmark={currentBookmark}
+        inEditMode={inEditMode}
+        edit={edit}
+      />
+    ) : (
+      <PlainCard
+        changeEditMode={changeEditMode}
+        bookmark={bookmark}
+        currentBookmark={currentBookmark}
+        inEditMode={inEditMode}
+        edit={edit}
+      ></PlainCard>
     );
   }
 
@@ -217,24 +282,17 @@ export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
     handleEdits(!inEditMode);
   }
 
-  function plainCard(): ReactNode {
-    return (
-      <CardBody
-        bookmark={currentBookmark.current}
-        highlight={bookmark.textHighlight}
-        inEditMode={inEditMode}
-        edit={edit}
-        changeEditMode={changeEditMode}
-      />
-    );
-  }
-
   return (
-    <div data-testid={`bookmark-${bookmark.title}`} className={style.main}>
+    <div
+      data-testid={`bookmark-${bookmark.title}`}
+      className={`${style.cardRoot}`}
+    >
       <div className={`card ${style.bookmarkCard}`}>
         <div className={style.cardHeader}>
-          <CloseButton
-            className={style.deleteBookmarkIcon}
+          <button
+            type="button"
+            aria-label="Close"
+            className={`${style.deleteBookmarkIcon} btn-close`}
             onClick={handleShow}
             data-testid={`bk-id-${bookmark.id}-deleteBtn`}
           />
@@ -251,8 +309,8 @@ export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
           handleClose={handleClose}
           deleteBkmk={deleteBkmk}
         />
-        {resolveCardType()}
-        <Card.Footer className={style.cardFooter}>
+        <Content />
+        <div className={`card-footer ${style.cardFooter}`}>
           <div className={style.container}>
             {strTags.map((tag) => (
               <button
@@ -280,7 +338,7 @@ export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
               onChange={onChange}
             />
           </div>
-        </Card.Footer>
+        </div>
       </div>
     </div>
   );

frontend/components/Bookmark/CardBody.tsx

@@ -3,6 +3,7 @@ import { RefObject, useState } from "react";
 import Bookmark from "@type/Bookmarks/Bookmark";
 import EditableField from "./EditableField";
 import { ScrapableBookmarkToggle } from "./ScrapableToggle";
+import style from "./bookmarkCard.module.scss";
 
 interface CardBodyProp {
   bookmark: Readonly<Bookmark>;
@@ -22,8 +23,8 @@ export default function CardBody({
   const [isScrapable, setIsScrapable] = useState(bookmark.scrapable);
 
   return (
-    <Card.Body>
-      <Card.Title>
+    <Card.Body className={``}>
+      <Card.Title className={`${style.cTitle}`}>
         {inEditMode ? (
           <EditableField
             fieldValue={bookmark.title}

frontend/components/Bookmark/bookmarkCard.module.scss

@@ -1,20 +1,11 @@
-.main {
+.cardRoot {
   margin-left: 0.5rem; /* 8px */
   margin-right: 0.5rem; /* 8px */
+}
 
+.cTitle {
   @media screen and (max-width: 700px) {
-    .title {
-      font-size: 12px;
-    }
-    p {
-      font-size: 20px;
-    }
-    .card-title {
-      font-size: 15px;
-    }
-    .card-footer {
-      font-size: 12px;
-    }
+    font-size: 19px;
   }
 }
 
@@ -27,6 +18,10 @@
   border: none;
   border-top: 1px solid;
   background-color: unset;
+
+  @media screen and (max-width: 700px) {
+    min-height: 50px;
+  }
 }
 
 .pillButton {
@@ -51,6 +46,11 @@
   &:disabled {
     background-color: grey !important;
   }
+
+  @media screen and (max-width: 700px) {
+    margin: 5px;
+    height: 35px;
+  }
 }
 
 .formButton {
@@ -139,10 +139,16 @@
   float: right;
 }
 
+.cImg {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
 .bookmarkCard {
-  min-height: 250px;
+  // min-height: 250px;
   margin-bottom: 20px;
   background-color: var(--card-bg);
+  border: 0px;
 }
 
 .newBookmarkCard {

frontend/components/CardView/BookmarkCardsView.tsx

@@ -55,7 +55,7 @@ export default function BookmarkCardsView() {
             return (
               <div
                 key={b.id}
-                className="col-xs-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 col-xxl-2"
+                className="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 col-xxl-2"
               >
                 <BookmarkCard bookmark={b} />
               </div>