From 668d7b282fe99b4b662cd970d841783dbca42dfe Mon Sep 17 00:00:00 2001 From: a-thansen <102360418+a-thansen@users.noreply.github.com> Date: Fri, 27 Oct 2023 15:05:51 +0200 Subject: [PATCH] Top Bar Revamp (Bug Fixes) --- frontend/package-lock.json | 9 +++++ .../Components/Conditions/ConditionsMap.tsx | 5 ++- .../Map/{ => Inputs}/MonthFilter.tsx | 2 +- .../Components/Map/{ => Inputs}/Search.tsx | 2 +- frontend/src/css/month_filter.css | 5 +++ frontend/src/css/navbar.css | 12 ++++-- frontend/src/css/search.css | 39 ++++++++----------- 7 files changed, 44 insertions(+), 30 deletions(-) rename frontend/src/Components/Map/{ => Inputs}/MonthFilter.tsx (97%) rename frontend/src/Components/Map/{ => Inputs}/Search.tsx (98%) 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 415a9b06..e06ad3d3 100644 --- a/frontend/src/css/search.css +++ b/frontend/src/css/search.css @@ -13,14 +13,14 @@ .geoapify-autocomplete-items { position: absolute; - left: 20px; /* This need to be improve later to align with the left side of search input box*/ top: calc(100% + 2px); width: 280px; + background-color: #ddddddbd; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; overflow: hidden; - background-color: #f6f6f6; + box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1); z-index: calc(var(--navbar-z-index)+20); } @@ -28,45 +28,34 @@ .geoapify-autocomplete-items div { padding: 10px; cursor: pointer; - width: 250px; - color: #333; - font-size: 14px; } .geoapify-autocomplete-items div:hover { - background-color: #eef4fc; + background-color: rgba(212, 43, 198, 0.223); width: 250px; } .geoapify-autocomplete-items .active { - background-color: #eef4fc; + background-color: rgba(212, 43, 198, 0.223); width: 250px; } .geoapify-autocomplete-item { display: inline-flex; - justify-content: space-between; - margin-right: 0px; - width: 230px; + margin-right: 5px; + width: 200px; flex-direction: row; align-items: left; } .geoapify-autocomplete-item .icon { display: inline-flex; - align-items: center; - margin-right: 10px; - margin-left: 6px; - width: 20px; + margin-right: 5px; + width: 200px; height: 24px; color: rgba(0, 0, 0, 0.6); } -.geoapify-autocomplete-item .icon svg { - height: 16px; - color: #2e75f1; -} - .geoapify-autocomplete-item .icon.emoji { color: unset; width: 100px; @@ -77,22 +66,28 @@ /* Address text format*/ .geoapify-autocomplete-item .address { display: flex; - width: 230px; + min-width: 230px; flex-direction: column; align-items: flex-start; - margin-left: 12px; + 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; + height: 100%; display: none; align-items: center;