Skip to content
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

Recycling POI block #648

Merged
merged 10 commits into from Jun 4, 2020
Merged

Recycling POI block #648

merged 10 commits into from Jun 4, 2020

Conversation

bbecquet
Copy link
Contributor

@bbecquet bbecquet commented May 19, 2020

Description

Implement a "Recycling" POI block, to display details about recycling containers.

Note
This PR is quite big for such content as I used it as an excuse to introduce things that I think were currently missing and can ease development for all parts of the app in the future:

  • I introduced a generic <Flex> component. It's very basic for now, to be completed when needed and/or replaced by a similar component from the Qwant Design System if we find a way to use it one day… The goal is to promote the use of the flex layout in a standard way, instead of floats or absolute positionings that are still used in many parts of the app with a lot of unnecessary CSS and many inconsistencies.
  • I introduced a generic <Text> component, to standardize the typographic classes beyond just CSS and do common patterns in a consistent way (like displaying an icon before the text). As for <Flex>, it's meant to be re-used anywhere possible, adapted to our needs and replaced by a Design System component when the time is right.
  • I developed the <Meter> component as a shared one, so it can be re-used easily in other parts if needed. BTW, it's a choice not to use the native meter HTML element, as it's a real hell to style properly and would introduce broken designs on older browsers.
  • I introduced a way to export individual generic components from a centralized file, so they can be imported more easily. Once again, the idea is to encourage their use. So, instead of:
import Flex from 'src/components/ui/Flex';
import Text from 'src/components/ui/Text';
import Meter from 'src/components/ui/Meter';

It's now possible to do:

import { Flex, Text, Meter } from 'src/components/ui';

Screenshots

localhost_3000_place_osm_node_721429822@

@bbecquet bbecquet added the WIP label May 19, 2020
src/components/ui/Flex.jsx Outdated Show resolved Hide resolved
src/components/ui/index.js Show resolved Hide resolved
src/panel/poi/blocks/Recycling.jsx Outdated Show resolved Hide resolved
src/components/ui/Flex.jsx Outdated Show resolved Hide resolved
@bbecquet bbecquet requested a review from G-Ray June 2, 2020 12:12
@bbecquet bbecquet merged commit 3b3dcaa into Qwant:master Jun 4, 2020
@bbecquet bbecquet deleted the poi-block-recycling branch June 4, 2020 13:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants