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>
|
||||
|
||||
<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>
|
||||
|
||||
14
src/App.vue
14
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
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<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
|
||||
template(v-if="!barraOculta")
|
||||
h1 Horarios UNSA
|
||||
br
|
||||
br
|
||||
@ -49,9 +50,9 @@
|
||||
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.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
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user