forked from OSMCha/osmcha-frontend
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Mobile: Provide access to most feature
This does a lot of stuff: It renders the `NavbarChangeset` on Route /changesets for mobile just the way it is for desktop. This shows the Component on mobile. Adjust the height of the Logo-Navbar and Changeset-Navbar (`h40`) on mobile. Make sure the Map still calculates to 100% of the rest of the screen. Change the OpenIn Component, to link to OMS.org on mobile. On Desktop, this is a separate link but on mobile we don't have the space. Also, move the OpenIn-Dropdown-Button-Text to the calling view. Tags and Verify Component use different CSS now base on flex to handle the edge case of long usernames which would break the `NavbarChangeset`. Removed unused tag-indentation in the Verify Component. It's easier to style, if there are just the level of tags present that are required for the style. Apart from that, just some spacing adjustments. Dropdown Component does not have a default `mr3`, but the calling components provide the margin if needed (mostly not). Changeset-Row Component: Get rid of non-needed tag-hierarchy (same as above). Navbar Component: Introduce classes for the title and buttons section to allow custom styles on the calling end. Adjust sizes for desktop/mobile. Map Component: Remove non needed empty div hierarchy (see above). Navbar Changeset Component: Remove currently not used old mobile-Link. Change styling for mobile quite a bit to get it all show in one line. Longer usernames are cut of with '…' (via CSS). The flex styling is a bit complex for those Navbars. Use a different style for the `Changeset: <ID>` on mobile. Navbar Sidebar Component: Remove unused local state. Introduce a Burger Menu Button next to the menu as an affordance on mobile that the Logo is actually the place to see something and not just a home-link.
- Loading branch information
1 parent
6073499
commit 84bb6b1
Showing
11 changed files
with
231 additions
and
199 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,26 @@ | ||
import React from 'react'; | ||
import { useMobile } from '../utils'; | ||
|
||
export function Navbar({ | ||
className, | ||
title, | ||
titleClassName = '', | ||
buttons, | ||
buttonsClassName = '' | ||
}) { | ||
const mobile = useMobile(); | ||
|
||
export function Navbar({ title, className, buttons }) { | ||
return ( | ||
<nav | ||
className={`h55 hmin55 flex-parent px12 py6 bg-gray-dark flex-parent--center-cross justify--space-between ${className}`} | ||
className={` | ||
${mobile ? 'h40' : 'h55 flex-parent--center-cross'} | ||
flex-parent px12 py6 bg-gray-dark justify--space-between ${className} | ||
`} | ||
> | ||
<div className="flex-child flex-child--grow">{title || ''}</div> | ||
<div className="flex-child">{buttons}</div> | ||
<div className={`flex-child flex-child--grow ${titleClassName}`}> | ||
{title || ''} | ||
</div> | ||
<div className={`flex-child ${buttonsClassName}`}>{buttons}</div> | ||
</nav> | ||
); | ||
} |
Oops, something went wrong.