fernando/horarios-v2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Agregado tema claro. Cambiado algunos estilos.

Browse Source
This commit is contained in:
Araozu 2020-04-21 07:22:23 -05:00
parent 7cd4a1747d
commit 16a30f9e64
12 changed files with 103 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Horarios UNSA</title> <title>Horarios UNSA</title>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto|Sen&display=swap" rel="stylesheet">
</head> </head>
<body> <body>

7
src/App.vue
View File

@ -45,7 +45,10 @@
.contenedor .contenedor
display: grid display: grid
grid-template-columns: 400px auto grid-template-columns: 20rem auto
background-color: var(--colorFondo)
color: var(--colorTexto)
transition: background-color 250ms
.der .der
position: relative position: relative
@ -57,7 +60,7 @@
@media only screen and (max-width: 1370px) @media only screen and (max-width: 1370px)
.contenedor .contenedor
grid-template-columns: 200px auto grid-template-columns: 16rem auto
@media only screen and (max-width: 1000px) @media only screen and (max-width: 1000px)

BIN
src/assets/jetbrains-mono/JetBrainsMono-Bold.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/jetbrains-mono/JetBrainsMono-Regular.ttf Normal file
View File

Binary file not shown.

30
src/components/App/barra-lateral.vue
View File

@ -6,8 +6,11 @@
h1 Horarios UNSA h1 Horarios UNSA
br br
br br
p Ultima actualización: 09/03/20 00:19, con los datos del sistema académico oficial. p RIP laboratorios
p Laboratorios aún no disponibles. br
v-check-box(txt="Mostrar descansos de 10m" v-model="mostrarDescansos")
br
v-check-box(txt="Tema oscuro" v-model="temaOscuro")
// div.info // div.info
p p
i Solo algunos horarios están implementados* i Solo algunos horarios están implementados*
@ -40,7 +43,7 @@
// p {{ datos.escuela? datos.escuela.nombre: escuela }} // p {{ datos.escuela? datos.escuela.nombre: escuela }}
br br
br br
a(href="https://github.com/Araozu/horarios-unsa" target="_blank" style="color: white;"). a.link_github(href="https://github.com/Araozu/horarios-unsa" target="_blank").
Código fuente en GitHub Código fuente en GitHub
// modo-color // modo-color
// h2 Inicio // h2 Inicio
@ -50,12 +53,12 @@
</template> </template>
<script lang="coffee"> <script lang="coffee">
import modoColor from "./modo-color.vue" import vCheckBox from "../v-checkbox.vue"
escuelas = require "json-loader!yaml-loader!../../assets/escuelas.yaml" escuelas = require "json-loader!yaml-loader!../../assets/escuelas.yaml"
export default export default
name: "barra-lateral" name: "barra-lateral"
components: { modoColor } components: { vCheckBox }
data: -> data: ->
escuelas: escuelas escuelas: escuelas
añoSeleccionado: 2018 añoSeleccionado: 2018
@ -72,6 +75,16 @@
datos: -> @$store.state.datos datos: -> @$store.state.datos
urlEscuela: -> urlEscuela: ->
"http://" + @facultadSeleccionada + ".unsa.edu.pe/" + @escuelaSeleccionada + "/" "http://" + @facultadSeleccionada + ".unsa.edu.pe/" + @escuelaSeleccionada + "/"
mostrarDescansos:
get: -> @$store.state.mostrarDescansos
set: (value) -> @$store.commit "cambiarMostrarDescansos", value
temaOscuro:
get: -> @$store.state.color == "oscuro"
set: (value) ->
@$store.commit "cambiarColor",
if value == true then "oscuro"
else "claro"
watch: watch:
escuelaSeleccionada: (n) -> escuelaSeleccionada: (n) ->
console.log "Cambiado a #{n}" console.log "Cambiado a #{n}"
@ -81,6 +94,10 @@
<style scoped lang="sass"> <style scoped lang="sass">
.link_github
color: var(--colorTexto)
.boton-lateral .boton-lateral
position: absolute position: absolute
left: 0 left: 0
@ -102,6 +119,9 @@
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)
color: var(--colorTexto)
transition: background-color 250ms
h1 h1

29
src/components/App/modo-color.vue
View File

@ -1,29 +0,0 @@
<template lang="pug">
form(@submit.prevent)
label(for="selector_modo_color") Modo de color:
br
select#selector_modo_color(v-model="opcion")
option(selected) Claro
option Oscuro
//
</template>
<script lang="coffee">
export default
name: "modo-color"
data: ->
opcion: "Claro"
watch:
opcion: (nuevo) ->
console.log "Cambiado a #{nuevo}"
#
</script>
<style scoped lang="sass">
//
</style>

7
src/components/v-checkbox.vue
View File

