Site
/
schedule
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/Schedule.jsx
View File

@ -35,7 +35,7 @@ export default function Schedule({
return (<> return (<>
{isLoading && <>Loading... <progress value={loadingProgress} /></>} {isLoading && <>Loading... <progress value={loadingProgress} /></>}
<div className="schedule"> <div className="schedule">
{header && <> {header && rows && <>
<table> <table>
<thead> <thead>
<tr> <tr>
@ -98,25 +98,28 @@ export default function Schedule({
</section>)} </section>)}
{speakers && <> {speakers && <>
<div className="grid members"> <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))}> <a href={'#'.concat(getSpeakerName(speaker))}>
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)} /> <img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)} />
</a> </a>
</div>)} </div>)}
</div> </div>
{Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId} id={getSpeakerName(speaker)}> {Object.entries(speakers).map(([speakerId, speaker]) => <Fragment key={speakerId}>
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)}/> <div className="speaker" id={getSpeakerName(speaker)}>
<h3>{getSpeakerName(speaker)}</h3> <img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)}/>
<div> <h3>{getSpeakerName(speaker)}</h3>
{speaker.twitter && <a href={'https://twitter.com/'.concat(speaker.twitter)}> <div className="icons">
twitter {speaker.twitter && <a href={'https://twitter.com/'.concat(speaker.twitter)}>
</a>} <i className="fa fa-twitter" />
{speaker.github && <a href={'https://github.com/'.concat(speaker.github)}> </a>}
github {speaker.github && <a href={'https://github.com/'.concat(speaker.github)}>
</a>} <i className="fa fa-github"/>
</a>}
</div>
<p>{speaker.biography}</p>
</div> </div>
<p>{speaker.biography}</p> <div className="separator" />
</div>)} </Fragment>)}
</>} </>}
</div> </div>
</>); </>);

35
src/Schedule.scss
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;
}
}
} }