From ae492f6476e80606a5c7af89e9c03e67cf26bdf7 Mon Sep 17 00:00:00 2001
From: Araozu <tbyuyfcjjll@gmail.com>
Date: Sat, 8 Feb 2020 09:28:28 -0500
Subject: [PATCH] Agregada responsividad basica.

---
 src/App.vue                                   | 32 +++++++++--
 src/components/App/barra-lateral.vue          | 53 +++++++++++++------
 src/components/Inicio/tabla-horarios.vue      | 11 +++-
 .../Inicio/tablaHorarios/celda-curso.vue      |  6 ++-
 src/sass/Global.sass                          | 10 ++++
 src/store/index.js                            | 16 +++++-
 6 files changed, 104 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5f5a3a6..e3a1153 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,19 @@
 <template lang="pug">
     div.contenedor
-        barra-lateral
-        div.der(:style="'max-height: ' + alto + 'px;'")
-            router-view
+        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: ->
-            alto: window.innerHeight
+        computed:
+            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>
diff --git a/src/components/App/barra-lateral.vue b/src/components/App/barra-lateral.vue
index d7e4d76..7475ab7 100644
--- a/src/components/App/barra-lateral.vue
+++ b/src/components/App/barra-lateral.vue
@@ -1,17 +1,20 @@
 <template lang="pug">
-    div.lateral(:style="'min-height: ' + alto + 'px;'")
-        h1 Horarios UNSA
-        br
-        br
-        div.info
-            p 2019-2
-            p Facultad de Producción y Servicios
-            p Escuela Profesional de Ingeniería de Sistemas
-        br
-        br
-        modo-color
-        h2 Inicio
-        h2 Otros
+    div.lateral(:style="'height: ' + alto + 'px;'")
+        div.mostrar-bajo-1000.boton-lateral(:style="'height: ' + alto + 'px;'")
+            div »
+        div.barra
+            h1 Horarios UNSA
+            br
+            br
+            div.info
+                p 2019-2
+                p Facultad de Producción y Servicios
+                p Escuela Profesional de Ingeniería de Sistemas
+            br
+            br
+            modo-color
+            h2 Inicio
+            h2 Otros
 
     //
 </template>
@@ -22,19 +25,39 @@
     export default
         name: "barra-lateral"
         components: { modoColor }
-        data: ->
-            alto: window.innerHeight
+        computed:
+            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
diff --git a/src/components/Inicio/tabla-horarios.vue b/src/components/Inicio/tabla-horarios.vue
index 0377857..3f7040c 100644
--- a/src/components/Inicio/tabla-horarios.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Inicio/tablaHorarios/celda-curso.vue b/src/components/Inicio/tablaHorarios/celda-curso.vue
index bfe4b86..553959c 100644
--- a/src/components/Inicio/tablaHorarios/celda-curso.vue
+++ b/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
 
diff --git a/src/sass/Global.sass b/src/sass/Global.sass
index 970700d..3dfde9a 100644
--- a/src/sass/Global.sass
+++ b/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
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 522c585..af0b50e 100644
--- a/src/store/index.js
+++ b/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;
\ No newline at end of file