From 639a97f14f58e88ee3952f56eb61bb5c84088320 Mon Sep 17 00:00:00 2001 From: tsun90 <52758623+tsun900@users.noreply.github.com> Date: Sat, 2 Nov 2024 07:05:03 -0400 Subject: [PATCH 1/6] provider UI updated according to figma --- src/assets/styles/main.css | 6 +- src/components/collapsible/index.tsx | 4 +- src/components/map/index.tsx | 14 +- src/components/subcomponents/ProviderInfo.tsx | 142 +++++++++--------- .../chartcomponents/ChartComponentForm.tsx | 8 - .../styles/ChartComponentForm.css | 2 +- 6 files changed, 90 insertions(+), 86 deletions(-) diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css index b8f683f..8813728 100644 --- a/src/assets/styles/main.css +++ b/src/assets/styles/main.css @@ -670,12 +670,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 { diff --git a/src/components/collapsible/index.tsx b/src/components/collapsible/index.tsx index 2d768c8..81a9d6e 100644 --- a/src/components/collapsible/index.tsx +++ b/src/components/collapsible/index.tsx @@ -8,11 +8,13 @@ import { FaAngleDown, FaAngleUp } from "react-icons/fa"; interface Managed { style?: React.CSSProperties; titleStyle?: React.CSSProperties; + containerStyle?: React.CSSProperties; label: string; children: any; } interface Unmanaged { style?: React.CSSProperties; + containerStyle?: React.CSSProperties; title: React.ReactElement; children: any; } @@ -43,7 +45,7 @@ const Collapsible = (props: PropTypes) => {
-
{props.children}
+
{props.children}
) diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx index 5f76c98..04bb85e 100644 --- a/src/components/map/index.tsx +++ b/src/components/map/index.tsx @@ -1021,13 +1021,15 @@ const Map = (props) => { }} > {showInfo ? ( - + Back + +

{providers[selectedIndex].facilityName}

+ ) : ( @@ -1171,7 +1173,7 @@ const Map = (props) => {
- +
diff --git a/src/components/subcomponents/ProviderInfo.tsx b/src/components/subcomponents/ProviderInfo.tsx index 987a781..bf4d6da 100644 --- a/src/components/subcomponents/ProviderInfo.tsx +++ b/src/components/subcomponents/ProviderInfo.tsx @@ -1,5 +1,8 @@ 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"; @@ -16,6 +19,7 @@ import Collapsible from "components/collapsible"; import Directory from "components/dashboard/Directory"; import EmbedForm from "components/dashboard/embed-component/EmbedForm"; import EmbedComponent from "components/dashboard/embed-component/EmbedComponent"; +import { color } from "d3"; { /*TO BE DELETED */ @@ -139,6 +143,7 @@ const ProviderInfo = (props) => { const iconStyle = { marginRight: "20px", verticalAlign: "middle", + color: "#226DFF", }; const infoStyle = { @@ -150,32 +155,81 @@ const ProviderInfo = (props) => { return ( - - + - + - - + + {/* Sample components that in the future should be added dynamically + based on the response from firebase */} + + +
-

{props.item.facilityName}

{props.item.description !== undefined && ( - - {`${props.item.description} `} - + {props.item.description} +

)}
- - - + +
+ +
+ {" "} + {props.item.phoneNum && + props.item.phoneNum.join(", ")} +
+
+
+ {props.item.website && props.item.website[0] && ( + <> + {props.item.website[0].startsWith("http") ? (<> + + + ) : (<> + + )} + + + )} +
- +
{" "} {props.item.address @@ -213,50 +267,14 @@ const ProviderInfo = (props) => {
- -
- {" "} - {props.item.phoneNum && - props.item.phoneNum.join(", ")} -
-
-
- {props.item.website && props.item.website[0] && ( - <> - - - - )} -
-
- +
{props.item.hours && calculateHours(props)}
- - - - - - - - {/* Sample components that in the future should be added dynamically - based on the response from firebase */} + { - - - - - - -
{categoriesToUse .filter( diff --git a/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx b/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx index 0249fd3..8617910 100644 --- a/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx +++ b/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx @@ -547,14 +547,6 @@ const ChartComponentForm = () => {
- {/* - TO BE REMOVED - Used to see chartState state as you fill in form - */} -
-

Current Data:

- 
{JSON.stringify(chartState, null, 2)}
-
); }; diff --git a/src/components/subcomponents/chartcomponents/styles/ChartComponentForm.css b/src/components/subcomponents/chartcomponents/styles/ChartComponentForm.css index f13b640..0e94c81 100644 --- a/src/components/subcomponents/chartcomponents/styles/ChartComponentForm.css +++ b/src/components/subcomponents/chartcomponents/styles/ChartComponentForm.css @@ -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; From 378dbc46e409f884d2e0894ce1b6efe2a3cdda83 Mon Sep 17 00:00:00 2001 From: tsun900 Date: Sat, 2 Nov 2024 11:57:37 -0400 Subject: [PATCH 2/6] hide the scrollbar --- src/assets/styles/main.css | 8 ++++++-- src/components/map/mapStyles.css | 3 +-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css index 8813728..3cc3369 100644 --- a/src/assets/styles/main.css +++ b/src/assets/styles/main.css @@ -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; @@ -220,7 +222,9 @@ h2 { padding-left: 12px; padding-right: 12px; } - +.padder::-webkit-scrollbar { + display: none; +} .point { cursor: pointer; background: white; diff --git a/src/components/map/mapStyles.css b/src/components/map/mapStyles.css index 61c7621..01d8375 100644 --- a/src/components/map/mapStyles.css +++ b/src/components/map/mapStyles.css @@ -121,5 +121,4 @@ } .astext:hover { color: black !important -} - +} \ No newline at end of file From 1bc1912e043b02822e626437fd4360611dc8446e Mon Sep 17 00:00:00 2001 From: tsun900 Date: Sat, 2 Nov 2024 12:07:20 -0400 Subject: [PATCH 3/6] remove scrollbars --- src/components/collapsible/collapsible.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/collapsible/collapsible.css b/src/components/collapsible/collapsible.css index 32f32f5..1bde24a 100644 --- a/src/components/collapsible/collapsible.css +++ b/src/components/collapsible/collapsible.css @@ -42,3 +42,7 @@ flex-grow: 0; width: 100%; } + +.collapsible .content::-webkit-scrollbar { + display: none; +} \ No newline at end of file From a66395d7b187284812671b2f4babd8ccc33ce437 Mon Sep 17 00:00:00 2001 From: tsun900 Date: Sat, 2 Nov 2024 12:07:38 -0400 Subject: [PATCH 4/6] undo it --- src/components/collapsible/collapsible.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/collapsible/collapsible.css b/src/components/collapsible/collapsible.css index 1bde24a..32f32f5 100644 --- a/src/components/collapsible/collapsible.css +++ b/src/components/collapsible/collapsible.css @@ -42,7 +42,3 @@ flex-grow: 0; width: 100%; } - -.collapsible .content::-webkit-scrollbar { - display: none; -} \ No newline at end of file From 93526f18752bd3e4e8d34d56795eb91559f30f98 Mon Sep 17 00:00:00 2001 From: tsun900 Date: Sat, 2 Nov 2024 12:12:24 -0400 Subject: [PATCH 5/6] removed redundant items --- src/components/map/index.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx index 04bb85e..7581e95 100644 --- a/src/components/map/index.tsx +++ b/src/components/map/index.tsx @@ -1159,18 +1159,6 @@ const Map = (props) => {
-
- -
-
- -
-
- -
-
- -
From 09dcaf8804035d0e7a3d8daf681dd9a577474cd6 Mon Sep 17 00:00:00 2001 From: Athanasios Taprantzis Date: Sun, 3 Nov 2024 19:20:08 -0500 Subject: [PATCH 6/6] Collapsible default state --- src/components/collapsible/index.tsx | 4 +++- src/components/dashboard/index.tsx | 1 + src/components/subcomponents/ProviderInfo.tsx | 4 ---- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/collapsible/index.tsx b/src/components/collapsible/index.tsx index 81a9d6e..9dfaa43 100644 --- a/src/components/collapsible/index.tsx +++ b/src/components/collapsible/index.tsx @@ -11,12 +11,14 @@ interface Managed { 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 { @@ -24,7 +26,7 @@ function isManaged(props: PropTypes): props is Managed { } 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 ( diff --git a/src/components/dashboard/index.tsx b/src/components/dashboard/index.tsx index abf75fb..8b65a54 100644 --- a/src/components/dashboard/index.tsx +++ b/src/components/dashboard/index.tsx @@ -83,6 +83,7 @@ function ProviderEntry({ provider, setLoading, resetIndex, firestore, selectItem
} + defaultState={false} > diff --git a/src/components/subcomponents/ProviderInfo.tsx b/src/components/subcomponents/ProviderInfo.tsx index bf4d6da..1be6a66 100644 --- a/src/components/subcomponents/ProviderInfo.tsx +++ b/src/components/subcomponents/ProviderInfo.tsx @@ -10,16 +10,12 @@ 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"; import ProviderGalleryCarousel from "components/dashboard/ProviderGalleryCarousel"; import Collapsible from "components/collapsible"; import Directory from "components/dashboard/Directory"; -import EmbedForm from "components/dashboard/embed-component/EmbedForm"; -import EmbedComponent from "components/dashboard/embed-component/EmbedComponent"; -import { color } from "d3"; { /*TO BE DELETED */