Node.js / Mejorando la vista de las notas

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

En el post anterior mejoramos la forma de mostrar cuales son las notas cargadas en la pagina inicial, y en este post mejoramos el encabezado o barra de navegacion, pero aqui mejoraremos la experiencia para el usuario a la hora de ver cada nota, para ello necesitaremos el codigo que estuvimos trabajando hasta el post anterior, en caso de no tenerlo les dejo un link para descargarlo:

Descarguen el archivo y extraigan el directorio en el PC, una vez realizado ya tenemos nuestra aplicacion lista para ser utilizada, antes de comenzar con nuestra modificacion veamos como es el codigo de nuestro archivo vistanota.hbs del directorio views:

views/vistanota.hbs

{{#if nota }}<h3>{{ nota.titulo }}</h3>{{/if}}
{{#if nota }}<p>{{ nota.cuerpo }}</p>{{/if}}
<p>Clave: {{ clavenota }}</p>
{{#if clavenota }}
        <hr/>
        <p><a href="/notas/borrar?clave={{clavenota}}">Borrar</a>
        | <a href="/notas/editar?clave={{clavenota}}">Editar</a></p>
{{/if}}

Observen que este simplemente muestra los datos y dos links para borrarlo y editarlo, tomemos esta base y modifiquemoslo de la siguiente manera:

<div class="containter-fluid">
  <div class="row"><div class="col-sm-12">
        {{#if nota }}<h3>{{ nota.titulo }}</h3>{{/if}}
        {{#if nota }}<p>{{ nota.cuerpo }}</p>{{/if}}
        <p>Clave: {{ clavenota }}</p>
  </div></div>
  {{#if clavenota }}
     <div class="row"><div class="col-sm-12">
     <div class="btn-group">
        <a class="btn btn-outline-dark"
                href="/notas/borrar?clave={{clavenota}}"
                role="buutton">Borrar</a>
        <a class="btn btn-outline-dark"
                href="/notas/editar?clave={{clavenota}}"
                role="button">Editar</a>
     </div>
     </div></div>
  {{/if}}
</div>

Resalte las modificaciones que se realizaron, noten que agregamos unos div para poder controlar la forma de mostrar la informacion de la nota, en el caso de la nota solamente lo envolvimos entre div, despues el condicional donde estaban los links agregamos dos div para hacer lo mismo con los datos pero ahora transformamos estos links en botones, para ello le aplicamos las clases y le asignamos el rol de boton, si lo prueban ahora nuestras notas se veran de la siguiente manera:

Como pueden ver mejoro un poco pero sobre todo mejoramos la forma de acceder a las acciones, en nuestros siguiente posts nos centraremos en trabajar sobre estas dos acciones, antes de finalizar les dejo un link donde estan todos los archivos de nuestra aplicacion y los modificados en este post:

En resumen, hoy hemos mejorado la forma de mostrar las notas cargadas, una simple modificacion para mejorar la forma de mostrarlo y ahora tenemos los botones de acciones, espero les haya resultado 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.