Node.js / Mejorando el inicio

Bienvenidos sean a este post, hoy continuaremos mejorando la aplicacion Notas.

En este post nos centraremos en como mejorar la primera interfaz que vera el usuario al momento de abrir la aplicacion y donde estan listadas las notas que tengamos generadas, para ver este caso necesitaremos el codigo que utilizamos en el post anterior, en caso de no tenerlo les dejo un link con un archivo donde estan los archivos necesarios:

Una vez descargado simplemente extraigan el directorio que contiene en el pc y ya esta listo para ser utilizado, nuestro primer paso sera ir al archivo index.hbs que se encuentra en el directorio views, tomemos el codigo que posee y modifiquemoslo de la siguiente manera:

views/index.hbs

<div class="container-fluid">
  <div class="row">
        <div class="col-12 btn-group-vertical" role="group">
                {{#each listanotas}}
                <a class="btn btn-lg btn-block btn-outline-dark"
                        href="/notas/ver?clave={{ clave }}">{{ titulo }}</a>
                {{/each}}
        </div>
  </div>
</div>

En este caso eliminamos la lista y agregamos dos div, el primero sera el contenedor y despues le agregaremos uno que representaria una fila (row), el siguiente sera otro div que sera las doce columnas que componen a esta fila, en este caso le decimos que cada uno ocupara el total de la pagina, seran botones en grupo verticales y por ultimo le decimos el rol de que sea un grupo, despues mantenemos el each para que busque cada elemento en listanotas y nos mostrara un link de cada nota y para este caso crearemos un boton para cada link, el link es exactamente lo mismo que explicamos en este post, si vienen de posts anteriores se daran cuenta de que solo hemos hecho modificaciones esteticas en la pagina de inicio, la mecanica no fue modificada, y si lo ejecutan se vera de la siguiente forma:

Si pasan sobre los botones notaran un efecto adicional como es el cambio de color, pero esto no acaba aca porque debemos hacer una modificacion mas pero para ello debemos ir al archivo header.hbs en el directorio partials y tomaremos el codigo en este y lo modificaremos de la siguiente manera:

partials/header.hbs

<header class="page-header">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href='/'><i data-feather="home"></i></a>
    <button class="navbar-toggler" type="button"
        data-toggle="collapse" data-target="#navbarContenidoSoportado"
        aria-controls="navbarContenidoSoportado"
        aria-expanded="false" aria-label="Alternar navegacion">
        <span clas="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContenidoSoportado">
        <span class="navbar-text col">{{ title }}</span>
        <div class="navbar-nav col">
        {{#if breadcrumb}}
        <a class="nav-item nav-link" href="{{breadcrumb.url}}">
        {{breadcrumb.title}}</a>
        {{/if}}
        </div>
        <a class="nav-item nav-link btn btn-light col-auto"
                href='/notas/add'>Agregar Nota</a>
    </div>
  </nav>
</header>

En este caso hicimos dos modificaciones menores, la primera sera eliminar la referencia al titulo de cada pagina, despues en el div que contiene al boton de agregar nota le agregaremos un span donde mostraremos el valor de title que representa al titulo de la pagina, el resto sigue tal cual como lo explicamos en el post anterior, con esta nueva modificacion podemos volver a probar nuestra aplicacion para ver como trabaja ahora mediante el siguiente video

Vemos como mejoramos la interfaz ahora con el tema del titulo, como colapsa cuando modificamos el tamaño del navegador, y tambien vemos el efecto que les comente anteriormente, antes de finalizar les dejo un archivo con todos los archivos del proyecto y los modificado en este post:

En resumen, hoy hemos visto como mejorar nuestra pagina de inicio a la hora de mostrar cada nota generada, asi como hemos hecho una pequeña modificacion en la barra de navegacion donde hemos reubicado el tema del titulo de cada pagina, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.