Merge pull request #88 from MargoMarm/bagfix/exercisesPage

Bagfix/exercises page
MargoMarm · Sep 25, 2023 · c36b04c · c36b04c
2 parents bd52864 + ab4cba5
commit c36b04c
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 36 deletions.
diff --git a/src/assets/images/exercises_desk_2x.jpeg b/src/assets/images/exercises_desk_2x.jpeg
diff --git a/src/components/AddExerciseForm/AddExerciseForm.jsx b/src/components/AddExerciseForm/AddExerciseForm.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
+import { capitalizeWord } from '../../utils/capitalizeWord';
 
 import Timer from '../Timer';
 import {
@@ -97,19 +98,19 @@ export default function AddExerciseForm({ data, addExercise }) {
       <InfoCardConteiner>
         <InfoCard>
           <CardTitle>Name</CardTitle>
-          <CardInfo>{name}</CardInfo>
+          <CardInfo>{capitalizeWord(name)}</CardInfo>
         </InfoCard>
         <InfoCard>
           <CardTitle>Target</CardTitle>
-          <CardInfo>{target}</CardInfo>
+          <CardInfo>{capitalizeWord(target)}</CardInfo>
         </InfoCard>
         <InfoCard>
           <CardTitle>Body Part</CardTitle>
-          <CardInfo>{bodyPart}</CardInfo>
+          <CardInfo>{capitalizeWord(bodyPart)}</CardInfo>
         </InfoCard>
         <InfoCard>
           <CardTitle>Equipment</CardTitle>
-          <CardInfo>{equipment}</CardInfo>
+          <CardInfo>{capitalizeWord(equipment)}</CardInfo>
         </InfoCard>
         <InfoCard>
           <CardTitle>Time</CardTitle>

diff --git a/src/components/ExercisesBtnBack/ExercisesBtnBack.jsx b/src/components/ExercisesBtnBack/ExercisesBtnBack.jsx
@@ -1,6 +1,7 @@
 import { useDispatch } from 'react-redux';
 import { changeStatusFilter } from '../../redux/exercises/slice';
 import { ButtonBack, SvgArrow } from './ExercisesBtnBack.styled'; // Імпорт стилів
+import sprite from '../../assets/sprite.svg';
 
 const ExercisesBtnBack = () => {
   const dispatch = useDispatch();
@@ -12,7 +13,7 @@ const ExercisesBtnBack = () => {
   return (
     <ButtonBack type="button" onClick={handleBtnBack}>
       <SvgArrow>
-        <use href="/src/assets/sprite.svg#icon-arrow-left"></use>
+        <use href={sprite + `#icon-arrow-left`}></use>
       </SvgArrow>
       Back
     </ButtonBack>

diff --git a/src/components/ExercisesBtnBack/ExercisesBtnBack.styled.jsx b/src/components/ExercisesBtnBack/ExercisesBtnBack.styled.jsx
@@ -4,8 +4,11 @@ import { mq, colors } from '../../utils';
 
 export const ButtonBack = styled.button`
   display: flex;
-  padding: 0px;
   align-items: center;
+
+ padding: 0px;
+ margin-top:10px;
+
 	font-size: 14px;
   line-height: 1.28; 
 

diff --git a/src/components/ExercisesCategories/ExercisesCategories.styled.jsx b/src/components/ExercisesCategories/ExercisesCategories.styled.jsx
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-// import { NavLink } from 'react-router-dom';
 import { mq, colors } from '../../utils';
 
 export const CategoriesList = styled.ul`
@@ -28,6 +27,21 @@ export const CategoriesLink = styled.button`
   outline: none;
   border: none;
 
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+
+    transition:
+      background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
+      transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    transform: scalex(0);
+
+    bottom: -4px;
+    left: 0;
+    background-color: transparent;
+  }
+
   &.active::after {
     content: '';
     display: block;
@@ -38,6 +52,7 @@ export const CategoriesLink = styled.button`
     bottom: -4px;
     left: 0;
     background-color: #ef8964;
+    transform: scalex(1);
     border-radius: 2px;
   }
 

diff --git a/src/components/ExercisesItemList/ExercisesItemList.jsx b/src/components/ExercisesItemList/ExercisesItemList.jsx
@@ -14,6 +14,7 @@ import { setCurrentTitle } from '../../redux/exerciseFilters/slice';
 import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
 
 import { Swiper, SwiperSlide } from 'swiper/react';
+import { useMediaQuery } from 'react-responsive';
 
 import 'swiper/css';
 import 'swiper/css/navigation';
@@ -35,9 +36,18 @@ const ExercisesList = () => {
 
   const array = filters.filter(item => item.filter === category);
 
+  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1439 });
+
   const chunkedFilters = [];
-  for (let i = 0; i < array.length; i += 10) {
-    chunkedFilters.push(array.slice(i, i + 10));
+
+  if (isTablet) {
+    for (let i = 0; i < array.length; i += 9) {
+      chunkedFilters.push(array.slice(i, i + 9));
+    }
+  } else {
+    for (let i = 0; i < array.length; i += 10) {
+      chunkedFilters.push(array.slice(i, i + 10));
+    }
   }
 
   return (
@@ -47,10 +57,7 @@ const ExercisesList = () => {
       slidesPerView={1}
       pagination={{ clickable: true }}
       scrollbar={{ draggable: true }}
-      onSwiper={swiper => console.log(swiper)}
       className="pagination"
-
-      // onSlideChange={() => console.log('slide change')}
     >
       {chunkedFilters.map(arr => (
         <SwiperSlide key={nanoid()}>

diff --git a/src/pages/Exercises/Exercises.jsx b/src/pages/Exercises/Exercises.jsx
@@ -4,7 +4,8 @@ import Title from '../../components/Title/Title';
 import {
   TitleThumb,
   ExercisesContainer,
-  ExercisesListContainer,
+	ExercisesListContainer,
+  BGImg
 } from './Exercises.styled';
 
 import ProductsOrExercisesContainer from '../../components/ProductOrExerciseContainer/ProductOrExerciseContainer';
@@ -68,7 +69,8 @@ const Exercises = () => {
           <ExercisesItemList />
         </ExercisesContainer>
       ) : (
-        <ExercisesListContainer>
+				  <ExercisesListContainer>
+					  <BGImg/>
           <Scrollbar width={{ dt: '868' }}>
             <ProductsOrExercisesContainer>
               {items.map((item, i) => {

diff --git a/src/pages/Exercises/Exercises.styled.jsx b/src/pages/Exercises/Exercises.styled.jsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { mq } from '../../utils';
 
-import imgHomePage from '../../assets/images/imgHomePage';
+import imgDx2 from '../../assets/images/exercises_desk_2x.jpeg';
 
 export const ExercisesContainer = styled.div`
   padding-left: 20px;
@@ -27,38 +27,33 @@ export const TitleThumb = styled.div`
 `;
 
 export const ExercisesListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
   padding: 40px 20px 80px 20px;
-  gap: 40px;
+  position: relative;
+
 
   ${mq.tablet} {
-    gap: 32px;
     padding: 72px 32px 48px 32px;
   }
 
   ${mq.desktop} {
     padding: 68px 81px 81px 96px;
+  }
+`;
 
-    gap: 28px;
-
+export const BGImg = styled.div`
+  ${mq.desktop} {
+    position: absolute;
+    top: -117px;
+    right: 0;
+    z-index: -1;
+    display: block;
+
+    width: 428px;
+    height: 716px;
     background: linear-gradient(89deg, #040404 1.1%, rgba(4, 4, 4, 0) 70.79%);
     background-repeat: no-repeat;
     background-position: 100% 0;
     background-size: 428px 716px;
-    background-image: url(${imgHomePage.imgDx1});
-
-    ${
-      '' /* @media (min-device-pixel-ratio: 2),
-      (-webkit-min-device-pixel-ratio: 2),
-      (min-resolution: 192dpi),
-      (min-resolution: 2dppx) {
-      & {
-        background-image: url(${imgProducts.imgDx2});
-      }
-
-      
-    } */
-    }
+    background-image: url(${imgDx2});
   }
-`;
+`;