Arreglo del layour de los animes. Arreglado el layout de la lista de animes. Agregada navegacion en la barra inferior.

This commit is contained in:
Fernando 2019-04-17 16:44:08 -05:00
parent 25faec9593
commit 2dd9adec8f
38 changed files with 807 additions and 606 deletions

View File

@ -1,12 +1,3 @@
[*]
indent_style = space
indent_size = 4
[*.vue]
indent_size = 2
[*.coffee]
indent_size = 2
[*.sass]
indent_size = 2

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 36 KiB

View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="icon" href="<%= BASE_URL %>favicon.png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<title>PseudoSubs</title>

View File

@ -26,7 +26,11 @@
#
else
store = @$store
fetch("/anime")
fetch("https://pseudosubs.com/anime", {
method: "POST"
headers:
"Content-Type": "application/x-www-form-urlencoded"
})
.then((x) -> x.text())
.then (res) ->
# if DEV then console.log res
@ -36,7 +40,7 @@
store.commit "establecerAnime", resultado.payload
else
console.log "Error al obtener los animes.\n#{res}"
#
#
</script>

View File

@ -11,7 +11,7 @@
background-color: white
.fondo2
background-color: #e8e8e8
background-color: #eeeeee
.fondo1--negativo
background-color: black

View File

@ -2,7 +2,7 @@ $colorPrincipal: #009961
$colorSecundario: #ea486a
$fondo1--claro: white
$fondo2--claro: #e8e8e8
$fondo2--claro: #eeeeee
$fondo1--oscuro: #101010
$fondo2--oscuro: #000000

View File

@ -1,13 +1,30 @@
<template lang="pug">
div.texto1
div.texto1.contenedor
div(v-if="estadoAnime === 0") Cargando...
div(v-if="estadoAnime === -1") Error. Anime no encontrado
div(v-if="estadoAnime === 1")
div.titulo {{ anime.titulo }} -> {{ anime.anime_ID }}
p.
Advertencia. Página en construcción. Los links pueden estar errados. Para usar la versión estable,
visita <a href="https://pseudosubs.com">https://pseudosubs.com</a>
// div.titulo {{ anime.titulo }} -> {{ anime.anime_ID }}
// p {{ anime }}
br
br
div.datos
img.imagen.tarjeta(:src="anime.imgUrl")
div.cont
div.tarjeta.fondo1
div.descripcion {{ anime.descripcion }}
br
div.datosAnimeCont
div.tarjeta.fondo1.mal
div.estudio Estudio: {{ anime.estudio }}
div.numEps Episodios: {{ anime.eps === 0? '?' : anime.eps }}
div.emision Emisión: {{ anime.alAire }}
div.temporada Temporada: {{ anime.temporada + " " + anime.anio }}
div.fuente Fuente: {{ anime.fuente }}
div.generos Generos: {{ anime.generos }}
div.tarjeta.fondo1.op-ed ops y eds aqui. En construcción.
br
panel-de-descarga(:animeid="anime.anime_ID" :color="anime.color")
br
//
</template>
@ -33,14 +50,83 @@
break
@estadoAnime = resultado
if resultado is 1
@$store.commit "cambiarTxtAdicionalAnime", "#{anime.titulo}"
@$store.commit "cambiarTituloAnime", "#{anime.titulo}"
@$store.commit "cambiarTxtAdicionalAnime", (if anime.comentario? then anime.comentario else "Sin comentarios.")
@$store.commit "cambiarEstadoImgAnime", true
@$store.commit "cambiarImgTituloAnime", @anime.titulo
else
@$store.commit "cambiarTxtAdicionalAnime", "?"
@$store.commit "cambiarRutaActual", [
{nombre: "PS", ruta: "/"},
{nombre: "A", ruta: "/Anime/"},
{nombre: "_", ruta: "#"}
]
#
</script>
<style scoped lang="sass">
@import "../../assets/sass/variables"
.contenedor
margin: 0 50px
.datos::after, .datosAnimeCont::after
content: ""
display: table
clear: both
.imagen
@extend %bordeRedondo-std
position: sticky
top: 10px
float: left
// height: 600px
width: 25%
display: inline-block
.cont
float: left
display: inline-block
padding-left: 40px
width: 75%
div.tarjeta
@extend %bordeRedondo-std
padding: 20px
.mal
width: 49%
float: left
.op-ed
width: 49%
float: right
@media only screen and (max-width: 600px)
.imagen, .cont
width: 100%
.imagen
position: initial
padding-bottom: 30px
.cont
padding: 0
div.tarjeta
padding: 15px
.mal, .op-ed
width: 100%
.mal
margin-bottom: 20px
.contenedor
margin: 0 5px
padding-bottom: 70px
//
</style>

