From 0bc626aed4d5d68e67b0aaec459cdae94c034648 Mon Sep 17 00:00:00 2001
From: Araozu <tbyuyfcjjll@gmail.com>
Date: Tue, 2 Jun 2020 17:20:04 -0500
Subject: [PATCH] Agregada opcion de colapsar la barra lateral. Cambiados
 ciertos colores.

---
 public/index.html                        |   1 +
 src/App.vue                              |  14 ++-
 src/components/App/barra-lateral.vue     | 129 ++++++++++++++---------
 src/components/Inicio/tabla-horarios.vue |   7 +-
 src/sass/Global.sass                     |   2 +-
 src/sass/colores.sass                    |   4 +
 6 files changed, 100 insertions(+), 57 deletions(-)
diff --git a/public/index.html b/public/index.html
index 31c499b..84d5fe4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,7 @@
     <title>Horarios UNSA</title>
 
     <link href="https://fonts.googleapis.com/css?family=Roboto|Sen&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
 </head>
 <body>
diff --git a/src/App.vue b/src/App.vue
index 41f86c6..c1b0932 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
-    div.contenedor
+    div.contenedor(:style="anchoBarraLateral")
         template(v-if="ancho > 500")
-            barra-lateral
+            barra-lateral(:barraOculta="barraLateralOculta" :fnCambiarEstadoBarra="cambiarEstadoBarraLateral")
             div.der(:style="'max-height: ' + alto + 'px;'")
                 router-view
         template(v-else)
@@ -25,6 +25,8 @@
     export default
         name: "App"
         components: { barraLateral }
+        data: ->
+            barraLateralOculta: false
         computed:
             alto: -> @$store.state.altoPantalla
             ancho: -> @$store.state.anchoPantalla
@@ -32,6 +34,12 @@
             periodo: -> @$store.state.periodo
             facultad: -> @$store.state.facultad
             escuela: -> @$store.state.escuela
+            anchoBarraLateral: ->
+                if @barraLateralOculta then { gridTemplateColumns: "4rem auto" }
+                else { gridTemplateColumns: "20rem auto" }
+        methods:
+            cambiarEstadoBarraLateral: ->
+                @barraLateralOculta = !@barraLateralOculta
         created: ->
             vm = this
             resRaw = await fetch "/horarios/#{@año}_#{@periodo}_#{@facultad}_#{@escuela}.yaml"
@@ -48,7 +56,7 @@
         grid-template-columns: 20rem auto
         background-color: var(--colorFondo)
         color: var(--colorTexto)
-        transition: background-color 250ms
+        // transition: background-color 250ms
 
     .der
         position: relative
diff --git a/src/components/App/barra-lateral.vue b/src/components/App/barra-lateral.vue
index 895bf03..6790b68 100644
--- a/src/components/App/barra-lateral.vue
+++ b/src/components/App/barra-lateral.vue
@@ -1,57 +1,58 @@
 <template lang="pug">
-    div.lateral(:style="'height: ' + alto + 'px;'")
-        div.mostrar-bajo-1000.boton-lateral(:style="'height: ' + alto + 'px;'")
+    div.lateral
+        div.mostrar-bajo-1000.boton-lateral
             div »
         div.barra
-            h1 Horarios UNSA
-            br
-            br
-            p Los horarios están completos. Fuente:
-            a.link_github(href="https://drive.google.com/file/d/1DqAkbDtcVjAWhEb6YwMpFWUkXGpgeQt1/view"
-                target="_blank")
-                | Google Drive
-            br
-            br
-            v-check-box(txt="Mostrar descansos de 10m" v-model="mostrarDescansos")
-            br
-            v-check-box(txt="Tema oscuro" v-model="temaOscuro")
-            // div.info
-                p
-                    i Solo algunos horarios están implementados*
-                // p {{ año }}-{{ periodo }}
-                div
-                    select(v-model.number="añoSeleccionado")
-                        option 2018
-                        option 2019
-                        option 2020
-                    select(v-model.number="periodoSeleccionado")
-                        option 1
-                        option 2
+            template(v-if="!barraOculta")
+                h1 Horarios UNSA
+                br
+                br
+                p Los horarios están completos. Fuente:
+                a.link_github(href="https://drive.google.com/file/d/1DqAkbDtcVjAWhEb6YwMpFWUkXGpgeQt1/view"
+                    target="_blank")
+                    | Google Drive
+                br
+                br
+                v-check-box(txt="Mostrar descansos de 10m" v-model="mostrarDescansos")
+                br
+                v-check-box(txt="Tema oscuro" v-model="temaOscuro")
+                // div.info
+                    p
+                        i Solo algunos horarios están implementados*
+                    // p {{ año }}-{{ periodo }}
+                    div
+                        select(v-model.number="añoSeleccionado")
+                            option 2018
+                            option 2019
+                            option 2020
+                        select(v-model.number="periodoSeleccionado")
+                            option 1
+                            option 2
 
-                // p {{ datos.facultad? datos.facultad.nombre: facultad }}
-                div
-                    select(v-model="areaSeleccionada")
-                        option(v-for="(_, nombre) in escuelas") {{ nombre }}
+                    // p {{ datos.facultad? datos.facultad.nombre: facultad }}
+                    div
+                        select(v-model="areaSeleccionada")
+                            option(v-for="(_, nombre) in escuelas") {{ nombre }}
 
