Merge pull request #153 from grant-project/tabs-min-height
Minimum tab heights on proposals and profiles.
This commit is contained in:
commit
d468f9e287
|
@ -113,74 +113,80 @@ class Profile extends React.Component<Props, State> {
|
|||
render={() => <ProfileEdit user={user} />}
|
||||
/>
|
||||
</Switch>
|
||||
<LinkableTabs defaultActiveKey="pending">
|
||||
{isAuthedUser && (
|
||||
<Tabs.TabPane
|
||||
tab={TabTitle('Pending', pendingProposals.length)}
|
||||
key="pending"
|
||||
>
|
||||
<div className="Profile-tabs">
|
||||
<LinkableTabs defaultActiveKey="pending">
|
||||
{isAuthedUser && (
|
||||
<Tabs.TabPane
|
||||
tab={TabTitle('Pending', pendingProposals.length)}
|
||||
key="pending"
|
||||
>
|
||||
<div>
|
||||
{nonePending && (
|
||||
<Placeholder
|
||||
title="No pending proposals"
|
||||
subtitle="You do not have any proposals awaiting approval."
|
||||
/>
|
||||
)}
|
||||
<ProfilePendingList proposals={pendingProposals} />
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
)}
|
||||
<Tabs.TabPane tab={TabTitle('Created', proposals.length)} key="created">
|
||||
<div>
|
||||
{nonePending && (
|
||||
<Placeholder
|
||||
title="No pending proposals"
|
||||
subtitle="You do not have any proposals awaiting approval."
|
||||
/>
|
||||
{noneCreated && (
|
||||
<Placeholder subtitle="Has not created any proposals yet" />
|
||||
)}
|
||||
<ProfilePendingList proposals={pendingProposals} />
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
)}
|
||||
<Tabs.TabPane tab={TabTitle('Created', proposals.length)} key="created">
|
||||
<div>
|
||||
{noneCreated && (
|
||||
<Placeholder subtitle="Has not created any proposals yet" />
|
||||
)}
|
||||
{proposals.map(p => (
|
||||
<ProfileProposal key={p.proposalId} proposal={p} />
|
||||
))}
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={TabTitle('Funded', contributions.length)} key="funded">
|
||||
<div>
|
||||
{noneFunded && <Placeholder subtitle="Has not funded any proposals yet" />}
|
||||
{contributions.map(c => (
|
||||
<ProfileContribution
|
||||
key={c.id}
|
||||
userId={user.userid}
|
||||
contribution={c}
|
||||
showSendInstructions={this.openContributionModal}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={TabTitle('Comments', comments.length)} key="comments">
|
||||
<div>
|
||||
{noneCommented && <Placeholder subtitle="Has not made any comments yet" />}
|
||||
{comments.map(c => (
|
||||
<ProfileComment key={c.id} userName={user.displayName} comment={c} />
|
||||
))}
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
{isAuthedUser && (
|
||||
<Tabs.TabPane
|
||||
tab={TabTitle('Invites', invites.length)}
|
||||
key="invites"
|
||||
disabled={!user.hasFetchedInvites}
|
||||
>
|
||||
<div>
|
||||
{noneInvites && (
|
||||
<Placeholder
|
||||
title="No invites here!"
|
||||
subtitle="You’ll be notified when you’ve been invited to join a proposal"
|
||||
/>
|
||||
)}
|
||||
{invites.map(invite => (
|
||||
<ProfileInvite key={invite.id} userId={user.userid} invite={invite} />
|
||||
{proposals.map(p => (
|
||||
<ProfileProposal key={p.proposalId} proposal={p} />
|
||||
))}
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
)}
|
||||
</LinkableTabs>
|
||||
<Tabs.TabPane tab={TabTitle('Funded', contributions.length)} key="funded">
|
||||
<div>
|
||||
{noneFunded && (
|
||||
<Placeholder subtitle="Has not funded any proposals yet" />
|
||||
)}
|
||||
{contributions.map(c => (
|
||||
<ProfileContribution
|
||||
key={c.id}
|
||||
userId={user.userid}
|
||||
contribution={c}
|
||||
showSendInstructions={this.openContributionModal}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={TabTitle('Comments', comments.length)} key="comments">
|
||||
<div>
|
||||
{noneCommented && (
|
||||
<Placeholder subtitle="Has not made any comments yet" />
|
||||
)}
|
||||
{comments.map(c => (
|
||||
<ProfileComment key={c.id} userName={user.displayName} comment={c} />
|
||||
))}
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
{isAuthedUser && (
|
||||
<Tabs.TabPane
|
||||
tab={TabTitle('Invites', invites.length)}
|
||||
key="invites"
|
||||
disabled={!user.hasFetchedInvites}
|
||||
>
|
||||
<div>
|
||||
{noneInvites && (
|
||||
<Placeholder
|
||||
title="No invites here!"
|
||||
subtitle="You’ll be notified when you’ve been invited to join a proposal"
|
||||
/>
|
||||
)}
|
||||
{invites.map(invite => (
|
||||
<ProfileInvite key={invite.id} userId={user.userid} invite={invite} />
|
||||
))}
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
)}
|
||||
</LinkableTabs>
|
||||
</div>
|
||||
|
||||
<ContributionModal
|
||||
isVisible={!!activeContribution}
|
||||
|
|
|
@ -4,6 +4,10 @@
|
|||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
&-tabs {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
& .ant-tabs-nav .ant-tabs-tab {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
|
|
@ -212,4 +212,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -243,22 +243,24 @@ export class ProposalDetail extends React.Component<Props, State> {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<LinkableTabs scrollToTabs defaultActiveKey="milestones">
|
||||
<Tabs.TabPane tab="Milestones" key="milestones">
|
||||
<div style={{ marginTop: '1.5rem', padding: '0 2rem' }}>
|
||||
<Milestones proposal={proposal} />
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="Discussion" key="discussions" disabled={!isLive}>
|
||||
<CommentsTab proposalId={proposal.proposalId} />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="Updates" key="updates" disabled={!isLive}>
|
||||
<UpdatesTab proposalId={proposal.proposalId} />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="Contributors" key="contributors" disabled={!isLive}>
|
||||
<ContributorsTab proposalId={proposal.proposalId} />
|
||||
</Tabs.TabPane>
|
||||
</LinkableTabs>
|
||||
<div className="Proposal-bottom">
|
||||
<LinkableTabs scrollToTabs defaultActiveKey="milestones">
|
||||
<Tabs.TabPane tab="Milestones" key="milestones">
|
||||
<div style={{ marginTop: '1.5rem', padding: '0 2rem' }}>
|
||||
<Milestones proposal={proposal} />
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="Discussion" key="discussions" disabled={!isLive}>
|
||||
<CommentsTab proposalId={proposal.proposalId} />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="Updates" key="updates" disabled={!isLive}>
|
||||
<UpdatesTab proposalId={proposal.proposalId} />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="Contributors" key="contributors" disabled={!isLive}>
|
||||
<ContributorsTab proposalId={proposal.proposalId} />
|
||||
</Tabs.TabPane>
|
||||
</LinkableTabs>
|
||||
</div>
|
||||
|
||||
{isTrustee && (
|
||||
<>
|
||||
|
|
Loading…
Reference in New Issue