View File

@ -3,7 +3,7 @@
div.cont.fondo1.tarjeta
router-link.titulo.texto1(:to="anime.link") {{ anime.titulo }}
br
router-link(:to="anime.link")
router-link.link(:to="anime.link")
img.imagen(:src="anime.imgUrl")
//
</template>
@ -16,7 +16,7 @@
anime:
type: Object
required: true
#
#
</script>
@ -24,25 +24,45 @@
@import "../../assets/sass/variables"
.anime
width: 50%
width: 33%
float: left
padding: 20px
.cont
@extend %bordeRedondo-std
padding: 20px
height: 500px
.titulo
display: inline-block
font:
family: Muli, "Open Sans", sans-serif
size: xx-large
padding-bottom: 20px
margin-bottom: 20px
text-decoration: none
overflow: hidden
white-space: nowrap
width: 100%
.imagen
height: 400px
.link
display: inline-block
width: 100%
@media only screen and (max-width: 425px)
.imagen
width: 100%
height: initial
@media only screen and (max-width: 1200px)
.anime
width: 50%
@media only screen and (max-width: 850px)
.anime
width: 100%
//
</style>

View File

@ -12,8 +12,15 @@
components:
'anime-item': animeItem
created: ->
@$store.commit "cambiarTituloAnime", "Anime"
@$store.commit "cambiarTxtAdicionalAnime", "Comprimido sin perder 1 solo pixel."
@$store.commit "cambiarEstadoImgAnime", false
@$store.commit "cambiarRutaActual", [
{nombre: "PS", ruta: "/"},
{nombre: "Anime", ruta: "/Anime/"},
]
#
</script>
<style scoped lang="sass">

View File

@ -22,10 +22,10 @@
<br>
Utilizamos lo último en tecnología para brindarte una experiencia
<b>inigualable</b>. ¡Si encuentras una página más rápida te devolvemos tu dinero!
div.titulo Moderno
div.titulo No apto para puristas
div.descripcion.
¿1.5 GB por episodio? No gracias.<br>
Con las últimas técnicas de compresión, reducimos 1GB a ~400MB en 1080px, y hasta 150MB en
¿1.5 GB por episodio? No, gracias.<br>
Con las últimas técnicas de compresión, reducimos 1GB a ~400MB en 1080px, y hasta 100MB en
720p ligero. ¡Sin perdida de calidad!
br
br
@ -56,7 +56,7 @@
position: relative
top: -115px
font:
family: 'Product Sans' ,Muli, 'Open Sans', sans-serif
family: 'Product Sans', Muli, 'Open Sans', sans-serif
size: x-large
text-transform: uppercase

View File

@ -51,7 +51,7 @@
errorAnimesNoEncontrados: ->
if @$store.state.animes[0]?
if @primeraCarga
if DEV then console.log "Los animes existen, y voy a ciclarlos v:<"
@anime = @obtenerSigAnime()
@establecerIntervalo()
@primeraCarga = false

View File

