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

.editorconfig

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

public/index.html

@@ -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>

src/App.vue

@@ -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>
 

src/assets/sass/modo-claro.sass

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

src/assets/sass/variables.sass

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

src/components/Anime/Anime.vue

@@ -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 }}
+            // div.titulo {{ anime.titulo }} -> {{ anime.anime_ID }}
-      p.
+            // p {{ anime }}
-        Advertencia. Página en construcción. Los links pueden estar errados. Para usar la versión estable,
+            br
-        visita <a href="https://pseudosubs.com">https://pseudosubs.com</a>
+            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>

src/components/AnimeList/anime.vue

@@ -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>

src/components/AnimeList/lista-animes.vue

@@ -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">

src/components/Inicio/caracteristicas.vue

@@ -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>
+                ¿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
+                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
 

src/components/Inicio/ultimos-animes.vue

@@ -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

src/components/Inicio/y-notaras-la-diferencia.vue

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

src/components/barra-lateral.vue

@@ -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
 

src/store.coffee

@@ -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: {}

src/views/AnimeList.vue

@@ -1,9 +1,11 @@
 <template lang="pug">
-  div.texto1
+    div.texto1.main
-    div.tarjeta.fondo1.tituloC
+        div.imagenFondo.fondo1(:class="$store.state.mostrarImgAnime? clasesImg : ''" :style="estiloImg")
-      router-link.titulo.texto1(to="/Anime") Animes
+        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
+        .alto500
-    content: ""
+            height: 350px
-    display: table
-    clear: both
 
     //
 

src/views/Comparar.vue

@@ -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
 

src/views/Error404.vue

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

src/views/Inicio.vue

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