Arreglo del layour de los animes. Arreglado el layout de la lista de animes. Agregada navegacion en la barra inferior.
@ -1,12 +1,3 @@
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
|
||||
[*.vue]
|
||||
indent_size = 2
|
||||
|
||||
[*.coffee]
|
||||
indent_size = 2
|
||||
|
||||
[*.sass]
|
||||
indent_size = 2
|
Before Width: | Height: | Size: 1.1 KiB |
BIN
public/favicon.png
Normal file
After Width: | Height: | Size: 6.0 KiB |
BIN
public/img/PortadaAnimes/Fruits Basket (2019).jpg
Normal file
After Width: | Height: | Size: 148 KiB |
BIN
public/img/PortadaAnimes/Irozuku Sekai no Ashita Kara.jpg
Normal file
After Width: | Height: | Size: 308 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 65 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 64 KiB |
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 52 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 42 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 57 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 36 KiB |
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -11,7 +11,7 @@
|
||||
background-color: white
|
||||
|
||||
.fondo2
|
||||
background-color: #e8e8e8
|
||||
background-color: #eeeeee
|
||||
|
||||
.fondo1--negativo
|
||||
background-color: black
|
@ -2,7 +2,7 @@ $colorPrincipal: #009961
|
||||
$colorSecundario: #ea486a
|
||||
|
||||
$fondo1--claro: white
|
||||
$fondo2--claro: #e8e8e8
|
||||
$fondo2--claro: #eeeeee
|
||||
|
||||
$fondo1--oscuro: #101010
|
||||
$fondo2--oscuro: #000000
|
||||
|
@ -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>
|
@ -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>
|
@ -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">
|
||||
|
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -54,9 +54,12 @@
|
||||
Traducciones Inglés|Japonés → 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
|
||||
|
||||
|
@ -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: {}
|
@ -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
|
||||
|
||||
//
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
@ -6,6 +6,9 @@
|
||||
|
||||
export default
|
||||
name: "Error404"
|
||||
created: ->
|
||||
@$store.commit "cambiarRutaActual", ["Inicio", "404"]
|
||||
#
|
||||
|
||||
</script>
|
||||
|
||||
|
@ -22,7 +22,9 @@
|
||||
'y-notaras-la-diferencia': yNotarasLaDiferencia
|
||||
'ultimos-eps': ultimosEps
|
||||
'animes-novelas': animesNovelas
|
||||
#
|
||||
created: ->
|
||||
@$store.commit "cambiarRutaActual", [{nombre: "PseudoSubs", ruta: "/"}]
|
||||
#
|
||||
|
||||
</script>
|
||||
|
||||
|