feat: Earn Responsive Web Develop (#172)

gnoswap-labs · Aug 14, 2023 · 552318a · 552318a
1 parent 767da9b
commit 552318a
Show file tree

Hide file tree

Showing 37 changed files with 810 additions and 367 deletions.
diff --git a/packages/web/src/components/common/my-position-card-list/MyPositionCardList.styles.ts b/packages/web/src/components/common/my-position-card-list/MyPositionCardList.styles.ts
@@ -1,6 +1,30 @@
-import { css } from "@emotion/react";
+import { fonts } from "@constants/font.constant";
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
 
-export const wrapper = () => css`
+export const CardListWrapper = styled.div`
+  ${mixins.flexbox("column", "center", "center")};
+  width: 100%;
+  gap: 24px;
+  ${media.mobile} {
+    gap: 16px;
+  }
+  .box-indicator {
+    ${mixins.flexbox("row", "center", "center")};
+    width: 100%;
+    gap: 4px;
+    span {
+      color: ${({ theme }) => theme.color.text04};
+      ${fonts.body12};
+    }
+    .current-page {
+      color: ${({ theme }) => theme.color.text05};
+    }
+  }
+`;
+
+export const GridWrapper = styled.div`
   width: 100%;
   display: grid;
   grid-template-columns: 1fr;
@@ -13,4 +37,14 @@ export const wrapper = () => css`
     border-radius: 10px;
     box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.2);
   }
+  ${media.tablet} {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  ${media.mobile} {
+    overflow-x: auto;
+    grid-gap: 12px;
+    grid-template-columns: repeat(auto-fill, 290px);
+    grid-auto-flow: column;
+    grid-auto-columns: 290px;
+  }
 `;
diff --git a/packages/web/src/components/common/my-position-card-list/MyPositionCardList.tsx b/packages/web/src/components/common/my-position-card-list/MyPositionCardList.tsx
@@ -1,24 +1,29 @@
 import React from "react";
 import LoadMoreButton from "@components/common/load-more-button/LoadMoreButton";
 import MyPositionCard from "@components/common/my-position-card/MyPositionCard";
-import { wrapper } from "./MyPositionCardList.styles";
+import { GridWrapper, CardListWrapper } from "./MyPositionCardList.styles";
 import { SHAPE_TYPES, skeletonStyle } from "@constants/skeleton.constant";
+import { DeviceSize } from "@styles/media";
 
 interface MyPositionCardListProps {
   loadMore?: boolean;
   isFetched: boolean;
   onClickLoadMore?: () => void;
   list: any[];
+  windowSize: number;
+  currentIndex: number;
 }
 
 const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
   loadMore,
   isFetched,
   onClickLoadMore,
   list,
+  windowSize,
+  currentIndex,
 }) => (
-  <>
-    <div css={wrapper}>
+  <CardListWrapper>
+    <GridWrapper>
       {isFetched &&
         list.length > 0 &&
         list.map((item, idx) => <MyPositionCard item={item} key={idx} />)}
@@ -30,13 +35,20 @@ const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
             css={skeletonStyle("100%", SHAPE_TYPES.ROUNDED_SQUARE)}
           />
         ))}
