add explainer to proposals (#76)
This commit is contained in:
parent
4702f1a752
commit
8f187ad775
|
@ -8,6 +8,7 @@ import { Input, Divider, Drawer, Icon, Button } from 'antd';
|
|||
import ProposalResults from './Results';
|
||||
import ProposalFilters from './Filters';
|
||||
import { PROPOSAL_SORT } from 'api/constants';
|
||||
import ZCFLogo from 'static/images/zcf.svg';
|
||||
import './style.less';
|
||||
|
||||
interface StateProps {
|
||||
|
@ -60,47 +61,66 @@ class Proposals extends React.Component<Props, State> {
|
|||
);
|
||||
return (
|
||||
<div className="Proposals">
|
||||
{isFiltersDrawered ? (
|
||||
<Drawer
|
||||
placement="right"
|
||||
visible={isDrawerShowing}
|
||||
onClose={this.closeFilterDrawer}
|
||||
closable={false}
|
||||
width={300}
|
||||
>
|
||||
{filtersComponent}
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={this.closeFilterDrawer}
|
||||
style={{ marginTop: '1rem' }}
|
||||
block
|
||||
>
|
||||
Done
|
||||
</Button>
|
||||
</Drawer>
|
||||
) : (
|
||||
<div className="Proposals-filters">{filtersComponent}</div>
|
||||
)}
|
||||
|
||||
<div className="Proposals-results">
|
||||
<div className="Proposals-search">
|
||||
<Input.Search
|
||||
placeholder="Search for a proposal"
|
||||
onChange={this.handleChangeSearch}
|
||||
value={this.state.searchQuery}
|
||||
size="large"
|
||||
/>
|
||||
<Button
|
||||
className="Proposals-search-filterButton"
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={this.openFilterDrawer}
|
||||
>
|
||||
<Icon type="filter" /> Filters
|
||||
</Button>
|
||||
<div className="Proposals-about">
|
||||
<div className="Proposals-about-logo">
|
||||
<ZCFLogo />
|
||||
</div>
|
||||
<div className="Proposals-about-text">
|
||||
<h2 className="Proposals-about-text-title">Zcash Foundation Proposals</h2>
|
||||
<p className="Proposals-about-text-desc">
|
||||
The Zcash Foundation accepts proposals from community members to improve the
|
||||
Zcash ecosystem. Proposals are either accepted with or without funding,
|
||||
should they be approved by the Zcash Foundation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="Proposals-content">
|
||||
{isFiltersDrawered ? (
|
||||
<Drawer
|
||||
placement="right"
|
||||
visible={isDrawerShowing}
|
||||
onClose={this.closeFilterDrawer}
|
||||
closable={false}
|
||||
width={300}
|
||||
>
|
||||
{filtersComponent}
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={this.closeFilterDrawer}
|
||||
style={{ marginTop: '1rem' }}
|
||||
block
|
||||
>
|
||||
Done
|
||||
</Button>
|
||||
</Drawer>
|
||||
) : (
|
||||
<div className="Proposals-filters">{filtersComponent}</div>
|
||||
)}
|
||||
|
||||
<div className="Proposals-results">
|
||||
<div className="Proposals-search">
|
||||
<Input.Search
|
||||
placeholder="Search for a proposal"
|
||||
onChange={this.handleChangeSearch}
|
||||
value={this.state.searchQuery}
|
||||
size="large"
|
||||
/>
|
||||
<Button
|
||||
className="Proposals-search-filterButton"
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={this.openFilterDrawer}
|
||||
>
|
||||
<Icon type="filter" /> Filters
|
||||
</Button>
|
||||
</div>
|
||||
<Divider />
|
||||
<ProposalResults
|
||||
page={this.props.page}
|
||||
onPageChange={this.handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
<Divider />
|
||||
<ProposalResults page={this.props.page} onPageChange={this.handlePageChange} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -2,7 +2,58 @@
|
|||
|
||||
.Proposals {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&-about {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
|
||||
&-logo {
|
||||
flex-shrink: 0;
|
||||
width: 140px;
|
||||
padding-right: 1.5rem;
|
||||
|
||||
margin-left: 3.5rem;
|
||||
margin-right: 4.5rem;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
margin-left: 3.5rem;
|
||||
margin-right: 5.5rem;
|
||||
}
|
||||
|
||||
@media @small-query {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
&-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-filters {
|
||||
width: 220px;
|
||||
|
|
Loading…
Reference in New Issue