-                div
-                    select(v-model="facultadSeleccionada")
-                        option(v-for="(facultad, nombre) in escuelas[areaSeleccionada]" :value="nombre") {{ facultad.nombre }}
+                    div
+                        select(v-model="facultadSeleccionada")
+                            option(v-for="(facultad, nombre) in escuelas[areaSeleccionada]" :value="nombre") {{ facultad.nombre }}
 
-                div(v-if="escuelas[areaSeleccionada][facultadSeleccionada]")
-                    select(v-model="escuelaSeleccionada")
-                        option(v-for="(escuela, nombre) in escuelas[areaSeleccionada][facultadSeleccionada].escuelas" :value="nombre")
-                            | {{ escuela.nombre }}
+                    div(v-if="escuelas[areaSeleccionada][facultadSeleccionada]")
+                        select(v-model="escuelaSeleccionada")
+                            option(v-for="(escuela, nombre) in escuelas[areaSeleccionada][facultadSeleccionada].escuelas" :value="nombre")
+                                | {{ escuela.nombre }}
 
-                div
-                    a(:href="urlEscuela" target="_blank") Página de la escuela
-                // p {{ datos.escuela? datos.escuela.nombre: escuela }}
-            br
-            br
-            a.link_github(href="https://github.com/Araozu/horarios-unsa" target="_blank").
-                Código fuente en GitHub
-            // modo-color
-            // h2 Inicio
-            // h2 Otros
+                    div
+                        a(:href="urlEscuela" target="_blank") Página de la escuela
+                    // p {{ datos.escuela? datos.escuela.nombre: escuela }}
+                br
+                br
+                a.link_github(href="https://github.com/Araozu/horarios-unsa" target="_blank").
+                    Código fuente en GitHub
+
+            div.boton-ocultar(@click="fnCambiarEstadoBarra")
+                span.material-icons {{ barraOculta? "keyboard_arrow_right": "keyboard_arrow_left" }}
 
     //
 </template>
@@ -70,8 +71,14 @@
             areaSeleccionada: "Ingenierías"
             facultadSeleccionada: "fips"
             escuelaSeleccionada: "ingenieriadesistemas"
+        props:
+            barraOculta:
+                type: Boolean
+                required: true
+            fnCambiarEstadoBarra:
+                type: Function
+                required: true
         computed:
-            alto: -> @$store.state.altoPantalla
             año: -> @$store.state.año
             periodo: -> @$store.state.periodo
             facultad: -> @$store.state.facultad
@@ -98,6 +105,28 @@
 
 <style scoped lang="sass">
 
+    .boton-ocultar
+        position: absolute
+        bottom: 0
+        left: 0
+        width: 100%
+        height: 3rem
+        border-top: solid 1px var(--colorBorde)
+        text-align: right
+        display: inline-table
+        padding-right: 1rem
+        box-sizing: border-box
+        cursor: pointer
+        opacity: 0.6
+        &:hover
+            background-color: var(--colorHover)
+            opacity: 1
+        .material-icons
+            display: table-cell
+            vertical-align: middle
+            font-size: 2rem
+
+
     .link_github
         color: var(--colorTexto)
 
@@ -115,17 +144,17 @@
             vertical-align: middle
 
 
-
     .lateral
         display: block
         position: relative
+        height: 100vh
         top: 0
         box-shadow: 2px 0 5px 0 rgb(122, 122, 122)
         z-index: 1
         margin-right: 0.5rem
         background-color: var(--colorFondo)
         color: var(--colorTexto)
-        transition: background-color 250ms
+        // transition: background-color 250ms
 
 
     h1
diff --git a/src/components/Inicio/tabla-horarios.vue b/src/components/Inicio/tabla-horarios.vue
index daeb02a..fe1492a 100644
--- a/src/components/Inicio/tabla-horarios.vue
+++ b/src/components/Inicio/tabla-horarios.vue
@@ -73,14 +73,15 @@
 
     .tabla_horario
         width: 100%
-        border-color: rgba(135, 135, 135, 0.51)
-
+        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
+            border: solid 1px var(--colorBorde)
 
 
     @media only screen and (max-width: 700px)
diff --git a/src/sass/Global.sass b/src/sass/Global.sass
index 2fc23f8..681778e 100644
--- a/src/sass/Global.sass
+++ b/src/sass/Global.sass
@@ -45,7 +45,7 @@ $duracionTransicion: 100ms
   font-family: "JetBrains Mono", monospace
   cursor: pointer
   user-select: none
-  transition: background-color $duracionTransicion linear, color $duracionTransicion linear
+  // transition: background-color $duracionTransicion linear, color $duracionTransicion linear
 
 
 .celda__teoria
diff --git a/src/sass/colores.sass b/src/sass/colores.sass
index 09ea556..c83ce23 100644
--- a/src/sass/colores.sass
+++ b/src/sass/colores.sass
@@ -4,6 +4,8 @@
   --colorFondoFila: #162128
   --colorTeoria: #3f77f3
   --colorLab: #e4564a
+  --colorBorde: #454545
+  --colorHover: #18232b
 
 
 .tema-claro
@@ -12,5 +14,7 @@
   --colorFondoFila: #dddddd
   --colorTeoria: #2e57b1
   --colorLab: #bb2d21
+  --colorBorde: #a9a9a9
+  --colorHover: #cccccc
   .celda
     font-weight: bold
