diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 9fc624b3..c71b1a4f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,6 +14,7 @@ "chart.js": "^4.4.0", "d3": "^7.8.5", "leaflet": "^1.9.4", + "multiselect-react-dropdown": "^2.0.25", "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-datepicker": "^4.19.0", @@ -13795,6 +13796,14 @@ "multicast-dns": "cli.js" } }, + "node_modules/multiselect-react-dropdown": { + "version": "2.0.25", + "resolved": "https://registry.npmjs.org/multiselect-react-dropdown/-/multiselect-react-dropdown-2.0.25.tgz", + "integrity": "sha512-z8kUSyBNOuV7vn4Dk35snzXWtIfTdSEEXhgDdLMvOmR+xJFx35vc1voUlSuOvrk3khb+hXC219Qs9szOvNm25Q==", + "peerDependencies": { + "react": "^16.7.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/mute-stream": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", diff --git a/frontend/src/Components/Conditions/ConditionsMap.tsx b/frontend/src/Components/Conditions/ConditionsMap.tsx index 3282c5c6..ddb2af08 100644 --- a/frontend/src/Components/Conditions/ConditionsMap.tsx +++ b/frontend/src/Components/Conditions/ConditionsMap.tsx @@ -4,8 +4,9 @@ import { GeoJSON } from 'react-leaflet'; import { Layer, PathOptions } from 'leaflet'; import { Feature, FeatureCollection } from 'geojson'; -import Search from '../Map/Search'; -import MonthFilter from '../Map/MonthFilter'; +import Search from '../Map/Inputs/Search'; +import MonthFilter from '../Map/Inputs/MonthFilter'; + import MapWrapper from '../Map/MapWrapper'; import Selector from '../Map/Inputs/Selector'; diff --git a/frontend/src/Components/Map/MonthFilter.tsx b/frontend/src/Components/Map/Inputs/MonthFilter.tsx similarity index 97% rename from frontend/src/Components/Map/MonthFilter.tsx rename to frontend/src/Components/Map/Inputs/MonthFilter.tsx index e1d9a0b8..ed05d908 100644 --- a/frontend/src/Components/Map/MonthFilter.tsx +++ b/frontend/src/Components/Map/Inputs/MonthFilter.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import DatePicker from 'react-datepicker'; -import '../../css/month_filter.css'; +import '../../../css/month_filter.css'; interface Props { /** function taking argument "date" for Start Date **/ diff --git a/frontend/src/Components/Map/Search.tsx b/frontend/src/Components/Map/Inputs/Search.tsx similarity index 98% rename from frontend/src/Components/Map/Search.tsx rename to frontend/src/Components/Map/Inputs/Search.tsx index 694cc3fd..d9dfdcb9 100644 --- a/frontend/src/Components/Map/Search.tsx +++ b/frontend/src/Components/Map/Inputs/Search.tsx @@ -5,7 +5,7 @@ import { GeoapifyContext, } from '@geoapify/react-geocoder-autocomplete'; import '@geoapify/geocoder-autocomplete/styles/minimal.css'; -import '../../css/search.css'; +import '../../../css/search.css'; interface Props { /** diff --git a/frontend/src/css/month_filter.css b/frontend/src/css/month_filter.css index 02b6028b..3635efdd 100644 --- a/frontend/src/css/month_filter.css +++ b/frontend/src/css/month_filter.css @@ -19,6 +19,11 @@ width: inherit; } +.react-datepicker__month-container { + float: left; + width: 200px; +} + .react-datepicker-wrapper { width: 100%; } diff --git a/frontend/src/css/navbar.css b/frontend/src/css/navbar.css index 84299276..cc9b5f1a 100644 --- a/frontend/src/css/navbar.css +++ b/frontend/src/css/navbar.css @@ -19,8 +19,9 @@ .nav-container { position: relative; width: 15%; + min-width: fit-content; height: 100%; - margin-top: 0.7%; + margin-top: 13px; margin-left: 0.4%; align-self: flex-start; } @@ -28,17 +29,20 @@ .picker-container { position: relative; width: 15%; + min-width: fit-content; height: 100%; - margin-top: 0.7%; + margin-top: 10px; align-self: flex-start; } .filter-container { position: relative; - width: 5%; + width: 6%; + min-width: fit-content; height: 100%; - margin-top: 1%; + margin-top: 13px; align-self: flex-start; + flex-basis: auto; } .nav-tab { diff --git a/frontend/src/css/search.css b/frontend/src/css/search.css index 7468d764..e06ad3d3 100644 --- a/frontend/src/css/search.css +++ b/frontend/src/css/search.css @@ -63,9 +63,28 @@ opacity: 0.9; } +/* Address text format*/ +.geoapify-autocomplete-item .address { + display: flex; + min-width: 230px; + flex-direction: column; + align-items: flex-start; + text-align: left; + margin-left: 7px; +} + +.geoapify-autocomplete-item .address .secondary-part { + margin: 0; + margin-left: -4px; + overflow-wrap: break-word; + hyphens: manual; + text-align: left; + z-index: calc(var(--navbar-z-index)+22); +} + .geoapify-close-button { position: absolute; - right: 8px; + right: 0%; width: 30px; top: 0px;