Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Success page made responsive under #272 #427

Merged
merged 2 commits into from
May 30, 2024
Merged

Success page made responsive under #272 #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f0f987
Made success page responsive
Priyal208 May 29, 2024
16c5968
Made success page responsive
Priyal208 May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

40 changes: 28 additions & 12 deletions src/Components/user/FaqComponenet.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,12 @@ const Accordion = styled((props) => (
backgroundColor: 'rgba(255, 255, 255, 0.6)', // Adjust the opacity as needed
}));


const AccordionSummary = styled((props) => (
<MuiAccordionSummary
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.6rem' }} />}
{...props}
/>
))(({ theme }) => ({

flexDirection: 'row-reverse',
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
transform: 'rotate(90deg)',
Expand All @@ -42,6 +40,18 @@ const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
padding: theme.spacing(2),
borderTop: '1px solid rgba(0, 0, 0, .125)',
textAlign: 'left',
'@media (max-width: 600px)': {
padding: theme.spacing(1),
},
}));

const Image = styled('img')(({ theme }) => ({
borderRadius: '10px',
width: '100%',
height: 'auto',
'@media (max-width: 600px)': {
width: '100%',
},
}));

export default function CustomizedAccordions() {
Expand All @@ -55,37 +65,43 @@ export default function CustomizedAccordions() {
<div>
<Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
<AccordionSummary aria-controls="panel2d-content" id="panel1d-header">
<Typography>Determine how badly the animal is injured</Typography>
<Typography variant="body1" sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>
Determine how badly the animal is injured
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
<Typography variant="body2" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>
Some injuries need urgent care, like severe bleeding or serious distress. Minor injuries, like a mobile animal without distress, can be treated at home. Assess the situation and decide if the animal needs immediate medical attention based on its behavior.
<img src="./images/determining.jpeg" alt="" style={{ borderRadius: '10px' }} />
<Image src="./images/determining.jpeg" alt="Determining injury" />
</Typography>
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
<AccordionSummary aria-controls="panel1d-content" id="panel2d-header">
<Typography>Provide first aid, if possible </Typography>
<Typography variant="body1" sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>
Provide first aid, if possible
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
<Typography variant="body2" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>
For minor injuries, clean cuts with soap and water, cover with a bandage. Treat minor burns with cool water and a dry cloth. If unconscious, check for injuries and provide aid as needed.
<img src="./images/petdoc.webp" alt="" style={{ borderRadius: '10px' }} />
<Image src="./images/petdoc.webp" alt="First aid" />
</Typography>
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
<AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
<Typography>Approach the streetie slowly and calmly</Typography>
<Typography variant="body1" sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>
Approach the streetie slowly and calmly
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
<Typography variant="body2" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>
If a stray dog shows aggression like growling, keep your distance and seek professional help. Approach calmly if the dog seems friendly, speaking softly to reassure it.
<img src="./images/caution.jpeg" alt="" style={{ borderRadius: '10px' }} />
<Image src="./images/caution.jpeg" alt="Approach calmly" />
</Typography>
</AccordionDetails>
</Accordion>
</div>
);
}
}
92 changes: 49 additions & 43 deletions src/pages/user/ReportIncidentPages/SuccessPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,74 +2,80 @@ import React from "react";
import { Link } from "react-router-dom";
import CustomizedAccordions from "../../../Components/user/FaqComponenet";
import Button from "../../../Components/shared/Button";
const csrftoken = localStorage.getItem('csrftoken');

const csrftoken = localStorage.getItem('csrftoken');

function SuccessPage() {

// console.log(csrftoken)

//backend endpoint required to fetch 3 closest NGO info
// backend endpoint required to fetch 3 closest NGO info
const nearNGO = [
["name1: ", "number1"],
["name2: ", "number2"],
["name3: ", "number3"]
]
];

