fixed mobile view for item card

Goldenrash-lab · Jan 16, 2024 · 133f434 · 133f434
1 parent 8e5a008
commit 133f434
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
diff --git a/src/components/TransactionsList/TransactionDashboard/TransactionsDashboard.jsx b/src/components/TransactionsList/TransactionDashboard/TransactionsDashboard.jsx
@@ -40,7 +40,7 @@ const TransactionsDashboard = ({ open, get }) => {
         <StyledTable>
           <tbody>
             {transactions.length !== 0
-              ? transactions?.map(transaction => {
+              ? sortedTransactions(transactions).map(transaction => {
                   return (
                     <TransactionsItem
                       get={get}

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);