From 16927e6bc999276e3f400b2737136b27da73388a Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Tue, 11 Aug 2020 20:07:08 -0500
Subject: [PATCH] Reemplazada la tabla de los horarios por divs para permitir
 columnas con un ancho consistente

---
 src/components/Inicio/tabla-horarios.vue      | 56 +++++++++----------
 src/components/Inicio/tablaHorarios/celda.vue |  2 +-
 2 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/components/Inicio/tabla-horarios.vue b/src/components/Inicio/tabla-horarios.vue
index 2e48f58..8e50c9d 100644
--- a/src/components/Inicio/tabla-horarios.vue
+++ b/src/components/Inicio/tabla-horarios.vue
@@ -1,20 +1,21 @@
 <template lang="pug">
-table.tabla_horario(border="1")
-    thead
-        tr
-            td Hora
-            td(v-for="dia in dias") {{ dia }}
-    tbody
-        template(v-for="hora in horas")
-            tr.fila(v-show="!(horasDescanso.find(x => x === hora)) || $store.state.mostrarDescansos")
-                td
-                    span {{ hora.substring(0, 5) }}
-                    span.ocultar-en-movil {{ hora.substr(5) }}
-                celda(v-for="(dia, i) in dias" :key="i"
-                    :dia="dia"
-                    :hora="hora"
-                    :nombreAño="nombreAño"
-                    :nombreStore="nombreStore")
+div
+    div.contenedor_horario
+        div.cabeza
+            div.fila-d
+                div Hora
+                div(v-for="dia in dias") {{ dia }}
+        div.cuerpo
+            template(v-for="hora in horas")
+                div.fila-d(v-show="!(horasDescanso.find(x => x === hora)) || $store.state.mostrarDescansos")
+                    div
+                        span {{ hora.substring(0, 5) }}
+                        span.ocultar-en-movil {{ hora.substr(5) }}
+                    celda(v-for="(dia, i) in dias" :key="i"
+                        :dia="dia"
+                        :hora="hora"
+                        :nombreAño="nombreAño"
+                        :nombreStore="nombreStore")
 
 //
 </template>
@@ -77,23 +78,18 @@ table.tabla_horario(border="1")
 
 <style scoped lang="sass">
 
-    .fila:hover
-        background-color: var(--colorFondoFila)
-
-
-    .tabla_horario
-        width: 100%
-        border-color: var(--colorBorde) // rgba(135, 135, 135, 0.51)
-        border: none
-        tr
-            vertical-align: middle
-            text-align: center
-            td:first-child
-                width: 8rem
-        td
+    .fila-d
+        display: grid
+        grid-template-columns: 7rem repeat(5, calc((100% - 7rem) / 5))
+        text-align: center
+        div
             border: solid 1px var(--colorBorde)
 
 
+    .fila-d:hover
+        background-color: var(--colorFondoFila)
+
+
     @media only screen and (max-width: 700px)
         .ocultar-en-movil
             display: none
diff --git a/src/components/Inicio/tablaHorarios/celda.vue b/src/components/Inicio/tablaHorarios/celda.vue
index 6b33ba3..62bb638 100644
--- a/src/components/Inicio/tablaHorarios/celda.vue
+++ b/src/components/Inicio/tablaHorarios/celda.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-td(:class="clases")
+div(:class="clases")
     celda-curso(v-for="(datos, i) in datosCeldas" :key="i" :datos="datos" :nombreAño="nombreAño")
 
 //