Skip to content

Commit

Permalink
Mobile: Provide access to most feature
Browse files Browse the repository at this point in the history
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
tordans authored and willemarcel committed Oct 24, 2021
1 parent 6073499 commit 84bb6b1
Show file tree
Hide file tree
Showing 11 changed files with 231 additions and 199 deletions.
3 changes: 2 additions & 1 deletion src/AppMobile.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Stats } from './views/stats';
import { Filters } from './views/filters';
import { ChangesetsList } from './views/changesets_list';
import { CMap } from './views/map';
// import { NavbarChangeset } from './views/navbar_changeset';
import { NavbarChangeset } from './views/navbar_changeset';
import { NavbarSidebar } from './views/navbar_sidebar';
// import { Home } from './views/home';
import { Modal } from './views/modal';
Expand All @@ -24,6 +24,7 @@ export const AppMobile = () => {
<div className="col">
<NavbarSidebar />
<Route exact path="/" component={ChangesetsList} />
<Route path="/changesets" component={NavbarChangeset} />
<Route
path="/changesets"
// Need to use render to avoid unmounting of
Expand Down
4 changes: 4 additions & 0 deletions src/assets/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@ img {
height: 55px !important;
}

.h40 {
height: 40px !important;
}

.hmin55 {
min-height: 55px !important;
}
Expand Down
12 changes: 11 additions & 1 deletion src/components/changeset/open_in.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';

import { importChangesetMap } from '../../utils/cmap';
import { Dropdown } from '../dropdown';
import { useMobile } from '../../utils';

function openEditor(selected) {
importChangesetMap('getMapInstance')
Expand All @@ -23,7 +24,8 @@ function openEditor(selected) {
});
}