@ -5,8 +5,8 @@
div.otro(:style="'min-height: ' + altoPantalla + 'px' ")
div.col
div.fil
div.titulo Cámbiate a PseudoSubs
div.motto Y notarás la diferencia
div.titulo <!--Cámbiate a PseudoSubs--> RIP PseudoSubs - 2017-2019
div.motto Y notarás la diferencia <small>¿O no?</small>
br
br
br

View File

@ -54,9 +54,12 @@
Traducciones Inglés|Japonés &rarr; español.<br>
<br>
Version 5.0.0
//
div.inferior.texto2.fondo1.mostrarEnMovil
span.tituloInf PseudoSubs
span.tituloInf
template(v-for="i in $store.state.rutaActual")
router-link.linkBarra(:to="i.ruta") {{ i.nombre }}
span >
div.links
i.material-icons.texto2.mostrarEnTablet(@click="cambiarModoColor()").
{{ modoSiguiente === 'oscuro'? 'brightness_3': 'brightness_5' }}
@ -67,7 +70,6 @@
i.material-icons.texto2.mostrarEnTablet settings
//
</template>
<script lang="coffee">
@ -79,7 +81,6 @@
modoSiguiente: "oscuro"
elemHtmlModoOscuro: document.getElementById "modoOscuro"
largoVentana: window.innerWidth
methods:
cambiarModoColor: (color = @modoSiguiente) ->
localStorage?.setItem "modoColor", color
@ -113,7 +114,7 @@
if Storage? and localStorage.getItem "modoColor"
localStorage.getItem "modoColor"
else if Storage?
localStorage.setItem "modoColor","oscuro"
localStorage.setItem "modoColor", "oscuro"
"oscuro"
else
console.log "No hay soporte para LocalStorage"
@ -121,24 +122,34 @@
@modoSiguiente = if modoColor is "claro" then "oscuro" else "claro"
@cambiarModoColor modoColor
#
#
</script>
<style scoped lang="sass">
@import "../assets/sass/variables"
.linkBarra
color: $colorPrincipal
.barraOculta
width: 100px !important
.cambiarModo
text-decoration: none
&:hover
background-color: inherit
a
text-decoration: none
.linkImg
width: 70px
.ocultarEnTablet
display: none
.mostrarEnTablet
display: initial
@ -150,7 +161,7 @@
width: 44px
height: 44px
padding: 10px
box-shadow: 0 0 10px 3px rgba(0,0,0,0.2)
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2)
border-radius: 22px
background-color: $colorSecundario
cursor: pointer
@ -160,11 +171,13 @@
text-decoration: underline
cursor: pointer
transition: background-color 250ms ease-out
&:hover
background-color: $colorSecundario
.material-icons
font-size: 40px
.imgGitHub
width: 40px
@ -173,13 +186,14 @@
width: $largo
height: 100%
position: fixed
box-shadow: 0 0 10px 3px rgba(0,0,0,0.2)
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2)
z-index: 10
.linkImg
@extend %margen-std
display: inline-block
width: $largoImg
img
@extend %bordeRedondo-std
width: 100%
@ -189,6 +203,7 @@
@extend %bordeRedondo-std
padding: 15px
overflow: auto
a::after
content: ""
display: block
@ -210,6 +225,7 @@
height: $bajoMovil
width: 100%
z-index: 10
.tituloInf
float: left
color: #009c64
@ -217,15 +233,18 @@
family: Muli, "Open Sans", sans-serif
size: x-large
padding: 20px 10px
&::after
content: ""
display: table
clear: both
.links
padding: 15px
height: 70px
text-align: right
width: auto
i
padding: 0 20px

View File

