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