export function OpenIn({ changesetId, coordinates, className }) {
export function OpenIn({ display, changesetId, coordinates, className }) {
const mobile = useMobile();
const options = [
{
label: 'Achavi',
Expand All @@ -49,6 +51,13 @@ export function OpenIn({ changesetId, coordinates, className }) {
value: 'RapiD'
}
];
if (mobile) {
options.unshift({
label: 'OSM.org',
value: 'OSM.org',
href: `https://www.openstreetmap.org/changeset/${changesetId}`
});
}

return (
<div className={`select-container ${className}`}>
Expand All @@ -58,6 +67,7 @@ export function OpenIn({ changesetId, coordinates, className }) {
value={[]}
onChange={openEditor}
options={options}
display={display}
position="left"
/>
</div>
Expand Down
15 changes: 14 additions & 1 deletion src/components/changeset/tags.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,23 @@ export class Tags extends React.PureComponent {
currentChangeset: Map<string, *>,
handleChangesetModifyTag: (number, Map<string, *>, Object, boolean) => mixed
};

state: {
options: Array<any>,
allTags: Array<any>
};

state = {
allTags: {},
options: []
};

tagsData = cacheTagsData;

componentDidMount() {
this.getAsyncOptions();
}

getAsyncOptions = () => {
if (!this.tagsData) {
this.tagsData = cancelablePromise(
Expand All @@ -35,6 +40,7 @@ export class Tags extends React.PureComponent {
})
);
}

return this.tagsData.promise
.then(json => {
let data = {};
Expand All @@ -50,12 +56,14 @@ export class Tags extends React.PureComponent {
})
.catch(e => {});
};

componentWillUnmount() {
if (this.tagsData) {
cacheTagsData = this.tagsData;
this.tagsData.cancel();
}
}

onAdd = (obj: Object) => {
if (!obj) return;
const {
Expand All @@ -65,6 +73,7 @@ export class Tags extends React.PureComponent {
} = this.props;
handleChangesetModifyTag(changesetId, currentChangeset, obj, false);
};

onRemove = (obj: Object) => {
if (!obj) return;
const {
Expand All @@ -74,7 +83,9 @@ export class Tags extends React.PureComponent {
} = this.props;
handleChangesetModifyTag(changesetId, currentChangeset, obj, true);
};

defaultValue = new Map();

render() {
if (!this.props.currentChangeset) return null;

Expand All @@ -94,7 +105,9 @@ export class Tags extends React.PureComponent {
onAdd={this.onAdd}
onRemove={this.onRemove}
disabled={this.props.disabled}
className={`${this.props.disabled ? 'cursor-notallowed' : ''}`}
className={`${
this.props.disabled ? 'cursor-notallowed' : ''
} flex-parent mr3`}
value={value}
options={this.state.options}
onChange={() => {}}
Expand Down
51 changes: 27 additions & 24 deletions src/components/changeset/verify.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,36 @@ export function Verify({
if (changeset.getIn(['properties', 'checked'])) {
const isHarmful = changeset.getIn(['properties', 'harmful']);
return (
<div className="flex-parent-inline">
<div
className={`flex-parent align-items--center btn btn--s border border--1 round color-gray transition pl12 pr6 ${
isHarmful
? 'bg-lighten50 border--red-light'
: 'bg-lighten50 border--green-light'
}`}
style={{ maxWidth: '100px' }}
>
<img
src={isHarmful ? thumbsDown : thumbsUp}
alt={`Marked as ${isHarmful ? 'bad' : 'good'}`}
className="icon inline-block w14 h14"
/>
<span
className={`btn btn--s border border--1 round color-gray transition pl12 pr6 ${
isHarmful
? 'bg-lighten50 border--red-light'
: 'bg-lighten50 border--green-light'
}`}
className="ml6"
style={{
flex: '1',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
>
<span>
<img
src={isHarmful ? thumbsDown : thumbsUp}
alt={`Marked as ${isHarmful ? 'bad' : 'good'}`}
className="icon inline-block mt3 w14 h14"
/>
{checkUser ? (
<span className="ml6 mt3">{checkUser}</span>
) : (
<span className="ml6 txt-em">Verified</span>
)}
</span>
<svg
onClick={onClear}
className="icon inline-block align-middle pl3 pb3 w18 h18 pointer color-gray"
>
<use xlinkHref="#icon-close" />
</svg>
{checkUser ? <>{checkUser}</> : <em>Verified</em>}
</span>
<svg
onClick={onClear}
className="icon inline-block align-middle pl3 w18 h18 pointer color-gray"
>
<use xlinkHref="#icon-close" />
</svg>
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export class _Dropdown extends React.PureComponent {

render() {
return (
<div className={`dropdown mr3 pointer ${this.props.className || ''}`}>
<div className={`dropdown pointer ${this.props.className || ''}`}>
{console.log('_Dropdown', this.props.position, this.props)}
<Button
iconName="chevron-down"
Expand Down
65 changes: 27 additions & 38 deletions src/components/list/row.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,17 @@ export class Row extends React.Component {
changesetId: number,
inputRef: ?(any) => any
};

shouldComponentUpdate(nextProps: Object) {
return (
nextProps.properties !== this.props.properties ||
this.props.active ||
nextProps.active
);
}

wasOpen = false;

render() {
const { properties, changesetId, active, inputRef, ...other } = this.props;
if (!this.wasOpen) {
Expand All @@ -41,11 +44,7 @@ export class Row extends React.Component {

let backgroundClass = '';

backgroundClass += active
? 'light-blue'
: this.wasOpen
? ' bg-darken5 '
: '';
backgroundClass += active ? 'light-blue' : this.wasOpen ? 'bg-darken5' : '';
return (
<div
onClick={() =>
Expand All @@ -58,40 +57,30 @@ export class Row extends React.Component {
<div className={`${backgroundClass} ${borderClass}`} ref={inputRef}>
<div
{...other}
className={
'p12 cursor-pointer flex-parent flex-parent--column border-b border-b--1 border--gray-light'
}
className="p12 cursor-pointer flex-parent flex-parent--column border-b border-b--1 border--gray-light flex-parent flex-parent--column"
>
<div className="flex-parent flex-parent--column">
<Link
to={{
search: window.location.search,
pathname: `/changesets/${changesetId}`
}}
>
<div>
<Title
properties={properties}
wasOpen={this.wasOpen}
date={properties.get('date')}
/>
</div>
<div>
<PrimaryLine
reasons={properties.get('reasons')}
tags={properties.get('tags')}
comment={properties.get('comment')}
/>
</div>
</Link>
<div>
<SecondaryLine
changesetId={changesetId}
properties={properties}
date={properties.get('date')}
/>
</div>
</div>
<Link
to={{
search: window.location.search,
pathname: `/changesets/${changesetId}`
}}
>
<Title
properties={properties}
wasOpen={this.wasOpen}
date={properties.get('date')}
/>
<PrimaryLine
reasons={properties.get('reasons')}
tags={properties.get('tags')}
comment={properties.get('comment')}
/>
</Link>
<SecondaryLine
changesetId={changesetId}
properties={properties}
date={properties.get('date')}
/>
</div>
</div>
</div>
Expand Down
22 changes: 18 additions & 4 deletions src/components/navbar.js
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>
);
}
Loading

0 comments on commit 84bb6b1

Please sign in to comment.