[Front | FlexScreen] Banner | GalleryCard | Product (#99)

* Update styles for Banner and body components

* The most significant changes were made to the `Card.tsx` and `Category.tsx` files. In `Card.tsx`, the import statement was updated for the new version, the `useStyles` function was modified to remove the `card` style, and the `GalleryCard` function was updated to remove the `className` attribute from the `Card` component. In `Category.tsx`, the import statement was updated to remove the import of `random` from `lodash-es`, the `useStyles` function was modified to change the `card` and `cate` styles, and the `GalleryCategory` function was updated to change the way `data` is mapped to `GalleryCard` components. Minor changes were also made to the `useStyles` function in `index.tsx` and the `Products` function in `Get.ts`.

1. The import statement in `Card.tsx` was updated to reflect the new version 0.2.0.
2. The `useStyles` function in `Card.tsx` was updated to remove the `card` style.
3. The `GalleryCard` function in `Card.tsx` was updated to remove the `className` attribute from the `Card` component.
4. The import statement in `Category.tsx` was updated to remove the import of `random` from `lodash-es`.
5. The `useStyles` function in `Category.tsx` was updated to change the `card` and `cate` styles.
6. The `GalleryCategory` function in `Category.tsx` was updated to change the way `data` is mapped to `GalleryCard` components.
7. The `useStyles` function in `index.tsx` was updated to change the `minWidth` of the `body` style.
8. The `Products` function in `Get.ts` was updated to change the return type and the return value.

* Add griffel plugin and update dependencies

* Remove unused dependencies and plugins

* The most significant changes include the addition of the `minHeight` property to the `img` class in `Banner.tsx`, the change of the `flexBasis` property in the `space` class in `Banner.tsx`, and the addition of the `fontSize` and `lineHeight` properties to the `white` class in `Banner.tsx`. Additionally, the `truncate` property was added to the `Text` component in `Banner.tsx`, and the version number was updated in `index.tsx`. Lastly, the `flexWrap` and `flexBasis` properties were modified in the `info` and `lex` classes respectively in `index.tsx`.

1. The `minHeight` property was added to the `img` class in `Banner.tsx` with a value of `320px`. This change ensures that the minimum height of the image is maintained at `320px` regardless of the screen size or resolution.

2. The `flexBasis` property was changed to `0` in the `space` class in `Banner.tsx` when the screen width is less than or equal to `1024px`. This change allows the space to shrink to `0` when the screen width is `1024px` or less, providing more flexibility in the layout.

3. The `fontSize` and `lineHeight` properties were added to the `white` class in `Banner.tsx` with values of `tokens.fontSizeBase300` and `tokens.lineHeightBase300` respectively when the screen width is less than or equal to `600px`. This change ensures that the font size and line height are adjusted appropriately for smaller screens.

4. The `truncate` property was added to the `Text` component in `Banner.tsx`. This change allows the text to be truncated if it exceeds the available space.

5. The version number was updated from `0.1.1` to `0.2.0` in `index.tsx`. This change indicates a new version of the application with significant updates.

6. The `flexWrap` property was added to the `info` class in `index.tsx` with a value of `wrap` when the screen width is less than or equal to `600px`. This change allows the items within the `info` class to wrap onto the next line when the screen width is `600px` or less.

7. The `flexBasis` property was changed to `100%` in the `lex` class in `index.tsx` when the screen width is less than or equal to `600px`. This change allows the `lex` class to take up the full width of the container when the screen width is `600px` or less.

Author: Aloento

package.json

@@ -18,9 +18,9 @@
     "@azure/msal-browser": "^3.7.1",
     "@azure/msal-common": "^14.6.1",
     "@azure/msal-react": "^2.0.10",
-    "@fluentui/react-components": "^9.46.0",
+    "@fluentui/react-components": "^9.46.2",
     "@fluentui/react-hooks": "^8.6.36",
-    "@fluentui/react-icons": "^2.0.225",
+    "@fluentui/react-icons": "^2.0.226",
     "@griffel/react": "^1.5.20",
     "@lexical/clipboard": "0.10.0",
     "@lexical/code": "0.10.0",
@@ -38,7 +38,7 @@
     "@lexical/utils": "0.10.0",
     "@microsoft/signalr": "^8.0.0",
     "@microsoft/signalr-protocol-msgpack": "^8.0.0",
-    "ahooks": "^3.7.8",
+    "ahooks": "^3.7.9",
     "dayjs": "^1.11.10",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.7",

pnpm-lock.yaml

@@ -6,7 +6,7 @@ import { ColFlex, Cover, Flex } from "~/Helpers/Styles";
 /**
  * @author Aloento
  * @since 1.3.5
- * @version 0.1.0
+ * @version 0.2.0
  */
 const useStyles = makeStyles({
   main: {
@@ -16,6 +16,7 @@ const useStyles = makeStyles({
     ...Cover,
     aspectRatio: "42/9",
     width: "100%",
+    minHeight: "320px",
     ...shorthands.borderRadius(tokens.borderRadiusXLarge),
   },
   mask: {
@@ -32,17 +33,25 @@ const useStyles = makeStyles({
     position: "absolute",
     top: 0,
     ...shorthands.padding(tokens.spacingHorizontalXXXL),
+    height: "-webkit-fill-available",
   },
   space: {
     flexBasis: "50%",
-    flexShrink: 0
+    flexShrink: 0,
+    "@media screen and (max-width: 1024px)": {
+      flexBasis: 0,
+    }
   },
   txt: {
     ...ColFlex,
-    rowGap: tokens.spacingVerticalXL,
+    justifyContent: "space-around"
   },
   white: {
-    color: "white !important"
+    color: "white !important",
+    "@media screen and (max-width: 600px)": {
+      fontSize: tokens.fontSizeBase300,
+      lineHeight: tokens.lineHeightBase300,
+    }
   }
 });
 
@@ -98,7 +107,7 @@ export function Banner() {
             </LargeTitle>
           </div>
 
-          <Text size={500} className={style.white}>
+          <Text size={500} truncate className={style.white}>
             Lorem Ipsum is simply dummy text of the printing and typesetting industry.
             Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
             when an unknown printer took a galley of type and scrambled it to make a type specimen book.

public/banner.jpg

@@ -8,13 +8,9 @@ import { Hub } from "~/ShopNet";
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 const useStyles = makeStyles({
-  card: {
-    flexBasis: "23%",
-    flexGrow: 0,
-  },
   img: {
     aspectRatio: "1",
     ...Cover,
@@ -28,7 +24,7 @@ const log = new Logger("Gallery", "Category", "Card");
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.1.5
+ * @version 0.1.6
  */
 export function GalleryCard({ Id }: { Id: number }) {
   const style = useStyles();
@@ -37,7 +33,7 @@ export function GalleryCard({ Id }: { Id: number }) {
   });
 
   return (
-    <Card className={style.card}>
+    <Card>
       <CardPreview>
         <GuidImage className={style.img} Guid={data?.Cover} Log={log} />
       </CardPreview>

src/Pages/Gallery/Banner.tsx

@@ -1,6 +1,5 @@
 import { SkeletonItem, Title3, makeStyles, tokens } from "@fluentui/react-components";
 import { useRequest } from "ahooks";
-import { random } from "lodash-es";
 import { Logger } from "~/Helpers/Logger";
 import { Flex } from "~/Helpers/Styles";
 import { Hub } from "~/ShopNet";
@@ -9,18 +8,22 @@ import { GalleryCard } from "./Card";
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 const useStyles = makeStyles({
   card: {
-    flexBasis: "23%",
-    flexGrow: 0,
+    flexBasis: "20%",
+    flexGrow: 1,
+    flexShrink: 0,
+    maxWidth: "25%",
+    minWidth: `${375 / 2}px`,
+    boxSizing: "border-box",
+    paddingRight: tokens.spacingHorizontalL,
+    paddingLeft: tokens.spacingHorizontalL,
   },
   cate: {
     ...Flex,
     flexWrap: "wrap",
-    justifyContent: "space-evenly",
-    columnGap: tokens.spacingVerticalL,
     rowGap: tokens.spacingVerticalXL
   }
 });
@@ -30,7 +33,7 @@ const log = new Logger("Gallery", "Category");
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.1.4
+ * @version 0.1.5
  */
 export function GalleryCategory({ Category }: { Category: string }) {
   const style = useStyles();
@@ -45,11 +48,11 @@ export function GalleryCategory({ Category }: { Category: string }) {
       {
         loading
           ? <SkeletonItem size={128} />
-          : data![0].map((x, i) => <GalleryCard key={i} Id={x} />)
-            .concat(
-              Array(data![1]).fill(null)
-                .map((_, i) => <div key={i + random(10, 100)} className={style.card} />)
-            )
+          : data!.map((x, i) => (
+            <div className={style.card}>
+              <GalleryCard key={i} Id={x} />
+            </div>
+          ))
       }
     </div>
   </>

src/Pages/Gallery/Card.tsx

@@ -16,13 +16,15 @@ import { ProductRadioList } from "./RadioList";
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 const useStyles = makeStyles({
-  main: ColFlex,
   info: {
     ...Flex,
-    columnGap: tokens.spacingHorizontalXXXL
+    columnGap: tokens.spacingHorizontalXXXL,
+    "@media screen and (max-width: 600px)": {
+      flexWrap: "wrap",
+    }
   },
   detail: {
     ...BaseCard,
@@ -38,6 +40,9 @@ const useStyles = makeStyles({
     flexBasis: "50%",
     flexShrink: 0,
     rowGap: tokens.spacingVerticalXL,
+    "@media screen and (max-width: 600px)": {
+      flexBasis: "100%",
+    }
   },
   fore: {
     color: tokens.colorBrandForeground1
@@ -59,7 +64,7 @@ const log = new Logger("Product");
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.3.0
+ * @version 0.3.1
  */
 function Product() {
   const style = useStyles();
@@ -82,27 +87,25 @@ function Product() {
         <title>{data?.Name || ""} - {Dic.Name}</title>
       </Helmet>
 
-      <div className={style.main}>
-        <div className={style.info}>
-          <ProductCarousel Id={id} />
+      <div className={style.info}>
+        <ProductCarousel Id={id} />
 
-          <div className={style.lex}>
-            <div className={style.detail}>
-              <LargeTitle className={style.fore}>
-                {data?.Name || "Loading..."}
-              </LargeTitle>
+        <div className={style.lex}>
+          <div className={style.detail}>
+            <LargeTitle className={style.fore}>
+              {data?.Name || "Loading..."}
+            </LargeTitle>
 
-              <Divider />
+            <Divider />
 
-              <ProductRadioList ProdId={id} />
+            <ProductRadioList ProdId={id} />
 
-              <Divider />
+            <Divider />
 
-              <ProductQuantity Id={id} />
-            </div>
-
-            <ProductLexicalRender ProdId={id} />
+            <ProductQuantity Id={id} />
           </div>
+
+          <ProductLexicalRender ProdId={id} />
         </div>
       </div>
     </RadioGroupContext>

src/Pages/Gallery/Category.tsx

@@ -15,7 +15,7 @@ import { NotFound } from "./404";
 const useStyles = makeStyles({
   body: {
     ...ColFlex,
-    minWidth: "1024px",
+    minWidth: "375px",
     position: "absolute",
     marginTop: `${NavH}px`,
     width: "100%",

src/Pages/Product/index.tsx

@@ -18,14 +18,10 @@ export abstract class GalleryGet extends ShopNet {
   /**
    * @author Aloento
    * @since 0.5.0
-   * @version 0.2.1
+   * @version 0.2.2
    */
-  public static async Products(category: string): Promise<[number[], number]> {
+  public static async Products(category: string): Promise<number[]> {
     const nums = await this.GetTimeCache<number[]>(category, "GalleryGetProducts", (x) => x.add(1, "m"), category);
-
-    return [
-      nums,
-      4 - (nums.length % 4)
-    ];
+    return nums;
   }
 }