Merge pull request #118 from Goldenrash-lab/un/table

Un/table
Goldenrash-lab · Jan 16, 2024 · b03cfd2 · b03cfd2
2 parents 0dfb34d + 133f434
commit b03cfd2
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 51 deletions.
diff --git a/src/components/TransactionsList/TransactionDashboard/TransactionDashboard.styled.js b/src/components/TransactionsList/TransactionDashboard/TransactionDashboard.styled.js
@@ -5,11 +5,15 @@ export const StyledThead = styled.tr`
   display: flex;
   justify-content: space-between;
   align-items: center;
-
+  width: 704px;
   height: 56px;
   padding: 20px 0px 20px 16px;
   border-radius: 8px;
   background: rgba(82, 59, 126, 0.8);
+
+  @media screen and (min-width: 1280px) {
+    width: 715px;
+  }
 `;
 
 export const StyledTheadItem = styled.th`
@@ -23,26 +27,13 @@ export const StyledTheadItem = styled.th`
     width: 120px;
   }
 `;
-export const StyledTable = styled.table`
-  width: 704px;
-  margin: 0 auto;
-  margin-top: 20px;
-
-  @media screen and (min-width: 1280px) {
-    width: 715px;
-    padding-left: 59px;
-    padding-right: 16px;
-    margin-top: 46px;
-  }
-`;
+export const StyledTable = styled.table``;
 export const WrapTable = styled.div`
