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 CancleIcon from "./components/CancleIcon";
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 TimeLine from "./components/TimeLineComponent/Timeline";
// import Digikala from "./components/Digikala/ImageSlider";
@ -138,6 +141,8 @@ function App() {
{/* <GridListTable /> */}
<PopupCard />
<TimeLine />
<TimeLineComponent />
{/* <SidebarDesign2 className="w-1/5" /> */}
</div>
</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"
>
<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">
{/* cancle icon */}
<CancleIcon backgroundColor={"bg-[#F8F8F8]"} icon={cancleIcon} />
@ -109,22 +109,14 @@ const PopupCard = ({ selectedChecklist }) => {
{selectedChecklist.slice(0, 3).map((item, index) => (
<div key={index} className="">
<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}
type="checkbox"
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>
</div>

@ -2,17 +2,17 @@ import "./index.scss";
const TimeLineItem = ({ data }) => (
<div
className="timeline-item flex flex-row mt-5 w-1/2 justify-end"
style={{ paddingLeft: "30px" }}
className="timeline-item flex flex-row mt-5 w-1/2 self-end justify-start"
style={{ paddingRight: "30px" }}
>
<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" }}
>
<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>
<span className="text-xs text-[#0A7C9F]"> - </span>
<time className="text-xs text-[#0A7C9F]">{data.time}</time>{" "}
<span className="text-xs text-[#0A7C9F]">-</span>
<time className="text-xs text-[#0A7C9F] ml-1">{data.time}</time>
</div>
{/* <div className="flex flex-row-reverse items-center justify-between w-full">
<div className="bg-[#D4E6FF] w-10 h-10 rounded-full">
@ -20,11 +20,12 @@ const TimeLineItem = ({ data }) => (
</div>
</div> */}
<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]">
{data.text}
</p>
</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}
</p>
<span className="circle"></span>

@ -5,7 +5,7 @@ import TimeLineItem from "./TimeLineItem.js";
const TimeLine = () =>
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) => (
<TimeLineItem data={data} key={idx} />
))}

@ -14,16 +14,14 @@ const data = [
text: "انجام عملیات بازگردانی و ذخیره سازی",
content: `
جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
پایان جنگ ایران و عراق هم زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بینالمللی گردید
`,
پایان جنگ ای پایان جنگ ایران و عراق پایان جنگ ایران و عراق پایان جنگ ایران و عراق ران و عراق هم `,
},
{
date: "1400/12/28",
time: " 14:30",
text: "انجام عملیات بازگردانی و ذخیره سازی",
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";
const TimeLine = ({ data }) => {
const TimeLineComponent = ({ data }) => {
return (
<div className="px-10 py-4 mx-auto ">
<div className="flex flex-row items-center justify-between">
<div className="px-10 py-4 mx-auto bg-white">
<div className="flex flex-row items-start justify-between">
<TitleSubtitle />
<div className="flex-1">
<Timeline />
</div>
<SearchBox inputWidth={"100%"} searchIcon={search} borderClr="#ddd" />
</div>
<Timeline />
</div>
);
};
export default TimeLine;
export default TimeLineComponent;

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