return (
<div className="z-[-2] mb-10 min-h-screen max-h-fit bg-custom-gradient top-0 w-full flex items-center">
<div className="pt-7 w-full text-center mb-10 flex flex-col items-center gap-5 justify-center">
{/* <h2 className="text-[#40025D] w-screen text-5xl font-normal font-['Bayon'] tracking-widest drop-shadow-2xl">Success</h2> */}
<div className=" px-10 rounded-[50%] bg-gradient-to-br from-blue-400 to-blue-800 shadow-dashBoardCardImageShadow flex text-white items-end justify-center text-[7rem] ">✓</div>
<p className="text-center text-opacity-90 text-2xl font-breeSerif drop-shadow-2xl tracking-widest font-bold">Your report has been submitted successfully. </p>
<div className="flex flex-row items-center w-full justify-center gap-4">
<div className="z-[-2] mb-10 min-h-screen bg-custom-gradient flex items-center justify-center p-4 md:p-10">
<div className="pt-7 w-full max-w-4xl text-center mb-10 flex flex-col items-center gap-5">
<div className="px-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-800 shadow-dashBoardCardImageShadow flex text-white items-end justify-center text-[4rem] md:text-[7rem]">
✓
</div>
<p className="text-center text-opacity-90 text-xl md:text-2xl font-breeSerif drop-shadow-2xl tracking-widest font-bold">
Your report has been submitted successfully.
</p>
<div className="flex flex-wrap items-center w-full justify-center gap-4">
<Button
text={
<Link to="/">
Home
</Link>
}
clas="bg-gradient-to-b from-blue-600 to-blue-800 px-7 py-3 font-semibold"
clas="bg-gradient-to-b from-blue-600 to-blue-800 px-4 py-2 md:px-7 md:py-3 text-sm md:text-base font-semibold"
/>
{
csrftoken ? (
<Button
text={
<Link to="/view-reports">
View Reports
</Link>
}
clas="px-7 py-3 font-semibold"
/>
) : (
<Button
text={
<Link to="/login">
Login
</Link>
}
clas="px-7 py-3 font-semibold"
/>
)
}
{csrftoken ? (
<Button
text={
<Link to="/view-reports">
View Reports
</Link>
}
clas="px-4 py-2 md:px-7 md:py-3 text-sm md:text-base font-semibold"
/>
) : (
<Button
text={
<Link to="/login">
Login
</Link>
}
clas="px-4 py-2 md:px-7 md:py-3 text-sm md:text-base font-semibold"
/>
)}
</div>
<div className="w-[92%] mt-12 bg-red-50 rounded-xl bg-opacity-75 ">
<div className=" flex flex-row items-center w-full justify-start">
<h1 className="pl-5 mt-1 mb-1 text-2xl text-bold tracking-wider text-red-900 font-breeSerif ">Contact the nearest NGO if you can!</h1>
<div className="w-full md:w-[92%] bg-red-50 rounded-xl bg-opacity-75 p-5 md:p-8">
<div className="flex flex-row items-center w-full justify-start">
<h1 className="mt-1 mb-1 text-xl md:text-2xl font-bold tracking-wider text-red-900 font-breeSerif">
Contact the nearest NGO if you can!
</h1>
</div>
<div>
<h3 className="pl-5 mb-2 text-left">These are the closest NGOs. Let them know a streetie needs help!</h3>
<ol className="pl-20 mb-5 font-bold text-lg font-sans text-left list-decimal">
<h3 className="mb-2 text-left">
These are the closest NGOs. Let them know a streetie needs help!
</h3>
<ol className="pl-5 md:pl-10 mb-5 font-bold text-lg font-sans text-left list-decimal">
<li>{nearNGO[0]}</li>
<li>{nearNGO[1]}</li>
<li>{nearNGO[2]}</li>
</ol>
<p className="pl-5 mb-2 text-left">Doing this can let the animal receive help quicker.</p>
<p className="mb-2 text-left">
Doing this can let the animal receive help quicker.
</p>
</div>
</div>
<div className="w-[92%] mt-12 ">
<div className=" flex flex-row items-center w-full justify-start">
<h1 className="pl-2 mb-1 text-2xl text-bold tracking-wider font-breeSerif ">Here's what you can do in the meantime</h1>
<div className="w-full md:w-[92%] mt-12">
<div className="flex flex-row items-center w-full justify-start">
<h1 className="mb-3 text-xl md:text-2xl font-bold tracking-wider font-breeSerif">
Here's what you can do in the meantime
</h1>
</div>
<CustomizedAccordions />
</div>
Expand Down