-    </div>
-    {loadMore && onClickLoadMore && (
-      <div className="load-more">
+    </GridWrapper>
+    {windowSize > DeviceSize.mobile ? (
+      loadMore &&
+      onClickLoadMore && (
         <LoadMoreButton show={loadMore} onClick={onClickLoadMore} />
+      )
+    ) : (
+      <div className="box-indicator">
+        <span className="current-page">{currentIndex}</span>
+        <span>/</span>
+        <span>{list.length}</span>
       </div>
     )}
-  </>
+  </CardListWrapper>
 );
 
 export default MyPositionCardList;
diff --git a/packages/web/src/components/common/my-position-card/MyPositionCard.styles.ts b/packages/web/src/components/common/my-position-card/MyPositionCard.styles.ts
@@ -1,102 +1,120 @@
 import { fonts } from "@constants/font.constant";
 import { STAKED_OPTION } from "@constants/option.constant";
-import { css, Theme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
-export const wrapper = (stakeType: STAKED_OPTION) => (theme: Theme) =>
-  css`
+interface CardProps {
+  stakeType: STAKED_OPTION;
+}
+
+export const MyPositionCardWrapper = styled.div<CardProps>`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  max-width: 322px;
+  width: 100%;
+  ${media.tablet} {
+    max-width: 350px;
+  }
+  ${media.mobile} {
+    max-width: 290px;
+  }
+  gap: 16px;
+  padding: 16px;
+  border-radius: 10px;
+  background-color: ${({ theme }) => theme.color.background03};
+  border: 1px solid
+    ${({ stakeType }) =>
+      stakeType === STAKED_OPTION.STAKED
+        ? ({ theme }) => theme.color.border01
+        : ({ theme }) => theme.color.border02};
+  box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08);
+
+  transition: all 0.3s ease;
+  color: ${({ theme }) => theme.color.text02};
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ theme }) => theme.color.background02};
+    border: 1px solid ${({ theme }) => theme.color.border03};
+  }
+  .title-wrapper {
+    ${mixins.flexbox("column", "flex-end", "space-between")};
     width: 100%;
-    background-color: ${stakeType === STAKED_OPTION.STAKED
-      ? theme.color.background03
-      : theme.color.background09};
-    border: 1px solid
-      ${stakeType === STAKED_OPTION.STAKED
-        ? theme.color.border01
-        : theme.color.border02};
-    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    padding: 16px;
-    transition: all 0.3s ease;
-    color: ${theme.color.text02};
-    cursor: pointer;
-    &:hover {
-      background-color: ${theme.color.background02};
-      border: 1px solid ${theme.color.border03};
-    }
-    .token-pair {
-      width: 100%;
+    gap: 4px;
+    ${fonts.body5}
+
+    .box-header {
       ${mixins.flexbox("row", "center", "space-between")};
-      ${fonts.body5}
+      align-self: stretch;
     }
-    .badge-info {
-      width: 100%;
-      margin: 4px 0px 16px;
-      ${mixins.flexbox("row", "center", "flex-end")};
+    .badge-group {
+      ${mixins.flexbox("row", "center", "flex-start")};
       gap: 2px;
       .staking-icon {
         width: 16px;
         height: 16px;
         margin-right: 4px;
         & * {
-          fill: ${theme.color.text06};
+          fill: ${({ theme }) => theme.color.text06};
         }
       }
     }
+  }
 
-    .pool-price-info {
+  .list-wrapper {
+    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    width: 100%;
+    gap: 4px;
+    ${media.mobile} {
+      gap: 5px;
+    }
+    .list-header {
       ${mixins.flexbox("row", "center", "space-between")};
       width: 100%;
     }
-
-    .content-item {
-      ${mixins.flexbox("column", "flex-start", "center")}
-      gap: 8px;
-      &:nth-child(even) {
-        align-items: flex-end;
-      }
-      span {
-        ${mixins.flexbox("row", "center", "center")};
-      }
+    .list-content {
+      ${mixins.flexbox("row", "center", "space-between")};
+      width: 100%;
     }
+  }
 
-    .label-text {
-      color: ${theme.color.text04};
-      ${fonts.body12};
-      height: 18px;
-    }
+  .label-text {
+    color: ${({ theme }) => theme.color.text04};
+    ${fonts.body12};
+    height: 18px;
+  }
 
-    .pool-price-graph {
-      width: 100%;
-      padding: 16px;
-      background-color: ${theme.color.backgroundOpacity};
-      border-radius: 8px;
-      margin-top: 16px;
-    }
-    .price-range-info {
-      ${mixins.flexbox("row", "flex-start", "space-between")};
-      width: 100%;
-      margin-bottom: 24px;
-    }
-    .current-price {
-      ${mixins.flexbox("column", "flex-start", "center", false)};
-      gap: 4px;
-      color: ${theme.color.text05};
-      ${fonts.p4};
-    }
-    .dummy-chart {
-      width: 100%;
-      height: 61px;
-      border: 1px solid green;
-    }
+  .pool-price-graph {
+    width: 100%;
+    padding: 16px;
+    background-color: ${({ theme }) => theme.color.backgroundOpacity};
+    border-radius: 8px;
+    margin-top: 16px;
+  }
+  .price-range-info {
+    ${mixins.flexbox("row", "flex-start", "space-between")};
+    width: 100%;
+    margin-bottom: 24px;
+  }
+  .current-price {
+    ${mixins.flexbox("column", "flex-start", "center", false)};
+    gap: 4px;
+    color: ${({ theme }) => theme.color.text05};
+    ${fonts.p4};
+  }
+  .dummy-chart {
+    width: 100%;
+    height: 61px;
+    border: 1px solid green;
+  }
 
-    .min-max-price {
-      ${mixins.flexbox("column", "center", "space-between")};
-      width: 100%;
-      gap: 8px;
-      margin-top: 24px;
-    }
-    .price-section {
-      ${mixins.flexbox("row", "center", "space-between")};
-      width: 100%;
-    }
-  `;
+  .min-max-price {
+    ${mixins.flexbox("column", "center", "space-between")};
+    width: 100%;
+    gap: 8px;
+    margin-top: 16px;
+  }
+  .price-section {
+    ${mixins.flexbox("row", "center", "space-between")};
+    width: 100%;
+  }
+`;