@ -33,11 +33,12 @@
position: relative position: relative
padding-left: 35px padding-left: 35px
cursor: pointer cursor: pointer
font-size: 22px font-size: 1rem
-webkit-user-select: none -webkit-user-select: none
-moz-user-select: none -moz-user-select: none
-ms-user-select: none -ms-user-select: none
user-select: none user-select: none
color: var(--colorTexto)
/* Hide the browser's default checkbox */ /* Hide the browser's default checkbox */
@ -56,13 +57,13 @@
left: 0 left: 0
height: 25px height: 25px
width: 25px width: 25px
background-color: #eee background-color: var(--colorTexto)
transition: background-color 150ms transition: background-color 150ms
border-radius: 50% border-radius: 50%
/* On mouse-over, add a grey background color */ /* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark // .container:hover input ~ .checkmark
background-color: #ccc background-color: #ccc

1
src/main.js
View File

@ -6,6 +6,7 @@ import store from './store'
import './registerServiceWorker' import './registerServiceWorker'
import "normalize-css" import "normalize-css"
import "./sass/Global.sass" import "./sass/Global.sass"
import "./sass/colores.sass"
Vue.config.productionTip = false; Vue.config.productionTip = false;

18
src/sass/Global.sass
View File

@ -1,3 +1,19 @@
@font-face
font-family: "JetBrains Mono"
src: url(../assets/jetbrains-mono/JetBrainsMono-Regular.ttf) format("truetype")
font-weight: 400
font-style: normal
font-display: swap
@font-face
font-family: "JetBrains Mono"
src: url(../assets/jetbrains-mono/JetBrainsMono-Bold.ttf) format("truetype")
font-weight: bold
font-style: normal
font-display: swap
\:root \:root
--colorTexto: #d7d7d7 --colorTexto: #d7d7d7
--colorFondo: #0E1419 --colorFondo: #0E1419
@ -26,7 +42,7 @@ $duracionTransicion: 100ms
.celda .celda
white-space: pre white-space: pre
font-family: "Fira Code", 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

14
src/sass/colores.sass Normal file
View File

@ -0,0 +1,14 @@
.tema-oscuro
--colorTexto: #d7d7d7
--colorFondo: #0E1419
--colorTeoria: #3f77f3
--colorLab: #e4564a
.tema-claro
--colorTexto: #303030
--colorFondo: #EEECEC
--colorTeoria: #2e57b1
--colorLab: #bb2d21
.celda
font-weight: bold

35
src/store/index.js
View File

@ -3,6 +3,29 @@ import Vuex from 'vuex';
Vue.use(Vuex); Vue.use(Vuex);
const cambiarModoColor = modo => {
const clases = document.body.classList;
bucle: for (const pos in clases) {
if (clases.hasOwnProperty(pos)) {
const clase = clases[pos];
switch (clase) {
case "tema-claro":
case "tema-oscuro": {
clases.remove(clase);
break bucle;
}
}
}
}
clases.add(modo);
};
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
celdas: {}, celdas: {},
@ -17,7 +40,12 @@ const store = new Vuex.Store({
titulo: "Cargando...", titulo: "Cargando...",
años: {} años: {}
}, },
mostrarDescansos: true mostrarDescansos: true,
color: (() => {
const modo = localStorage.getItem("color") || "oscuro";
cambiarModoColor(`tema-${ modo }`);
return modo
})()
}, },
mutations: { mutations: {
registrarCelda(state, idCelda) { registrarCelda(state, idCelda) {
@ -51,6 +79,11 @@ const store = new Vuex.Store({
}, },
cambiarMostrarDescansos(state, dato) { cambiarMostrarDescansos(state, dato) {
state.mostrarDescansos = !!dato state.mostrarDescansos = !!dato
},
cambiarColor (state, valor) {
state.color = valor;
cambiarModoColor(`tema-${valor}`);
localStorage.setItem("color", valor);
} }
}, },
actions: { actions: {

6
src/views/Inicio.vue
View File

@ -3,7 +3,7 @@
h2.titulo {{ datos.titulo }} h2.titulo {{ datos.titulo }}
p Puedes agregar cursos de diferentes años a tu horario. p Puedes agregar cursos de diferentes años a tu horario.
v-check-box(txt="Mostrar descansos de 10m" v-model="mostrarDescansos")
// label.container Mostrar descansos de 10m // label.container Mostrar descansos de 10m
input(type="checkbox" v-model="$store.state.mostrarDescansos") input(type="checkbox" v-model="$store.state.mostrarDescansos")
@ -34,9 +34,7 @@
computed: computed:
horarioUsuario: -> @$store.state.horarioUsuario horarioUsuario: -> @$store.state.horarioUsuario
datos: -> @$store.state.datos datos: -> @$store.state.datos
mostrarDescansos:
get: -> @$store.state.mostrarDescansos
set: (value) -> @$store.commit "cambiarMostrarDescansos", value