Merge pull request #54 from Tasitaforme/diaryPage

correct styles
Tasitaforme · Dec 27, 2023 · 833356c · 833356c
2 parents d2e8c1a + 65d64b5
commit 833356c
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 34 deletions.
diff --git a/src/pages/DiaryPage/DiaryItem.jsx b/src/pages/DiaryPage/DiaryItem.jsx
@@ -18,8 +18,7 @@ export default function DiaryItem({ data, type }) {
       <List>
         {data.map((item, index, arr) => {
           return (
-            <ListItem key={item?.id || index}>
-              <p>{index + 1}</p>
+            <ListItem key={item?.id || index} itemNumber={index + 1}>
               {item?.id ? (
                 <RecordedMeal
                   data={item}

diff --git a/src/pages/DiaryPage/DiaryPage.styled.js b/src/pages/DiaryPage/DiaryPage.styled.js
@@ -107,23 +107,46 @@ export const List = styled.ul`
   padding: 16px 12px;
   margin-bottom: 24px;
 
+  @media (min-width: 768px) {
+    padding: 32px 14px;
+  }
+
   @media (min-width: 1200px) {
     margin-bottom: 0;
   }
 `;
 
 export const ListItem = styled.li`
+  position: relative;
   display: flex;
-
+  width: 100%;
+  height: 44px;
+  flex-wrap: wrap;
   &:not(:last-child) {
     margin-bottom: 30px;
   }
+
+  &:before {
+    content: '${({ itemNumber }) => itemNumber}';
+    width: 16px;
+    position: absolute;
+    left: 0;
+  }
+
+  padding-left: 32px;
+  padding-right: 62px;
+
+  @media screen and (min-width(768px)) {
+    height: 22px;
+  }
 `;
 
 export const RecordBtn = styled.button`
   display: flex;
-  align-items: center;
-  margin-left: 16px;
+  margin-top: 3px;
+  padding: 0;
+  border: none;
+  outline: none;
 `;
 
 export const RecordMealIcon = styled.svg`
@@ -291,11 +314,8 @@ export const CancelModalBtn = styled.button`
 `;
 
 export const RecordedMealWrapper = styled.div`
-  margin-left: 16px;
-`;
-
-export const MealsNameWrapper = styled.div`
   display: flex;
+  width: 100%;
 `;
 
 export const MealsName = styled.h4`
@@ -304,6 +324,9 @@ export const MealsName = styled.h4`
 `;
 
 export const EditBtn = styled.button`
+  position: absolute;
+  top: 0;
+  right: 0;
   display: flex;
   margin-left: auto;
   cursor: pointer;
@@ -322,21 +345,34 @@ export const EditLabel = styled.p`
   margin-left: 6px;
 `;
 
+export const EditAndNutritionWrapper = styled.div`
+  @media (min-width: 768px) {
+    display: flex;
+    flex-direction: row-reverse;
+    margin-left: auto;
+    gap: 30px;
+  }
+`;
+
 export const RecordedNutritionsWrapper = styled.div`
   display: flex;
-  justify-content: space-around;
+  justify-content: flex-start;
   gap: 12px;
   margin-top: 6px;
+  width: 100%;
 
-  /* @media (min-width: 768px) {
-    display: flex;
-    justify-content: flex-end;
-    gap: 30px;
-    margin-right: 80px;
-  } */
+  @media (min-width: 768px) {
+    margin-top: 0;
+    width: fit-content;
+    margin-left: auto;
+    gap: 40px;
+  }
 `;
 
 export const RecordedNutritions = styled.p`
   font-size: 12px;
   color: var(--grey-light);
+  & > span {
+    color: #fff;
+  }
 `;
diff --git a/src/pages/DiaryPage/RecordedMeal.jsx b/src/pages/DiaryPage/RecordedMeal.jsx
@@ -3,8 +3,6 @@ import {
   EditIcon,
   EditLabel,
   MealsName,
-  MealsNameWrapper,
-  RecordedMealWrapper,
   RecordedNutritions,
   RecordedNutritionsWrapper,
 } from './DiaryPage.styled';
@@ -13,22 +11,24 @@ import sprite from '../../assets/sprite.svg';
 export default function RecordedMeal({ data, type, setModalData }) {
   return (
     <>
-      <RecordedMealWrapper>
-        <MealsNameWrapper>
-          <MealsName>{data.name}</MealsName>
-          <EditBtn onClick={() => setModalData({ type, ...data })}>
-            <EditIcon>
-              <use href={`${sprite}#edit`} />
-            </EditIcon>
-            <EditLabel>Edit</EditLabel>
-          </EditBtn>
-        </MealsNameWrapper>
-        <RecordedNutritionsWrapper>
-          <RecordedNutritions>Carb. {data.carbohydrate}</RecordedNutritions>
-          <RecordedNutritions>Prot. {data.protein}</RecordedNutritions>
-          <RecordedNutritions>Fat. {data.fat}</RecordedNutritions>
-        </RecordedNutritionsWrapper>
-      </RecordedMealWrapper>
+      <MealsName>{data.name}</MealsName>
+      <EditBtn onClick={() => setModalData({ type, ...data })}>
+        <EditIcon>
+          <use href={`${sprite}#edit`} />
+        </EditIcon>
+        <EditLabel>Edit</EditLabel>
+      </EditBtn>
+      <RecordedNutritionsWrapper>
+        <RecordedNutritions>
+          Carb. <span>{data.carbohydrate}</span>
+        </RecordedNutritions>
+        <RecordedNutritions>
+          Prot. <span>{data.protein}</span>
+        </RecordedNutritions>
+        <RecordedNutritions>
+          Fat. <span>{data.fat}</span>
+        </RecordedNutritions>
+      </RecordedNutritionsWrapper>
     </>
   );
 }