Merge pull request #49 from MargoMarm/features/TableForDiaryOnMobile

Features/table for diary on mobile
MargoMarm · Sep 20, 2023 · 9c9b4c9 · 9c9b4c9
2 parents adaddf9 + 0ab488a
commit 9c9b4c9
Show file tree

Hide file tree

Showing 6 changed files with 270 additions and 38 deletions.
diff --git a/src/components/DayDiaryProductsOrExercises/DayDiaryProductsOrExercises.jsx b/src/components/DayDiaryProductsOrExercises/DayDiaryProductsOrExercises.jsx
@@ -10,13 +10,15 @@ import {
 } from './DayDiaryProductsOrExercises.styled';
 import sprite from '../../assets/sprite.svg';
 import TableForDiary from '../TableForDiary/TableForDiary';
+import TableForDiaryOnMobile from '../TableForDiaryOnMobile/TableForDiaryOnMobile';
 
 const DayDiaryProductsOrExercises = ({
   to,
   marginBottom,
   list,
   productTable,
   exerciseTable,
+  windowWidth,
 }) => {
   return (
     <DayDiaryContainer marginBottom={marginBottom}>
@@ -32,11 +34,22 @@ const DayDiaryProductsOrExercises = ({
         </AddLink>
       </DayDiarySubDiv>
       {list.length !== 0 ? (
-        <TableForDiary
-          list={list}
-          productTable={productTable}
-          exerciseTable={exerciseTable}
-        />
+        <>
+          {windowWidth >= 768 && (
+            <TableForDiary
+              list={list}
+              productTable={productTable}
+              exerciseTable={exerciseTable}
+            />
+          )}
+          {windowWidth < 768 && (
+            <TableForDiaryOnMobile
+              list={list}
+              productTable={productTable}
+              exerciseTable={exerciseTable}
+            />
+          )}
+        </>
       ) : (
         <DayNoContentText>
           Not found {productTable ? 'products' : 'exercises'}
@@ -52,6 +65,7 @@ DayDiaryProductsOrExercises.propTypes = {
   list: PropTypes.array,
   productTable: PropTypes.bool,
   exerciseTable: PropTypes.bool,
+  windowWidth: PropTypes.number,
 };
 
 export default DayDiaryProductsOrExercises;
diff --git a/src/components/DayDiaryProductsOrExercises/DayDiaryProductsOrExercises.styled.jsx b/src/components/DayDiaryProductsOrExercises/DayDiaryProductsOrExercises.styled.jsx
@@ -4,12 +4,14 @@ import { NavLink } from 'react-router-dom';
 import { colors, mq } from '../../utils';
 
 export const DayDiaryContainer = styled.div`
+  overflow: auto;
+
   position: relative;
   box-sizing: border-box;
   display: block;
   width: 100%;
   height: 335px;
-  padding: 16px;
+  padding: 15px;
   align-items: flex-start;
   margin-bottom: ${props => props.marginBottom}px;
 

diff --git a/src/components/TableForDiary/TableForDiary.styled.jsx b/src/components/TableForDiary/TableForDiary.styled.jsx
@@ -140,6 +140,10 @@ export const BASELINE_THEME_EXERCISES = {
       --data-table-library_grid-template-columns:  123px 165px 139px 114px 99px 102px 28px;
       margin-left: 16px;
     }
+
+    @media (max-width: 767) {
+      --data-table-library_grid-template-columns:  0 0 0 0 0 0 0;
+    }
   `,
   Cell: `
     height: 40px;

diff --git a/src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.jsx b/src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.jsx
@@ -0,0 +1,112 @@
+import PropTypes from 'prop-types';
+
+import sprite from '../../assets/sprite.svg';
+
+import { DeleteBtn, DeleteIcon } from '../TableForDiary/TableForDiary.styled';
+import {
+  BottomContainer,
+  Cell,
+  CellValue,
+  ContainerForTable,
+  CustomContainer,
+} from './TableForDiaryOnMobile.styled';
+
+const TableForDiaryOnMobile = ({ list, productTable, exerciseTable }) => {
+  return (
+    <>
+      {productTable && (
+        <CustomContainer>
+          {list.map(item => (
+            <ContainerForTable key={item._id.$oid}>
+              <Cell>
+                Title<CellValue>{item.title}</CellValue>
+              </Cell>
+
+              <Cell>
+                Category<CellValue>{item.category}</CellValue>
+              </Cell>
+
+              <BottomContainer>
+                <Cell>
+                  Calories <CellValue>{item.calories}</CellValue>
+                </Cell>
+
+                <Cell>
+                  Weight <CellValue>{item.weight}</CellValue>
+                </Cell>
+
+                <Cell>
+                  Recommend <CellValue before>{'YES'}</CellValue>
+                </Cell>
+
+                <Cell>
+                  {' '}
+                  <CellValue>
+                    <DeleteBtn>
+                      <DeleteIcon>
+                        <use href={sprite + `#icon-trash`}></use>
+                      </DeleteIcon>
+                    </DeleteBtn>
+                  </CellValue>
+                </Cell>
+              </BottomContainer>
+            </ContainerForTable>
+          ))}
+        </CustomContainer>
+      )}
+
+      {exerciseTable && (
+        <CustomContainer>
+          {list.map(item => (
+            <ContainerForTable key={item.name}>
+              <Cell>
+                Body Part<CellValue>{item.bodyPart}</CellValue>
+              </Cell>
+
+              <Cell>
+                Equipment<CellValue>{item.equipment}</CellValue>
+              </Cell>
+
+              <Cell>
+                Name<CellValue>{item.name}</CellValue>
+              </Cell>
+
+              <BottomContainer>
+                <Cell>
+                  Target <CellValue>{item.burnedCalories}</CellValue>
+                </Cell>
+
+                <Cell>
+                  Burned Calor..<CellValue>{item.time}</CellValue>
+                </Cell>
+
+                <Cell>
+                  Time <CellValue>{item.time}</CellValue>
+                </Cell>
+
+                <Cell>
+                  {' '}
+                  <CellValue>
+                    <DeleteBtn>
+                      <DeleteIcon>
+                        <use href={sprite + `#icon-trash`}></use>
+                      </DeleteIcon>
+                    </DeleteBtn>
+                  </CellValue>
+                </Cell>
+              </BottomContainer>
+            </ContainerForTable>
+          ))}
+        </CustomContainer>
+      )}
+    </>
+  );
+};
+
+TableForDiaryOnMobile.propTypes = {
+  list: PropTypes.array,
+  productTable: PropTypes.bool,
+  exerciseTable: PropTypes.bool,
+};
+
+export default TableForDiaryOnMobile;
diff --git a/src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.styled.jsx b/src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.styled.jsx
@@ -0,0 +1,110 @@
+import styled from '@emotion/styled';
+import { colors, mq } from '../../utils';
+
+export const CustomContainer = styled.div`
+  overflow: auto;
+  margin-top: 22px;
+  height: 254px;
+`;
+
+export const ContainerForTable = styled.div`
+  padding-right: 14px;
+  margin-bottom: 40px;
+  height: auto;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+export const BottomContainer = styled.div`
+  display: flex;
+  height: 64px;
+
+  & > div {
+    &:nth-of-type(1) {
+      width: 81px;
+      margin-right: 16px;
+    }
+  }
+
+  & > div {
+    &:nth-of-type(2) {
+      width: 80px;
+      margin-right: 16px;
+    }
+  }
+
+  & > div {
+    &:nth-of-type(3) {
+      width: 76px;
+      margin-right: 8px;
+
+      & > p {
+        &::before {
+          ${props =>
+            props.before &&
+            `
+            content: '';
+            width: 14px;
+            height: 14px;
+            border-radius: 10px;
+            background: #419b09;
+            margin-right: 8px;
+          `}
+        }
+      }
+    }
+  }
+
+  & > div {
+    &:nth-of-type(4) {
+      
+
+      & > p {
+        padding: 0;
+        margin-top: 35px;
+        
+        border: none;
+        }
+      }
+    }
+  
+
+`;
+
+export const Cell = styled.div`
+  font-size: 12px;
+  line-height: 1.5;
+
+  color: ${colors.orange};
+`;
+
+export const CellValue = styled.p`
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  margin-bottom: 16px;
+  padding: 10px 0 10px 14px;
+
+  font-size: 14px;
+  line-height: 1.29;
+
+  border-radius: 12px;
+  border: 1px solid ${colors.textWhite03};
+
+  color: ${colors.white};
+
+  &::before {
+    ${props =>
+      props.before &&
+      `
+      content: '';
+      width: 14px;
+      height: 14px;
+      border-radius: 10px;
+      background: #419b09;
+      margin-right: 8px;
+    `}
+  }
+`;
diff --git a/src/pages/Diary/Diary.jsx b/src/pages/Diary/Diary.jsx
@@ -11,6 +11,7 @@ import {
 
 import { mgForDiary } from '../../utils/descriptionTextMargin';
 import { mgForTitle } from '../../utils/titleMarginForDairyPage';
+import { useEffect, useState } from 'react';
 
 const listProducts = [
   {
@@ -58,36 +59,6 @@ const listProducts = [
       4: false,
     },
   },
-  {
-    _id: {
-      $oid: '5d51694902b2373622ff5b6f',
-    },
-    weight: 100,
-    calories: 160,
-    category: 'fish',
-    title: 'Cold smoked bream',
-    groupBloodNotAllowed: {
-      1: false,
-      2: false,
-      3: false,
-      4: false,
-    },
-  },
-  {
-    _id: {
-      $oid: '5d51694902b2373622ff5b8d',
-    },
-    weight: 100,
-    calories: 281,
-    category: 'fish',
-    title: 'Pollock in batter',
-    groupBloodNotAllowed: {
-      1: false,
-      2: false,
-      3: false,
-      4: false,
-    },
-  },
 ];
 
 const listExercises = [
@@ -164,9 +135,22 @@ const listExercises = [
 ];
 
 const Diary = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    window.addEventListener('resize', updateWindowWidth);
+
+    return () => {
+      window.removeEventListener('resize', updateWindowWidth);
+    };
+  }, []);
+
+  const updateWindowWidth = () => {
+    setWindowWidth(window.innerWidth);
+  };
+
   return (
     <>
-      {' '}
       <Title text={'Diary'} margin={mgForTitle} />
       <DiaryPageContainer>
         <CustomDivForCards>
@@ -183,8 +167,14 @@ const Diary = () => {
             marginBottom={40}
             list={listProducts}
             productTable
+            windowWidth={windowWidth}
+          />
+
+          <DayDiaryProductsOrExercises
+            list={listExercises}
+            exerciseTable
+            windowWidth={windowWidth}
           />
-          <DayDiaryProductsOrExercises list={listExercises} exerciseTable />
         </CustomDivForTables>{' '}
       </DiaryPageContainer>
     </>