From e7f25a860d6c10e0809c197c9ff74816be4d972a Mon Sep 17 00:00:00 2001
From: Vencislav Atanasov <git@6bez10.info>
Date: Sat, 21 Sep 2024 23:48:58 +0300
Subject: [PATCH] Fix speakers rendering

---
 src/Schedule.jsx  | 31 +++++++++++++++++--------------
 src/Schedule.scss | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/src/Schedule.jsx b/src/Schedule.jsx
index c2da344..19ccfa8 100644
--- a/src/Schedule.jsx
+++ b/src/Schedule.jsx
@@ -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>
     </>);
diff --git a/src/Schedule.scss b/src/Schedule.scss
index 4ccf4ba..8e3350e 100644
--- a/src/Schedule.scss
+++ b/src/Schedule.scss
@@ -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;
+    }
+  }
 }