-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New explore dropdown UI #2336
base: develop
Are you sure you want to change the base?
New explore dropdown UI #2336
Changes from 1 commit
ccb9213
60ab7d6
e0c3ae7
58456f8
ea978bb
b9074b8
732b4ab
d5dda28
1cddf29
fbd4cc7
e31442a
cfe9c10
6dd0953
7954e32
597a6a7
7ef27e7
dc684b9
c26a6a1
b3525ff
5eddbd4
12ba0e3
49f386e
7925aa5
3874bfc
d7cef46
ff6494b
d6983c5
aaa0f1c
0f99a00
65366fe
8e107df
1966e6e
2f8862d
d6602c3
ffc9070
c61c4e6
ab99caf
7560c4c
27f76dc
1d909fb
2fea7d6
541f39a
65a7ff7
ae73eaa
f186acc
ee6bb67
ae2b7cc
192ecf4
630dc8b
0b2d81b
922daef
cae26b5
811fe24
419133e
60b2ce2
3b1d3cd
2049835
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
Used MUI Modal to render explore features for better compatibility on mobile devices. Provided a cross icon to close the modal view for improved usability.
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,14 +9,39 @@ | |
|
||
.exploreMainContainer { | ||
max-width: 182px; | ||
background-color: $backgroundColor; | ||
background-color: #fff; | ||
border-radius: 12px; | ||
margin-top: 10px; | ||
padding: 8px; | ||
padding: 12px; | ||
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12); | ||
|
||
@include xsPhoneView { | ||
position: absolute; | ||
min-width: 293px; | ||
border-radius: unset; | ||
right: 0px; | ||
top: -10px; | ||
} | ||
} | ||
|
||
.exploreFeatureMobileHeader { | ||
display: flex; | ||
justify-content: space-between; | ||
padding: 3px 4px 18px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There are minor differences from the designed spacing, any reason for that? As per the design, total spacing of the contents of this component from the top/side is 16px, and bottom is 20px. To achieve that, we would use |
||
|
||
.exploreLabel { | ||
display: flex; | ||
gap: 8px; | ||
|
||
p { | ||
font-size: 14px; | ||
font-weight: 700; | ||
gap: 8px; | ||
} | ||
} | ||
|
||
svg { | ||
width: 16px; | ||
} | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change | ||
---|---|---|---|---|
@@ -1,20 +1,30 @@ | ||||
import type { ChangeEvent, FC } from 'react'; | ||||
import type { MapOptions } from '../../ProjectsMapContext'; | ||||
import type { SetState } from '../../../common/types/common'; | ||||
|
||||
import styles from './MapFeatureExplorer.module.scss'; | ||||
import { MapLayerToggle } from '.'; | ||||
// import InfoIcon from '../../../../../public/assets/images/icons/projectV2/InfoIcon'; | ||||
import { StyledSwitch } from './CustomSwitch'; | ||||
// import { YearRangeSlider } from '.'; | ||||
import { useTranslations } from 'next-intl'; | ||||
import { ExploreIcon } from '../../../../../public/assets/images/icons/projectV2/ExploreIcon'; | ||||
import CrossIcon from '../../../../../public/assets/images/icons/projectV2/CrossIcon'; | ||||
// import themeProperties from '../../../../theme/themeProperties'; | ||||
|
||||
type MapSettingsProps = { | ||||
mapOptions: MapOptions; | ||||
updateMapOption: (option: keyof MapOptions, value: boolean) => void; | ||||
isMobile?: boolean; | ||||
setIsOpen?: SetState<boolean>; | ||||
}; | ||||
|
||||
const MapSettings: FC<MapSettingsProps> = ({ mapOptions, updateMapOption }) => { | ||||
const MapSettings: FC<MapSettingsProps> = ({ | ||||
mapOptions, | ||||
updateMapOption, | ||||
isMobile, | ||||
setIsOpen, | ||||
}) => { | ||||
mohitb35 marked this conversation as resolved.
Show resolved
Hide resolved
|
||||
const tAllProjects = useTranslations('AllProjects'); | ||||
const tMaps = useTranslations('Maps'); | ||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Remove unused translation hook. The - const tMaps = useTranslations('Maps'); 📝 Committable suggestion
Suggested change
🧰 Tools🪛 GitHub Check: CodeFactor[notice] 24-24: src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx#L24 |
||||
/* const { | ||||
|
@@ -51,6 +61,17 @@ const MapSettings: FC<MapSettingsProps> = ({ mapOptions, updateMapOption }) => { | |||
} | ||||
/> | ||||
<div className={styles.hrLine} /> */} | ||||
{isMobile && setIsOpen && ( | ||||
<div className={styles.exploreFeatureMobileHeader}> | ||||
<div className={styles.exploreLabel}> | ||||
<ExploreIcon /> | ||||
<p>{tMaps('explore')}</p> | ||||
</div> | ||||
<button onClick={() => setIsOpen(false)}> | ||||
<CrossIcon /> | ||||
</button> | ||||
</div> | ||||
)} | ||||
<MapLayerToggle | ||||
infoIcon={undefined} | ||||
label={tAllProjects('projects')} | ||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do this instead of making margin-top = 0px? This makes it tougher to understand how the element is positioned.