diff --git a/bitwarden.env.example b/bitwarden.env.example deleted file mode 100644 index 9d78ade..0000000 --- a/bitwarden.env.example +++ /dev/null @@ -1 +0,0 @@ -BW_PASSWORD= \ No newline at end of file diff --git a/package.json b/package.json index 441df37..2cbba40 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@babel/preset-env": "^7.21.4", "@babel/preset-react": "^7.18.6", "@bitwarden/cli": "^2024.8.2", + "@fontsource/inter": "^5.1.0", "@khanacademy/react-multi-select": "^0.3.3", "@react-firebase/database": "^0.3.11", "@reactour/mask": "^1.0.5", @@ -77,6 +78,7 @@ "react-router-dom": "^4.2.2", "react-scripts": "^5.0.1", "react-select": "^3.1.0", + "react-switch": "^7.0.0", "react-tooltip": "^5.21.5", "react-youtube": "^7.11.3", "reactjs-popup": "^1.5.0", diff --git a/src/assets/img/searchicon.png b/src/assets/img/searchicon.png new file mode 100644 index 0000000..4b124dc Binary files /dev/null and b/src/assets/img/searchicon.png differ diff --git a/src/assets/img/x.png b/src/assets/img/x.png new file mode 100644 index 0000000..461eca8 Binary files /dev/null and b/src/assets/img/x.png differ diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css index e024419..26451a6 100644 --- a/src/assets/styles/main.css +++ b/src/assets/styles/main.css @@ -128,14 +128,14 @@ h2 { .map-list { position: relative; width: 100vw; - height: calc(100vh - 70px); + height: calc(200vh - 70px); z-index: 2; overflow-y: scroll; background: white; padding-top: 10px; } -.map-cell { +/* .map-cell { border-top: solid #e0e0e0; background-color: white; padding-top: 18px; @@ -147,10 +147,44 @@ h2 { height: calc(60vh - 12px); } + .map-cell:hover { - border-left: solid #0069d9 10px; + +} */ + +.map-overlay { + height: calc(60vh - 12px); } +.map-cell { + position: relative; + padding-top: 10px; + border-top: solid #e0e0e0; + background-color: white; + padding: 18px; + transition: border-left 0.2s; + overflow: hidden; + z-index: 1; + min-height: 100px; +} + +.map-cell::before { + content: ''; + position: absolute; + top: 10px; + left: 8px; + right: 8px; + bottom: 8px; + background-color: #f4f4f4; + border-radius: 8px; + opacity: 0; + transition: opacity 0.3s; + z-index: -1; +} + +.map-cell:hover::before { + opacity: 1; +} .scroll-indicator { margin-bottom: 12px; border-radius: 10px; @@ -497,7 +531,6 @@ h2 { height: 100px; width: 100px; object-fit: contain; - border-radius: 5px; transition: filter 100ms; } diff --git a/src/assets/svg/chevron-down.svg b/src/assets/svg/chevron-down.svg new file mode 100644 index 0000000..c822ab6 --- /dev/null +++ b/src/assets/svg/chevron-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/map/ProviderCell.tsx b/src/components/map/ProviderCell.tsx index c205e0b..195834f 100644 --- a/src/components/map/ProviderCell.tsx +++ b/src/components/map/ProviderCell.tsx @@ -50,7 +50,7 @@ export default ({ style={{ borderLeftColor: primaryColor, borderTopWidth: index === 0 ? 0 : 1, - paddingTop: index === 0 ? 0 : 18, + paddingTop: 18, width: "100%", }} onMouseEnter={onMouseEnter} @@ -96,10 +96,10 @@ export default ({ )}
- {item.address[0]} + {item.address[0]}
- {item.phoneNum.join(", ")} + {item.phoneNum.join(", ")}
{myDistance && ( diff --git a/src/components/map/Search.tsx b/src/components/map/Search.tsx index 25d4c61..b676356 100644 --- a/src/components/map/Search.tsx +++ b/src/components/map/Search.tsx @@ -14,8 +14,8 @@ const Search = ({ filterProviders, primaryColor }) => { const [width, setWidth] = useState(getWidth()); const isDesktop = width > 768; - let { searchZipcode, searchProviderName, hideLabel, showLabel } = - localizationStrings; + let { searchZipcode, searchProviderName, hideLabel, showLabel } = localizationStrings; + return (
diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx index 63a3ae1..29340f8 100644 --- a/src/components/map/index.tsx +++ b/src/components/map/index.tsx @@ -1,3 +1,5 @@ +import '@fontsource/inter' +import './mapStyles.css' import { useTour } from "@reactour/tour"; import { loadClinwikiProviders } from "functions/loadClinwikiProviders"; import queryString from "query-string"; @@ -6,6 +8,7 @@ import Button from "react-bootstrap/Button"; import Col from "react-bootstrap/Col"; import Dropdown from "react-bootstrap/Dropdown"; import Form from "react-bootstrap/Form"; +import InputGroup from 'react-bootstrap/InputGroup'; import Modal from "react-bootstrap/Modal"; import Pagination from "react-bootstrap/Pagination"; import Row from "react-bootstrap/Row"; @@ -21,6 +24,11 @@ import ProviderInfoMobile from "../subcomponents/ProviderInfoMobile"; import GoogleMap from "./GoogleMap"; import ProviderCell from "./ProviderCell"; import { Tooltip as ReactTooltip } from "react-tooltip"; +import searchIcon from '../../assets/img/searchicon.png'; +import x from '../../assets/img/x.png'; +import dropdownIcon from '../../assets/svg/chevron-down.svg'; +import Switch from 'react-switch'; +import { func } from 'prop-types'; const frame = require("../../assets/svg/Frame.svg"); @@ -38,6 +46,15 @@ const getWidth = () => const Map = (props) => { const { setIsOpen } = useTour(); const [upperPageBound, setUpperPageBound] = useState(PAGE_SIZE); + // const [filterActive, setFilterActive] = useState(false); + const [filtersActive, setFiltersActive] = useState({ + filter1: [], + filter2: [], + }); + const [filterActiveState, setFilterActiveState] = useState({ + filter1: false, + filter2: false, + }); const [lowerPageBound, setLowerPageBound] = useState(0); const [currPage, setCurrPage] = useState(1); const [providers, setProviders] = useState([]); @@ -63,7 +80,7 @@ const Map = (props) => { const [defaultLat, setDefaultLat] = useState(0); const [defaultLong, setDefaultLong] = useState(0); const [defaultZoom, setDefaultZoom] = useState(1); - + const [isToggled, setIsToggled] = useState(defaultView); const [filtersState, setFiltersState] = useState({}); const [filtersData, setFiltersData] = useState({}); const [categories, setCategories] = useState([]); @@ -78,6 +95,11 @@ const Map = (props) => { [props.location.pathname], ); + const handleToggle = (checked) => { + setIsToggled(checked); + switchView(); + }; + const clinWikiMap = getTeam() === "clinwiki"; const filterByTags = useCallback( @@ -593,7 +615,18 @@ const Map = (props) => { return filtersState[item].map((title, key) => (
{title}{" "} @@ -610,7 +643,7 @@ const Map = (props) => { }} > {" "} - +
)); @@ -627,9 +660,7 @@ const Map = (props) => { className={classNames("filter-row", "padder", "filters")} style={{ display: "flex", alignItems: "center" }} > -
- {filters}: -
+
{Object.entries(filtersData) .filter( ([key, value]: any[]) => @@ -661,18 +692,69 @@ const Map = (props) => { .map(([key, value]: any[]) => renderDropdown(value.name, key), )} - + {lessFilters} + dropdown icon + */} ) : ( - + + + {moreFilters} + + dropdown icon + + + + + setMoreFilter(true)}> + Option 1 + + setMoreFilter(true)}> + Option 2 + + setMoreFilter(true)}> + Option 3 + + + + // )} {/* { function renderDropdown(title, key) { return ( - + {title} + + dropdown icon + {filtersData[key].options.map((item, index) => (
- filterProviders({ - target: { - name: key, - value: item.value, - type: "checkbox", - checked: !filtersState[key].includes( - item.value, - ), - getAttribute: (param) => "normalfilter", - }, - }) - } + onClick={() => { + const newFilters = [...filtersState[key]]; + + if (newFilters.includes(item.value)) { + const itemIndex = newFilters.indexOf(item.value); + newFilters.splice(itemIndex, 1); + } else { + newFilters.push(item.value); + } + + setFiltersState({ + ...filtersState, + [key]: newFilters, + }); + + setFilterActiveState({ + ...filterActiveState, + [key]: newFilters.length > 0, + }); + }} > { className={classNames( "row-spaced", "ml-2", - "mb-3", "pt-3", { "mr-2": !isDesktop }, )} >
- - - - - + + + + search + + + +
-
+
+
+
+
+ {isDesktop ? (isToggled ? hideLabel : showLabel) : (isToggled ? showLabel : hideLabel)} +
+ +
+
+ +
+ {/*
+
+
+ {isDesktop ? (isToggled ? hideLabel : showLabel) : (isToggled ? showLabel : hideLabel)} +
+ +
-
+
*/}
@@ -924,23 +1061,25 @@ const Map = (props) => { onClick={() => clearFilters()} className="tag clear-all" style={{ - borderColor: "red", - color: "red", + border: "none", + color: "#2F76FF", + fontFamily: 'Inter, sans-serif', + fontWeight: '700', }} > - Clear All + Clear
)}
{!isEmpty(activeProviders) ? ( -
- +
+ {activeProviders.length} {clinWikiMap ? " trials found" - : " providers found"} + : " locations found"} -
{activeProviders .slice(lowerPageBound, upperPageBound) .map((i, index) => ( @@ -949,7 +1088,7 @@ const Map = (props) => { "result-tutorial": index == 0, })} - > + >