mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
mobile tweaks
This commit is contained in:
parent
dde4086827
commit
e9b1f24094
@ -22,10 +22,11 @@
|
|||||||
font-weight: $font-weight-bold;
|
font-weight: $font-weight-bold;
|
||||||
padding: $spacer / 4 $spacer / 2;
|
padding: $spacer / 4 $spacer / 2;
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
|
margin-top: -1px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid $brand-grey-lighter;
|
border: 1px solid $brand-grey-lighter;
|
||||||
min-width: 3rem;
|
min-width: 3.5rem;
|
||||||
|
|
||||||
&,
|
&,
|
||||||
&:hover,
|
&:hover,
|
||||||
|
@ -2,13 +2,47 @@ import React, { PureComponent } from 'react'
|
|||||||
import ReactPaginate from 'react-paginate'
|
import ReactPaginate from 'react-paginate'
|
||||||
import styles from './Pagination.module.scss'
|
import styles from './Pagination.module.scss'
|
||||||
|
|
||||||
export default class Pagination extends PureComponent<{
|
interface PaginationProps {
|
||||||
totalPages: number
|
totalPages: number
|
||||||
currentPage: number
|
currentPage: number
|
||||||
handlePageClick(data: { selected: number }): Promise<any>
|
handlePageClick(data: { selected: number }): Promise<any>
|
||||||
}> {
|
}
|
||||||
|
|
||||||
|
interface PaginationState {
|
||||||
|
smallViewport: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Pagination extends PureComponent<
|
||||||
|
PaginationProps,
|
||||||
|
PaginationState
|
||||||
|
> {
|
||||||
|
public state = { smallViewport: true }
|
||||||
|
private mq = matchMedia && window.matchMedia('(min-width: 600px)')
|
||||||
|
|
||||||
|
public componentDidMount() {
|
||||||
|
if (matchMedia) {
|
||||||
|
this.mq.addListener(this.viewportChange)
|
||||||
|
this.viewportChange(this.mq)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentWillUnmount() {
|
||||||
|
if (matchMedia) {
|
||||||
|
this.mq.removeListener(this.viewportChange)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private viewportChange = (mq: { matches: boolean }) => {
|
||||||
|
if (mq.matches) {
|
||||||
|
this.setState({ smallViewport: false })
|
||||||
|
} else {
|
||||||
|
this.setState({ smallViewport: true })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
const { totalPages, currentPage, handlePageClick } = this.props
|
const { totalPages, currentPage, handlePageClick } = this.props
|
||||||
|
const { smallViewport } = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
totalPages > 1 && (
|
totalPages > 1 && (
|
||||||
@ -16,8 +50,9 @@ export default class Pagination extends PureComponent<{
|
|||||||
pageCount={totalPages}
|
pageCount={totalPages}
|
||||||
// react-pagination starts counting at 0, we start at 1
|
// react-pagination starts counting at 0, we start at 1
|
||||||
initialPage={currentPage - 1}
|
initialPage={currentPage - 1}
|
||||||
marginPagesDisplayed={1}
|
// adapt based on media query match
|
||||||
pageRangeDisplayed={6}
|
marginPagesDisplayed={smallViewport ? 0 : 1}
|
||||||
|
pageRangeDisplayed={smallViewport ? 3 : 6}
|
||||||
onPageChange={data => handlePageClick(data)}
|
onPageChange={data => handlePageClick(data)}
|
||||||
disableInitialCallback
|
disableInitialCallback
|
||||||
previousLabel={'←'}
|
previousLabel={'←'}
|
||||||
|
Loading…
Reference in New Issue
Block a user