Add media icons on table schedule and change design

Author: Aldo Caneo

assets/css/base.css

@@ -1,13 +1,12 @@
 body {
+    background: rgb(248, 249, 250);
     text-align: center;
-    //background: linear-gradient(135deg, #008, #888, #800);
-    background:linear-gradient(135deg, blue, white, red);
-    color: white;
     font-size:24px;
 }
 
 table {
     width: 100%;
+    background: white;
 }
 
 th, td {

assets/css/schedule.css

@@ -1,17 +1,22 @@
 table#schedule {
      text-align: left;
      font-size: 20px;
+     margin: 0px 4%;
 }
 
 table#schedule th, table#schedule td {
-     border: 1px solid lightgray;
+     border: solid 12px rgb(248, 249, 250);
      padding: 20px;
 }
 
 #schedule th {
      font-size: 24px;
 }
 
+#schedule td.content {
+     display: flex;
+}
+
 .photo-speaker {
      vertical-align: top;
      align-items: left;
@@ -30,7 +35,7 @@ table#schedule th, table#schedule td {
 }
 
 .author {
-     color: cyan;
+     color: #888;
      font-weight: bold;
      font-style: italic;
 }
@@ -45,9 +50,11 @@ table#schedule th, table#schedule td {
 .level.Básico {
      background: green;
 }
+
 .level.Intermedio {
      background: yellow;
 }
+
 .level.Avanzado {
      background: red;
 }
@@ -61,5 +68,6 @@ table#schedule th, table#schedule td {
 }
 
 .category.Auto {
-     background: magenta;
+     background: #808;
+     color: white;
 }

assets/js/copiapo/schedule.js

@@ -65,7 +65,7 @@ export default () => {
         author: 'Andrés Ibañez',
         title: 'Ciencia de datos y python',
         photos: ['Andres_Ibanez.jpeg'],
-        category: 'Datos'},
+        category: 'Data'},
     {
         block: '11:55 - 12:10',
         author: 'Eduardo Espinoza Norambuena',
@@ -114,14 +114,18 @@ export default () => {
         const blockCell = row.insertCell();
         blockCell.innerHTML = obj.block;
         const eventCell = row.insertCell();
+        eventCell.className = "content"
+        const profileDiv = document.createElement("div");
+        const photosDiv = document.createElement("div");
+        const mediaDiv = document.createElement("div");
+        const eventDiv = document.createElement("div");
+        eventDiv.className='event';
         obj.photos.forEach(photo => {
             const img = document.createElement('img')
             img.className='photo-speaker';
             img.src= 'assets/speakers/copiapo/'+ photo;
-            eventCell.appendChild(img)
+            photosDiv.appendChild(img)
         });
-        const eventDiv = document.createElement("div");
-        eventDiv.className='event'
         const titleDiv = document.createElement("div");
         titleDiv.className = 'title';
         titleDiv.innerHTML = obj.title;
@@ -142,6 +146,31 @@ export default () => {
             categoryDiv.innerHTML = obj.category;
             eventDiv.appendChild(categoryDiv);
         }
+        let link, icon
+        const urls = {
+            github: 'https://github.com/',
+            facebook: 'https://www.facebook.com/',
+            instagram: 'https://www.instagram.com/',
+            youtube: 'https://www.youtube.com/',
+            twitter: 'https://x.com/',
+            linkedin: 'https://www.linkedin.com/',
+            twitch: 'https://www.twitch.com/',
+            discord: 'https://discord.gg/',
+        }
+        Object.keys(urls).forEach(key=>{
+            if (key in obj){
+                link = document.createElement("a");
+                link.href = `${urls[key]}${obj[key]}`;
+                link.target = '_blank'
+                icon = document.createElement("i");
+                icon.className = `bi bi-${key}`
+                link.appendChild(icon);
+                mediaDiv.appendChild(link);
+            }
+            })
+        profileDiv.appendChild(photosDiv)
+        profileDiv.appendChild(mediaDiv)
+        eventCell.appendChild(profileDiv)
         eventCell.appendChild(eventDiv)
     })
 }

assets/sections/copiapo/schedule.html

@@ -1,12 +1,10 @@
-<div class="dark-background">
-    <table id="schedule"/>
-        <thead>
-            <tr>
-                <th>Módulo</th>
-                <th>Evento</th>
-            </tr>
-        </thead>
-        <tbody>
-        </tbody>
-    </table>
-</div>
+<table id="schedule"/>
+    <thead>
+        <tr>
+            <th>Módulo</th>
+            <th>Evento</th>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>

assets/sections/valparaiso/schedule.html

@@ -1,12 +1,10 @@
-<div class="dark-background">
-    <table id="schedule"/>
-        <thead>
-            <tr>
-                <th>Módulo</th>
-                <th>Evento</th>
-            </tr>
-        </thead>
-        <tbody>
-        </tbody>
-    </table>
-</div>
+<table id="schedule"/>
+    <thead>
+        <tr>
+            <th>Módulo</th>
+            <th>Evento</th>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>