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 @@
Horarios UNSA
+
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 @@
- 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 @@
- 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" }}
//
@@ -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 @@