(add) load more button is now a component
This commit is contained in:
parent
788c645bb9
commit
ebb5142daf
|
@ -0,0 +1,43 @@
|
|||
.sw-ButtonLoadMore {
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
background-size: 14px 14px;
|
||||
border-radius: 5px;
|
||||
border: 2px solid $poa-purple;
|
||||
color: $poa-purple;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
height: 42px;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
|
||||
&#{ & }-core {
|
||||
border-color: $poa-purple;
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
border-color: $sokol-cyan;
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
border-color: $xdai-gray;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sw-ButtonLoadMore_Text {
|
||||
margin-right: 15px;
|
||||
|
||||
.sw-ButtonLoadMore:hover & {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,17 @@
|
|||
.sw-IconLoadMore_Path {
|
||||
&#{ & }-core {
|
||||
fill: $poa-purple;
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
fill: $sokol-cyan;
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
fill: $xdai-gray-dark;
|
||||
}
|
||||
|
||||
.sw-ButtonLoadMore:hover & {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
.sw-LoadMore {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
|
@ -7,6 +7,7 @@
|
|||
@import "Ballots";
|
||||
@import "BaseLoader";
|
||||
@import "ButtonFinalize";
|
||||
@import "ButtonLoadMore";
|
||||
@import "ButtonNewBallot";
|
||||
@import "Footer";
|
||||
@import "Header";
|
||||
|
@ -15,11 +16,13 @@
|
|||
@import "IconAll";
|
||||
@import "IconFinalize";
|
||||
@import "IconGithub";
|
||||
@import "IconLoadMore";
|
||||
@import "IconMobileMenu";
|
||||
@import "IconPOA";
|
||||
@import "IconTelegram";
|
||||
@import "IconToFinalize";
|
||||
@import "IconTwitter";
|
||||
@import "LoadMore";
|
||||
@import "Loading";
|
||||
@import "LogoDai";
|
||||
@import "LogoPOA";
|
||||
|
|
|
@ -17,6 +17,7 @@ $sokol-menu-icon-color: #fff;
|
|||
$xdai-orange: #fec042;
|
||||
$xdai-gray-darker: #eaeef0;
|
||||
$xdai-gray: #f2f6f8;
|
||||
$xdai-gray-dark: #333;
|
||||
$xdai-menu-icon-color: #333;
|
||||
|
||||
// colors
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,7 +1,9 @@
|
|||
import React from 'react'
|
||||
import { observable } from 'mobx'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
import 'babel-polyfill'
|
||||
import React from 'react'
|
||||
import { ButtonLoadMore } from '../ButtonLoadMore'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
import { observable } from 'mobx'
|
||||
import { getNetworkBranch } from '../../utils/utils'
|
||||
|
||||
@inject('commonStore', 'ballotsStore', 'ballotStore', 'contractsStore')
|
||||
@observer
|
||||
|
@ -13,7 +15,6 @@ export class Ballots extends React.Component {
|
|||
this.limit = this.props.commonStore.loadMoreLimit
|
||||
this.step = this.limit
|
||||
this.onClick = this.onClick.bind(this)
|
||||
this.networkBranch = this.props.networkBranch
|
||||
}
|
||||
|
||||
onClick = async () => {
|
||||
|
@ -138,6 +139,12 @@ export class Ballots extends React.Component {
|
|||
commonStore.isToFinalizeFilter = this.props.isToFinalizeFilter
|
||||
}
|
||||
|
||||
getVotingNetworkBranch = () => {
|
||||
const { contractsStore } = this.props
|
||||
|
||||
return contractsStore.netId ? getNetworkBranch(contractsStore.netId) : null
|
||||
}
|
||||
|
||||
render() {
|
||||
const { ballotsStore, commonStore } = this.props
|
||||
|
||||
|
@ -149,18 +156,12 @@ export class Ballots extends React.Component {
|
|||
ballotCards = this.filterBySearchTerm(commonStore.searchTerm, ballotCards)
|
||||
}
|
||||
|
||||
let loadMoreButton
|
||||
let loadMore = null
|
||||
|
||||
if (ballotCards.length > this.limit && !commonStore.isActiveFilter && !commonStore.isToFinalizeFilter) {
|
||||
loadMoreButton = (
|
||||
<div className="center">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-transparent btn-load-more text-capitalize"
|
||||
onClick={e => this.onClick(e)}
|
||||
>
|
||||
Load More Ballots
|
||||
</button>
|
||||
loadMore = (
|
||||
<div className="sw-LoadMore">
|
||||
<ButtonLoadMore networkBranch={this.getVotingNetworkBranch()} onClick={e => this.onClick(e)} />
|
||||
</div>
|
||||
)
|
||||
|
||||
|
@ -170,7 +171,7 @@ export class Ballots extends React.Component {
|
|||
return (
|
||||
<section className="sw-Ballots">
|
||||
{ballotCards}
|
||||
{loadMoreButton}
|
||||
{loadMore}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
import React from 'react'
|
||||
import { IconLoadMore } from '../IconLoadMore'
|
||||
|
||||
export const ButtonLoadMore = ({ extraClassName = '', networkBranch, onClick }) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={`sw-ButtonLoadMore ${extraClassName} sw-ButtonLoadMore-${networkBranch}`}
|
||||
>
|
||||
<span className="sw-ButtonLoadMore_Text">Load More Ballots</span> <IconLoadMore networkBranch={networkBranch} />
|
||||
</button>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react'
|
||||
|
||||
export const IconLoadMore = ({ networkBranch }) => {
|
||||
return (
|
||||
<svg className="sw-IconLoadMore" xmlns="http://www.w3.org/2000/svg" width="15" height="18">
|
||||
<path
|
||||
className={`sw-IconLoadMore_Path sw-IconLoadMore_Path-${networkBranch}`}
|
||||
d="M14 18H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 2 0v4.969h11V5H3.491l1.215 1.215a1.033 1.033 0 0 1-1.46 1.46L.325 4.754a1.013 1.013 0 0 1-.228-.35C.091 4.392.08 4.383.075 4.371a1.036 1.036 0 0 1 .221-1.136L3.235.296a1.038 1.038 0 1 1 1.469 1.469L3.469 3H14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue