master
mahdi andalib 3 years ago
parent 937a511e19
commit 4468e34c9a
  1. 7
      src/App.js
  2. 20
      src/components/PopupCard/index.js
  3. 15
      src/components/TimeLineComponent/TimeLineItem.js
  4. 2
      src/components/TimeLineComponent/Timeline.js
  5. 6
      src/components/TimeLineComponent/data.js
  6. 0
      src/components/TimeLineComponent/gray-search-icon.svg
  7. 12
      src/components/TimeLineComponent/index.js
  8. 27
      src/components/TimeLineComponent/index.scss

@ -63,8 +63,11 @@ import PopupCard from "./components/PopupCard";
import OutlineInput from "./components/OutlineInput"; import OutlineInput from "./components/OutlineInput";
import CancleIcon from "./components/CancleIcon"; import CancleIcon from "./components/CancleIcon";
import ButtonNewDesign from "./components/ButtonNewDesign"; import ButtonNewDesign from "./components/ButtonNewDesign";
import TimeLine from "./components/TimeLine"; // import TimeLine from "./components/TimeLine";
import TimeLineComponent from "./components/TimeLineComponent";
import TitleSubtitle from "./components/TitleSubtitle"; import TitleSubtitle from "./components/TitleSubtitle";
import TimeLine from "./components/TimeLineComponent/Timeline";
// import Digikala from "./components/Digikala/ImageSlider"; // import Digikala from "./components/Digikala/ImageSlider";
@ -138,6 +141,8 @@ function App() {
{/* <GridListTable /> */} {/* <GridListTable /> */}
<PopupCard /> <PopupCard />
<TimeLine /> <TimeLine />
<TimeLineComponent />
{/* <SidebarDesign2 className="w-1/5" /> */} {/* <SidebarDesign2 className="w-1/5" /> */}
</div> </div>
</Provider> </Provider>

@ -37,7 +37,7 @@ const PopupCard = ({ selectedChecklist }) => {
className="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center" className="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center"
> >
<div className="relative p-4 w-full h-full md:h-auto"> <div className="relative p-4 w-full h-full md:h-auto">
<div className="w-8/12 mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700"> <div className="w-7/12 mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700">
<div className="flex justify-between items-start p-5 rounded-t"> <div className="flex justify-between items-start p-5 rounded-t">
{/* cancle icon */} {/* cancle icon */}
<CancleIcon backgroundColor={"bg-[#F8F8F8]"} icon={cancleIcon} /> <CancleIcon backgroundColor={"bg-[#F8F8F8]"} icon={cancleIcon} />
@ -109,22 +109,14 @@ const PopupCard = ({ selectedChecklist }) => {
{selectedChecklist.slice(0, 3).map((item, index) => ( {selectedChecklist.slice(0, 3).map((item, index) => (
<div key={index} className=""> <div key={index} className="">
<input <input
// checked={checklist ? true : false}
// onClick={() => setChecklist(checklist + 25)}
// onChange={(e) =>
// e.target.checked === true
// ? checklist - 25
// : checklist + 25
// }
// onClick={() =>
// setChecklist(
// checked === true ? checklist - 25 : checklist + 25
// )
// }
disabled={checklist >= 100} disabled={checklist >= 100}
type="checkbox" type="checkbox"
className="form-checkbox text-blue-500" className="form-checkbox text-blue-500"
onClick={() => setChecklist(checklist + 10)} onClick={(e) =>
e.target.checked
? setChecklist(checklist + 10)
: setChecklist(checklist - 10)
}
/> />
<span className="text-sm mr-2">{item.title}</span> <span className="text-sm mr-2">{item.title}</span>
</div> </div>

@ -2,17 +2,17 @@ import "./index.scss";
const TimeLineItem = ({ data }) => ( const TimeLineItem = ({ data }) => (
<div <div
className="timeline-item flex flex-row mt-5 w-1/2 justify-end" className="timeline-item flex flex-row mt-5 w-1/2 self-end justify-start"
style={{ paddingLeft: "30px" }} style={{ paddingRight: "30px" }}
> >
<div <div
className="timeline-item-content relative bg-white rounded shadow-md flex flex-col items-end border border-[#D6D6D6] " className="timeline-item-content relative bg-white rounded-md shadow-sm flex flex-col items-end border border-[#D6D6D6] "
style={{ maxWidth: "70%", width: "400px" }} style={{ maxWidth: "70%", width: "400px" }}
> >
<div className="flex flex-row-reverse gap-x-2 p-3"> <div className="flex flex-row-reverse p-3 self-end">
<time className="text-xs text-[#0A7C9F]">{data.date}</time> <time className="text-xs text-[#0A7C9F]">{data.date}</time>
<span className="text-xs text-[#0A7C9F]"> - </span> <span className="text-xs text-[#0A7C9F]">-</span>
<time className="text-xs text-[#0A7C9F]">{data.time}</time>{" "} <time className="text-xs text-[#0A7C9F] ml-1">{data.time}</time>
</div> </div>
{/* <div className="flex flex-row-reverse items-center justify-between w-full"> {/* <div className="flex flex-row-reverse items-center justify-between w-full">
<div className="bg-[#D4E6FF] w-10 h-10 rounded-full"> <div className="bg-[#D4E6FF] w-10 h-10 rounded-full">
@ -20,11 +20,12 @@ const TimeLineItem = ({ data }) => (
</div> </div>
</div> */} </div> */}
<div className="bg-[#F3F3F3] w-full px-4 py-2 flex flex-row items-center"> <div className="bg-[#F3F3F3] w-full px-4 py-2 flex flex-row items-center">
<div className="bg-[#65A9FF] w-1 h-full rounded ml-2"></div>
<p className="text-right text-sm font-bold text-[#00253A]"> <p className="text-right text-sm font-bold text-[#00253A]">
{data.text} {data.text}
</p> </p>
</div> </div>
<p className="text-xs text-justify px-4 text-[#00253A99] text-light leading-6"> <p className="mt-2 text-xs text-justify px-4 text-[#00253A99] text-light leading-6">
{data.content} {data.content}
</p> </p>
<span className="circle"></span> <span className="circle"></span>

@ -5,7 +5,7 @@ import TimeLineItem from "./TimeLineItem.js";
const TimeLine = () => const TimeLine = () =>
timeLineData.length > 0 && ( timeLineData.length > 0 && (
<div className="timeline-container flex flex-col relative bg-white"> <div className="timeline-container flex flex-col relative my-10">
{timeLineData.slice(0, 3).map((data, idx) => ( {timeLineData.slice(0, 3).map((data, idx) => (
<TimeLineItem data={data} key={idx} /> <TimeLineItem data={data} key={idx} />
))} ))}

@ -14,16 +14,14 @@ const data = [
text: "انجام عملیات بازگردانی و ذخیره سازی", text: "انجام عملیات بازگردانی و ذخیره سازی",
content: ` content: `
جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
پایان جنگ ایران و عراق هم زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بینالمللی گردید پایان جنگ ای پایان جنگ ایران و عراق پایان جنگ ایران و عراق پایان جنگ ایران و عراق ران و عراق هم `,
`,
}, },
{ {
date: "1400/12/28", date: "1400/12/28",
time: " 14:30", time: " 14:30",
text: "انجام عملیات بازگردانی و ذخیره سازی", text: "انجام عملیات بازگردانی و ذخیره سازی",
content: ` content: `
جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثپایان جنگ ایران و عراق پایان جنگ ایران و عراق پایان جنگ ایران و عراق ی در واکنش به اشغال کویت توسط عراق انجام گرفت
پایان جنگ ایران و عراق هم زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بینالمللی گردید
`, `,
}, },
]; ];

Before

Width:  |  Height:  |  Size: 742 B

After

Width:  |  Height:  |  Size: 742 B

@ -6,16 +6,18 @@ import Timeline from "./Timeline.js";
import search from "./gray-search-icon.svg"; import search from "./gray-search-icon.svg";
const TimeLine = ({ data }) => { const TimeLineComponent = ({ data }) => {
return ( return (
<div className="px-10 py-4 mx-auto "> <div className="px-10 py-4 mx-auto bg-white">
<div className="flex flex-row items-center justify-between"> <div className="flex flex-row items-start justify-between">
<TitleSubtitle /> <TitleSubtitle />
<div className="flex-1">
<Timeline />
</div>
<SearchBox inputWidth={"100%"} searchIcon={search} borderClr="#ddd" /> <SearchBox inputWidth={"100%"} searchIcon={search} borderClr="#ddd" />
</div> </div>
<Timeline />
</div> </div>
); );
}; };
export default TimeLine; export default TimeLineComponent;

@ -9,25 +9,26 @@
right: calc(50% - 2px); right: calc(50% - 2px);
width: 4px; width: 4px;
height: 100%; height: 100%;
border-radius: 10px;
} }
.timeline-item:nth-child(odd) { .timeline-item:nth-child(odd) {
align-self: flex-end; align-self: flex-start;
justify-content: flex-start; justify-content: flex-end;
padding-right: 30px; padding-right: 0px;
padding-left: 0px; padding-left: 30px;
} }
.timeline-item-content::after { .timeline-item-content::after {
content: ""; content: "";
background-color: #fff; background-color: #fff;
box-shadow: -1px 1px 1px rgba(0, 0, 0.2); box-shadow: 1px -1px 1px #d6d6d6;
width: 15px; width: 15px;
height: 15px; height: 15px;
position: absolute; position: absolute;
transform: rotate(45deg); transform: rotate(45deg);
left: -7.5px; right: -7.5px;
top: calc(50% - 7.5px); top: calc(50% - 5px);
} }
.timeline-item:nth-child(odd) .timeline-item-content { .timeline-item:nth-child(odd) .timeline-item-content {
@ -36,9 +37,9 @@
} }
.timeline-item:nth-child(odd) .timeline-item-content::after { .timeline-item:nth-child(odd) .timeline-item-content::after {
box-shadow: 1px -1px 1px rgba(0, 0, 0.2); box-shadow: -1px 1px 1px #d6d6d6;
left: auto; right: auto;
right: -7.5px; left: -7.5px;
} }
.timeline-item-content .circle { .timeline-item-content .circle {
@ -49,13 +50,13 @@
height: 20px; height: 20px;
position: absolute; position: absolute;
top: calc(50% - 10px); top: calc(50% - 10px);
left: -40px; right: -41px;
z-index: 100; z-index: 100;
} }
.timeline-item:nth-child(odd) .timeline-item-content .circle { .timeline-item:nth-child(odd) .timeline-item-content .circle {
left: auto; right: auto;
right: -40px; left: -41px;
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
Loading…
Cancel
Save