mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-26 06:47:17 +10:00
Formatting docs with newest Prettier.
Related commit was lost at some point when dependencies were updated.
This commit is contained in:
Vesa Luusua
parent
69abdd6977
commit
fa76ea5051
20 changed files with 288 additions and 284 deletions
188
CHANGELOG.md
188
CHANGELOG.md
|
|
@ -4,78 +4,78 @@ We are not following semantic versioning in this template app since any change c
|
|||
a breaking change for forked customization projects. We are still experimenting with what is a good
|
||||
way to update this template, but currently, we follow a pattern:
|
||||
|
||||
* Major version change (v**X**.0.0): Changes to several pages and other components. Consider
|
||||
- Major version change (v**X**.0.0): Changes to several pages and other components. Consider
|
||||
implementing this without merging upstream (we'll provide instructions).
|
||||
* Minor version change (v0.**X**.0): New features and changes to a single page. These are likely to
|
||||
- Minor version change (v0.**X**.0): New features and changes to a single page. These are likely to
|
||||
cause conflicts.
|
||||
* Patch (v0.0.**X**): Bug fixes and small changes to components.
|
||||
- Patch (v0.0.**X**): Bug fixes and small changes to components.
|
||||
|
||||
---
|
||||
|
||||
## Upcoming version 2018-XX-XX
|
||||
|
||||
* [change] Improved documents related to onboarding: env.md, deploying-to-production.md,
|
||||
- [change] Improved documents related to onboarding: env.md, deploying-to-production.md,
|
||||
map-providers.md [#971](https://github.com/sharetribe/flex-template-web/pull/971)
|
||||
* [change] Update outdated dependencies.
|
||||
- [change] Update outdated dependencies.
|
||||
[#967](https://github.com/sharetribe/flex-template-web/pull/967)
|
||||
* **Note:** Updating Prettier caused multiple file changes mostly to `.md` files and `compose`
|
||||
- **Note:** Updating Prettier caused multiple file changes mostly to `.md` files and `compose`
|
||||
setup.
|
||||
* [change] Update supported Node version to the latest LTS (10.14).
|
||||
- [change] Update supported Node version to the latest LTS (10.14).
|
||||
[#964](https://github.com/sharetribe/flex-template-web/pull/964)
|
||||
* [add] Add documentation about deploying to production. Also add _deploy to Heroku_ button.
|
||||
- [add] Add documentation about deploying to production. Also add _deploy to Heroku_ button.
|
||||
[#961](https://github.com/sharetribe/flex-template-web/pull/961)
|
||||
|
||||
## [v2.4.1] 2018-11-29
|
||||
|
||||
* [fix] Add missing French translation.
|
||||
- [fix] Add missing French translation.
|
||||
[#966](https://github.com/sharetribe/flex-template-web/pull/966)
|
||||
|
||||
[v2.4.1]: https://github.com/sharetribe/flex-template-web/compare/v2.4.0...v2.4.1
|
||||
|
||||
## [v2.4.0] 2018-11-28
|
||||
|
||||
* [change] Update Flex JS SDK to 1.2.
|
||||
- [change] Update Flex JS SDK to 1.2.
|
||||
[#963](https://github.com/sharetribe/flex-template-web/pull/963)
|
||||
* [add] Add French as a default language in addition to English.
|
||||
- [add] Add French as a default language in addition to English.
|
||||
[#962](https://github.com/sharetribe/flex-template-web/pull/962)
|
||||
* [fix] Show Stripe error message on CheckoutPage if payment request fails because of Stripe error.
|
||||
- [fix] Show Stripe error message on CheckoutPage if payment request fails because of Stripe error.
|
||||
Also show error if payment amount is zero.
|
||||
[#960](https://github.com/sharetribe/flex-template-web/pull/960)
|
||||
* [fix] Remove unused translation keys and update PasswordChangePage title
|
||||
- [fix] Remove unused translation keys and update PasswordChangePage title
|
||||
[#959](https://github.com/sharetribe/flex-template-web/pull/959)
|
||||
* [add] Add translations CLI tool [#955](https://github.com/sharetribe/flex-template-web/pull/955)
|
||||
- [add] Add translations CLI tool [#955](https://github.com/sharetribe/flex-template-web/pull/955)
|
||||
|
||||
[v2.4.0]: https://github.com/sharetribe/flex-template-web/compare/v2.3.2...v2.4.0
|
||||
|
||||
## [v2.3.2] 2018-11-20
|
||||
|
||||
* [fix] Take 2: don't set currentUserHasListings if fetched listing is in draft state.
|
||||
- [fix] Take 2: don't set currentUserHasListings if fetched listing is in draft state.
|
||||
[#956](https://github.com/sharetribe/flex-template-web/pull/956)
|
||||
* [fix] PriceFilter styles [#954](https://github.com/sharetribe/flex-template-web/pull/954)
|
||||
- [fix] PriceFilter styles [#954](https://github.com/sharetribe/flex-template-web/pull/954)
|
||||
|
||||
[v2.3.2]: https://github.com/sharetribe/flex-template-web/compare/v2.3.1...v2.3.2
|
||||
|
||||
## [v2.3.1] 2018-11-16
|
||||
|
||||
* [fix] Don't set currentUserHasListings if fetched listing is in draft state.
|
||||
- [fix] Don't set currentUserHasListings if fetched listing is in draft state.
|
||||
ModalMissingInformation was shown too early for users creating their first listing.
|
||||
[#953](https://github.com/sharetribe/flex-template-web/pull/953)
|
||||
* [change] Add index files of components and containers folder to .prettierignore
|
||||
- [change] Add index files of components and containers folder to .prettierignore
|
||||
[#952](https://github.com/sharetribe/flex-template-web/pull/952)
|
||||
* [fix] the alignment of arrows in FieldDateRangeInput and refactoring arrow icon code.
|
||||
- [fix] the alignment of arrows in FieldDateRangeInput and refactoring arrow icon code.
|
||||
[#951](https://github.com/sharetribe/flex-template-web/pull/951)
|
||||
* [change] Remove unnecessary language configuration and improve translations documentation.
|
||||
- [change] Remove unnecessary language configuration and improve translations documentation.
|
||||
[#950](https://github.com/sharetribe/flex-template-web/pull/950)
|
||||
|
||||
[v2.3.1]: https://github.com/sharetribe/flex-template-web/compare/v2.3.0...v2.3.1
|
||||
|
||||
## [v2.3.0] 2018-11-13
|
||||
|
||||
* [add] Draft listing is used in EditListingWizard, ManageListingCard and ListingPage. From now on
|
||||
- [add] Draft listing is used in EditListingWizard, ManageListingCard and ListingPage. From now on
|
||||
description panel creates a draft listing and photos panel publishes it. You can also view your
|
||||
current draft listings from 'your listings' page.
|
||||
[#947](https://github.com/sharetribe/flex-template-web/pull/947)
|
||||
* [fix] Firefox showed select options with the same color as select itself. Now options have their
|
||||
- [fix] Firefox showed select options with the same color as select itself. Now options have their
|
||||
own color set and _placeholder option needs to be disabled_.
|
||||
[#946](https://github.com/sharetribe/flex-template-web/pull/946)
|
||||
|
||||
|
|
@ -83,7 +83,7 @@ way to update this template, but currently, we follow a pattern:
|
|||
|
||||
## [v2.2.0] 2018-10-31
|
||||
|
||||
* [add] SearchPage: adds PriceFilter (and RangeSlider, FieldRangeSlider, PriceFilterForm).
|
||||
- [add] SearchPage: adds PriceFilter (and RangeSlider, FieldRangeSlider, PriceFilterForm).
|
||||
|
||||
**Note:** You must define min and max for the filter in `src/marketplace-custom-config.js`.
|
||||
Current maximum value for the range is set to 1000 (USD/EUR/currency units). In addition, this
|
||||
|
|
@ -95,56 +95,56 @@ way to update this template, but currently, we follow a pattern:
|
|||
|
||||
## [v2.1.1] 2018-10-23
|
||||
|
||||
* [add] Added initial documentation about routing and loading data.
|
||||
- [add] Added initial documentation about routing and loading data.
|
||||
[#941](https://github.com/sharetribe/flex-template-web/pull/941)
|
||||
* [remove] Removed plain text parts of email templates.
|
||||
- [remove] Removed plain text parts of email templates.
|
||||
[#942](https://github.com/sharetribe/flex-template-web/pull/942)
|
||||
* [add] Add referrer policy due tokens in URL on PasswordResetPage and EmailVerificationPage.
|
||||
- [add] Add referrer policy due tokens in URL on PasswordResetPage and EmailVerificationPage.
|
||||
[#940](https://github.com/sharetribe/flex-template-web/pull/940)
|
||||
* [add] Added initial documentation about our Redux setup.
|
||||
- [add] Added initial documentation about our Redux setup.
|
||||
[#939](https://github.com/sharetribe/flex-template-web/pull/939)
|
||||
* [add] Added a small comment to documentation about the current state of code-splitting.
|
||||
- [add] Added a small comment to documentation about the current state of code-splitting.
|
||||
[#938](https://github.com/sharetribe/flex-template-web/pull/938)
|
||||
|
||||
[v2.1.1]: https://github.com/sharetribe/flex-template-web/compare/v2.1.0...v2.1.1
|
||||
|
||||
## [v2.1.0] 2018-10-01
|
||||
|
||||
* [change] Improve performance of public pages. Image assets are optimized and lazy loading is
|
||||
- [change] Improve performance of public pages. Image assets are optimized and lazy loading is
|
||||
applied to images in SectionLocation and ListingCard. Read
|
||||
[documentation](./docs/improving-performance.md) for implementation details.
|
||||
[#936](https://github.com/sharetribe/flex-template-web/pull/936)
|
||||
* [change] Update sharetribe-scripts. **cssnext** (used previously in sharetribe-scripts) has been
|
||||
- [change] Update sharetribe-scripts. **cssnext** (used previously in sharetribe-scripts) has been
|
||||
deprecated. Now **postcss-preset-env** is used instead with stage 3 + custom media queries and
|
||||
nesting-rules. If this change breaks your styling, you could still use v1.1.2. The next version of
|
||||
[postcss-nesting](https://github.com/jonathantneal/postcss-nesting) (v7.0.0) will no longer
|
||||
support nested at-rules (like media queries) - therefore, we didn't update to that version yet.
|
||||
[#935](https://github.com/sharetribe/flex-template-web/pull/935)
|
||||
* [change] Change Mapbox's default font to marketplace font.
|
||||
- [change] Change Mapbox's default font to marketplace font.
|
||||
[#934](https://github.com/sharetribe/flex-template-web/pull/934)
|
||||
* [add] New default design for the landing page's hero section. Now the CTA button's default
|
||||
- [add] New default design for the landing page's hero section. Now the CTA button's default
|
||||
behavior is 'Browse'.
|
||||
* `marketplaceH1FontStyles`: changed letter spacing to be more tight.
|
||||
* `SectionHero` has now a search page link that should be customized to point to your marketplace
|
||||
- `marketplaceH1FontStyles`: changed letter spacing to be more tight.
|
||||
- `SectionHero` has now a search page link that should be customized to point to your marketplace
|
||||
primary area [#933](https://github.com/sharetribe/flex-template-web/pull/933)
|
||||
|
||||
[v2.1.0]: https://github.com/sharetribe/flex-template-web/compare/v2.0.0...v2.1.0
|
||||
|
||||
## [v2.0.0] 2018-09-19
|
||||
|
||||
* [add] New default map provider (Mapbox) and complete refactoring to all map and geocoding
|
||||
- [add] New default map provider (Mapbox) and complete refactoring to all map and geocoding
|
||||
components. [#888](https://github.com/sharetribe/flex-template-web/pull/888)
|
||||
|
||||
**Note:** Before updating to version 2.0.0, you should very carefully track customizations that
|
||||
you have made to following components:
|
||||
|
||||
* **LocationAutocompleteInput**
|
||||
* **Map**
|
||||
* **SearchPage** (especially previous `onIdle` function)
|
||||
* **SearchMap**
|
||||
* **SearchMapPriceLabel**
|
||||
* **SearchMapGroupLabel**
|
||||
* **SearchMapInfoCard**
|
||||
- **LocationAutocompleteInput**
|
||||
- **Map**
|
||||
- **SearchPage** (especially previous `onIdle` function)
|
||||
- **SearchMap**
|
||||
- **SearchMapPriceLabel**
|
||||
- **SearchMapGroupLabel**
|
||||
- **SearchMapInfoCard**
|
||||
|
||||
To get a better understanding of what has changed, you should read documents about how to
|
||||
[integrate to map providers](./docs/map-providers.md) and especially
|
||||
|
|
@ -154,38 +154,38 @@ way to update this template, but currently, we follow a pattern:
|
|||
|
||||
## [v1.4.3] 2018-09-15
|
||||
|
||||
* [fix] fuzzy location didn't change when listing location changed.
|
||||
- [fix] fuzzy location didn't change when listing location changed.
|
||||
[#931](https://github.com/sharetribe/flex-template-web/pull/931)
|
||||
* [fix] obfuscatedCoordinatesImpl didn't always return coordinates within given offset radius.
|
||||
- [fix] obfuscatedCoordinatesImpl didn't always return coordinates within given offset radius.
|
||||
[#930](https://github.com/sharetribe/flex-template-web/pull/930)
|
||||
* [fix] LocationAutocompleteInput: blur input when selecting by enter to prevent flash of default
|
||||
- [fix] LocationAutocompleteInput: blur input when selecting by enter to prevent flash of default
|
||||
predictions. [#928](https://github.com/sharetribe/flex-template-web/pull/928)
|
||||
* [fix] LocationAutocompleteInput: selecting with enter key prevented while fetching predictions.
|
||||
- [fix] LocationAutocompleteInput: selecting with enter key prevented while fetching predictions.
|
||||
[#923](https://github.com/sharetribe/flex-template-web/pull/923)
|
||||
|
||||
[v1.4.3]: https://github.com/sharetribe/flex-template-web/compare/v1.4.2...v1.4.3
|
||||
|
||||
## [v1.4.2] 2018-09-06
|
||||
|
||||
* [add] Reduce character queries on LocationAutocompleteInput to reduce geocoding costs.
|
||||
- [add] Reduce character queries on LocationAutocompleteInput to reduce geocoding costs.
|
||||
[#883](https://github.com/sharetribe/flex-template-web/pull/883)
|
||||
* [change] Update git links and improve documentation
|
||||
- [change] Update git links and improve documentation
|
||||
[#911](https://github.com/sharetribe/flex-template-web/pull/911)
|
||||
* [change] improve env-template to better defaults.
|
||||
- [change] improve env-template to better defaults.
|
||||
[#912](https://github.com/sharetribe/flex-template-web/pull/912)
|
||||
* [fix] Touch event from location autocomplete prediction list ended up causing clicks.
|
||||
- [fix] Touch event from location autocomplete prediction list ended up causing clicks.
|
||||
[#917](https://github.com/sharetribe/flex-template-web/pull/917)
|
||||
* [change] Disable default predictions in listing wizard
|
||||
- [change] Disable default predictions in listing wizard
|
||||
[#906](https://github.com/sharetribe/flex-template-web/pull/906)
|
||||
|
||||
[v1.4.2]: https://github.com/sharetribe/flex-template-web/compare/v1.4.1...v1.4.2
|
||||
|
||||
## [v1.4.1] 2018-08-21
|
||||
|
||||
* [fix] Fix window resize redirecting to search page with reusable map component
|
||||
- [fix] Fix window resize redirecting to search page with reusable map component
|
||||
[#905](https://github.com/sharetribe/flex-template-web/pull/905)
|
||||
|
||||
* [change] Maps configuration has been restructured. The new configuration is agnostic of the maps
|
||||
- [change] Maps configuration has been restructured. The new configuration is agnostic of the maps
|
||||
provider in use and works with both Google Maps as well as Mapbox.
|
||||
|
||||
The fuzzy location circle has less configuration, but otherwise all the previous settings can be
|
||||
|
|
@ -201,150 +201,150 @@ way to update this template, but currently, we follow a pattern:
|
|||
|
||||
## [v1.4.0] 2018-08-17
|
||||
|
||||
* [change] Put availability calendar behind a feature flag
|
||||
- [change] Put availability calendar behind a feature flag
|
||||
[#902](https://github.com/sharetribe/flex-template-web/pull/902)
|
||||
* [fix] Drop date time from time slots request query params
|
||||
- [fix] Drop date time from time slots request query params
|
||||
[#901](https://github.com/sharetribe/flex-template-web/pull/901)
|
||||
* [fix] Make a second time slots request when required
|
||||
- [fix] Make a second time slots request when required
|
||||
[#901](https://github.com/sharetribe/flex-template-web/pull/901)
|
||||
* [add] Map component (used in ListingPage) using Mapbox instead of Google Maps
|
||||
- [add] Map component (used in ListingPage) using Mapbox instead of Google Maps
|
||||
[#896](https://github.com/sharetribe/flex-template-web/pull/896)
|
||||
* [add] Listing availability [#868](https://github.com/sharetribe/flex-template-web/pull/868),
|
||||
- [add] Listing availability [#868](https://github.com/sharetribe/flex-template-web/pull/868),
|
||||
[#873](https://github.com/sharetribe/flex-template-web/pull/873),
|
||||
[#891](https://github.com/sharetribe/flex-template-web/pull/891) &
|
||||
[#892](https://github.com/sharetribe/flex-template-web/pull/892)
|
||||
* [add] Add support for user's current location as a default suggestion in the location autocomplete
|
||||
- [add] Add support for user's current location as a default suggestion in the location autocomplete
|
||||
search. [#895](https://github.com/sharetribe/flex-template-web/pull/895)
|
||||
* [add] Add support for default locations in the LocationAutocompleteInput component. Common
|
||||
- [add] Add support for default locations in the LocationAutocompleteInput component. Common
|
||||
searches can be configured to show when the input has focus. This reduces typing and Google Places
|
||||
geolocation API usage. The defaults can be configured in
|
||||
`src/components/LocationAutocompleteInput/GeocoderGoogleMaps.js`.
|
||||
[#894](https://github.com/sharetribe/flex-template-web/pull/894)
|
||||
* [change] Removed the `country` parameter from the search page as it was not used anywhere.
|
||||
- [change] Removed the `country` parameter from the search page as it was not used anywhere.
|
||||
[#893](https://github.com/sharetribe/flex-template-web/pull/893)
|
||||
|
||||
[v1.4.0]: https://github.com/sharetribe/flex-template-web/compare/v1.3.2...v1.4.0
|
||||
|
||||
## [v1.3.2] 2018-08-07
|
||||
|
||||
* [change] Update the Sharetribe Flex SDK to the 1.0.0 version in NPM. All the `sharetribe-sdk`
|
||||
- [change] Update the Sharetribe Flex SDK to the 1.0.0 version in NPM. All the `sharetribe-sdk`
|
||||
imports are now using the new package name `sharetribe-flex-sdk`.
|
||||
[#884](https://github.com/sharetribe/flex-template-web/pull/884)
|
||||
* [change] Reusable SearchMap. Fixed the original reverted version. (Includes audit exception 678)
|
||||
- [change] Reusable SearchMap. Fixed the original reverted version. (Includes audit exception 678)
|
||||
[#882](https://github.com/sharetribe/flex-template-web/pull/882)
|
||||
|
||||
[v1.3.2]: https://github.com/sharetribe/flex-template-web/compare/v1.3.1...v1.3.2
|
||||
|
||||
## [v1.3.1]
|
||||
|
||||
* [fix] Hotfix: reverting the usage of ReusableMapContainer due to production build error.
|
||||
- [fix] Hotfix: reverting the usage of ReusableMapContainer due to production build error.
|
||||
[#881](https://github.com/sharetribe/flex-template-web/pull/881)
|
||||
|
||||
[v1.3.1]: https://github.com/sharetribe/flex-template-web/compare/v1.3.0...v1.3.1
|
||||
|
||||
## [v1.3.0]
|
||||
|
||||
* [change] Reusable SearchMap. [#877](https://github.com/sharetribe/flex-template-web/pull/877)
|
||||
* [fix] Fix a search filters panel bug where selecting an option in a multi select filter ends up
|
||||
- [change] Reusable SearchMap. [#877](https://github.com/sharetribe/flex-template-web/pull/877)
|
||||
- [fix] Fix a search filters panel bug where selecting an option in a multi select filter ends up
|
||||
invoking a mobile filter callback function.
|
||||
[#876](https://github.com/sharetribe/flex-template-web/pull/876)
|
||||
* [change] Use seeded random for client side coordinate obfuscation
|
||||
- [change] Use seeded random for client side coordinate obfuscation
|
||||
[#874](https://github.com/sharetribe/flex-template-web/pull/874)
|
||||
|
||||
[v1.3.0]: https://github.com/sharetribe/flex-template-web/compare/v1.2.2...v1.3.0
|
||||
|
||||
## [v1.2.2]
|
||||
|
||||
* [change] Change static map to dynamic map when clicked.
|
||||
- [change] Change static map to dynamic map when clicked.
|
||||
[#871](https://github.com/sharetribe/flex-template-web/pull/871)
|
||||
|
||||
[v1.2.2]: https://github.com/sharetribe/flex-template-web/compare/v1.2.1...v1.2.2
|
||||
|
||||
## [v1.2.1]
|
||||
|
||||
* [fix] Lazy load map only if the map is near current viewport.
|
||||
- [fix] Lazy load map only if the map is near current viewport.
|
||||
[#871](https://github.com/sharetribe/flex-template-web/pull/871)
|
||||
|
||||
[v1.2.1]: https://github.com/sharetribe/flex-template-web/compare/v1.2.0...v1.2.1
|
||||
|
||||
## [v1.2.0]
|
||||
|
||||
* [change] Use Google's static map on ListingPage. This is a reaction to pricing change of Google
|
||||
- [change] Use Google's static map on ListingPage. This is a reaction to pricing change of Google
|
||||
Maps APIs. [#869](https://github.com/sharetribe/flex-template-web/pull/869)
|
||||
* [change] Use sessionTokens and fields for Autocomplete calls to Google Maps. This is a reaction to
|
||||
- [change] Use sessionTokens and fields for Autocomplete calls to Google Maps. This is a reaction to
|
||||
pricing change of Google Maps APIs.
|
||||
[#867](https://github.com/sharetribe/flex-template-web/pull/867)
|
||||
* [change] Change TransactionPage state management in loadData.
|
||||
- [change] Change TransactionPage state management in loadData.
|
||||
[#863](https://github.com/sharetribe/flex-template-web/pull/863),
|
||||
[#865](https://github.com/sharetribe/flex-template-web/pull/865) &
|
||||
[#866](https://github.com/sharetribe/flex-template-web/pull/866)
|
||||
* [fix] Fix submit button state on contact details page.
|
||||
- [fix] Fix submit button state on contact details page.
|
||||
[#864](https://github.com/sharetribe/flex-template-web/pull/864)
|
||||
* [fix] Fix listing page host section layout bug.
|
||||
- [fix] Fix listing page host section layout bug.
|
||||
[#862](https://github.com/sharetribe/flex-template-web/pull/862)
|
||||
* [fix] Fix initial message input clearing too early in checkout page.
|
||||
- [fix] Fix initial message input clearing too early in checkout page.
|
||||
[#861](https://github.com/sharetribe/flex-template-web/pull/861)
|
||||
* [fix] Fix setting Topbar search input initial value.
|
||||
* [change] Update Redux to v4 [#859](https://github.com/sharetribe/flex-template-web/pull/859)
|
||||
* [fix] Fix setting Topbar search input initial value
|
||||
- [fix] Fix setting Topbar search input initial value.
|
||||
- [change] Update Redux to v4 [#859](https://github.com/sharetribe/flex-template-web/pull/859)
|
||||
- [fix] Fix setting Topbar search input initial value
|
||||
[#857](https://github.com/sharetribe/flex-template-web/pull/857)
|
||||
|
||||
[v1.2.0]: https://github.com/sharetribe/flex-template-web/compare/v1.1.0...v1.2.0
|
||||
|
||||
## [v1.1.0]
|
||||
|
||||
* [fix] Improve slug creation (slashes were breaking rendering in some environments)
|
||||
- [fix] Improve slug creation (slashes were breaking rendering in some environments)
|
||||
[#850](https://github.com/sharetribe/flex-template-web/pull/850)
|
||||
* [fix] Anonymous user should see contact link on UserCard
|
||||
- [fix] Anonymous user should see contact link on UserCard
|
||||
[#851](https://github.com/sharetribe/flex-template-web/pull/851)
|
||||
* [fix] Persisting booking request details across authentication
|
||||
- [fix] Persisting booking request details across authentication
|
||||
[#852](https://github.com/sharetribe/flex-template-web/pull/852)
|
||||
* [change] Footer styles changed to more generic (no disappearing columns etc.) If you have made
|
||||
- [change] Footer styles changed to more generic (no disappearing columns etc.) If you have made
|
||||
changes to Footer, consider extracting it to different component before update.
|
||||
[#853](https://github.com/sharetribe/flex-template-web/pull/853)
|
||||
* [change] Logo customization refactored to be easier. Check CheckoutPage, TopbarDesktop and Footer
|
||||
- [change] Logo customization refactored to be easier. Check CheckoutPage, TopbarDesktop and Footer
|
||||
after update. [#854](https://github.com/sharetribe/flex-template-web/pull/854)
|
||||
* [fix] Fix showing reviews from banned users.
|
||||
- [fix] Fix showing reviews from banned users.
|
||||
[#855](https://github.com/sharetribe/flex-template-web/pull/855)
|
||||
|
||||
[v1.1.0]: https://github.com/sharetribe/flex-template-web/compare/v1.0.0...v1.1.0
|
||||
|
||||
## [v1.0.0]
|
||||
|
||||
* [change] Migrate remaining Redux Forms to Final Form. Also now all the form components can be
|
||||
- [change] Migrate remaining Redux Forms to Final Form. Also now all the form components can be
|
||||
found in the src/forms folder. Remove redux-form from the dependencies.
|
||||
[#845](https://github.com/sharetribe/flex-template-web/pull/845)
|
||||
* [fix] Extract and fix missing information reminder modal from Topbar
|
||||
- [fix] Extract and fix missing information reminder modal from Topbar
|
||||
[#846](https://github.com/sharetribe/flex-template-web/pull/846)
|
||||
* [fix] Add missing styles for ModalMissingInformation from Topbar
|
||||
- [fix] Add missing styles for ModalMissingInformation from Topbar
|
||||
[#847](https://github.com/sharetribe/flex-template-web/pull/847)
|
||||
* [fix] API does not return all image variants anymore, this adds correct variants to update contact
|
||||
- [fix] API does not return all image variants anymore, this adds correct variants to update contact
|
||||
details call. [#848](https://github.com/sharetribe/flex-template-web/pull/848)
|
||||
|
||||
[v1.0.0]: https://github.com/sharetribe/flex-template-web/compare/v0.3.1...v1.0.0
|
||||
|
||||
## [v0.3.1]
|
||||
|
||||
* [change] Change lodash import syntax to reduce bundle size (-15.14 KB)
|
||||
- [change] Change lodash import syntax to reduce bundle size (-15.14 KB)
|
||||
[#839](https://github.com/sharetribe/flex-template-web/pull/839)
|
||||
* [fix] Use https instead of git to access SDK repo for Heroku build (now that the repo is public).
|
||||
- [fix] Use https instead of git to access SDK repo for Heroku build (now that the repo is public).
|
||||
TODO: create SDK releases instead of using direct refs to single commit.
|
||||
[#841](https://github.com/sharetribe/flex-template-web/pull/841)
|
||||
* [fix] Typo fix for background-color
|
||||
- [fix] Typo fix for background-color
|
||||
[#842](https://github.com/sharetribe/flex-template-web/pull/842)
|
||||
|
||||
[v0.3.1]: https://github.com/sharetribe/flex-template-web/compare/v0.3.0...v0.3.1
|
||||
|
||||
## [v0.3.0]
|
||||
|
||||
* Remove custom touched handling from `FieldCheckboxGroup` as it has has become obsolete now that
|
||||
- Remove custom touched handling from `FieldCheckboxGroup` as it has has become obsolete now that
|
||||
Final Form is replacing Redux Form.
|
||||
[#837](https://github.com/sharetribe/flex-template-web/pull/837)
|
||||
* Create Stripe account directly instead of passing payout details to Flex API (deprecated way).
|
||||
- Create Stripe account directly instead of passing payout details to Flex API (deprecated way).
|
||||
[#836](https://github.com/sharetribe/flex-template-web/pull/836)
|
||||
|
||||
[v0.3.0]: https://github.com/sharetribe/flex-template-web/compare/v0.2.0...v0.3.0
|
||||
|
||||
## v0.2.0
|
||||
|
||||
* Starting a change log for Flex Template for Web.
|
||||
- Starting a change log for Flex Template for Web.
|
||||
|
|
|
|||
|
|
@ -13,15 +13,15 @@ used in a browser environment using the JavaScript SDK.
|
|||
|
||||
Marketplace features included in Saunatime:
|
||||
|
||||
* **Location search** shows the user if there are saunas available in a given location.
|
||||
* **The listing page** gives a detailed view about what a particular sauna offers.
|
||||
* **Transaction process**: Saunatime uses nightly booking.
|
||||
* **Notifications**: Emails are sent during the booking process to alert customers and providers
|
||||
- **Location search** shows the user if there are saunas available in a given location.
|
||||
- **The listing page** gives a detailed view about what a particular sauna offers.
|
||||
- **Transaction process**: Saunatime uses nightly booking.
|
||||
- **Notifications**: Emails are sent during the booking process to alert customers and providers
|
||||
about changes in the booking state.
|
||||
* **Inbox** lists **orders** and **sales**.
|
||||
* **Reviews** can be given after a completed transaction.
|
||||
* **User profiles** provide detailed information about a given user.
|
||||
* **Extended data:** The listing and user data models are modified using extended data.
|
||||
- **Inbox** lists **orders** and **sales**.
|
||||
- **Reviews** can be given after a completed transaction.
|
||||
- **User profiles** provide detailed information about a given user.
|
||||
- **Extended data:** The listing and user data models are modified using extended data.
|
||||
|
||||
## How to customize this template
|
||||
|
||||
|
|
@ -33,28 +33,28 @@ The easiest way to start a customization project is to read through the
|
|||
|
||||
Documentation for specific topics can be found in the following files:
|
||||
|
||||
* [Customization guide](customization-guide.md)
|
||||
* [Folder structure](folder-structure.md)
|
||||
* [Integration to map providers](map-providers.md)
|
||||
* [Translations](translations.md)
|
||||
* [Styling a marketplace](styling.md)
|
||||
* [Static pages](static-pages.md)
|
||||
* [Terms of Service and Privacy Policy](terms-of-service-and-privacy-policy.md)
|
||||
* [Routing](routing.md)
|
||||
* [Redux and duck files](redux.md)
|
||||
* [Extended data](extended-data.md)
|
||||
* [Extend the listing data model](extend-listing.md)
|
||||
* [Search filters](search-filters.md)
|
||||
* [Testing](testing.md)
|
||||
* [Error logging with Sentry](sentry.md)
|
||||
* [Analytics](analytics.md)
|
||||
* [Continuous Integration (CI)](ci.md)
|
||||
* [Content Security Policy (CSP)](content-security-policy.md)
|
||||
* [Original create-react-app documentation](https://github.com/sharetribe/create-react-app/blob/master/packages/react-scripts/template/README.md)
|
||||
* [Customization checklist](customization-checklist.md)
|
||||
* [Icons](icons.md)
|
||||
* [Improving performance](improving-performance.md)
|
||||
* [Deploying to production](deploying-to-production.md)
|
||||
- [Customization guide](customization-guide.md)
|
||||
- [Folder structure](folder-structure.md)
|
||||
- [Integration to map providers](map-providers.md)
|
||||
- [Translations](translations.md)
|
||||
- [Styling a marketplace](styling.md)
|
||||
- [Static pages](static-pages.md)
|
||||
- [Terms of Service and Privacy Policy](terms-of-service-and-privacy-policy.md)
|
||||
- [Routing](routing.md)
|
||||
- [Redux and duck files](redux.md)
|
||||
- [Extended data](extended-data.md)
|
||||
- [Extend the listing data model](extend-listing.md)
|
||||
- [Search filters](search-filters.md)
|
||||
- [Testing](testing.md)
|
||||
- [Error logging with Sentry](sentry.md)
|
||||
- [Analytics](analytics.md)
|
||||
- [Continuous Integration (CI)](ci.md)
|
||||
- [Content Security Policy (CSP)](content-security-policy.md)
|
||||
- [Original create-react-app documentation](https://github.com/sharetribe/create-react-app/blob/master/packages/react-scripts/template/README.md)
|
||||
- [Customization checklist](customization-checklist.md)
|
||||
- [Icons](icons.md)
|
||||
- [Improving performance](improving-performance.md)
|
||||
- [Deploying to production](deploying-to-production.md)
|
||||
|
||||
The application was bootstrapped with a forked version of
|
||||
[create-react-app](https://github.com/facebookincubator/create-react-app). While most of the
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ The CSP is configured using the `REACT_APP_CSP` environment variable.
|
|||
|
||||
Possible values:
|
||||
|
||||
* not set: disabled
|
||||
* `REACT_APP_CSP=report`: Enabled, but policy violations are only reported
|
||||
* `REACT_APP_CSP=block`: Enabled. Policy violations are reported and requests that violate the
|
||||
- not set: disabled
|
||||
- `REACT_APP_CSP=report`: Enabled, but policy violations are only reported
|
||||
- `REACT_APP_CSP=block`: Enabled. Policy violations are reported and requests that violate the
|
||||
policy are blocked
|
||||
|
||||
If error logging with Sentry is enabled (See [Error logging with Sentry](sentry.md)), the reports
|
||||
|
|
@ -37,7 +37,7 @@ URL.
|
|||
|
||||
To understand what CSP is and how browsers work, here are some resources:
|
||||
|
||||
* https://content-security-policy.com/
|
||||
* https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
|
||||
* https://ponyfoo.com/articles/content-security-policy-in-express-apps
|
||||
* https://helmetjs.github.io/docs/csp/
|
||||
- https://content-security-policy.com/
|
||||
- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
|
||||
- https://ponyfoo.com/articles/content-security-policy-in-express-apps
|
||||
- https://helmetjs.github.io/docs/csp/
|
||||
|
|
|
|||
|
|
@ -2,40 +2,40 @@
|
|||
|
||||
Some generic things to update and check when starting to customize the template.
|
||||
|
||||
* [Marketplace colors](styling.md)
|
||||
* [Generate app icons](icons.md)
|
||||
* [Update translations](../src/translations/en.json) or [change the language](translations.md)
|
||||
* [LandingPage](../src/containers/LandingPage/LandingPage.js): update and create branded sections
|
||||
* [Footer](../src/components/Footer/Footer.js)
|
||||
* [AboutPage](../src/containers/AboutPage/AboutPage.js)
|
||||
* [Terms of Service](terms-of-service-and-privacy-policy.md#terms-of-service)
|
||||
* [Privacy Policy](terms-of-service-and-privacy-policy.md#privacy-policy)
|
||||
* [Social media sharing graphics](../src/components/Page/Page.js);
|
||||
* [Logo](../src/components/Logo/Logo.js) Change and check that it works on Topbar, Footer, and
|
||||
- [Marketplace colors](styling.md)
|
||||
- [Generate app icons](icons.md)
|
||||
- [Update translations](../src/translations/en.json) or [change the language](translations.md)
|
||||
- [LandingPage](../src/containers/LandingPage/LandingPage.js): update and create branded sections
|
||||
- [Footer](../src/components/Footer/Footer.js)
|
||||
- [AboutPage](../src/containers/AboutPage/AboutPage.js)
|
||||
- [Terms of Service](terms-of-service-and-privacy-policy.md#terms-of-service)
|
||||
- [Privacy Policy](terms-of-service-and-privacy-policy.md#privacy-policy)
|
||||
- [Social media sharing graphics](../src/components/Page/Page.js);
|
||||
- [Logo](../src/components/Logo/Logo.js) Change and check that it works on Topbar, Footer, and
|
||||
CheckoutPage
|
||||
* [Default background image](../src/assets/background-1440.jpg)
|
||||
* [Maps Marker icon](../src/components/Map/images/marker-32x32.png)
|
||||
* [Config: update environment variables](../src/config.js)
|
||||
* [Config: siteTitle](../src/config.js) for page schema (SEO)
|
||||
* [Config: marketplace address](../src/config.js): contact details also improve SEO
|
||||
* [Config: social media pages](../src/config.js)
|
||||
* [Marketplace custom config](../src/marketplace-custom-config.js)
|
||||
* Update [ListingPage](../src/containers/ListingPage/ListingPage.js) to show extended data (aka
|
||||
- [Default background image](../src/assets/background-1440.jpg)
|
||||
- [Maps Marker icon](../src/components/Map/images/marker-32x32.png)
|
||||
- [Config: update environment variables](../src/config.js)
|
||||
- [Config: siteTitle](../src/config.js) for page schema (SEO)
|
||||
- [Config: marketplace address](../src/config.js): contact details also improve SEO
|
||||
- [Config: social media pages](../src/config.js)
|
||||
- [Marketplace custom config](../src/marketplace-custom-config.js)
|
||||
- Update [ListingPage](../src/containers/ListingPage/ListingPage.js) to show extended data (aka
|
||||
publicData attribute)
|
||||
* Update [EditListingWizard](../src/components/EditListingWizard/EditListingWizard.js) and panels to
|
||||
- Update [EditListingWizard](../src/components/EditListingWizard/EditListingWizard.js) and panels to
|
||||
add extended data
|
||||
* Update [SearchPage](../src/containers/SearchPage/SearchPage.js) to filter with extended data
|
||||
* Update [routeConfiguration](../src/routeConfiguration.js) if needed
|
||||
* Update [Email templates](../ext/default-mail-templates), all of them: .html, subject.txt, and
|
||||
- Update [SearchPage](../src/containers/SearchPage/SearchPage.js) to filter with extended data
|
||||
- Update [routeConfiguration](../src/routeConfiguration.js) if needed
|
||||
- Update [Email templates](../ext/default-mail-templates), all of them: .html, subject.txt, and
|
||||
text.txt
|
||||
* Update [config: bookingUnitType](../src/config.js) if needed
|
||||
* If `line-item/units` is used, add quantity handling to
|
||||
- Update [config: bookingUnitType](../src/config.js) if needed
|
||||
- If `line-item/units` is used, add quantity handling to
|
||||
[BookingDatesForm](../src/forms/BookingDatesForm/BookingDatesForm.js),
|
||||
[ListingPage](../src/containers/ListingPage/ListingPage.js),
|
||||
[CheckoutPage](../src/containers/CheckoutPage/CheckoutPage.js)
|
||||
|
||||
## What else
|
||||
|
||||
* Do you need more [static pages](static-pages.md)?
|
||||
* Changes to existing pages
|
||||
* Changes to transaction process (API + Web app)
|
||||
- Do you need more [static pages](static-pages.md)?
|
||||
- Changes to existing pages
|
||||
- Changes to transaction process (API + Web app)
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ repository is the recommended way to proceed. Follow this guide for instructions
|
|||
|
||||
Install required tools:
|
||||
|
||||
* [Node.js](https://nodejs.org/)
|
||||
* [Yarn](https://yarnpkg.com/)
|
||||
- [Node.js](https://nodejs.org/)
|
||||
- [Yarn](https://yarnpkg.com/)
|
||||
|
||||
## Technologies
|
||||
|
||||
|
|
@ -24,13 +24,13 @@ get-go.
|
|||
|
||||
Here are some main technologies that the template uses:
|
||||
|
||||
* JavaScript: programming language for the whole application
|
||||
* CSS: styling the user interface using [CSS Modules](https://github.com/css-modules/css-modules)
|
||||
* [React](https://reactjs.org/): library for creating user interfaces with components
|
||||
* [Redux](https://redux.js.org/): state and data flow handling
|
||||
* [Final Form](https://github.com/final-form/final-form): forms
|
||||
* [React Router](https://reacttraining.com/react-router/): routing
|
||||
* [Express](https://expressjs.com/): server
|
||||
- JavaScript: programming language for the whole application
|
||||
- CSS: styling the user interface using [CSS Modules](https://github.com/css-modules/css-modules)
|
||||
- [React](https://reactjs.org/): library for creating user interfaces with components
|
||||
- [Redux](https://redux.js.org/): state and data flow handling
|
||||
- [Final Form](https://github.com/final-form/final-form): forms
|
||||
- [React Router](https://reacttraining.com/react-router/): routing
|
||||
- [Express](https://expressjs.com/): server
|
||||
|
||||
## Setup
|
||||
|
||||
|
|
@ -109,7 +109,7 @@ To develop the application and to see changes live, start the frontend developme
|
|||
|
||||
**Known issues:**
|
||||
|
||||
* Adding/changing `import`s may not be synced properly with ESLint. You may see an error
|
||||
- Adding/changing `import`s may not be synced properly with ESLint. You may see an error
|
||||
`Unable to resolve path to module` even though the module existing in right path. Restarting the
|
||||
server doesn't help. To solve the issue, you need to make a change to the file where the error
|
||||
occurs.
|
||||
|
|
|
|||
|
|
@ -51,13 +51,13 @@ Start the server:
|
|||
|
||||
## Deploying to Heroku
|
||||
|
||||
* [Forking the repository](#forking-the-repository)
|
||||
* [Creating new app](#creating-new-app)
|
||||
* [Connect GitHub to Heroku](#connect-github-to-heroku)
|
||||
* [Heroku settings](#heroku-settings)
|
||||
* [Updating enviroment variables](#updating-enviroment-variables)
|
||||
* [Domains and certificates](#domains-and-certificates)
|
||||
* [Heroku logs](#heroku-logs)
|
||||
- [Forking the repository](#forking-the-repository)
|
||||
- [Creating new app](#creating-new-app)
|
||||
- [Connect GitHub to Heroku](#connect-github-to-heroku)
|
||||
- [Heroku settings](#heroku-settings)
|
||||
- [Updating enviroment variables](#updating-enviroment-variables)
|
||||
- [Domains and certificates](#domains-and-certificates)
|
||||
- [Heroku logs](#heroku-logs)
|
||||
|
||||
Before creating the app you need three accounts: [Heroku](https://heroku.com/),
|
||||
[Stripe](https://stripe.com/fi) and [MapBox](https://www.mapbox.com/). Creating the accounts is free
|
||||
|
|
@ -100,7 +100,7 @@ from any branch in the repository.
|
|||
|
||||
Read more from Heroku docs:
|
||||
|
||||
* [GitHub Integration](https://devcenter.heroku.com/articles/github-integration)
|
||||
- [GitHub Integration](https://devcenter.heroku.com/articles/github-integration)
|
||||
|
||||
### Heroku settings
|
||||
|
||||
|
|
@ -123,8 +123,8 @@ SSH settings in the _Settings tab_.
|
|||
|
||||
Read more from Heroku docs:
|
||||
|
||||
* [Custom Domain Names for Apps](https://devcenter.heroku.com/articles/custom-domains)
|
||||
* [Manually Acquiring an SSL/TLS Certificate](https://devcenter.heroku.com/articles/acquiring-an-ssl-certificate)
|
||||
- [Custom Domain Names for Apps](https://devcenter.heroku.com/articles/custom-domains)
|
||||
- [Manually Acquiring an SSL/TLS Certificate](https://devcenter.heroku.com/articles/acquiring-an-ssl-certificate)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ Adding new attributes to the data model relies on a Flex concept called
|
|||
|
||||
Three main areas in extending the listing data model are:
|
||||
|
||||
* [Declare the attribute and it's possible values](#declare-the-attribute-and-its-possible-values)
|
||||
* [Edit the listing wizard](#edit-the-listing-wizard)
|
||||
* [Show the attribute on listing page](#show-the-attribute-on-listing-page)
|
||||
* [Use the attribute as a search filter](#use-the-attribute-as-a-search-filter)
|
||||
- [Declare the attribute and it's possible values](#declare-the-attribute-and-its-possible-values)
|
||||
- [Edit the listing wizard](#edit-the-listing-wizard)
|
||||
- [Show the attribute on listing page](#show-the-attribute-on-listing-page)
|
||||
- [Use the attribute as a search filter](#use-the-attribute-as-a-search-filter)
|
||||
|
||||
In this guide we will extend the listing data model by adding a _capacity_ attribute.
|
||||
|
||||
|
|
|
|||
|
|
@ -48,14 +48,14 @@ API), and app icons. It also specifies placeholders for tags generated by
|
|||
|
||||
## src/
|
||||
|
||||
* `src/index.js` is the JavaScript entry point on the client-side (it also exports `renderApp`
|
||||
- `src/index.js` is the JavaScript entry point on the client-side (it also exports `renderApp`
|
||||
function to be used for server-side rendering).
|
||||
* `src/app.js` creates ClientApp and ServerApp
|
||||
* `src/routeConfiguration.js` defines logic between routes and page-level components
|
||||
* `src/marketplace.css`, `src/marketplaceIndex.css`, `src/marketplaceIndex.css` define marketplace
|
||||
- `src/app.js` creates ClientApp and ServerApp
|
||||
- `src/routeConfiguration.js` defines logic between routes and page-level components
|
||||
- `src/marketplace.css`, `src/marketplaceIndex.css`, `src/marketplaceIndex.css` define marketplace
|
||||
level styling using [CSS Properties](http://cssnext.io/features/#custom-properties-var) and CSS
|
||||
Property Sets.
|
||||
* `src/translations/en.json` all English translations used in Saunatime template app. (A good place
|
||||
- `src/translations/en.json` all English translations used in Saunatime template app. (A good place
|
||||
to start customization.)
|
||||
|
||||
### `src/components/`
|
||||
|
|
@ -81,11 +81,11 @@ internal state, etc.
|
|||
|
||||
## server/
|
||||
|
||||
* `server/index.js` handles server-side rendering (SSR). Built with [Express](http://expressjs.com)
|
||||
- `server/index.js` handles server-side rendering (SSR). Built with [Express](http://expressjs.com)
|
||||
(Node.js framework).
|
||||
* `server/csp.js` [Content Security Policy](https://content-security-policy.com), whitelist of
|
||||
- `server/csp.js` [Content Security Policy](https://content-security-policy.com), whitelist of
|
||||
domains that the application and loaded scripts are allowed to access from the browser.
|
||||
* `server/sitemap.js` generates a minimal sitemap.xml for SEO purposes.
|
||||
- `server/sitemap.js` generates a minimal sitemap.xml for SEO purposes.
|
||||
|
||||
## ext/default-mail-templates/
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
When we think about page speed there are actually two different scenarios that we need to address:
|
||||
|
||||
* The speed of initial page load and possible reloads after that
|
||||
* The speed of changing the page within Single page application (SPA)
|
||||
- The speed of initial page load and possible reloads after that
|
||||
- The speed of changing the page within Single page application (SPA)
|
||||
|
||||
The first one is usually a slower process. A browser needs to load all the HTML, CSS, JavaScript,
|
||||
and images - and then it needs to understand and execute those files, calculate layout, paint
|
||||
|
|
@ -27,11 +27,11 @@ Read more about
|
|||
We haven't yet implemented code splitting to reduce initial page rendering time, but there're other
|
||||
improvements that could be done to improve both cases of page rendering.
|
||||
|
||||
* [Check page performance](#check-page-performance)
|
||||
* [Optimize image sizes](#optimize-image-sizes)
|
||||
* [Lazy load off-screen images and other components](#lazy-load-off-screen-images-and-other-components)
|
||||
* [Use sparse fields](#use-sparse-fields)
|
||||
* [About code-splitting](#about-code-splitting)
|
||||
- [Check page performance](#check-page-performance)
|
||||
- [Optimize image sizes](#optimize-image-sizes)
|
||||
- [Lazy load off-screen images and other components](#lazy-load-off-screen-images-and-other-components)
|
||||
- [Use sparse fields](#use-sparse-fields)
|
||||
- [About code-splitting](#about-code-splitting)
|
||||
|
||||
## Check page performance
|
||||
|
||||
|
|
@ -52,17 +52,17 @@ within your web app.
|
|||
|
||||
Quick checklist:
|
||||
|
||||
* Check that the actual dimensions of an image match with DOM element's dimensions.
|
||||
* Lighthouse suggests that image compression level should be 85% or lower.
|
||||
- Check that the actual dimensions of an image match with DOM element's dimensions.
|
||||
- Lighthouse suggests that image compression level should be 85% or lower.
|
||||
[Read more](https://developers.google.com/web/tools/lighthouse/audits/optimize-images)
|
||||
* Good rule-of-thumb is that use JPEG for images and photos, where PNG is better for graphics, such
|
||||
- Good rule-of-thumb is that use JPEG for images and photos, where PNG is better for graphics, such
|
||||
as logos, graphs and illustrations.
|
||||
* If you are using JPEG images, think about saving them as progressive JPEGs.
|
||||
- If you are using JPEG images, think about saving them as progressive JPEGs.
|
||||
[Read more](https://cloudinary.com/blog/progressive_jpegs_and_green_martians) +
|
||||
[Photoshop guide](https://helpx.adobe.com/photoshop-elements/using/optimizing-images-jpeg-format.html)
|
||||
* If you are using PNG images, consider running them through PNG optimizers to reduce file size.
|
||||
- If you are using PNG images, consider running them through PNG optimizers to reduce file size.
|
||||
Plenty of options available, one example is [TinyPNG.com](https://tinypng.com)
|
||||
* Think about serving images and other static assets from some CDN.
|
||||
- Think about serving images and other static assets from some CDN.
|
||||
[Read more.](https://www.smashingmagazine.com/2017/04/content-delivery-network-optimize-images/)
|
||||
|
||||
## Lazy load off-screen images and other components
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@ level elements (unless you are modifying [a static page](static-pages.md)).
|
|||
In the following subtopics, we assume that you know the
|
||||
[basics of Redux](https://redux.js.org/basics) already.
|
||||
|
||||
* [Containers: Pages + TopbarContainer](#containers-pages--topbarcontainer)
|
||||
* [Duck files](#duck-files)
|
||||
* [Setting up Redux](#setting-up-redux)
|
||||
* [Advanced Redux concepts: thunks](#advanced-redux-concepts-thunks)
|
||||
- [Containers: Pages + TopbarContainer](#containers-pages--topbarcontainer)
|
||||
- [Duck files](#duck-files)
|
||||
- [Setting up Redux](#setting-up-redux)
|
||||
- [Advanced Redux concepts: thunks](#advanced-redux-concepts-thunks)
|
||||
|
||||
## Containers: Pages + TopbarContainer
|
||||
|
||||
|
|
@ -42,9 +42,13 @@ file. For example, `src/containers/TransactionPage/TransactionPage.js` connects
|
|||
store with `mapStateToProps` and `mapDispatchToProps` functions:
|
||||
|
||||
```js
|
||||
const TransactionPage = compose(connect(mapStateToProps, mapDispatchToProps), injectIntl)(
|
||||
TransactionPageComponent
|
||||
);
|
||||
const TransactionPage = compose(
|
||||
connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
),
|
||||
injectIntl
|
||||
)(TransactionPageComponent);
|
||||
```
|
||||
|
||||
## Duck files
|
||||
|
|
@ -85,8 +89,8 @@ function (in `src/store.js`).
|
|||
This setup creates a store structure that separates container specific state as well as global data
|
||||
by their reducer names. Together with Ducks module naming schema, this means that:
|
||||
|
||||
* the state of the `ListingPage` can be found from `state.ListingPage` and
|
||||
* the state of the global `user` object can be found from `state.user`.
|
||||
- the state of the `ListingPage` can be found from `state.ListingPage` and
|
||||
- the state of the global `user` object can be found from `state.user`.
|
||||
|
||||
## Advanced Redux concepts: thunks
|
||||
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@ instead of defining on server-side what gets rendered when user goes to URL
|
|||
`somemarketplace.com/about`, we just catch all the path combinations and let the app to define what
|
||||
page gets rendered.
|
||||
|
||||
* [React Router setup](#react-router-setup)
|
||||
* [Linking](#linking)
|
||||
* [Loading data](#loading-data)
|
||||
* [Analytics](#analytics)
|
||||
* [A brief introduction to server-side rendering](#a-brief-introduction-to-ssr)
|
||||
- [React Router setup](#react-router-setup)
|
||||
- [Linking](#linking)
|
||||
- [Loading data](#loading-data)
|
||||
- [Analytics](#analytics)
|
||||
- [A brief introduction to server-side rendering](#a-brief-introduction-to-ssr)
|
||||
|
||||
## React Router setup
|
||||
|
||||
|
|
@ -144,10 +144,10 @@ const Routes = (props, context) => {
|
|||
Inside `src/Routes.js`, we also have a component called `RouteComponentRenderer`, which has three
|
||||
important jobs:
|
||||
|
||||
* Calling loadData function, if those have been defined in `src/routeConfiguration.js`. This is an
|
||||
- Calling loadData function, if those have been defined in `src/routeConfiguration.js`. This is an
|
||||
asynchronous call, a page needs to define what gets rendered before data is complete.
|
||||
* Reset scroll position after location change.
|
||||
* Dispatch location changed actions to Redux store. This makes it possible for
|
||||
- Reset scroll position after location change.
|
||||
- Dispatch location changed actions to Redux store. This makes it possible for
|
||||
[analytics Redux middleware](analytics.md) to listen location changes.
|
||||
|
||||
## Linking
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ out search result with only one value per search parameter. The _select multiple
|
|||
other hand can take multiple values for a single search parameter. These two filter types for
|
||||
extended data are implemented with four different components, a standard and a plain one:
|
||||
|
||||
* Select single filter: `SelectSingleFilter` and `SelectSingleFilterPlain`
|
||||
* Select multiple filter: `SelectMultipleFilter` and `SelectMultipleFilterPlain`
|
||||
- Select single filter: `SelectSingleFilter` and `SelectSingleFilterPlain`
|
||||
- Select multiple filter: `SelectMultipleFilter` and `SelectMultipleFilterPlain`
|
||||
|
||||
The `SelectSingleFilter` and `SelectMultipleFilter` components are rendered as standard dropdowns in
|
||||
the search view. The plain filter components `SelectSingleFilterPlain` and
|
||||
|
|
@ -132,9 +132,9 @@ passed as props to the components that render the filters: `SearchFilters`, `Sea
|
|||
`SearchFiltersMobile` .The difference between filters passed as primary and secondary varies in
|
||||
mobile and desktop views:
|
||||
|
||||
* **Desktop:** Primary filters are shown in the top of the search view, secondary filters are
|
||||
- **Desktop:** Primary filters are shown in the top of the search view, secondary filters are
|
||||
rendered in a distinct panel that opens on top of search results.
|
||||
* **Mobile:** Both primary and secondary filters are rendered in the same modal.
|
||||
- **Mobile:** Both primary and secondary filters are rendered in the same modal.
|
||||
|
||||
### Desktop filters
|
||||
|
||||
|
|
@ -144,9 +144,9 @@ A basic desktop filter that renders as a dropdown button on top of the search re
|
|||
achieved using the `SelectSingleFilter` and `SelectMultipleFilter` components. To add standard
|
||||
desktop filters, perform the following in `SearchFilters` component:
|
||||
|
||||
* declare a prop with the same name that you added the filter config to `primaryFilters`
|
||||
* resolve the filters initial value with `initialValue` and `initialValues` functions
|
||||
* render the filter by using a `SelectSingleFilter` or `SelectMultipleFilter` component inside the
|
||||
- declare a prop with the same name that you added the filter config to `primaryFilters`
|
||||
- resolve the filters initial value with `initialValue` and `initialValues` functions
|
||||
- render the filter by using a `SelectSingleFilter` or `SelectMultipleFilter` component inside the
|
||||
`<div className={css.filters}>` element
|
||||
|
||||
### Desktop filters panel
|
||||
|
|
@ -159,9 +159,9 @@ contain a set of filters.
|
|||
|
||||
To use the `SearchFiltersPanel`, do the following:
|
||||
|
||||
* declare a prop with the same name that you added the filter config to `secondaryFilters`
|
||||
* resolve the filters initial value with `initialValue` and `initialValues` methods
|
||||
* use the `SelectSingleFilterPlain` and `SelectMultipleFilterPlain` components inside the
|
||||
- declare a prop with the same name that you added the filter config to `secondaryFilters`
|
||||
- resolve the filters initial value with `initialValue` and `initialValues` methods
|
||||
- use the `SelectSingleFilterPlain` and `SelectMultipleFilterPlain` components inside the
|
||||
`<div className={css.filtersWrapper}>` element to render the filters
|
||||
|
||||
### Mobile filters
|
||||
|
|
@ -172,8 +172,8 @@ The mobile view uses the same `SelectSingleFilterPlain` and `SelectMultipleFilte
|
|||
as the filter panel. In this case the filter components are declared in `SearchFiltersMobile`. The
|
||||
following steps are required to add a mobile filter:
|
||||
|
||||
* declare a prop with the same name that you added the filter config to `primaryFilters` or
|
||||
- declare a prop with the same name that you added the filter config to `primaryFilters` or
|
||||
`secondaryFilters`
|
||||
* resolve the filters initial value with `initialValue` and `initialValues` methods
|
||||
* use the `SelectSingleFilterPlain` and `SelectMultipleFilterPlain` components inside the
|
||||
- resolve the filters initial value with `initialValue` and `initialValues` methods
|
||||
- use the `SelectSingleFilterPlain` and `SelectMultipleFilterPlain` components inside the
|
||||
`<div className={css.filtersWrapper}>` element to render the filters
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ be used but the Sentry client comes already strapped into application.
|
|||
To enable the Sentry error logging a DSN, _Data Source Name_ has to be provided as an environment
|
||||
variable. Browser and Node environments both require their own keys. The key names are as follows:
|
||||
|
||||
* **SERVER_SENTRY_DSN** - the private Sentry DSN, used on the server side
|
||||
* **REACT_APP_PUBLIC_SENTRY_DSN** - the public Sentry DSN, used in the browser
|
||||
- **SERVER_SENTRY_DSN** - the private Sentry DSN, used on the server side
|
||||
- **REACT_APP_PUBLIC_SENTRY_DSN** - the public Sentry DSN, used in the browser
|
||||
|
||||
The DSN keys can be aquired from the Sentry project settings. To test them in your local environment
|
||||
they can be passed for example to the `yarn run dev-server` command:
|
||||
|
|
@ -34,5 +34,5 @@ For basic auth the security token can be configured as follows:
|
|||
|
||||
In _Project > Settings > General > Client Security_ set the following values
|
||||
|
||||
* **Security token** - `Basic <your username:password in Base 64>`
|
||||
* **Security token header** - `Authorization`
|
||||
- **Security token** - `Basic <your username:password in Base 64>`
|
||||
- **Security token header** - `Authorization`
|
||||
|
|
|
|||
|
|
@ -93,8 +93,8 @@ import React from 'react';
|
|||
|
||||
In the second line we are importing two containers:
|
||||
|
||||
* `StaticPage`: helps in creating static pages
|
||||
* `TopbarContainer`: creates our Topbar component and fetches the data it needs.
|
||||
- `StaticPage`: helps in creating static pages
|
||||
- `TopbarContainer`: creates our Topbar component and fetches the data it needs.
|
||||
|
||||
```jsx
|
||||
import { StaticPage, TopbarContainer } from '../../containers';
|
||||
|
|
@ -102,10 +102,10 @@ import { StaticPage, TopbarContainer } from '../../containers';
|
|||
|
||||
After that we need to import some components:
|
||||
|
||||
* `LayoutSingleColumn` and wrappers that it needs to position content
|
||||
* `Footer` component (to be added inside LayoutWrapperFooter)
|
||||
* `NamedLink` makes it easier to point to different pages inside the application
|
||||
* `ExternalLink` can be used to link outside the application. It creates a normal `<a>`link with
|
||||
- `LayoutSingleColumn` and wrappers that it needs to position content
|
||||
- `Footer` component (to be added inside LayoutWrapperFooter)
|
||||
- `NamedLink` makes it easier to point to different pages inside the application
|
||||
- `ExternalLink` can be used to link outside the application. It creates a normal `<a>`link with
|
||||
extra attributes `target="_blank" rel="noopener noreferrer"` that add some security to these
|
||||
outbound links.
|
||||
|
||||
|
|
@ -159,11 +159,11 @@ In the template above we are using StaticPage component with some attributes:
|
|||
>
|
||||
```
|
||||
|
||||
* `className` is JSX name for `class` attribute used in plain HTML.
|
||||
* `title="About"` creates `<title>About</title>` element to `<head>` section of the page. (That
|
||||
- `className` is JSX name for `class` attribute used in plain HTML.
|
||||
- `title="About"` creates `<title>About</title>` element to `<head>` section of the page. (That
|
||||
title is also used in OpenGraph meta tags). You could also add
|
||||
`description="This is about page description"`
|
||||
* Then we have `schema` tag that defines some data for search engines in JSON-LD format. Check
|
||||
- Then we have `schema` tag that defines some data for search engines in JSON-LD format. Check
|
||||
[schema.org](http://schema.org/docs/full.html) for more information.
|
||||
|
||||
Inside `StaticPage` component we define layout (`LayoutSingleColumn`) and add other components
|
||||
|
|
@ -249,10 +249,10 @@ about page so '/about' would work well as a path.)
|
|||
|
||||
We are using several libraries in this example. If you want to read more, here's some pointers:
|
||||
|
||||
* [ES2015](https://babeljs.io/learn-es2015/): imports, exports, arrow functions
|
||||
* [React](https://reactjs.org/): for creating components
|
||||
* [JSX](https://reactjs.org/docs/introducing-jsx.html): for getting HTML-like markup syntax for own
|
||||
- [ES2015](https://babeljs.io/learn-es2015/): imports, exports, arrow functions
|
||||
- [React](https://reactjs.org/): for creating components
|
||||
- [JSX](https://reactjs.org/docs/introducing-jsx.html): for getting HTML-like markup syntax for own
|
||||
components
|
||||
* [CSS Modules](https://github.com/css-modules/css-modules)
|
||||
* [React Router](https://reacttraining.com/react-router/web/guides/philosophy): routing inside the
|
||||
- [CSS Modules](https://github.com/css-modules/css-modules)
|
||||
- [React Router](https://reacttraining.com/react-router/web/guides/philosophy): routing inside the
|
||||
application.
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ behavior that CSS is all about.
|
|||
|
||||
To tackle this goal, we have split the styling into two levels in this template application:
|
||||
|
||||
* [Marketplace level styling](#marketplace-level-styling) through _marketplace.css_ (a kind of
|
||||
- [Marketplace level styling](#marketplace-level-styling) through _marketplace.css_ (a kind of
|
||||
global theme)
|
||||
* [Component level styling](#styling-components) using
|
||||
- [Component level styling](#styling-components) using
|
||||
[CSS Modules](https://github.com/css-modules/css-modules)
|
||||
|
||||
## Marketplace level styling
|
||||
|
|
@ -185,8 +185,8 @@ case, it's _SectionHero_ and its styles can be found from the file:
|
|||
|
||||
There's only two groups of components that break that rule:
|
||||
|
||||
* _src/containers_ (These components are connected to Redux store: Pages and TopbarContainer)
|
||||
* _src/forms_
|
||||
- _src/containers_ (These components are connected to Redux store: Pages and TopbarContainer)
|
||||
- _src/forms_
|
||||
|
||||
### Styling guidelines and good practices
|
||||
|
||||
|
|
@ -198,20 +198,20 @@ complex inner DOM structure needed, additional classes are named semantically.
|
|||
|
||||
Some guidelines we have tried to follow:
|
||||
|
||||
* **Use semantic class names** (They improve readability and decouples style changes from DOM
|
||||
- **Use semantic class names** (They improve readability and decouples style changes from DOM
|
||||
changes.)
|
||||
* **Use CSS Properties defined in marketplace.css** and create new ones when it makes sense.
|
||||
* **Use classes**, don't style DOM elements directly. (Element styles are global even with CSS
|
||||
- **Use CSS Properties defined in marketplace.css** and create new ones when it makes sense.
|
||||
- **Use classes**, don't style DOM elements directly. (Element styles are global even with CSS
|
||||
Modules.)
|
||||
* **Avoid nesting styles**. (CSS Modules makes specificity rules unnecessary.)
|
||||
* **Group and comment style rules** inside declaration block if that improves readability.
|
||||
* **Parent component is responsible for allocating space** for a child component (i.e. dimensions
|
||||
- **Avoid nesting styles**. (CSS Modules makes specificity rules unnecessary.)
|
||||
- **Group and comment style rules** inside declaration block if that improves readability.
|
||||
- **Parent component is responsible for allocating space** for a child component (i.e. dimensions
|
||||
and margins).
|
||||
* **Define `@apply` rules early enough** inside declaration block (since rules inside those property
|
||||
- **Define `@apply` rules early enough** inside declaration block (since rules inside those property
|
||||
sets might overwrite rules written above the line where the set is applied).
|
||||
* **Align text and components** to horizontal baselines. I.e. they should be a multiple of `6px` on
|
||||
- **Align text and components** to horizontal baselines. I.e. they should be a multiple of `6px` on
|
||||
mobile layout and `8px` on bigger screens.
|
||||
* **Component height should follow baselines too**. I.e. they should be a multiple of `6px` on
|
||||
- **Component height should follow baselines too**. I.e. they should be a multiple of `6px` on
|
||||
mobile layout and `8px` on bigger screens. _(Unfortunately, we haven't been strict with this
|
||||
one.)_
|
||||
|
||||
|
|
@ -258,8 +258,8 @@ Sometimes the child component needs to be styled even further than just allocati
|
|||
the parent component wants to change the theme of child component there are generally two concepts
|
||||
available:
|
||||
|
||||
* Create themed components (e.g. `<PrimaryButton>`, `<SecondaryButton>`, `<InlineButton>`)
|
||||
* Pass in a `class` property that is able to overwrite original styling rules.
|
||||
- Create themed components (e.g. `<PrimaryButton>`, `<SecondaryButton>`, `<InlineButton>`)
|
||||
- Pass in a `class` property that is able to overwrite original styling rules.
|
||||
|
||||
For the latter option, we have created a prop type concept called `rootClassName`. If you pass
|
||||
`rootClassName` through props to a component, it will use that instead of component's own style
|
||||
|
|
|
|||
|
|
@ -22,9 +22,9 @@ Note that this also runs the linter.
|
|||
|
||||
To learn more about testing with Jest, read the following documentation:
|
||||
|
||||
* [Getting Started](https://facebook.github.io/jest/docs/getting-started.html)
|
||||
* [Tutorial - React](https://facebook.github.io/jest/docs/tutorial-react.html)
|
||||
* [Tutorial - Async](https://facebook.github.io/jest/docs/tutorial-async.html)
|
||||
* [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) blog post
|
||||
* [API Reference](https://facebook.github.io/jest/docs/api.html) lists the global environment with
|
||||
- [Getting Started](https://facebook.github.io/jest/docs/getting-started.html)
|
||||
- [Tutorial - React](https://facebook.github.io/jest/docs/tutorial-react.html)
|
||||
- [Tutorial - Async](https://facebook.github.io/jest/docs/tutorial-async.html)
|
||||
- [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) blog post
|
||||
- [API Reference](https://facebook.github.io/jest/docs/api.html) lists the global environment with
|
||||
the available functions and the assertion matchers
|
||||
|
|
|
|||
|
|
@ -134,21 +134,21 @@ More information about adding static content to the application can be found fro
|
|||
If you want the template to use a language that is not supported by default a new translation file
|
||||
needs to be added and the messages in it need to be translated:
|
||||
|
||||
* Copy the default [src/translations/en.json](../src/translations/en.json) English translations file
|
||||
- Copy the default [src/translations/en.json](../src/translations/en.json) English translations file
|
||||
into some other file, for example `it.json` for Italian.
|
||||
|
||||
* Change the messages in the new translations file to the desired language.
|
||||
- Change the messages in the new translations file to the desired language.
|
||||
|
||||
Once you have the translations file in place:
|
||||
|
||||
* In [src/config.js](../src/config.js), change the `locale` variable value to match the new locale
|
||||
- In [src/config.js](../src/config.js), change the `locale` variable value to match the new locale
|
||||
(the name of the new translations file, without the extension), for example:
|
||||
|
||||
```js
|
||||
const locale = 'it';
|
||||
```
|
||||
|
||||
* In [src/app.js](../src/app.js), change the translation imports to point to the correct
|
||||
- In [src/app.js](../src/app.js), change the translation imports to point to the correct
|
||||
`react-intl` locale and the new translations file you created, for example:
|
||||
|
||||
```js
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ automatically. Marketplace owner needs to notify the Sharetribe team.
|
|||
|
||||
A template consists of two files:
|
||||
|
||||
* `TEMPLATE_NAME-subject.txt` - holds the mail Subject line template
|
||||
* `TEMPLATE_NAME-html.html` - contains the template for the HTML version of the mail
|
||||
- `TEMPLATE_NAME-subject.txt` - holds the mail Subject line template
|
||||
- `TEMPLATE_NAME-html.html` - contains the template for the HTML version of the mail
|
||||
|
||||
Both parts are mandatory. All emails that are sent from the marketplace contain both the HTML and
|
||||
plain text variants and the recipient's mail client is free to choose which one to visualize and
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ starts.
|
|||
|
||||
Listing page consists of the generic Topbar and of different page sections:
|
||||
|
||||
* **SectionImages**: contains the listing image and the image carousel
|
||||
* **SectionAvatar**: the listing author image
|
||||
* **Main content**: the left column under images
|
||||
* **SectionBooking**: Contains the form and breakdown estimation for booking the listing
|
||||
- **SectionImages**: contains the listing image and the image carousel
|
||||
- **SectionAvatar**: the listing author image
|
||||
- **Main content**: the left column under images
|
||||
- **SectionBooking**: Contains the form and breakdown estimation for booking the listing
|
||||
|
||||
In the main content, there are several sections that are likely to be customized, e.g. when adding
|
||||
new extended data to the listing creation.
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ So, rough JSX presentation is something like:
|
|||
|
||||
Searches can be made by each of these components.
|
||||
|
||||
* Topbar contains location search (LocationAutocompleteInput)
|
||||
* MainPanel has Filters that can fine-tune current location search
|
||||
* SearchMap can create new location searches when the map's bounding box changes (i.e. moving,
|
||||
- Topbar contains location search (LocationAutocompleteInput)
|
||||
- MainPanel has Filters that can fine-tune current location search
|
||||
- SearchMap can create new location searches when the map's bounding box changes (i.e. moving,
|
||||
zooming, etc.)
|
||||
|
||||
## Topbar
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue