Squashed commit of the following:

commit 05a0457 Author: nasubi916 <[email protected]> Date: Sun Oct 20 02:56:47 2024 +0900 タグによるフィルターUIの作成(機能なし) commit 2091302 Author: nasubi916 <[email protected]> Date: Sun Oct 20 02:49:58 2024 +0900 icon 修正 & テキスト変更 commit 5a15e0d Author: nasubi916 <[email protected]> Date: Sun Oct 20 02:40:23 2024 +0900 クリックで指定の位置に飛ぶ commit 47bbe86 Author: nasubi916 <[email protected]> Date: Sun Oct 20 01:57:30 2024 +0900 UI調整 commit ebb00b2 Author: nasubi916 <[email protected]> Date: Sat Oct 19 22:04:45 2024 +0900 UI仮組み commit e2ea97f Author: nasubi916 <[email protected]> Date: Sat Oct 19 21:21:32 2024 +0900 カルーセルの表示を画面中央 commit 5fff83e Author: nasubi916 <[email protected]> Date: Sat Oct 19 21:11:31 2024 +0900 Buttonコンポーネントの流用 commit 3586c62 Author: nasubi916 <[email protected]> Date: Sat Oct 19 20:41:24 2024 +0900 PCビュー表示非表示の整理
wappon28dev · Oct 22, 2024 · 0313b6c · 0313b6c
1 parent 2b6fafa
commit 0313b6c
Show file tree

Hide file tree

Showing 7 changed files with 431 additions and 178 deletions.
diff --git a/src/components/GridLayout.tsx b/src/components/GridLayout.tsx
@@ -10,7 +10,8 @@ export function GridLayout({
     <p.div
       display="grid"
       gap={4}
-      gridTemplateColumns="repeat(auto-fill, minmax(300px, 1fr))"
+      gridTemplateColumns="repeat(auto-fill, minmax(600px, 1fr))"
+      smDown={{ gridTemplateColumns: "1fr" }}
     >
       {children}
     </p.div>

diff --git a/src/components/HorizontalScrolling.tsx b/src/components/HorizontalScrolling.tsx
@@ -9,7 +9,7 @@ export function HorizontalScrolling({
   title?: string;
 }): ReactElement {
   return (
-    <>
+    <p.div w="100%">
       {title !== "" && (
         <p.p fontSize="xl" fontWeight="bold" ml={5} mt={2}>
           {title}
@@ -18,6 +18,6 @@ export function HorizontalScrolling({
       <p.div overflowX="scroll" w="100%">
         {children}
       </p.div>
-    </>
+    </p.div>
   );
 }
diff --git a/src/components/cva/Button.tsx b/src/components/cva/Button.tsx
@@ -18,6 +18,10 @@ export const Button = p("button", {
     p: "2",
     px: "4",
     rounded: "md",
+    _hover: {
+      transform: "scale(1.05)",
+    },
+    transition: "transform 0.1s",
   },
   variants: {
     variant: {

diff --git a/src/components/project/Card.tsx b/src/components/project/Card.tsx
@@ -44,7 +44,7 @@ export function ProjectCard({
       m={4}
       mdDown={{ minW: "90%" }}
       minH={300}
-      minW={300}
+      minW={600}
       p={4}
       rounded="md"
       w="20%"

diff --git a/src/routes/_auth/projects/$uuid.tsx b/src/routes/_auth/projects/$uuid.tsx
@@ -209,14 +209,10 @@ function GridDetailInfo({
             )}
 
             <Button
-              _hover={{
-                transform: "scale(1.05)",
-              }}
               my="4"
               onClick={() => {
                 scrollFruits();
               }}
-              transition="transform 0.1s"
               variant="filled"
             >
               <IconText
@@ -266,44 +262,42 @@ function GridDetailInfo({
                 className={dialog.trigger}
                 disabled={data.status === "wakaba"}
               >
-                <HStack
-                  _hover={{
-                    transform: "scale(1.05)",
-                    transition: "transform 0.1s",
-                  }}
+                <Button
                   alignContent="center"
                   bg="wkb-neutral.100"
                   display="flex"
-                  justify="center"
                   mb={4}
                   p={2}
                   rounded="md"
+                  w="full"
                 >
-                  {data.status !== "wakaba" &&
-                  data.sponsor !== undefined &&
-                  data.sponsor_data !== undefined ? (
-                    <>
-                      <p.img rounded="full" src={data.sponsor.icon} w={50} />
-                      <VStack alignItems="start" gap={0}>
-                        <p.p fontWeight="bold">{data.sponsor.name}</p.p>
-                        <p.div px={2}>
-                          <p.p
-                            fontSize="xs"
-                            h="100%"
-                            lineClamp={3}
-                            maxH={100}
-                            overflow="hidden"
-                            textOverflow="ellipsis"
-                          >
-                            {data.sponsor_data.motivation}
-                          </p.p>
-                        </p.div>
-                      </VStack>
-                    </>
-                  ) : (
-                    <p.p>スポンサー募集中</p.p>
-                  )}
-                </HStack>
+                  <HStack>
+                    {data.status !== "wakaba" &&
+                    data.sponsor !== undefined &&
+                    data.sponsor_data !== undefined ? (
+                      <>
+                        <p.img rounded="full" src={data.sponsor.icon} w={50} />
+                        <VStack alignItems="start" gap={0}>
+                          <p.p fontWeight="bold">{data.sponsor.name}</p.p>
+                          <p.div px={2}>
+                            <p.p
+                              fontSize="xs"
+                              h="100%"
+                              lineClamp={3}
+                              maxH={100}
+                              overflow="hidden"
+                              textOverflow="ellipsis"
+                            >
+                              {data.sponsor_data.motivation}
+                            </p.p>
+                          </p.div>
+                        </VStack>
+                      </>
+                    ) : (
+                      <p.p>スポンサー募集中</p.p>
+                    )}
+                  </HStack>
+                </Button>
               </Dialog.Trigger>
               <Portal>
                 <Dialog.Backdrop className={dialog.backdrop} />

diff --git a/src/routes/_auth/projects/-components/Fruit.tsx b/src/routes/_auth/projects/-components/Fruit.tsx
@@ -41,10 +41,6 @@ export function FruitCard({
         {description}
       </p.p>
       <Button
-        _hover={{
-          transform: "scale(1.05)",
-          transition: "transform 0.1s",
-        }}
         alignSelf="end"
         variant="filled"
       >