Terminada funcionalidad basica de componente ultimos-animes. Todo: Responsividad

src/components/Inicio/anime.vue

@@ -1,128 +0,0 @@
-<template lang="pug">
-  div
-    div.anime(v-if="!errorAnimesNoEncontrados")
-      div.fondo_1(:style="'background-color: ' + anime.color")
-      div.fondo_texto(:class="'fondo_texto--' + $store.state.modoColor")
-      div.cont
-        div.titulo {{ anime.titulo }}
-
-        img.imagen.tarjeta(:src="anime.imgUrl")
-        div.animeCont
-          div.descr {{ anime.descripcion }}
-          br
-          div.eps {{ anime.eps === 0? '?': anime.eps }} episodios.
-          br
-          div.estudio Estudio: {{ anime.estudio }}
-          br
-          div.emision {{ anime.diaDeEmision? 'Nuevo ep los ' + anime.diaDeEmision : '' }}
-          br
-        div.posActual {{ numAnimeActual }} de {{ cantidadAnimes }}
-    div(v-else) Error. No hay animes que mostrar. Revisa tu conexión a internet.
-
-</template>
-
-<script lang="coffee">
-
-  DEV = process.env.NODE_ENV == "development"
-
-  export default
-    name: "anime"
-    data: ->
-      anime: {}
-      intervalo: {}
-      primeraCarga: true
-    props:
-      obtenerNuevoAnime:
-        type: Function
-        required: true
-      numAnimeActual:
-        type: Number
-        required: true
-      cantidadAnimes:
-        type: Number
-        required: true
-    computed:
-      errorAnimesNoEncontrados: ->
-        if @$store.state.animes[0]?
-          if @primeraCarga
-            if DEV then console.log "Los animes existen, y voy a ciclarlos v:<"
-            @ciclarAnimes()
-            @primeraCarga = false
-          false
-        else
-          true
-    methods:
-      ciclarAnimes: ->
-        _ = this
-        clearInterval @intervalo
-
-        @anime = @obtenerNuevoAnime()
-
-        @intervalo = setInterval (() ->
-          _.anime = _.obtenerNuevoAnime()
-        ), 10000
-    beforeDestroy: ->
-      clearInterval @intervalo
-  #
-
-</script>
-
-<style scoped lang="sass">
-  @import "../../assets/sass/variables"
-
-  .anime
-    transition: background-color 250ms ease-out
-    height: 580px
-    width: 100%
-    position: relative
-
-  .titulo
-    font:
-      family: Muli, "Open Sans", sans-serif
-      size: xx-large
-    color: white
-    padding-bottom: 10px
-    height: 54px
-    // position: relative
-    // width: 500px
-    overflow: visible
-
-  .fondo_1, .fondo_texto, .cont
-    position: absolute
-    width: 100%
-    height: 580px
-
-  .fondo_1
-    z-index: 1
-    transition: background-color 500ms
-
-  .fondo_texto
-    z-index: 3
-
-  .fondo_texto--claro
-    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8) 40%, $fondo2--claro 70%)
-
-  .fondo_texto--oscuro
-    background: linear-gradient(to right, transparent, rgba(0,0,0,0.8) 40%, $fondo2--oscuro 70%)
-
-  .animeCont
-    max-height: 500px
-
-  .posActual
-    position: absolute
-    bottom: 15px
-    left: 440px
-
-  .cont
-    padding: 10px 40px
-    z-index: 4
-
-  .imagen
-    @extend %bordeRedondo-std
-    float: left
-    height: 500px
-    width: 360px
-    margin-right: 40px
-
-  //
-</style>

src/components/Inicio/ultimos-animes.vue

@@ -1,22 +1,43 @@
 <template lang="pug">
   div.texto2.fondo1.tarjeta
-    // div.titulo Últimos animes
+    div.anime(v-if="!errorAnimesNoEncontrados")
-    anime-reciente(:obtener-nuevo-anime="obtenerSigAnime" :num-anime-actual="animeActual"
+      div.fondo_1(:style="'background-color: ' + anime.color")
-      :cantidad-animes="numAnimesRecientes")
+      div.fondo_texto(:class="'fondo_texto--' + $store.state.modoColor")
+      div.cont
+        div.titulo {{ anime.titulo }}
+
+        img.imagen.tarjeta(:src="anime.imgUrl")
+        div.animeCont
+          div.descr {{ anime.descripcion }}
+          br
+          div.eps {{ anime.eps === 0? '?': anime.eps }} episodios.
+          br
+          div.estudio Estudio: {{ anime.estudio }}
+          br
+          div.emision {{ anime.diaDeEmision? 'Nuevo ep los ' + anime.diaDeEmision : '' }}
+          br
+        div.posActual
+          span.boton.fondo1.texto1(@click="cambiarAnime('ant')") &larr; ant
+          span.posicion  {{ animeActual }} de {{ numAnimesRecientes }}
+          span.boton.fondo1.texto1(@click="cambiarAnime('sig')") sig &rarr;
+    div(v-else) Error. No hay animes que mostrar. Revisa tu conexión a internet.
     //
 
 </template>
 
 <script lang="coffee">
