Merge pull request #118 from DyadStablecoin/chore/mobileoptimization

Mobile optimization
DyadStablecoin · Feb 1, 2023 · 591037d · 591037d · vercel · Feb 1, 2023
2 parents df46472 + e6adc7f
commit 591037d
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 37 deletions.
diff --git a/src/components/Leaderboard.jsx b/src/components/Leaderboard.jsx
@@ -44,11 +44,11 @@ export default function Leaderboard() {
   }
 
   return (
-    <div className="flex items-center justify-center flex-col">
-      <div className="md:w-[80rem]">
+    <div className="flex flex-col items-center justify-center">
+      <div className="w-full md:w-[80rem] md:p-0 p-2">
         <Loading isLoading={isLoading} />
         <Header refetch={refetch} />
-        <div className="flex justify-between">
+        <div className="flex items-center justify-between">
           <Filter setOption={setOption} resetRange={resetRange} />
           <Search
             owner={owner}

diff --git a/src/components/LeaderboardRowMore.jsx b/src/components/LeaderboardRowMore.jsx
@@ -35,10 +35,10 @@ export default function LeaderboardRowMore({ nft, setTxHash }) {
   return (
     <>
       <Menu>
-        <MenuButton as={Button} style={{ backgroundColor: "black" }}>
+        <MenuButton as={Button} style={{ backgroundColor: "black", zIndex: 0 }}>
           <MoreOutlined rotate={90} />
         </MenuButton>
-        <MenuList style={{ backgroundColor: "black" }}>
+        <MenuList style={{ backgroundColor: "black", zIndex: 1 }}>
           <MenuItem style={MENU_ITEM_STYLE} onClick={onOpenMoveDeposit}>
             <div className={`flex items-center justify-center gap-4`}>
               <MailOutlined />
@@ -69,11 +69,7 @@ export default function LeaderboardRowMore({ nft, setTxHash }) {
         <Liquidate nft={nft} onClose={onCloseLiquidate} setTxHash={setTxHash} />
       </Popup>
       <Popup isOpen={isOpenMoveDeposit} onClose={onCloseMoveDeposit}>
-        <Move
-          nft={nft}
-          onClose={onCloseMoveDeposit}
-          setTxHash={setTxHash}
-        />
+        <Move nft={nft} onClose={onCloseMoveDeposit} setTxHash={setTxHash} />
       </Popup>
       <Popup isOpen={isOpenSnipe} onClose={onCloseSnipe}>
         <Snipe nft={nft} onClose={onCloseSnipe} setTxHash={setTxHash} />

diff --git a/src/components/LeaderboardTableHeader.jsx b/src/components/LeaderboardTableHeader.jsx
@@ -7,11 +7,17 @@ export default function LeaderboardTableHeader({ sortBy, setSortBy }) {
       <th>rank</th>
       <SortableHeader header="xp" sortBy={sortBy} setSortBy={setSortBy} />
       <th>value</th>
-      <SortableHeader header="deposit" sortBy={sortBy} setSortBy={setSortBy} />
+      <SortableHeader
+        header="deposit"
+        sortBy={sortBy}
+        setSortBy={setSortBy}
+        extraClasses={"hidden md:table-cell"}
+      />
       <SortableHeader
         header="withdrawn"
         sortBy={sortBy}
         setSortBy={setSortBy}
+        extraClasses={"hidden md:table-cell"}
       />
       <th className="hidden md:table-cell">Deposit Ratio</th>
       <th>Address</th>

diff --git a/src/components/LeaderboardTableHeaderSortable.jsx b/src/components/LeaderboardTableHeaderSortable.jsx
@@ -3,15 +3,17 @@ import {
   CaretUpOutlined,
   SwapOutlined,
 } from "@ant-design/icons";
+import cn from "classnames";
 
 export default function LeaderboardTableHeaderSortable({
   header,
   sortBy,
   setSortBy,
+  extraClasses,
 }) {
   return (
-    <th>
-      <div className="flex items-center justify-center gap-1">
+    <th className={cn(extraClasses ? extraClasses : "")}>
+      <div className={"flex items-center justify-center gap-1"}>
         <div>{header}</div>
         <SwapOutlined
           rotate={90}

diff --git a/src/components/LeaderboardTableRow.jsx b/src/components/LeaderboardTableRow.jsx
@@ -32,7 +32,7 @@ export default function LeaderboardTableRow({
     <>
       {nft && (
         <tr
-          className="leaderboard-row"
+          className="transition-all leaderboard-row hover:scale-[1.01] text-sm md:text-base"
           style={{
             border: `1px solid ${
               status === STATUS.LIQUIDATABLE ? COLORS.Red : "#3A403C"

diff --git a/src/components/NFT.jsx b/src/components/NFT.jsx
@@ -159,28 +159,42 @@ export default function NFT({ tokenId }) {
           ${status === STATUS.LIQUIDATABLE && "shadow-lg shadow-[#800101]"}`}
         >
           <LoadingInplace isLoading={isLoadingTx || isFetching} />
-          <div className="flex gap-4 justify-between w-full">
-            <div className="md:w-[8rem]">
-              <div className="w-[107px]">
-                <img src={image} alt="" />
+          <div className="flex flex-col justify-between w-full gap-4 md:flex-row">
+            <div className="flex flex-row gap-4 md:w-full">
+              <div className="md:w-[8rem]">
+                <div className="w-[107px]">
+                  <img src={image} alt="" />
+                </div>
+              </div>
+              <div className="w-full">
+                <NftStats nft={nft} />
+                {nft.isActive && (
+                  <div className="mt-2">
+                    <Button
+                      borderColor="#463D81"
+                      bgColor="#0F0D1B"
+                      onClick={onOpenSync}
+                      isDisabled={isFetching || isFetchingTx}
+                    >
+                      Sync
+                    </Button>
+                  </div>
+                )}
               </div>
             </div>
-            <div className="w-full">
-              <NftStats nft={nft} />
-              {nft.isActive && (
-                <div className="mt-2">
-                  <Button
-                    borderColor="#463D81"
-                    bgColor="#0F0D1B"
-                    onClick={onOpenSync}
-                    isDisabled={isFetching || isFetchingTx}
-                  >
-                    Sync
-                  </Button>
+            <div className="flex flex-row w-full gap-8 md:w-min">
+              <Performance nft={nft} />
+              <div className="block w-full md:w-[0px] md:hidden">
+                <Label>Deposit Ratio</Label>
+                <div className="mt-3">
+                  <ProgressBar
+                    percent={parseInt(
+                      (nft.deposit / (nft.deposit + nft.withdrawn)) * 100
+                    )}
+                  />
                 </div>
-              )}
+              </div>
             </div>
-            <Performance nft={nft} />
           </div>
           <div className="hidden md:block md:w-full">
             <Label>Deposit Ratio</Label>
@@ -192,12 +206,12 @@ export default function NFT({ tokenId }) {
               />
             </div>
           </div>
-          <div className="flex gap-4 mt-4 md:mt-0">
+          <div className="flex justify-between gap-4 mt-4 md:justify-start md:mt-0">
             <div className="flex flex-col gap-2">
               <div className="flex flex-col gap-2 ">
                 <Label>Minted DYAD</Label>
                 <div className="md:flex">
-                  <div className="md:mr-2 mb-2 md:mb-0">
+                  <div className="mb-2 md:mr-2 md:mb-0">
                     {round((nft.deposit + nft.withdrawn) / 10 ** 18, 2)}
                   </div>
                   <Button
@@ -223,7 +237,7 @@ export default function NFT({ tokenId }) {
               <Label>Deposited DYAD</Label>
               <div className="flex flex-col gap-2">
                 <div className="md:flex md:gap-2">
-                  <div className="md:mr-2 mb-2 md:mb-0">
+                  <div className="mb-2 md:mr-2 md:mb-0">
                     {Math.round((nft.deposit / 10 ** 18) * 100) / 100}
                   </div>
                   <div className="flex gap-2">
@@ -249,7 +263,7 @@ export default function NFT({ tokenId }) {
                   </div>
                 </div>
                 {isClaimable && nft.isActive && (
-                  <div className="flex gap-2 animate-claimPulse">
+                  <div className="flex animate-claimPulse">
                     <Button
                       onClick={onOpenClaim}
                       isDisabled={

diff --git a/src/components/NFTs.jsx b/src/components/NFTs.jsx
@@ -11,7 +11,7 @@ export default function NFTs() {
   return (
     <>
       {tokenIds.length > 0 ? (
-        <div>
+        <div className="w-full p-6 md:p-0 md:w-max">
           <div className="mb-2">Your dNFTs</div>
           <div className="flex flex-col gap-4">
             {tokenIds.map((tokenId) => {