Feature(map): change caret when open
parent
a61088c6be
commit
e1e6997bf4
|
@ -219,8 +219,7 @@
|
|||
> h3 {
|
||||
padding-left: 40px;
|
||||
padding-bottom: 10px;
|
||||
display:block;
|
||||
max-width: 535px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -257,13 +256,11 @@
|
|||
.challenge-block-time {
|
||||
font-size: 18px;
|
||||
color: #BBBBBB;
|
||||
display:block;
|
||||
margin-left: 40px;
|
||||
margin-bottom: 20px;
|
||||
@media (min-width: 721px) {
|
||||
margin-right: 20px;
|
||||
margin-top:-30px;
|
||||
float:right;
|
||||
// margin-right: 20px;
|
||||
// margin-top: -30px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -45,6 +45,23 @@ export class Block extends PureComponent {
|
|||
this.props.toggleThisPanel(eventKey);
|
||||
}
|
||||
|
||||
renderHeader(isOpen, title, time, isCompleted) {
|
||||
return (
|
||||
<div>
|
||||
<h3 className={ isCompleted ? 'faded clear-fix' : 'clear-fix' }>
|
||||
<FA
|
||||
className='no-link-underline'
|
||||
name={ isOpen ? 'caret-down' : 'caret-right' }
|
||||
/>
|
||||
<span>
|
||||
{ title }
|
||||
</span>
|
||||
<span className='challenge-block-time'>({ time })</span>
|
||||
</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderChallenges(challenges) {
|
||||
if (!Array.isArray(challenges) || !challenges.length) {
|
||||
return <div>No Challenges Found</div>;
|
||||
|
@ -71,12 +88,7 @@ export class Block extends PureComponent {
|
|||
collapsible={ true }
|
||||
eventKey={ dashedName || title }
|
||||
expanded={ isOpen }
|
||||
header={
|
||||
<div>
|
||||
<h3><FA name='caret-right' />{ title }</h3>
|
||||
<span className='challenge-block-time'>({ time })</span>
|
||||
</div>
|
||||
}
|
||||
header={ this.renderHeader(isOpen, title, time) }
|
||||
id={ title }
|
||||
key={ title }
|
||||
onSelect={ this.handleSelect }
|
||||
|
|
|
@ -62,6 +62,18 @@ export class SuperBlock extends PureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
renderHeader(isOpen, title, isCompleted) {
|
||||
return (
|
||||
<h2 className={ isCompleted ? 'faded' : '' }>
|
||||
<FA
|
||||
className='no-link-underline'
|
||||
name={ isOpen ? 'caret-down' : 'caret-right' }
|
||||
/>
|
||||
{ title }
|
||||
</h2>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
title,
|
||||
|
@ -76,7 +88,7 @@ export class SuperBlock extends PureComponent {
|
|||
collapsible={ true }
|
||||
eventKey={ dashedName || title }
|
||||
expanded={ isOpen }
|
||||
header={ <h2><FA name='caret-right' />{ title }</h2> }
|
||||
header={ this.renderHeader(isOpen, title) }
|
||||
id={ title }
|
||||
key={ dashedName || title }
|
||||
onSelect={ this.handleSelect }
|
||||
|
|
Loading…
Reference in New Issue