(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 "Ballots";
|
||||||
@import "BaseLoader";
|
@import "BaseLoader";
|
||||||
@import "ButtonFinalize";
|
@import "ButtonFinalize";
|
||||||
|
@import "ButtonLoadMore";
|
||||||
@import "ButtonNewBallot";
|
@import "ButtonNewBallot";
|
||||||
@import "Footer";
|
@import "Footer";
|
||||||
@import "Header";
|
@import "Header";
|
||||||
|
@ -15,11 +16,13 @@
|
||||||
@import "IconAll";
|
@import "IconAll";
|
||||||
@import "IconFinalize";
|
@import "IconFinalize";
|
||||||
@import "IconGithub";
|
@import "IconGithub";
|
||||||
|
@import "IconLoadMore";
|
||||||
@import "IconMobileMenu";
|
@import "IconMobileMenu";
|
||||||
@import "IconPOA";
|
@import "IconPOA";
|
||||||
@import "IconTelegram";
|
@import "IconTelegram";
|
||||||
@import "IconToFinalize";
|
@import "IconToFinalize";
|
||||||
@import "IconTwitter";
|
@import "IconTwitter";
|
||||||
|
@import "LoadMore";
|
||||||
@import "Loading";
|
@import "Loading";
|
||||||
@import "LogoDai";
|
@import "LogoDai";
|
||||||
@import "LogoPOA";
|
@import "LogoPOA";
|
||||||
|
|
|
@ -17,6 +17,7 @@ $sokol-menu-icon-color: #fff;
|
||||||
$xdai-orange: #fec042;
|
$xdai-orange: #fec042;
|
||||||
$xdai-gray-darker: #eaeef0;
|
$xdai-gray-darker: #eaeef0;
|
||||||
$xdai-gray: #f2f6f8;
|
$xdai-gray: #f2f6f8;
|
||||||
|
$xdai-gray-dark: #333;
|
||||||
$xdai-menu-icon-color: #333;
|
$xdai-menu-icon-color: #333;
|
||||||
|
|
||||||
// colors
|
// 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 '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')
|
@inject('commonStore', 'ballotsStore', 'ballotStore', 'contractsStore')
|
||||||
@observer
|
@observer
|
||||||
|
@ -13,7 +15,6 @@ export class Ballots extends React.Component {
|
||||||
this.limit = this.props.commonStore.loadMoreLimit
|
this.limit = this.props.commonStore.loadMoreLimit
|
||||||
this.step = this.limit
|
this.step = this.limit
|
||||||
this.onClick = this.onClick.bind(this)
|
this.onClick = this.onClick.bind(this)
|
||||||
this.networkBranch = this.props.networkBranch
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onClick = async () => {
|
onClick = async () => {
|
||||||
|
@ -138,6 +139,12 @@ export class Ballots extends React.Component {
|
||||||
commonStore.isToFinalizeFilter = this.props.isToFinalizeFilter
|
commonStore.isToFinalizeFilter = this.props.isToFinalizeFilter
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getVotingNetworkBranch = () => {
|
||||||
|
const { contractsStore } = this.props
|
||||||
|
|
||||||
|
return contractsStore.netId ? getNetworkBranch(contractsStore.netId) : null
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { ballotsStore, commonStore } = this.props
|
const { ballotsStore, commonStore } = this.props
|
||||||
|
|
||||||
|
@ -149,18 +156,12 @@ export class Ballots extends React.Component {
|
||||||
ballotCards = this.filterBySearchTerm(commonStore.searchTerm, ballotCards)
|
ballotCards = this.filterBySearchTerm(commonStore.searchTerm, ballotCards)
|
||||||
}
|
}
|
||||||
|
|
||||||
let loadMoreButton
|
let loadMore = null
|
||||||
|
|
||||||
if (ballotCards.length > this.limit && !commonStore.isActiveFilter && !commonStore.isToFinalizeFilter) {
|
if (ballotCards.length > this.limit && !commonStore.isActiveFilter && !commonStore.isToFinalizeFilter) {
|
||||||
loadMoreButton = (
|
loadMore = (
|
||||||
<div className="center">
|
<div className="sw-LoadMore">
|
||||||
<button
|
<ButtonLoadMore networkBranch={this.getVotingNetworkBranch()} onClick={e => this.onClick(e)} />
|
||||||
type="button"
|
|
||||||
className="btn btn-transparent btn-load-more text-capitalize"
|
|
||||||
onClick={e => this.onClick(e)}
|
|
||||||
>
|
|
||||||
Load More Ballots
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -170,7 +171,7 @@ export class Ballots extends React.Component {
|
||||||
return (
|
return (
|
||||||
<section className="sw-Ballots">
|
<section className="sw-Ballots">
|
||||||
{ballotCards}
|
{ballotCards}
|
||||||
{loadMoreButton}
|
{loadMore}
|
||||||
</section>
|
</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