Adecentando la versión móvil con Jquery Mobile

This is boo sheet

En el artículo anterior: /pequena-version-movil-con-jquery-mobile creamos una versión minúscula de la web que permitía ver un listado de todos los artículos de la web y navegar a ver los nodos de forma bastante sencilla, es bastante funcional, pero le falta estilo y algo de funcionalidad, vamos a mejorar un poco la forma en la que se muestra el contenido y la funcionalidad de la aplicación.

En el servicio de publicación de la vista que creamos añadimos el campo imagen con la intención de utilizarlo en nuestro listview, incluirlo con Jquery mobile es extremadamente sencillo, simplemente añadiendo la imagen al listview de esta forma en nuestro each:

js/app.js


  $.each(data, function(index, value) {
    listado+='<li><a href="'+url+'?id=node&nid='+value['nid']+'">'+
    '<img src="'+value['field_image']+'">'+
    '<h2>'+value['title']+'</h2>'+
    '</a></li>';
   });

El formato por defecto de jquery mobile convertirá las imágenes en 80x80 pixeles y las añadirá al listview, dejando un resultado bastante más aparente:

Listview con una imagen

Así está un poco más decente, pero dista mucho de la experiencia móvil que estamos buscando, por lo que vamos a convertir la lista en una rejilla que podamos adaptar al tamaño del dispositvo, en esta rejilla, además del título y la imagen, vamos a añadir la fecha de creación y la etiqueta de taxonomía del artículo. Comenzamos modificando la vista para añadir los nuevos campos, en el caso de las etiquetas, solo vamos a utilizar una, por lo que limitaremos en el campo las etiquetas.

Una vez que tenemos todos los datos en la vista, modificamos nuestro fichero para añadir los nuevos campos:

js/app.js


$.each(data, function(index, value) {

  listado+='<li><a href="'+url+'?id=node&nid='+value['nid']+'">'+
  '<img src="'+value['field_image']+'" style="max-height:100%;max-width:100%;">'+
  '<h2>'+value['created']+'</h2>'+
  '<p>'+value['title']+'</p>'+
  '<p class="ui-li-aside">'+value['field_tags']+'</p>'+
  '</a></li>';
  });

Con los valores dados, solo es necesario aplicar CSS, cargarlo en el fichero index y definir las media-queries de forma que creemos una rejilla de uno, dos, tres o cuatro elementos de 250 pixeles en función del ancho de la pantalla:

css/listview-grid.css


.my-page .ui-listview li .ui-btn p {
        color: #c0c0c0;
}
.my-page .ui-listview li .ui-btn .ui-li-aside {
        color: #eee;
}

@media ( min-width: 16em ) {
        .my-page .ui-content {
                padding: .5625em; /* 9px */
        }
        .my-page .ui-listview li {
                float: left;
                width: 97.6%; 
                height: 14.5em; 
                margin: .5625em 1.2%;
        }
        .my-page .ui-listview li > .ui-btn {
                -webkit-box-sizing: border-box; 
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                height: 100%;
        }
        .my-page .ui-listview li.ui-li-has-thumb .ui-li-thumb {
                height: auto; 
                max-width: 100%;
                max-height: none;
        }
        .my-page .ui-listview li,
        .my-page .ui-listview li .ui-btn,
        .my-page .ui-listview .ui-li-thumb {
                -webkit-border-radius: inherit;
                border-radius: inherit;
        }
        .my-page .ui-listview .ui-btn-icon-right:after {
                display: none;
        }
        .my-page .ui-listview h2,
        .my-page .ui-listview p {
                white-space: normal;
                overflow: visible;
                position: absolute;
                left: 0;
                right: 0;
        }
        .my-page .ui-listview h2 {
                text-align: right;
                font-weight: normal;
                font-size: 0.7em;
                color: #fff;
                margin: 0;
                padding: .125em 1em;
                bottom: 50%;
        }
        .my-page .ui-listview p {
                font-size: 1em;
                margin: 0;
                padding: 0 1.25em;
                min-height: 50%;
                bottom: 0;
        }
        .ui-listview .ui-li-has-thumb h2,
        .ui-listview .ui-li-has-thumb p {
                background: #111;
                background: rgba(0,0,0,.8);
        }
        .ui-listview .ui-li-has-thumb h2 {
                bottom: 35%;
        }
        .ui-listview .ui-li-has-thumb p {
                min-height: 35%;
        }
        .my-page .ui-listview .ui-li-aside {
                padding: .125em .625em;
                width: auto;
                min-height: 0;
                top: 0;
                left: auto;
                bottom: auto;
                background: #990099;
                background: rgba(153,0,153,.85);
                -webkit-border-top-right-radius: inherit;
                border-top-right-radius: inherit;
                -webkit-border-bottom-left-radius: inherit;
                border-bottom-left-radius: inherit;
                -webkit-border-bottom-right-radius: 0;
                border-bottom-right-radius: 0;
        }
        .my-page .ui-listview li {
                -moz-box-shadow: 0px 0px 9px #111;
                -webkit-box-shadow: 0px 0px 9px #111;
                box-shadow: 0px 0px 9px #111;
        }
        .my-page .ui-listview li > .ui-btn:hover {
                -moz-box-shadow: 0px 0px 12px #33ccff;
                -webkit-box-shadow: 0px 0px 12px #33ccff;
                box-shadow: 0px 0px 12px #33ccff;
        }
        .my-page .ui-listview li,
        .my-page .ui-listview .ui-btn {
                -webkit-transition: all 500ms ease;
                -moz-transition: all 500ms ease;
                -o-transition: all 500ms ease;
                -ms-transition: all 500ms ease;
                transition: all 500ms ease;
        }
}
@media ( min-width: 32em ) {
        .my-page .ui-content {
                padding: .5625em; 
        }
        .my-page .ui-listview li {
                float: left;
                width: 47.6%; 
                height: 14.5em; 
                margin: .5625em 1.2%;
        }
}
@media ( min-width: 48em ) {
        .my-page .ui-content {
                padding: .5625em; 
        }
        .my-page .ui-listview {
                max-width: 62.5em;
                margin: 0 auto;
        }
        .my-page .ui-listview li {
                float: left;
                width: 30.9333%; 
                height: 14.5em; 
                margin: .5625em 1.2%;

        }
}
@media ( min-width: 63.75em ) {
        .my-page .ui-content {
                padding: .625em; 
        }
        .my-page .ui-listview {
                max-width: 62.5em; 
                margin: 0 auto;
        }
        .my-page .ui-listview li {
                width: 23%;
                height: 230px;
                margin: .625em 1%;
        }
}

Con todos estos cambios, nuestra página tendrá un aspecto muy diferente:

Vista en 1 columna

 

Vista en 2 columnas

 

Vista en 3 columnas

 

Vista en 4 columnas

Un diseño mucho más llamativo y adaptable simplemente con unas líneas de CSS y unos cambios en nuestra app.

Con nuestra flamante nueva portada, ya solo nos queda hacer que los nodos se vea de una forma más elaborada, crear algún menú y tal vez un formulario de búsqueda.