-  import anime from "./anime.vue"
+
+  DEV = process.env.NODE_ENV == "development"
 
   export default
     name: "ultimos-eps"
-    components:
-      'anime-reciente': anime
     data: ->
       numAnimesRecientes: 4
       animeActual: 0
+      anime: {}
+      intervalo: {}
+      cuentaAtrasCambio: {}
+      primeraCarga: true
     computed:
       ultimosAnimes: ->
         animes = @$store.state.animes
@@ -25,6 +46,16 @@
           for _anime in animes when contador < @numAnimesRecientes
             contador = contador + 1
             _anime
+      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
+          false
+        else
+          true
     methods:
       obtenerSigAnime: ->
         if @animeActual is @numAnimesRecientes
@@ -32,7 +63,31 @@
         else
           @animeActual++
         @ultimosAnimes[@animeActual - 1]
-
+      obtenerAntAnime: ->
+        if @animeActual is 1
+          @animeActual = @numAnimesRecientes
+        else
+          @animeActual--
+        @ultimosAnimes[@animeActual - 1]
+      cambiarAnime: (modo) ->
+        _ = this
+        clearInterval @intervalo
+        clearTimeout @cuentaAtrasCambio
+        @anime =
+          if modo is "sig"
+            @obtenerSigAnime()
+          else
+            @obtenerAntAnime()
+        @cuentaAtrasCambio = setTimeout (() ->
+          _.establecerIntervalo()
+        ), 5000
+      establecerIntervalo: ->
+        _ = this
+        @intervalo = setInterval (() ->
+          _.anime = _.obtenerSigAnime()
+        ), 5000
+    beforeDestroy: ->
+      clearInterval @intervalo
     #
 
 </script>
@@ -40,12 +95,66 @@
 <style scoped lang="sass">
   @import "../../assets/sass/variables"
 
+  .anime
+    transition: background-color 250ms ease-out
+    height: 580px
+    width: 100%
+    position: relative
+
   .titulo
-    color: $colorPrincipal
-    filter: opacity(0.4)
     font:
-      size: 4rem
+      family: Muli, "Open Sans", sans-serif
-    padding: 40px
+      size: xx-large
+    color: white
+    padding-bottom: 10px
+    height: 54px
+    // position: relative
+    // width: 500px
+    overflow: visible
 
+  .fondo_1, .fondo_texto, .cont
+    position: absolute
+    width: 100%
+    height: 580px
 
+  .fondo_1
+    z-index: 1
+    transition: background-color 500ms
+
+  .fondo_texto
+    z-index: 3
+
+  .fondo_texto--claro
+    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8) 40%, $fondo2--claro 70%)
+
+  .fondo_texto--oscuro
+    background: linear-gradient(to right, transparent, rgba(0,0,0,0.8) 40%, $fondo2--oscuro 70%)
+
+  .animeCont
+    max-height: 500px
+
+  .posActual
+    position: absolute
+    bottom: 15px
+    left: 440px
+    .boton
+      @extend %bordeRedondo-std
+      user-select: none
+      display: inline-block
+      padding: 5px 10px
+      margin: 0 10px
+      cursor: pointer
+
+  .cont
+    padding: 10px 40px
+    z-index: 4
+
+  .imagen
+    @extend %bordeRedondo-std
+    float: left
+    height: 500px
+    width: 360px
+    margin-right: 40px
+
+  //
 </style>

vue.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  configureWebpack: {
+    module: {
+      rules: [
+        { test: /\.coffee$/, loader: "coffee-loader" }
+      ]
+    }
+  },
+
+  pluginOptions: {
+    express: {
+      shouldServeApp: true,
+      serverDir: './srv'
+    }
+  },
+
+  baseUrl: undefined,
+  outputDir: undefined,
+  assetsDir: undefined,
+  runtimeCompiler: undefined,
+  productionSourceMap: false,
+  parallel: undefined,
+  css: undefined
+};