Agregada responsividad basica.

src/App.vue

@@ -1,8 +1,19 @@
 <template lang="pug">
     div.contenedor
+        template(v-if="ancho > 500")
             barra-lateral
             div.der(:style="'max-height: ' + alto + 'px;'")
                 router-view
+        template(v-else)
+            br
+            div
+                h1 Horarios UNSA
+                p Parece que estás usando un celular.
+                p Rota tu celular para poder usar el sistema de horarios.
+                p.
+                    Recomendamos un computador o laptop para obtener
+                    el funcionamiento completo.
+
 
     //
 </template>
@@ -13,8 +24,9 @@
     export default
         name: "App"
         components: { barraLateral }
-        data: ->
+        computed:
-            alto: window.innerHeight
+            alto: -> @$store.state.altoPantalla
+            ancho: -> @$store.state.anchoPantalla
 
 #
 </script>
@@ -33,5 +45,15 @@
         overflow-x: hidden
 
 
+    @media only screen and (max-width: 1370px)
+        .contenedor
+            grid-template-columns: 200px auto
+
+
+    @media only screen and (max-width: 1000px)
+        .contenedor
+            grid-template-columns: 1.75rem auto
+
+
 //
 </style>

src/components/App/barra-lateral.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
-    div.lateral(:style="'min-height: ' + alto + 'px;'")
+    div.lateral(:style="'height: ' + alto + 'px;'")
+        div.mostrar-bajo-1000.boton-lateral(:style="'height: ' + alto + 'px;'")
+            div »
+        div.barra
             h1 Horarios UNSA
             br
             br
@@ -22,19 +25,39 @@
     export default
         name: "barra-lateral"
         components: { modoColor }
-        data: ->
+        computed:
-            alto: window.innerHeight
+            alto: -> @$store.state.altoPantalla
     
 #
 </script>
 
 <style scoped lang="sass">
 
+    .boton-lateral
+        position: absolute
+        left: 0
+        top: 0
+        display: table
+        font-size: 2.5rem
+        width: 1.75rem
+
+        div
+            display: table-cell
+            vertical-align: middle
+
+
+    .barra
+        position: absolute
+        right: 2rem
+
+
+
     .lateral
         display: block
         position: relative
         top: 0
         box-shadow: 2px 0 10px 0 lightgray
+        overflow-y: scroll
 
     h1
         text-align: center

src/components/Inicio/tabla-horarios.vue

@@ -6,7 +6,9 @@
                 td(v-for="dia in dias") {{ dia }}
         tbody
             tr(v-for="hora in horas")
-                td {{ hora }}
+                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"
@@ -69,5 +71,12 @@
                 width: 8rem
 
 
+
+    @media only screen and (max-width: 700px)
+        .ocultar-en-movil
+            display: none
+
+
+
 //
 </style>

src/components/Inicio/tablaHorarios/celda-curso.vue

@@ -56,7 +56,6 @@
             quitarResaltadoGrupo: ->
                 removerResaltadoGrupo @nombreAño, @cursoAbreviado, @nombreGrupo, @esLab
             toggleActivo: ->
-                console.log "Toggling... ´#{@claseCursoGeneral}´"
                 activarGrupoCursoStr @claseCursoGeneral
 
 
@@ -65,6 +64,11 @@
 
 <style lang="sass">
 
+    .celda
+        display: inline-block
+
+
+
     .elementoOpaco
         opacity: 0.3
 

src/sass/Global.sass

@@ -49,3 +49,13 @@ $duracionTransicion: 100ms
   background-color: var(--colorLab)
   color: white
 
+
+
+@media only screen and (min-width: 777px)
+  .mostrar-en-tablet
+    display: none !important
+
+
+@media only screen and (min-width: 1001px)
+  .mostrar-bajo-1000
+    display: none !important

src/store/index.js

@@ -3,10 +3,12 @@ import Vuex from 'vuex';
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
+const store = new Vuex.Store({
     state: {
         celdas: {},
-        horarioUsuario: {}
+        horarioUsuario: {},
+        anchoPantalla: window.innerWidth,
+        altoPantalla: window.innerHeight
     },
     mutations: {
         registrarCelda(state, idCelda) {
@@ -28,9 +30,19 @@ export default new Vuex.Store({
         removerCursoMiHorario(state, nombre) {
             delete state.horarioUsuario[nombre];
             state.horarioUsuario = Object.assign({}, state.horarioUsuario);
+        },
+        registrarListenerTamanoPantalla(state) {
+            window.addEventListener("resize", (ev) => {
+                state.anchoPantalla = window.innerWidth;
+                state.altoPantalla  = window.innerHeight
+            });
         }
     },
     actions: {
 
     }
 });
+
+store.commit("registrarListenerTamanoPantalla");
+
+export default store;