Agregada responsividad basica.
Araozu
parent
927435f123
commit
ae492f6476
32
src/App.vue
32
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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue