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

Merge pull request #720 from sharetribe/quickfix-searchpage-rendering

Browse source 
Quickfix searchpage rendering
This commit is contained in:
Vesa Luusua 2018-02-26 16:05:28 +02:00 • committed by GitHub
commit 78bac5c2e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,11 +6,17 @@
}
.listingCards {
padding: 0 24px 96px 24px;
@media (--viewportMedium) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
@media (--viewportLarge) {
padding: 0 36px 96px 36px;
}
}
.listingCard {
@ -80,4 +86,8 @@
margin-top: auto;
background-color: var(--matterColorLight);
padding: 0 24px;
@media (--viewportLarge) {
padding: 0 36px;
}
}

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

@ -50,7 +50,7 @@
@media (--viewportLarge) {
flex-basis: 62.5%;
padding: 23px 36px 36px 36px;
padding: 23px 0 0 0;
}
}
@ -73,7 +73,7 @@
}
@media (--viewportLarge) {
padding: 0;
padding: 0 36px;
}
}
@ -88,21 +88,15 @@
.searchFiltersPanel {
flex-grow: 1;
display: flex;
padding: 0 24px 24px 24px;
@media (--viewportLarge) {
padding: 0;
}
}
.listings {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 0 24px 96px 24px;
padding: 0;
@media (--viewportLarge) {
padding: 0 0 96px 0;
}
}

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

@ -37,8 +37,8 @@ import css from './SearchPage.css';
// Current design has max 3 columns 12 is divisible by 2 and 3
// So, there's enough cards to fill all columns on full pagination pages
const RESULT_PAGE_SIZE = 12;
const SHARETRIBE_API_MAX_PAGE_SIZE = 100;
const MAX_SEARCH_RESULT_PAGES_ON_MAP = 5; // 100 * 5 = 500 listings are shown on a map.
const MAX_SEARCH_RESULT_PAGE_SIZE_ON_MAP = 80; // max page size is 100 in API
const MAX_SEARCH_RESULT_PAGES_ON_MAP = 1; // page size * n pages = number of listings shown on a map.
const MODAL_BREAKPOINT = 768; // Search is in modal on mobile layout
const SEARCH_WITH_MAP_DEBOUNCE = 300; // Little bit of debounce before search is initiated.
const BOUNDS_FIXED_PRECISION = 8;
@ -186,7 +186,7 @@ export class SearchPageComponent extends Component {
latlngBounds: ['bounds'],
});
const perPage = SHARETRIBE_API_MAX_PAGE_SIZE;
const perPage = MAX_SEARCH_RESULT_PAGE_SIZE_ON_MAP;
const page = 1;
const { address, country, ...rest } = searchInURL;
const searchParamsForMapResults = { ...rest, include: ['images'], page, perPage };