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

provider UI updated according to figma #323

Merged
merged 7 commits into from
Nov 4, 2024
Merged

provider UI updated according to figma #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
639a97f
provider UI updated according to figma
tsun900 Nov 2, 2024
378dbc4
hide the scrollbar
tsun900 Nov 2, 2024
1bc1912
remove scrollbars
tsun900 Nov 2, 2024
a66395d
undo it
tsun900 Nov 2, 2024
93526f1
removed redundant items
tsun900 Nov 2, 2024
09dcaf8
Collapsible default state
thanasis457 Nov 4, 2024
db70ad7
Merge branch 'develop' into Tian/map_provider_UI
thanasis457 Nov 4, 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
14 changes: 11 additions & 3 deletions src/assets/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,9 @@ h2 {
background: white;
padding-top: 10px;
}

.map-list::-webkit-scrollbar {
display: none;
}
/* .map-cell {
border-top: solid #e0e0e0;
background-color: white;
Expand Down Expand Up @@ -220,7 +222,9 @@ h2 {
padding-left: 12px;
padding-right: 12px;
}

.padder::-webkit-scrollbar {
display: none;
}
.point {
cursor: pointer;
background: white;
Expand Down Expand Up @@ -670,12 +674,16 @@ h2 {
flex-direction: row;
}

.modal-image-col {
height: 50%;
}

.modal-hours-container {
display: flex;
flex-direction: column;
font-size: 13px;
padding-left: 15px;
width: 30vw;
width: 15vw;
}

.modal-hours-container h5 {
Expand Down
8 changes: 6 additions & 2 deletions src/components/collapsible/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,25 @@ import { FaAngleDown, FaAngleUp } from "react-icons/fa";
interface Managed {
style?: React.CSSProperties;
titleStyle?: React.CSSProperties;
containerStyle?: React.CSSProperties;
label: string;
children: any;
defaultState?: boolean;
}
interface Unmanaged {
style?: React.CSSProperties;
containerStyle?: React.CSSProperties;
title: React.ReactElement;
children: any;
defaultState?: boolean;
}
type PropTypes = Managed | Unmanaged;
function isManaged(props: PropTypes): props is Managed {
return (props as Managed).label !== undefined;
}

const Collapsible = (props: PropTypes) => {
const [isOpen, setOpen] = useState(false)
const [isOpen, setOpen] = useState(props?.defaultState ?? true);
const contentRef = useRef(null)
const toogle = () => { setOpen(!isOpen) }
return (
Expand All @@ -43,7 +47,7 @@ const Collapsible = (props: PropTypes) => {
<div ref={contentRef}
className={`content ${isOpen ? 'open' : ''}`}
style={{ height: isOpen ? `fit-content` : '0px' }}>
<div className="container">{props.children}</div>
<div className="container" style={props.containerStyle}>{props.children}</div>
</div>
</div >
)
Expand Down
1 change: 1 addition & 0 deletions src/components/dashboard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ function ProviderEntry({ provider, setLoading, resetIndex, firestore, selectItem
</div>
</div>
}
defaultState={false}
>
<Container>
<ProviderInfo item={provider} categories={categories} />
Expand Down
26 changes: 8 additions & 18 deletions src/components/map/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1021,13 +1021,15 @@ const Map = (props) => {
}}
>
{showInfo ? (
<Button
<div style={{display: "flex", flexDirection: "row", alignItems: "center",}}>
<a
onClick={() => setShowInfo(false)}
style={{ display: 'flex', alignItems: 'center', fontFamily: 'Inter, sans-serif', fontWeight: '700', backgroundColor: '#ffffff', border: 'none' }}
style={{ cursor: "pointer", marginRight: "10px", marginLeft: "10px",}}
>
<img src={backArrow} alt="Back" style={{ width: '24px', height: '24px', marginRight: '8px' }} />
Back
</Button>
<img src={backArrow} alt="Back" style={{ width: '80%', height: '80%', marginBottom: '8px' }} />
</a>
<h4 style={{fontWeight: "bold",}}>{providers[selectedIndex].facilityName}</h4>
</div>
) : (
<InputGroup className="mb-3">
<InputGroup.Text id="search-addon" className="search">
Expand Down Expand Up @@ -1157,21 +1159,9 @@ const Map = (props) => {
<div className="padder d-flex flex-column" style={{ height: "calc(200vh - 70px)", overflowY: 'scroll' }}>
<div className="content d-flex flex-column">
<ProviderInfo item={activeProviders[selectedIndex]} categories={categories} />
<div className="mt-2">
<ProgressBar current={300} total={600} buttonLink={"google.com"} buttonLabel={"Donate Now"} />
</div>
<div className="mt-2">
<DonutChart data={data} buttonLink={"https://google.com"} buttonLabel={"Donate Now"} />
</div>
<div className="mt-2">
<LineChart title={"Total donations per month in 2023"} data={data2} />
</div>
<div className="mt-2">
<LineChart title={"Total donations per month in 2023"} data={data2} />
</div>
<div className="mt-2">

<Collapsible label={"Graph"}>
<Collapsible label={"Graph"} containerStyle={{placeItems: "flex-start"}}>
<ChartComponentForm/>
</Collapsible>
</div>
Expand Down
3 changes: 1 addition & 2 deletions src/components/map/mapStyles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,5 +121,4 @@
}
.astext:hover {
color: black !important
}

}
128 changes: 72 additions & 56 deletions src/components/subcomponents/ProviderInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import React, { useState, useEffect } from "react";
import { FaMapMarkerAlt, FaRegClock, FaPhone, FaGlobe } from "react-icons/fa";
import { FaRegClock } from "react-icons/fa";
import { SlGlobe } from "react-icons/sl";
import { TbPlaystationCircle } from "react-icons/tb";
import { IoPhonePortraitOutline } from "react-icons/io5";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Card from "react-bootstrap/Card";
import { withFirestore } from "react-redux-firebase";
import { compose } from "redux";
import { connect } from "react-redux";
import ReadMoreAndLess from "react-read-more-less";
import LazyLoad from "react-lazy-load";
import { GOOGLE_API_KEY } from "../../config/keys";
import Linkify from "react-linkify";
Expand Down Expand Up @@ -144,6 +146,7 @@ const ProviderInfo = (props) => {
const iconStyle = {
marginRight: "20px",
verticalAlign: "middle",
color: "#226DFF",
};

const infoStyle = {
Expand All @@ -155,32 +158,81 @@ const ProviderInfo = (props) => {
return (
<Container fluid className="provider-info-container">
<Row className="mb-3">
<Col md={5} className="modal-image-col">
<Card>
<Card style={{width: "100%"}}>
<LazyLoad debounce={false} offsetVertical={500}>
<Card.Img src={image} />
<Card.Img style={{maxHeight: "60vh", objectFit: "cover"}} src={image} />
</LazyLoad>
</Card>
</Col>
<Col md={7}>
</Row>
{/* Sample components that in the future should be added dynamically
based on the response from firebase */}
<Collapsible
label={"General Info"}
style={{
maxWidth: "1000px",
marginLeft: "auto",
marginRight: "auto",
}}
containerStyle={{placeItems: "flex-start",}}
>
<Row className="info-rows" style={{ justifyContent: "flex-start", maxWidth: "100%"}}>
<Col md={12}>
<div className="description-box">
<h3>{props.item.facilityName}</h3>
{props.item.description !== undefined && (
<ReadMoreAndLess
charLimit={250}
readMoreText="Read more"
readLessText="Read less"
<p
style={{
color: "rgba(148, 142, 142, 0.9)",
fontFamily: "Inter",
fontWeight: "500",
fontSize: "16px",
lineHeight: "19px"
}}
>
{`${props.item.description} `}
</ReadMoreAndLess>
{props.item.description}
</p>
)}
</div>
</Col>
</Row>
<Row className="info-rows">
<Col md={7}>
<Col md={12}>
<div style={infoStyle}>
<IoPhonePortraitOutline size={20} style={iconStyle} />
<div>
{" "}
{props.item.phoneNum &&
props.item.phoneNum.join(", ")}
</div>
</div>
<div style={infoStyle}>
{props.item.website && props.item.website[0] && (
<>
{props.item.website[0].startsWith("http") ? (<>
<SlGlobe size={20} style={iconStyle} />
<div>
<a
href={props.item.website[0]}
target="_blank"
rel="noopener noreferrer"
>
p{props.item.website[0]}
</a>
</div>
</>) : (<>
<SlGlobe size={20} style={iconStyle} />
<div>
<a
href={'//' + props.item.website[0]}
target="_blank"
rel="noopener noreferrer"
>
{props.item.website[0]}
</a>
</div></>)}

</>
)}
</div>
<div style={infoStyle}>
<FaMapMarkerAlt style={iconStyle} />
<TbPlaystationCircle size={20} style={iconStyle} />
<div>
{" "}
{props.item.address
Expand Down Expand Up @@ -218,50 +270,14 @@ const ProviderInfo = (props) => {
</div>
</div>
<div style={infoStyle}>
<FaPhone style={iconStyle} />
<div>
{" "}
{props.item.phoneNum &&
props.item.phoneNum.join(", ")}
</div>
</div>
<div style={infoStyle}>
{props.item.website && props.item.website[0] && (
<>
<FaGlobe style={iconStyle} />
<div>
<a
href={props.item.website[0]}
target="_blank"
rel="noopener noreferrer"
>
Visit Website
</a>
</div>
</>
)}
</div>
<div style={infoStyle}>
<FaRegClock style={iconStyle} />
<FaRegClock size={20} style={iconStyle} />
<div className="modal-hours-container">
{props.item.hours && calculateHours(props)}
</div>
</div>
</Col>
<Col md={5}>
<Card>
<a
href={`https://maps.google.com/?q=${props.item.address.toString()}`}
target="_blank"
rel="noopener noreferrer"
>
<Card.Img src={streetView} alt="Google Map" />
</a>
</Card>
</Col>
</Row>
{/* Sample components that in the future should be added dynamically
based on the response from firebase */}
</Collapsible>
<Row className="info-rows">
<Col md={12}>
<Collapsible
Expand Down
8 changes: 0 additions & 8 deletions src/components/subcomponents/chartcomponents/ChartComponentForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -547,14 +547,6 @@ const ChartComponentForm = () => {
<div className="footer">
<button id="delete">Delete</button>
</div>
{/*
TO BE REMOVED
Used to see chartState state as you fill in form
*/}
<div>
<h4>Current Data:</h4>
<pre>{JSON.stringify(chartState, null, 2)}</pre>
</div>
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/components/subcomponents/chartcomponents/styles/ChartComponentForm.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
.chart-container {
display: flex;
flex-direction: column;
align-items: flex-start;
align-items: flex-start !important;
gap: 16px;
padding-left: 0;
padding-right: 0;
Expand Down