fix cronograma, responsivo

Author: pablolirag

assets/css/main.css

@@ -81,7 +81,7 @@
 
 
 
-/* Estilos para la sección de Cronograma */
+/* Estilos para la sección de Cronograma 
 #cronograma {
     background-color: #f8f9fa;
     padding: 3rem 0;
@@ -113,6 +113,7 @@
 #cronograma .social-icons .bi:hover {
     color: #007bff;
 }
+*/
 
 
 /* Estilos para la sección de Ubicación */
@@ -278,3 +279,4 @@
 
     }
 }
+

assets/css/schedule.css

@@ -1,73 +1,99 @@
-table#schedule {
-     text-align: left;
-     font-size: 20px;
-     margin: 0px 4%;
+/* Estilos para la sección de Cronograma */
+#cronograma {
+    background-color: #f8f9fa;
+    padding: 3rem 0;
 }
 
-table#schedule th, table#schedule td {
-     border: solid 12px rgb(248, 249, 250);
-     padding: 20px;
+#cronograma h2 {
+    font-size: 2.5rem;
+    color: #343a40;
+    margin-bottom: 2rem;
+}
+
+#schedule {
+    width: 100%;
+    margin: 0 auto;
+    border-collapse: collapse;
+}
+
+#schedule th, #schedule td {
+    padding: 1rem;
+    border: 1px solid #ddd;
+    text-align: left;
 }
 
 #schedule th {
-     font-size: 24px;
+    background-color: #343a40;
+    color: #fff;
+    font-weight: bold;
 }
 
-#schedule td.content {
-     display: flex;
+#schedule tbody tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+.photo-speaker-container {
+    display: flex;
+    align-items: center;
 }
 
 .photo-speaker {
-     vertical-align: top;
-     align-items: left;
-     height: 60px;
-     border-radius: 50px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 0.5rem;
+    object-fit: cover;
 }
 
 .event {
-     display: inline-block;
-     margin-left: 8px;
-     max-width: 80%;
+    margin-left: 1rem;
+}
+
+.event .title {
+    font-size: 1.25rem;
+    font-weight: bold;
+    color: #343a40;
 }
 
-.title {
-     font-weight: bold;
+.event .author {
+    margin-top: 0.5rem;
+    color: #6c757d;
 }
 
-.author {
-     color: #888;
-     font-weight: bold;
-     font-style: italic;
+.event .category {
+    margin-top: 0.5rem;
+   
+    font-style: italic;
 }
 
 .level, .category {
-     color: black;
-     padding: 2px 6px;
-     border-radius: 15px;
-     display: inline-block;
+    color: black;
+    padding: 2px 6px;
+    border-radius: 15px;
+    display: inline-block;
 }
 
 .level.Básico {
-     background: green;
+    background: green;
 }
 
 .level.Intermedio {
-     background: yellow;
+    background: yellow;
 }
 
 .level.Avanzado {
-     background: red;
+    background: red;
 }
 
 .category.Data {
-     background: orange;
+    background: orange;
 }
 
 .category.Web {
-     background: cyan;
+    background: cyan;
 }
 
 .category.Auto {
-     background: #808;
-     color: white;
+    background: #808;
+    color: white;
 }

assets/js/copiapo/schedule.js

@@ -115,11 +115,18 @@ export default () => {
         blockCell.innerHTML = obj.block;
         const eventCell = row.insertCell();
         eventCell.className = "content"
+
         const profileDiv = document.createElement("div");
+        profileDiv.className = "d-flex align-items-center";
+
         const photosDiv = document.createElement("div");
+        photosDiv.className = "photo-speaker-container";
+
         const mediaDiv = document.createElement("div");
+
         const eventDiv = document.createElement("div");
-        eventDiv.className='event';
+        eventDiv.className = 'event ml-3';
+        
         obj.photos.forEach(photo => {
             const img = document.createElement('img')
             img.className='photo-speaker';
@@ -170,7 +177,8 @@ export default () => {
             })
         profileDiv.appendChild(photosDiv)
         profileDiv.appendChild(mediaDiv)
+        profileDiv.appendChild(eventDiv)
         eventCell.appendChild(profileDiv)
-        eventCell.appendChild(eventDiv)
+        
     })
 }

assets/sections/copiapo/schedule.html

@@ -1,10 +1,19 @@
-<table class="container" id="schedule"/>
-    <thead >
-        <tr>
-            <th>Módulo</th>
-            <th>Evento</th>
-        </tr>
-    </thead>
-    <tbody>
-    </tbody>
-</table>
+
+<!-- Sección de Cronograma -->
+<section class="py-5" id="cronograma">
+    <div class="container">
+        <h2 class="text-center mb-4">Cronograma</h2>
+        <table id="schedule" class="table table-striped">
+            <thead>
+                <tr>
+                    <th>Módulo</th>
+                    <th>Evento</th>
+                </tr>
+            </thead>
+            <tbody>
+
+            </tbody>
+        </table>
+    </div>
+</section>
+