From 64c9155adca48ea0ef8edd33a9e8a374470f5dee Mon Sep 17 00:00:00 2001
From: a-thansen <102360418+a-thansen@users.noreply.github.com>
Date: Tue, 24 Oct 2023 12:02:18 +0200
Subject: [PATCH] Top Bar Revamp
Top Bar Revamp
Move all filters to top, reformatted containers, added labels
* TBF when browser narrow, date filters stack
Quick fix
Fixed calendar pop up width
more
---
.../Components/Conditions/ConditionsMap.tsx | 39 ++++++++++++-------
.../src/Components/Map/Inputs/Selector.tsx | 2 +-
frontend/src/Components/Map/MapWrapper.tsx | 5 ---
frontend/src/Components/Map/MonthFilter.tsx | 15 ++++++-
frontend/src/css/month_filter.css | 21 ++++++++++
frontend/src/css/navbar.css | 29 ++++++++++++--
frontend/src/css/search.css | 4 +-
frontend/src/css/selector.css | 10 ++---
8 files changed, 93 insertions(+), 32 deletions(-)
diff --git a/frontend/src/Components/Conditions/ConditionsMap.tsx b/frontend/src/Components/Conditions/ConditionsMap.tsx
index 425a7d72..3282c5c6 100644
--- a/frontend/src/Components/Conditions/ConditionsMap.tsx
+++ b/frontend/src/Components/Conditions/ConditionsMap.tsx
@@ -7,10 +7,13 @@ import { Feature, FeatureCollection } from 'geojson';
import Search from '../Map/Search';
import MonthFilter from '../Map/MonthFilter';
import MapWrapper from '../Map/MapWrapper';
+import Selector from '../Map/Inputs/Selector';
import '../../css/navbar.css';
import '../../css/search.css';
+import '../../css/month_filter.css';
import '../../css/slider.css';
+import '../../css/selector.css';
import 'react-datepicker/dist/react-datepicker.css';
import { getConditions } from '../../queries/fetchConditions';
@@ -408,20 +411,29 @@ const ConditionsMap = (props: any) => {
/>
-
+
+
+
Condition Type
+
-
+
+
console.log(e)}
+ />
+ Severity
+
+
{
rangeChange(dateChange(date), true);
@@ -430,6 +442,7 @@ const ConditionsMap = (props: any) => {
rangeChange(dateChange(date), false);
}}
/>
+ Start Date → End Date
diff --git a/frontend/src/Components/Map/Inputs/Selector.tsx b/frontend/src/Components/Map/Inputs/Selector.tsx
index 509efbe1..0f13f745 100644
--- a/frontend/src/Components/Map/Inputs/Selector.tsx
+++ b/frontend/src/Components/Map/Inputs/Selector.tsx
@@ -9,7 +9,7 @@ interface Props {
}
/**
- * Selector is the component to show a dropdown menu for conditions.
+ * Selector is the component to show a dropdown menu for condition severity.
*/
const Selector: React.FC
= ({ options, onSelect }) => {
return (
diff --git a/frontend/src/Components/Map/MapWrapper.tsx b/frontend/src/Components/Map/MapWrapper.tsx
index 61ff30a2..e8fb28ac 100644
--- a/frontend/src/Components/Map/MapWrapper.tsx
+++ b/frontend/src/Components/Map/MapWrapper.tsx
@@ -8,7 +8,6 @@ import {
import '../../css/map.css';
import { MAP_OPTIONS } from './constants';
import React, { FC } from 'react';
-import Selector from './Inputs/Selector';
/**
* properties
@@ -26,10 +25,6 @@ const MapWrapper: FC = ({ children }) => {
return (
<>
- console.log(e)}
- />
void;
}
+const CustomInput = ({
+ value,
+ onClick,
+}: {
+ value: string;
+ onClick: (event: React.MouseEvent) => void;
+}) => (
+
+);
+
/**
* Component rendering Month Filter
*/
@@ -16,7 +28,6 @@ interface Props {
const MonthFilter: React.FC = ({ onEndChange, onStartChange }) => {
const [startDate, setStartDate] = useState(new Date('2022/06/08'));
const [endDate, setEndDate] = useState(new Date());
-
return (
<>
@@ -24,6 +35,7 @@ const MonthFilter: React.FC
= ({ onEndChange, onStartChange }) => {
selected={startDate}
onSelect={(date: any) => setStartDate(date)}
onChange={onStartChange}
+ customInput={React.createElement(CustomInput)}
selectsStart
startDate={startDate}
endDate={endDate}
@@ -38,6 +50,7 @@ const MonthFilter: React.FC = ({ onEndChange, onStartChange }) => {
selected={endDate}
onSelect={(date: any) => setEndDate(date)}
onChange={onEndChange}
+ customInput={React.createElement(CustomInput)}
selectsEnd
startDate={startDate}
endDate={endDate}
diff --git a/frontend/src/css/month_filter.css b/frontend/src/css/month_filter.css
index de17dc06..02b6028b 100644
--- a/frontend/src/css/month_filter.css
+++ b/frontend/src/css/month_filter.css
@@ -1,3 +1,24 @@
.datepicker {
+ position: static;
display: inline-block;
+ align-self: flex-start;
+}
+
+.month-custom-input {
+ align-self: flex-start;
+ align-items: center;
+ background-color: white;
+ color: black;
+ font-size: 15px;
+ border-radius: 5px;
+ margin: 5px 0px;
+ cursor: pointer;
+}
+
+.react-datepicker__input-container {
+ width: inherit;
+}
+
+.react-datepicker-wrapper {
+ width: 100%;
}
diff --git a/frontend/src/css/navbar.css b/frontend/src/css/navbar.css
index 5bf1ffc0..84299276 100644
--- a/frontend/src/css/navbar.css
+++ b/frontend/src/css/navbar.css
@@ -4,7 +4,9 @@
flex-wrap: wrap;
justify-content: flex-start;
align-content: space-around;
+ align-items: center;
position: sticky;
+ gap: 2%;
top: 0;
left: 0;
width: 100%;
@@ -15,14 +17,25 @@
}
.nav-container {
- width: 20%;
+ position: relative;
+ width: 15%;
height: 100%;
- margin-top: 1%;
+ margin-top: 0.7%;
+ margin-left: 0.4%;
+ align-self: flex-start;
+}
+
+.picker-container {
+ position: relative;
+ width: 15%;
+ height: 100%;
+ margin-top: 0.7%;
align-self: flex-start;
}
.filter-container {
- width: 10%;
+ position: relative;
+ width: 5%;
height: 100%;
margin-top: 1%;
align-self: flex-start;
@@ -37,6 +50,16 @@
border-radius: 15%;
}
+.labelling {
+ display: fixed;
+ flex-direction: column;
+ justify-content: center;
+ margin-top: -3%;
+ font-size: 10px;
+ /* overflow: hidden; */
+ white-space: nowrap;
+}
+
.nav-tab:hover {
color: var(--highlight-text);
}
diff --git a/frontend/src/css/search.css b/frontend/src/css/search.css
index dd023ed5..7468d764 100644
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -3,7 +3,7 @@
line-height: 36px;
height: 36px;
padding: 0 31px 0 7px;
- width: 200px;
+ width: 80%;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
@@ -65,7 +65,7 @@
.geoapify-close-button {
position: absolute;
- right: 25px;
+ right: 8px;
width: 30px;
top: 0px;
diff --git a/frontend/src/css/selector.css b/frontend/src/css/selector.css
index b4c13088..0425a16a 100644
--- a/frontend/src/css/selector.css
+++ b/frontend/src/css/selector.css
@@ -1,16 +1,12 @@
.input-selector-container {
- z-index: calc(var(--navbar-z-index) - 2);
- position: absolute;
- margin: 20px 102px;
- width: 120px;
- height: 30px;
+ position: relative;
}
.input-selector-container .input {
width: 100%;
height: 100%;
- background: var(--background);
- color: white;
+ background: white;
+ color: black;
cursor: pointer;
font-size: 15px;
border: none;