Fix speakers rendering
This commit is contained in:
parent
6fb3d5f8ba
commit
e7f25a860d
|
@ -35,7 +35,7 @@ export default function Schedule({
|
|||
return (<>
|
||||
{isLoading && <>Loading... <progress value={loadingProgress} /></>}
|
||||
<div className="schedule">
|
||||
{header && <>
|
||||
{header && rows && <>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -98,25 +98,28 @@ export default function Schedule({
|
|||
</section>)}
|
||||
{speakers && <>
|
||||
<div className="grid members">
|
||||
{Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId} className="col4 member">
|
||||
{Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId} className="col4 wmember">
|
||||
<a href={'#'.concat(getSpeakerName(speaker))}>
|
||||
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)} />
|
||||
</a>
|
||||
</div>)}
|
||||
</div>
|
||||
{Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId} id={getSpeakerName(speaker)}>
|
||||
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)}/>
|
||||
<h3>{getSpeakerName(speaker)}</h3>
|
||||
<div>
|
||||
{speaker.twitter && <a href={'https://twitter.com/'.concat(speaker.twitter)}>
|
||||
twitter
|
||||
</a>}
|
||||
{speaker.github && <a href={'https://github.com/'.concat(speaker.github)}>
|
||||
github
|
||||
</a>}
|
||||
{Object.entries(speakers).map(([speakerId, speaker]) => <Fragment key={speakerId}>
|
||||
<div className="speaker" id={getSpeakerName(speaker)}>
|
||||
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)}/>
|
||||
<h3>{getSpeakerName(speaker)}</h3>
|
||||
<div className="icons">
|
||||
{speaker.twitter && <a href={'https://twitter.com/'.concat(speaker.twitter)}>
|
||||
<i className="fa fa-twitter" />
|
||||
</a>}
|
||||
{speaker.github && <a href={'https://github.com/'.concat(speaker.github)}>
|
||||
<i className="fa fa-github"/>
|
||||
</a>}
|
||||
</div>
|
||||
<p>{speaker.biography}</p>
|
||||
</div>
|
||||
<p>{speaker.biography}</p>
|
||||
</div>)}
|
||||
<div className="separator" />
|
||||
</Fragment>)}
|
||||
</>}
|
||||
</div>
|
||||
</>);
|
||||
|
|
|
@ -195,4 +195,39 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.speaker {
|
||||
position: relative;
|
||||
margin: 0 0 2em 0;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
|
||||
> img {
|
||||
float: left;
|
||||
padding: 0.3em;
|
||||
background: #FFF;
|
||||
box-shadow: 0 0 1px 1px #999;
|
||||
margin: 0 1em 2em 0;
|
||||
}
|
||||
|
||||
.icons {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin: 0 0 0 0.1em;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 0 0.3em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 0.4em 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue