Featurepanel: Make the entire heading visible on the mobile drawer #555
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| const { feature } = useFeatureContext(); | ||
| const label = getLabel(feature); | ||
|
|
||
| // thw pwa needs space at the bottom | ||
| const isStandalone = useMediaQuery('(display-mode: standalone)'); |
There was a problem hiding this comment.
@jvaclavik - did you already tried to use that media-query? I think you already tried to accomodate for iPhone menu handle in the bottom, but I believe you removed it after some time. Do you remember what was the issue?
42c886d to
bb75028
Compare
|
@zbycz is this fine now? |
| @@ -29,7 +28,7 @@ const Flex = styled.div` | |||
| flex: 1; | |||
| `; | |||
|
|
|||
| export const FeaturePanel = () => { | |||
| export const FeaturePanel = forwardRef<HTMLDivElement>((_, ref) => { | |||
There was a problem hiding this comment.
Can you please use headingRef prop instead?
forwardRef is meant to be used for "the main ref of a component", eg. for FeaturePanel it would be some div for the whole panel. I may be mistaken, feel free to look it up. 🙂
|
@Dlurak - after you fix reviews requesting changes, you should be able to dismiss my review by this button. Then you can merge. |
| @@ -109,7 +110,8 @@ const IndexWithProviders = ({ climbingAreas }: IndexWithProvidersProps) => { | |||
| <Loading /> | |||
| {!directions && <SearchBox />} | |||
| {directions && <DirectionsBox />} | |||
| {featureShown && !isMobileMode && <FeaturePanelOnSide />} | |||
| {featureShown && !isMobileMode && isMounted && <FeaturePanelOnSide />} | |||
There was a problem hiding this comment.
FYI - this isMounted breaks the server-side-rendering for featurepanel (#623)
I reverted it here:
I understand you wanted to remove the Panel while loading on the mobile, but this is not a good way to do it 🙂 some CSS media queries is the way.
There was a problem hiding this comment.
I am not sure anymore but I think I added it to resolve a hydration error
There was a problem hiding this comment.
I've referenced this in a new issue #690
Description
Checklist