@ -18,8 +18,11 @@ export default new Vuex.Store
[]
modoColor: localStorage?.getItem "modoColor" ? "claro"
tituloAnime: "Anime"
txtAdicionalAnime: "Comprimido sin perder 1 solo pixel."
mostrarImgAnime: false
imgTituloAnime: "19_2_fruits_basket"
rutaActual: [{nombre: "PseudoSubs", ruta: "/"}]
mutations:
cambiarBarraLateral: (state) ->
@ -33,7 +36,19 @@ export default new Vuex.Store
cambiarModoColor: (state, color) ->
state.modoColor = color
cambiarTituloAnime: (state, txt) ->
state.tituloAnime = txt
cambiarTxtAdicionalAnime: (state, txt) ->
state.txtAdicionalAnime = txt
cambiarEstadoImgAnime: (state, valor) ->
state.mostrarImgAnime = valor
cambiarImgTituloAnime: (state, valor) ->
state.imgTituloAnime = valor
cambiarRutaActual: (state, valor) ->
state.rutaActual = valor
actions: {}

View File

@ -1,9 +1,11 @@
<template lang="pug">
div.texto1
div.tarjeta.fondo1.tituloC
router-link.titulo.texto1(to="/Anime") Animes
div.texto1.main
div.imagenFondo.fondo1(:class="$store.state.mostrarImgAnime? clasesImg : ''" :style="estiloImg")
div.fondo1.tituloC(:class="$store.state.mostrarImgAnime? clasesCont : ''")
div.textos
router-link.titulo.texto1(to="/Anime" :class="sombraLink") {{ $store.state.tituloAnime }}
br
div.titulo__descr {{ $store.state.txtAdicionalAnime }}
div.titulo__descr.texto1 {{ $store.state.txtAdicionalAnime }}
router-view
//
</template>
@ -11,15 +13,62 @@
<script lang="coffee">
export default
name: "AnimeList"
name: "AnimeList",
computed:
clasesImg: ->
["alto500", "imagenFondo--activo"]
clasesCont: ->
["alto500", ("tituloC--activo--" + @$store.state.modoColor)]
sombraLink: ->
"tituloC--sombra--#{@$store.state.modoColor}"
linkImg: -> "/img/PortadaAnimes/#{@$store.state.imgTituloAnime}.jpg"
estiloImg: ->
if @$store.state.mostrarImgAnime
"background: url('#{@linkImg}') no-repeat center; background-size: cover"
else
""
#
</script>
<style scoped lang="sass">
@import "../assets/sass/variables"
.main
position: relative
height: 0
.imagenFondo
position: absolute
height: 250px
width: 100%
.tituloC
padding: 50px
height: 250px
position: relative
.tituloC--sombra--claro
text-shadow: 0 0 15px #c7c7c7
.tituloC--sombra--oscuro
text-shadow: 0 0 15px #484848
.alto500
height: 600px
.imagenFondo--activo
// background: no-repeat center
.tituloC--activo--oscuro
background: linear-gradient(rgba(0,0,0,0) 200px, $fondo2--oscuro)
.tituloC--activo--claro
background: linear-gradient(rgba(0,0,0,0) 200px, $fondo2--claro)
.textos
position: absolute
bottom: 50px
left: 50px
.titulo
font:
@ -34,11 +83,12 @@
family: Muli, "Open Sans", sans-serif
size: x-large
@media only screen and (max-width: 425px)
.titulo
font-size: 3rem
.animes::after
content: ""
display: table
clear: both
.alto500
height: 350px
//

View File

@ -50,6 +50,9 @@
export default
name: "Comparar"
created: ->
@$store.commit "cambiarRutaActual", ["Inicio", "cmp"]
#
</script>
@ -59,6 +62,7 @@
.contenedor
width: 90%
margin: 30px auto
div
@extend %bordeRedondo-std

View File

@ -6,6 +6,9 @@
export default
name: "Error404"
created: ->
@$store.commit "cambiarRutaActual", ["Inicio", "404"]
#
</script>

View File

@ -22,7 +22,9 @@
'y-notaras-la-diferencia': yNotarasLaDiferencia
'ultimos-eps': ultimosEps
'animes-novelas': animesNovelas
#
created: ->
@$store.commit "cambiarRutaActual", [{nombre: "PseudoSubs", ruta: "/"}]
#
</script>