Добавил:

- Своя версия горизонтальной линии линия Изменил: - Добавил на страницы блоки - Настроил самописную карусель для всех карточек (яхт, катеров, мероприятий, маршрутов, и обобщенных карточек), теперь адаптивно под 3/2/1 видимых карточки. - Изменил вместо аргумента props разворачивем в элементы у jsx, кроме карточек (яхт, катеров, мероприятий, маршрутов) хз что скажет заказчик т. к. для бека не знаю какие точно нужны поля
FotuneGame · Jan 9, 2024 · 1bd1506 · 1bd1506
1 parent 4ca22eb
commit 1bd1506
Show file tree

Hide file tree

Showing 22 changed files with 286 additions and 100 deletions.
diff --git a/src/component/MainImage/MainImg.jsx b/src/component/MainImage/MainImg.jsx
@@ -1,41 +1,24 @@
 import React from 'react';
 import style from './MainImg.module.css';
+import Hr from "../hr/Hr";
 
-const MainImg = (props) => {
+const MainImg = ({main,img,title}) => {
     return (
         <div className="p-0 mx-0 w-100">
-                    {props.main ?
+                    {main ?
                         <div className={["overflow-hidden",style.min_35].join(" ")}>
                             <figure className={["position-relative bg-black m-0 ",style.min_35].join(" ")}>
-                                <img src={props?.img} alt={props?.title} className={["img-fluid position-absolute w-100 opacity-75",style.min_35,style.img].join(" ")}/>
+                                <img src={img} alt={title} className={["img-fluid position-absolute w-100 opacity-75",style.min_35,style.img].join(" ")}/>
                             </figure>
                         </div>
                         :
                         <div className={["overflow-hidden",style.min_25].join(" ")}>
                             <figure className={["position-relative bg-black m-0 ",style.min_25].join(" ")}>
-                                <img src={props?.img} alt={props?.title} className={["img-fluid position-absolute w-100 opacity-75",style.min_25,style.img].join(" ")}/>
+                                <img src={img} alt={title} className={["img-fluid position-absolute w-100 opacity-75",style.min_25,style.img].join(" ")}/>
                             </figure>
                         </div>
                     }
-
-
-
-            <svg className={style.whiteline} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" color="white" width="1295" height="627" viewBox="0 0 1295 627" fill="none">
-                <g clipPath="url(#clip0_2168_1347)">
-                    <path d="M726.161 23.669C186.167 -13.4252 46.0345 -1.82557 -152 23.669V627H1533V23.6691C1369.11 43.4466 1266.16 60.7632 726.161 23.669Z" fill="white"/>
-                    <path d="M726.161 23.669C186.167 -13.4252 46.0345 -1.82557 -152 23.669V627H1533V23.6691C1369.11 43.4466 1266.16 60.7632 726.161 23.669Z" fill="url(#paint0_linear_2168_1347)"/>
-                </g>
-                <defs>
-                    <linearGradient id="paint0_linear_2168_1347" x1="751.106" y1="-2.75258" x2="752.113" y2="423.732" gradientUnits="userSpaceOnUse">
-                        <stop stopColor="#DDE5F4"/>
-                        <stop offset="0.331597" stopColor="#E7F7F0" stopOpacity="0.720486"/>
-                        <stop offset="1" stopColor="white" stopOpacity="0"/>
-                    </linearGradient>
-                    <clipPath id="clip0_2168_1347">
-                        <rect width="1295" height="627" fill="white"/>
-                    </clipPath>
-                </defs>
-            </svg>
+            <Hr className={style.upLine}/>
         </div>
     );
 };

diff --git a/src/component/MainImage/MainImg.module.css b/src/component/MainImage/MainImg.module.css
@@ -20,13 +20,15 @@
     left: 5rem;
     top: 5rem;
 }
-.whiteline{
+
+.upLine{
     z-index: -1;
     display: block;
     position: absolute;
+    left: 0;
     width: 100%;
-    margin-top: -50px;
-    height: 20vh;
+    margin-top: -5vh;
+    height: 50vh;
     overflow: hidden;
     background-size: cover;
 }

diff --git a/src/component/PersonalityOrder/PersonalityOrder.jsx b/src/component/PersonalityOrder/PersonalityOrder.jsx
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import {FaArrowCircleRight, FaEnvelope, FaPhoneAlt, FaTelegram, FaWhatsapp} from 'react-icons/fa';
 
-const PersonalityOrder = (props) => {
+const PersonalityOrder = ({title,withoutContacts,callback}) => {
 
     const [message,setMessage] = useState({name:"",phone:"",date:"",time:"",text:""});
 
@@ -15,14 +15,14 @@ const PersonalityOrder = (props) => {
             alert("Не заполненое поле");
             return;
         }
-        props?.callback(message);
+        callback(message);
         setMessage({name:"",phone:"",date:"",time:"",text:""});
         alert("Сообщение отправлено");
     }
 
     return (
         <div className="container shadow  align-content-center  p-0 p-md-3 my-3">
-            <div className="row mx-1 mb-2"><h1 className="text-center text-md-start">{props?.title}</h1></div>
+            <div className="row mx-1 mb-2"><h1 className="text-center text-md-start">{title}</h1></div>
             <div className="row">
                 <form method="POST" className="d-grid ">
                     <div className="row">
@@ -33,7 +33,7 @@ const PersonalityOrder = (props) => {
                                     <input className="form-control mt-2 me-2" value={message.date} type="date" placeholder="дд.мм.гггг" onChange={(e)=>setMessage({...message,date:e.target.value})}/>
                                     <input className="form-control mt-2" value={message.time} type="time" placeholder="чч.мм" onChange={(e)=>setMessage({...message,time:e.target.value})}/>
                                 </div>
-                                {props.withoutContacts ?
+                                {withoutContacts ?
                                     null
                                     :
                                     <div className="mx-auto my-2 d-grid d-md-flex">

diff --git a/src/component/Popular/PopularCard.jsx b/src/component/Popular/PopularCard.jsx
@@ -2,18 +2,18 @@ import React from 'react';
 import {NavLink} from "react-router-dom";
 import style from "./PopularCard.module.css";
 
-const PopularCard = (props) => {
+const PopularCard = ({urlClassMoreInfo,id,imgPath,name,type}) => {
     return (
-        <div className="col-12 col-md-6 rounded-3 col p-3">
+        <div className="col-12 col-md-6 col-lg-4 col p-3">
             <div className="position-relative m-0 p-0 overflow-hidden rounded-3">
                 <div className="p-0 bg-black">
-                    <NavLink className={style.img_a} to={props?.urlClassMoreInfo+"/"+ props?.id}></NavLink>
-                    <img className={["img-fluid col z-n1 opacity-75",style.img].join(' ')} src={props?.imgPath} alt={props?.name}/>
+                    <NavLink className={style.img_a} to={urlClassMoreInfo+"/"+ id}></NavLink>
+                    <img className={["img-fluid col z-n1 opacity-50",style.img].join(' ')} src={imgPath} alt={name}/>
                 </div>
 
                 <div className={["position-absolute pt-1 top-50",style.name].join(" ")}>
-                    <h2 className="col-12 text-center text-white m-0 p-0">{props?.name}</h2>
-                    <h6 className="col-12 m-0 p-0 text-center text-white">{props?.type}</h6>
+                    <h2 className="col-12 text-center text-white m-0 p-0">{name}</h2>
+                    <h6 className="col-12 m-0 p-0 text-center text-white">{type}</h6>
                 </div>
             </div>
         </div>

diff --git a/src/component/Popular/PopularCard.module.css b/src/component/Popular/PopularCard.module.css
@@ -7,7 +7,7 @@
 }
 
 .img{
-    min-height: 40vh;
+    min-height: 25vh;
 }
 
 .name{
@@ -16,26 +16,20 @@
     z-index: 1;
 }
 
-@media only screen and (max-width: 1200px){
+@media only screen and (max-width: 992px){
     .img{
-        min-height: 35vh;
-    }
-}
-
-@media only screen and (max-width: 1000px){
-    .img{
-        min-height: 30vh;
+        min-height: 25vh;
     }
 }
 
 @media only screen and (max-width: 600px){
     .img{
-        min-height: 25vh;
+        min-height: 20vh;
     }
 }
 
 @media only screen and (max-width: 400px){
     .img{
-        min-height: 20vh;
+        min-height: 15vh;
     }
 }
diff --git a/src/component/Popular/PopularList.jsx b/src/component/Popular/PopularList.jsx
@@ -1,29 +1,29 @@
 import React from 'react';
 import PopularCard from "./PopularCard";
 
-const PopularList = (props) => {
+const PopularList = ({popularList,title}) => {
     return (
         <div>
-            {props?.popularList && props.popularList?.urlClassMoreInfo ?
+            {popularList && popularList?.urlClassMoreInfo ?
                 <div className="d-flex">
-                {props.popularList?.boats ?
-                    props.popularList.boats.map((obj,index)=>{
-                        return (<PopularCard key={props?.title + "_boats_" + obj?.name + index} {...obj} urlClassMoreInfo={props.popularList.urlClassMoreInfo?.boats} type="Катер"/>);
+                {popularList?.boats ?
+                    popularList.boats.map((obj,index)=>{
+                        return (<PopularCard key={title + "_boats_" + obj?.name + index} {...obj} urlClassMoreInfo={popularList.urlClassMoreInfo?.boats} type="Катер"/>);
                     })
                     :null}
-                {props.popularList?.yachts ?
-                    props.popularList.yachts.map((obj,index)=>{
-                        return (<PopularCard key={props?.title + "_yachts_" + obj?.name + index} {...obj} urlClassMoreInfo={props.popularList.urlClassMoreInfo?.yachts} type="Яхта"/>);
+                {popularList?.yachts ?
+                    popularList.yachts.map((obj,index)=>{
+                        return (<PopularCard key={title + "_yachts_" + obj?.name + index} {...obj} urlClassMoreInfo={popularList.urlClassMoreInfo?.yachts} type="Яхта"/>);
                     })
                     :null}
-                {props.popularList?.routers ?
-                    props.popularList.routers.map((obj,index)=>{
-                        return (<PopularCard key={props?.title + "_routers_" + obj?.name + index} {...obj} urlClassMoreInfo={props.popularList.urlClassMoreInfo?.routers} type="Маршрут"/>);
+                {popularList?.routers ?
+                    popularList.routers.map((obj,index)=>{
+                        return (<PopularCard key={title + "_routers_" + obj?.name + index} {...obj} urlClassMoreInfo={popularList.urlClassMoreInfo?.routers} type="Маршрут"/>);
                     })
                     :null}
-                {props.popularList?.eventsSee ?
-                    props.popularList.eventsSee.map((obj,index)=>{
-                        return (<PopularCard key={props?.title + "_eventsSee_" + obj?.name + index} {...obj} urlClassMoreInfo={props.popularList.urlClassMoreInfo?.eventsSee} type="Мероприятие"/>);
+                {popularList?.eventsSee ?
+                    popularList.eventsSee.map((obj,index)=>{
+                        return (<PopularCard key={title + "_eventsSee_" + obj?.name + index} {...obj} urlClassMoreInfo={popularList.urlClassMoreInfo?.eventsSee} type="Мероприятие"/>);
                     })
                     :null}
                 </div>

diff --git a/src/component/carousel/CarouselCard.jsx b/src/component/carousel/CarouselCard.jsx
@@ -1,7 +1,8 @@
 import React, {useEffect, useState} from 'react';
-import {FaAngleLeft,FaAngleRight} from "react-icons/fa";
+import {FaAngleLeft, FaAngleRight, FaArrowCircleRight} from "react-icons/fa";
+import {NavLink} from "react-router-dom";
 
-const CarouselCard = ({title, size, children}) => {
+const CarouselCard = ({title, size,urlMore, children}) => {
 
     const getWindowSize = () => {
         const {innerWidth, innerHeight} = window;
@@ -29,8 +30,9 @@ const CarouselCard = ({title, size, children}) => {
     });
 
     useEffect(()=>{
-        // корректируем шаг в зависимости от col-12 col-md-6
-        if(windowSize.innerWidth > 768) setStepPercent(50);
+        // корректируем шаг в зависимости от col-12 col-md-6 col-lg-3
+        if(windowSize.innerWidth > 992) setStepPercent(33.33);
+        else if(windowSize.innerWidth > 768) setStepPercent(50);
         else setStepPercent(100);
         setLimitPercent((stepPercent) * (size-1));
         if(leftValue<=-limitPercent) setLeftValue(-limitPercent);
@@ -53,7 +55,7 @@ const CarouselCard = ({title, size, children}) => {
 
 
     return (
-        <div className="container shadow pt-3 my-3">
+        <div className="container pt-3 my-3">
             <div className="p-3">
                 <h1 className="text-center mx-auto">{title}</h1>
             </div>
@@ -64,6 +66,14 @@ const CarouselCard = ({title, size, children}) => {
                     <button className="position-absolute top-50 start-0 rounded-circle border-0 bg-white shadow p-2 z-1" onClick={MoveLeft}><FaAngleLeft size="1.5rem"/></button>
                     <button className="position-absolute top-50 end-0 rounded-circle border-0 bg-white shadow p-2 z-1"  onClick={MoveRight}><FaAngleRight size="1.5rem"/></button>
             </div>
+            {urlMore ?
+                <div className="d-flex justify-content-center">
+                     <NavLink className="btn btn-success border-3 text-start m-2 p-2" to={urlMore}>
+                         Смотреть ещё
+                         <FaArrowCircleRight className="float-end ms-4" size="1.5rem" color="white"/>
+                     </NavLink>
+                </div>
+            :null}
         </div>
     );
 };

diff --git a/src/component/hr/Hr.jsx b/src/component/hr/Hr.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import style from "./Hr.module.css";
+
+const Hr = (props) => {
+    return (
+        <div>
+            {props.className ?
+                    <svg className={props.className} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" color="black" width="1295" height="627" viewBox="0 0 1295 627" fill="none">
+                        <g clipPath="url(#clip0_2168_1347)">
+                            <path d="M726.161 23.669C186.167 -13.4252 46.0345 -1.82557 -152 23.669V627H1533V23.6691C1369.11 43.4466 1266.16 60.7632 726.161 23.669Z" fill="white"/>
+                            <path d="M726.161 23.669C186.167 -13.4252 46.0345 -1.82557 -152 23.669V627H1533V23.6691C1369.11 43.4466 1266.16 60.7632 726.161 23.669Z" fill="url(#paint0_linear_2168_1347)"/>
+                        </g>
+                        <defs>
+                            <linearGradient id="paint0_linear_2168_1347" x1="751.106" y1="-2.75258" x2="752.113" y2="423.732" gradientUnits="userSpaceOnUse">
+                                <stop stopColor="#DDE5F4"/>
+                                <stop offset="0.331597" stopColor="#E7F7F0" stopOpacity="0.720486"/>
+                                <stop offset="1" stopColor="white" stopOpacity="0"/>
+                            </linearGradient>
+                            <clipPath id="clip0_2168_1347">
+                                <rect width="1295" height="627" fill="white"/>
+                            </clipPath>
+                        </defs>
+                    </svg>
+                    :
+                    <svg className={style.line} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" color="black" width="1295" height="627" viewBox="0 0 1295 627" fill="none">
+                        <g clipPath="url(#clip0_2168_1347)">
+                            <path d="M726.161 23.669C186.167 -13.4252 46.0345 -1.82557 -152 23.669V627H1533V23.6691C1369.11 43.4466 1266.16 60.7632 726.161 23.669Z" fill="white"/>
+                            <path d="M726.161 23.669C186.167 -13.4252 46.0345 -1.82557 -152 23.669V627H1533V23.6691C1369.11 43.4466 1266.16 60.7632 726.161 23.669Z" fill="url(#paint0_linear_2168_1347)"/>
+                        </g>
+                        <defs>
+                            <linearGradient id="paint0_linear_2168_1347" x1="751.106" y1="-2.75258" x2="752.113" y2="423.732" gradientUnits="userSpaceOnUse">
+                                <stop stopColor="#DDE5F4"/>
+                                <stop offset="0.331597" stopColor="#E7F7F0" stopOpacity="0.720486"/>
+                                <stop offset="1" stopColor="white" stopOpacity="0"/>
+                            </linearGradient>
+                            <clipPath id="clip0_2168_1347">
+                                <rect width="1295" height="627" fill="white"/>
+                            </clipPath>
+                        </defs>
+                    </svg>
+            }
+        </div>
+    );
+};
+
+export default Hr;
diff --git a/src/component/hr/Hr.module.css b/src/component/hr/Hr.module.css
@@ -0,0 +1,11 @@
+.line{
+    z-index: -1;
+    display: block;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    margin-top: -2vh;
+    height: 50vh;
+    overflow: hidden;
+    background-size: cover;
+}
diff --git a/src/component/listPosts/ListPosts.jsx b/src/component/listPosts/ListPosts.jsx
@@ -1,22 +1,42 @@
 import React from 'react';
 
-const ListPosts = (props) => {
+const ListPosts = ({title,text,PostType,posts,urlClassMoreInfo,isAdaptive}) => {
+
+    const classContainer = ['container'];
+    if (!isAdaptive){
+        classContainer.push("mx-0 px-0");
+    }
     return (
-        <div className="container shadow pt-3">
-            <div className="p-3 d-none d-md-block">
-                <h1 className="text-center mx-auto">{props?.title}</h1>
-                <p className="text-center mx-auto w-50">{props?.text}</p>
-            </div>
-            <div className="container">
-                <div className="row row-cols-1 row-cols-lg-3 row-cols-md-2">
-                { props.postType ?
-                    props?.posts.map((obj,index)=>{
-                       return (
-                           <props.postType key={props.posts[index]?.name + index}  {...props.posts[index]} urlClassMoreInfo={props?.urlClassMoreInfo}/>
-                           )
-                    })
-                : null}
+        <div className={classContainer.join(' ')}>
+            {title ?
+                <div className="p-3 d-none d-md-block">
+                    <h1 className="text-center mx-auto">{title}</h1>
+                    <p className="text-center mx-auto w-50">{text}</p>
                 </div>
+            : null}
+            <div className={classContainer.join(' ')}>
+                {isAdaptive ?
+                    <div className="row row-cols-1 row-cols-lg-3 row-cols-md-2">
+                        { PostType ?
+                            posts.map((obj,index)=>{
+                                return (
+                                    <PostType key={posts[index]?.name + index}  {...posts[index]} urlClassMoreInfo={urlClassMoreInfo}/>
+                                )
+                            })
+                            : null}
+                    </div>
+                    :
+                    <div className="d-flex">
+                        { PostType ?
+                            posts.map((obj,index)=>{
+                                return (
+                                    <PostType key={posts[index]?.name + index}  {...posts[index]} urlClassMoreInfo={urlClassMoreInfo}/>
+                                )
+                            })
+                            : null}
+                    </div>
+                }
+
             </div>
         </div>
     );

diff --git a/src/component/listPosts/PostBerth/PostBerth.jsx b/src/component/listPosts/PostBerth/PostBerth.jsx
@@ -4,7 +4,7 @@ import {NavLink} from "react-router-dom";
 
 const PostBerth = (props) => {
     return (
-        <div className="rounded-3 col p-3">
+        <div className="col-12 col-md-6 col-lg-4 rounded-3 p-3">
                 <div className="pt-1">
                     <h2 className="text-start m-0">{props?.name}</h2>
                     <div className="shadow rounded mt-1 p-2">

diff --git a/src/component/listPosts/PostEvent/PostEvent.jsx b/src/component/listPosts/PostEvent/PostEvent.jsx
@@ -4,7 +4,7 @@ import style from "../PostEvent/PostEvent.module.css";
 import {FaArrowCircleRight} from "react-icons/fa";
 const PostEvent = (props) => {
     return (
-        <div className="rounded-3 col p-3">
+        <div className="col-12 col-md-6 col-lg-4 rounded-3 p-3">
             <div className="position-relative m-0 p-0 overflow-hidden">
                 <div className="p-0">
                     <NavLink className={style.img_a} to={props?.urlClassMoreInfo+"/"+ props?.id}></NavLink>