Fix speakers rendering

This commit is contained in:
Vencislav Atanasov 2024-09-21 23:48:58 +03:00
parent 6fb3d5f8ba
commit e7f25a860d
2 changed files with 52 additions and 14 deletions

View File

@ -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>
</>);

View File

@ -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;
}
}
}