From 62b97d903c9fda619d3754331271f33500969869 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Thu, 6 Jul 2023 07:06:53 +0100 Subject: [PATCH 1/2] family dashboard active and waiting list revamp --- src/components/Home/FamilyActiveLSlde.jsx | 2 +- src/components/MyPendingJobs/ParentWaitingTable.jsx | 6 +++--- src/index.css | 5 +++++ tailwind.config.js | 3 ++- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/Home/FamilyActiveLSlde.jsx b/src/components/Home/FamilyActiveLSlde.jsx index 6d7ff35..2f81d9d 100644 --- a/src/components/Home/FamilyActiveLSlde.jsx +++ b/src/components/Home/FamilyActiveLSlde.jsx @@ -94,7 +94,7 @@ export default function FamilyActiveLSlde({ className, trending }) { {/* trending products */}
- + {trending && trending.length > 0 && trending.map((item) => ( diff --git a/src/components/MyPendingJobs/ParentWaitingTable.jsx b/src/components/MyPendingJobs/ParentWaitingTable.jsx index fd918fa..6d4b7bc 100644 --- a/src/components/MyPendingJobs/ParentWaitingTable.jsx +++ b/src/components/MyPendingJobs/ParentWaitingTable.jsx @@ -95,7 +95,7 @@ export default function ParentWaitingTable() {
- +

@@ -107,12 +107,12 @@ export default function ParentWaitingTable() {

-
+

{new Date(item.added).toLocaleString().split(',')[0]}

-

{item.status_text}

+

{item.status_text}

diff --git a/src/index.css b/src/index.css index 5435bea..844d7f9 100644 --- a/src/index.css +++ b/src/index.css @@ -927,3 +927,8 @@ TODO: Responsive =========================== .ebu-animate-shake { animation: shake 0.3s linear 3; } + +/* TO REMOVE SLIDER COMPONENT FROM CENTRALIZED */ +.trending-products .slick-slider .slick-track{ + margin: 0; +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 7937794..7283f72 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -17,7 +17,8 @@ module.exports = { "white-opacity": "#7B7EFC", "dark-white":"#1D1F2F", "dark-light-purple":"#5356fb29", - 'sky-blue': '#3a8fc3' + 'sky-blue': '#3a8fc3', + 'alice-blue': '#f0f8ff' }, }, }, From b16b35653274d8bf90024b7c92d883d6e225b5f6 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Thu, 6 Jul 2023 11:01:54 +0100 Subject: [PATCH 2/2] family offer new layout --- src/components/Cards/FamilyOfferCard.jsx | 71 +++ src/components/Home/FamilyActiveLSlde.jsx | 4 +- .../MyTasks/MyOffersFamilyTable.jsx | 454 ++++-------------- src/index.css | 8 +- 4 files changed, 169 insertions(+), 368 deletions(-) create mode 100644 src/components/Cards/FamilyOfferCard.jsx diff --git a/src/components/Cards/FamilyOfferCard.jsx b/src/components/Cards/FamilyOfferCard.jsx new file mode 100644 index 0000000..2339c33 --- /dev/null +++ b/src/components/Cards/FamilyOfferCard.jsx @@ -0,0 +1,71 @@ +import { useState } from "react"; +import { toast } from "react-toastify"; +import localImgLoad from "../../lib/localImgLoad"; +import CountDown from "../Helpers/CountDown"; +import Icons from "../Helpers/Icons"; +import {PriceFormatter} from '../Helpers/PriceFormatter' + + +export default function FamilyOfferCard({ datas, hidden = false, setOfferPopout }) { + let thePrice = PriceFormatter(datas?.price * 0.01,datas?.currency_code,datas?.currency); + + return ( +
+
+ {/* thumbnail */} +
+ {/* thumbnail image */} +
+ {hidden && ( +
+ +
+ )} +
+
+ {/* details */} +
+

+ {datas.title} +

+ {/* countdown */} +
+
+

+ Task Code +

+

+ {datas.contract} +

+
+
+
+

+ Remaining Time +

+

+ +

+
+
+
+
+
+ +
+
+ ); +} diff --git a/src/components/Home/FamilyActiveLSlde.jsx b/src/components/Home/FamilyActiveLSlde.jsx index 2f81d9d..025a3bd 100644 --- a/src/components/Home/FamilyActiveLSlde.jsx +++ b/src/components/Home/FamilyActiveLSlde.jsx @@ -93,8 +93,8 @@ export default function FamilyActiveLSlde({ className, trending }) {
{/* trending products */} -
- +
+ {trending && trending.length > 0 && trending.map((item) => ( diff --git a/src/components/MyTasks/MyOffersFamilyTable.jsx b/src/components/MyTasks/MyOffersFamilyTable.jsx index dcc900f..6526cb9 100644 --- a/src/components/MyTasks/MyOffersFamilyTable.jsx +++ b/src/components/MyTasks/MyOffersFamilyTable.jsx @@ -2,47 +2,51 @@ import { useRef, useState } from "react"; import Icons from "../Helpers/Icons"; import SliderCom from "../Helpers/SliderCom"; import OfferJobPopout from "../jobPopout/OfferJobPopout"; -import { PriceFormatter } from "../Helpers/PriceFormatter"; +import FamilyOfferCard from "../Cards/FamilyOfferCard"; export default function MyOffersFamilyTable({ className, familyOffers }) { let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW const settings = { arrows: false, - dots: false, - infinite: familyOffers?.result_list?.length > 4, - autoplay: true, - slidesToShow: 4, - slidesToScroll: 1, + slidesToShow: 3, + slidesToScroll: 3, + infinite: familyOffers?.length > 3, responsive: [ - { - breakpoint: 426, - settings: { - slidesToShow: 2, - slidesToScroll: 1, - infinite: familyOffers?.result_list?.length > 2, + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + slidesToScroll: 3, + infinite: familyOffers?.length > 3, + }, + }, + { + breakpoint: 769, + settings: { + slidesToShow: 2, + slidesToScroll: 2, + infinite: familyOffers?.length > 2, + }, + }, + { + breakpoint: 619, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + infinite: familyOffers?.length > 1, + }, }, - }, ], - }; +}; console.log("YES WE SEE OFFERS", familyOffers); - const sellSlider = useRef(null); - //const buySlider = useRef(null); - const prevHandler = (value) => { - if (value === "sell") { - sellSlider.current.slickPrev(); - } - // if (value === "buy") { - // buySlider.current.slickPrev(); - // } + + const trendingSlider = useRef(null); + const prevHandler = () => { + trendingSlider.current.slickPrev(); }; - const nextHandler = (value) => { - if (value === "sell") { - sellSlider.current.slickNext(); - } - // if (value === "buy") { - // buySlider.current.slickNext(); - // } + const nextHandler = () => { + trendingSlider.current.slickNext(); }; if (!familyOffers || familyOffers?.result_list?.length == 0) { @@ -52,345 +56,65 @@ export default function MyOffersFamilyTable({ className, familyOffers }) { return ( <>
-
-
-
-
-

- You Have Task(s) Waiting For You -

-
- - +
+ {/* heading */} +
+
+

Ready to Start?

-
-
- - {familyOffers && - familyOffers?.length > 0 && - familyOffers?.map((value, index) => { - let thePrice = PriceFormatter( - value?.price * 0.01, - value?.currency_code, - value?.currency - ); - return ( -
-
- {/* title */} -
-

- {value.title} -

-
- {/* username */} -
-

- {value.timeline_days} Days -

-
- {thePrice} -
-
- -
+ + + + + + + + +
- ); - })} - - {/*
*/} - {/* /!* img *!/*/} - {/*
*/} - {/*
*/} - {/* top*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* title *!/*/} - {/*
*/} - {/*

*/} - {/* Brokln Simons*/} - {/*

*/} - {/*
*/} - {/* /!* username *!/*/} - {/*
*/} - {/*

*/} - {/* @broklinslam_75*/} - {/*

*/} - {/*
*/} - {/* /!* items *!/*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/* 3435 Items*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* img *!/*/} - {/*
*/} - {/*
*/} - {/* top*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* title *!/*/} - {/*
*/} - {/*

*/} - {/* Brokln Simons*/} - {/*

*/} - {/*
*/} - {/* /!* username *!/*/} - {/*
*/} - {/*

*/} - {/* @broklinslam_75*/} - {/*

*/} - {/*
*/} - {/* /!* items *!/*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/* 3435 Items*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* img *!/*/} - {/*
*/} - {/*
*/} - {/* top*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* title *!/*/} - {/*
*/} - {/*

*/} - {/* Brokln Simons*/} - {/*

*/} - {/*
*/} - {/* /!* username *!/*/} - {/*
*/} - {/*

*/} - {/* @broklinslam_75*/} - {/*

*/} - {/*
*/} - {/* /!* items *!/*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/* 3435 Items*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* img *!/*/} - {/*
*/} - {/*
*/} - {/* top*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* title *!/*/} - {/*
*/} - {/*

*/} - {/* Brokln Simons*/} - {/*

*/} - {/*
*/} - {/* /!* username *!/*/} - {/*
*/} - {/*

*/} - {/* @broklinslam_75*/} - {/*

*/} - {/*
*/} - {/* /!* items *!/*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/* 3435 Items*/} - {/*
*/} - {/*
*/} - {/*
*/} - -
+ + +
+
+ {/* trending products */} +
+ + {familyOffers && + familyOffers.length > 0 && + familyOffers.map((item) => { + return ( + + ) + })} +
-
{/* Offer Job Popout */} diff --git a/src/index.css b/src/index.css index 844d7f9..50edd25 100644 --- a/src/index.css +++ b/src/index.css @@ -931,4 +931,10 @@ TODO: Responsive =========================== /* TO REMOVE SLIDER COMPONENT FROM CENTRALIZED */ .trending-products .slick-slider .slick-track{ margin: 0; -} \ No newline at end of file +} +/* .slick-slide, .slick-slide::after, .slick-slide::before{ + background-color: red; + opacity: 1; + padding: 20; + box-shadow: none; +} */ \ No newline at end of file