maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

mobile open map modal button as sticky (not compatible: Edge < 16)

Browse source
This commit is contained in:
Vesa Luusua 2017-08-22 14:20:23 +03:00
parent 417e72dff2
commit 9305aa76e1
4 changed files with 22 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/SearchResultsPanel/SearchResultsPanel.css
View file

@ -6,6 +6,7 @@
}
.listingCards {
flex-grow: 1;
padding: 0 24px 24px 24px;
@media (--viewportMedium) {

5
src/components/SearchResultsPanel/SearchResultsPanel.js
View file

@ -28,6 +28,7 @@ const SearchResultsPanel = props => {
currencyConfig={currencyConfig}
/>
))}
{props.children}
</div>
{paginationLinks}
</div>
@ -35,6 +36,7 @@ const SearchResultsPanel = props => {
};
SearchResultsPanel.defaultProps = {
children: null,
className: null,
listings: [],
pagination: null,
@ -42,9 +44,10 @@ SearchResultsPanel.defaultProps = {
search: null,
};
const { array, object, string } = PropTypes;
const { array, node, object, string } = PropTypes;
SearchResultsPanel.propTypes = {
children: node,
className: string,
currencyConfig: propTypes.currencyConfig.isRequired,
listings: array,

4
src/containers/SearchPage/SearchPage.css
View file

@ -117,6 +117,10 @@
}
}
.openMobileMapSticky {
position: sticky;
}
.mapPanel {
@media (--viewportMedium) {

25
src/containers/SearchPage/SearchPage.js
View file

@ -254,19 +254,20 @@ export class SearchPageComponent extends Component {
listings={listings}
pagination={listingsAreLoaded ? pagination : null}
search={searchParamsForPagination}
/>
>
<button
className={classNames(css.openMobileMap, { [css.openMobileMapSticky] : listings.length > 0 })}
onClick={() => {
this.useLocationSearchBounds = true;
this.modalOpenedBoundsChange = true;
this.setState({ isSearchMapOpenOnMobile: true });
}}
>
<MapIcon className={css.openMobileMapIcon} />
<FormattedMessage id="SearchPage.openMapView" />
</button>
</SearchResultsPanel>
</div>
<button
className={css.openMobileMap}
onClick={() => {
this.useLocationSearchBounds = true;
this.modalOpenedBoundsChange = true;
this.setState({ isSearchMapOpenOnMobile: true });
}}
>
<MapIcon className={css.openMobileMapIcon} />
<FormattedMessage id="SearchPage.openMapView" />
</button>
</div>
<ModalInMobile
className={css.mapPanel}