Skip to content
This repository has been archived by the owner on May 4, 2024. It is now read-only.

Commit

Permalink
Top Bar Revamp (Bug Fixes)
Browse files Browse the repository at this point in the history
  • Loading branch information
a-thansen committed Nov 3, 2023
1 parent 16a6e86 commit e77bbc6
Show file tree
Hide file tree
Showing 7 changed files with 63 additions and 21 deletions.
9 changes: 9 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions frontend/src/Components/Conditions/ConditionsMap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Original file line number Diff line number Diff line change
@@ -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 **/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/css/month_filter.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@
width: inherit;
}

.react-datepicker__month-container {
float: left;
width: 200px;
}

.react-datepicker-wrapper {
width: 100%;
}
12 changes: 8 additions & 4 deletions frontend/src/css/navbar.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,26 +19,30 @@
.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;
}

.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 {
Expand Down
49 changes: 36 additions & 13 deletions frontend/src/css/search.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,62 +13,85 @@

.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;

width: 230px;
background-color: #ddddddbd;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;

box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
z-index: calc(var(--navbar-z-index)+20);
}

.geoapify-autocomplete-items div {
padding: 10px;
cursor: pointer;
width: 230px;
color: #333;
font-size: 14px;
}

.geoapify-autocomplete-items div:hover {
background-color: rgba(212, 43, 198, 0.223);
width: 250px;
background-color: #eef4fc;
width: 230px;
}

.geoapify-autocomplete-items .active {
background-color: rgba(212, 43, 198, 0.223);
width: 250px;
background-color: #eef4fc;
width: 230px;
}

.geoapify-autocomplete-item {
display: inline-flex;
margin-right: 5px;
width: 200px;
justify-content: space-between;
margin-right: 0px;
width: 230px;
flex-direction: row;
align-items: left;
}

.geoapify-autocomplete-item .icon {
display: inline-flex;
margin-right: 5px;
width: 200px;
align-items: center;
margin-right: 10px;
margin-left: 6px;
width: 20px;
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;
font-size: 20px;
opacity: 0.9;
}

/* Address text format*/
.geoapify-autocomplete-item .address {
display: flex;
width: 230px;
flex-direction: column;
align-items: flex-start;
margin-left: 7px;
}

.geoapify-autocomplete-item .address .secondary-part {
margin: 0;
text-align: left;
}

.geoapify-close-button {
position: absolute;
right: 8px;
right: 0%;
width: 30px;
top: 0px;

height: 100%;
display: none;
align-items: center;
Expand Down

0 comments on commit e77bbc6

Please sign in to comment.