-  width: 706px;
   overflow-x: hidden;
   overflow-y: hidden;
 
   @media screen and (min-width: 1280px) {
-    height: 500px;
-    width: 100%;
+    height: 430px;
     overflow-x: hidden;
     overflow-y: auto;
     &::-webkit-scrollbar {
@@ -56,3 +47,14 @@ export const WrapTable = styled.div`
     }
   }
 `;
+
+export const WrapperBlock = styled.div`
+  width: 704px;
+  margin-top: 20px;
+  @media screen and (min-width: 1280px) {
+    width: 100%;
+    padding-left: 49px;
+    padding-right: 16px;
+    margin-top: 46px;
+  }
+`;
diff --git a/src/components/TransactionsList/TransactionDashboard/TransactionsDashboard.jsx b/src/components/TransactionsList/TransactionDashboard/TransactionsDashboard.jsx
@@ -5,6 +5,7 @@ import {
   StyledThead,
   StyledTheadItem,
   WrapTable,
+  WrapperBlock,
 } from './TransactionDashboard.styled';
 import { useDispatch, useSelector } from 'react-redux';
 import { transactionsData } from 'store/Transactions/selectors';
@@ -20,7 +21,7 @@ const TransactionsDashboard = ({ open, get }) => {
   }, [dispatch]);
 
   return (
-    <WrapTable>
+    <WrapperBlock>
       <StyledTable>
         <thead>
           <StyledThead>
@@ -34,22 +35,26 @@ const TransactionsDashboard = ({ open, get }) => {
             <StyledTheadItem></StyledTheadItem>
           </StyledThead>
         </thead>
-        <tbody>
-          {transactions.length !== 0
-            ? sortedTransactions(transactions).map(transaction => {
-                return (
-                  <TransactionsItem
-                    get={get}
-                    open={open}
-                    key={transaction.id}
-                    transaction={transaction}
-                  />
-                );
-              })
-            : null}
-        </tbody>
       </StyledTable>
-    </WrapTable>
+      <WrapTable>
+        <StyledTable>
+          <tbody>
+            {transactions.length !== 0
+              ? sortedTransactions(transactions).map(transaction => {
+                  return (
+                    <TransactionsItem
+                      get={get}
+                      open={open}
+                      key={transaction.id}
+                      transaction={transaction}
+                    />
+                  );
+                })
+              : null}
+          </tbody>
+        </StyledTable>
+      </WrapTable>
+    </WrapperBlock>
   );
 };
 

diff --git a/src/components/TransactionsList/TransactionMobile/TransactionMobile.jsx b/src/components/TransactionsList/TransactionMobile/TransactionMobile.jsx
@@ -49,7 +49,11 @@ const TransactionMobile = ({ open, get }) => {
 
           const transType = transaction.type === 'EXPENSE' ? '-' : '+';
           return (
-            <TransactionCard $type={transType} key={transaction.id}>
+            <TransactionCard
+              $type={transType}
+              key={transaction.id}
+              $longcomment={transaction?.comment.length >= 20 ? true : false}
+            >
               <ul>
                 <StyledLi>
                   <SpanName>Date</SpanName>
@@ -61,19 +65,32 @@ const TransactionMobile = ({ open, get }) => {
                 </StyledLi>
                 <StyledLi>
                   <SpanName>Category</SpanName>
-                  <SpanItem>{category?.name}</SpanItem>
+                  <SpanItem
+                    $longcategory={category?.name.length > 14 ? true : false}
+                  >
+                    {category?.name}
+                  </SpanItem>
                 </StyledLi>
                 <StyledLi>
                   <SpanName>Comment</SpanName>
-                  <SpanItem>{transaction.comment}</SpanItem>
+
+                  <SpanItem
+                    $longcomment={
+                      transaction?.comment.length > 10 ? true : false
+                    }
+                  >
+                    {transaction.comment}
+                  </SpanItem>
                 </StyledLi>
                 <StyledLi>
                   <SpanName>Sum</SpanName>
                   <SpanItem $type={transType}>
                     {formatCurrency(transaction.amount)}
                   </SpanItem>
                 </StyledLi>
-                <StyledLi>
+                <StyledLi
+                  $longcomment={transaction?.comment.length > 10 ? true : false}
+                >
                   <StyledButton
                     onClick={() =>
                       dispatch(deleteTransactionThunk(transaction.id))

diff --git a/src/components/TransactionsList/TransactionMobile/TransactionMobile.styled.js b/src/components/TransactionsList/TransactionMobile/TransactionMobile.styled.js
@@ -8,20 +8,30 @@ export const SpanName = styled.span`
 
 export const SpanItem = styled.span`
   text-align: right;
-  font-size: 16px;
+  font-size: ${props =>
+    props.$longcategory === true || props.$longcomment === true
+      ? '15.5px'
+      : props.$longcategory === false
+      ? '16px'
+      : null};
   color: ${props =>
     props.$type === '+'
       ? 'var(--yellow)'
       : props.$type === '-'
-      ? 'var(--dashboard-text)'
+      ? 'var (--dashboard-text)'
       : null};
+  padding-top: ${props => (props.$longcategory === true ? '3px' : null)};
 `;
 
 export const StyledLi = styled.li`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 20px;
+  padding-left: 20px;
+  padding-top: ${props => (props.$longcomment === true ? '11px' : '12px')};
+  padding-right: 20px;
+  padding-bottom: ${props => (props.$longcomment === true ? '11px' : '12px')};
+
   border-bottom: 1px solid rgba(255, 255, 255, 0.41);
 
   &:last-child {
@@ -32,6 +42,7 @@ export const StyledLi = styled.li`
 export const TransactionCard = styled.li`
   width: 280px;
   height: 293px;
+  height: ${props => (props.$longcomment === true ? '303px' : '293px')};
   flex-shrink: 0;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.1);
@@ -87,8 +98,4 @@ export const StyledButton = styled.button`
   &:hover {
     box-shadow: 1px 9px 15px 1px rgba(0, 0, 0, 0.4);
   }
-
-  @media screen and (max-width: 320px) {
-    margin-left: 8px;
-  }
 `;
diff --git a/src/components/TransactionsList/TransactionsItem/TransactionsItem.styled.js b/src/components/TransactionsList/TransactionsItem/TransactionsItem.styled.js
@@ -6,7 +6,6 @@ export const StyledDeleteButton = styled.button`
   color: #fbfbfb;
   padding: 4px 12px 4px 12px;
   margin-left: 8px;
-  //margin-right: 10px;
   border-radius: 20px;
   border: transparent;
   background: linear-gradient(
@@ -21,9 +20,9 @@ export const StyledDeleteButton = styled.button`
   &:hover {
     box-shadow: 1px 9px 15px 1px rgba(0, 0, 0, 0.4);
   }
-  /* @media screen and (max-width: 1280px) {
+  @media screen and (max-width: 1280px) {
     margin-right: 0px;
-  } */
+  }
 `;
 
 export const StyledTransaction = styled.tr`
@@ -63,8 +62,9 @@ export const StyledTh = styled.th`
     justify-content: center;
     align-items: center;
 
-    @media screen and (max-width: 1280px) {
+    @media screen and (min-width: 1280px) {
       padding-right: 0;
+      margin-right: 0;
     }
   }
 `;

diff --git a/src/components/TransactionsList/TransactionsList.styled.js b/src/components/TransactionsList/TransactionsList.styled.js
@@ -4,7 +4,7 @@ export const StyledAddTransactionButton = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
-  position: absolute;
+  position: fixed;
   right: 40px;
   bottom: 41px;
   width: 44px;
@@ -23,8 +23,8 @@ export const StyledAddTransactionButton = styled.button`
   &:hover {
     box-shadow: 1px 9px 15px 1px rgba(0, 0, 0, 0.4);
   }
-  @media screen and (max-width: 1280px) {
-    position: fixed;
+  @media screen and (min-width: 1280px) {
+    position: absolute;
   }
 `;
 export const StyledImg = styled.img`
@@ -37,7 +37,6 @@ export const StyledImg = styled.img`
   }
 `;
 export const Wrapper = styled.div`
-  width: 100%;
   margin-top: 75px;
   margin-bottom: 75px;
   display: flex;