Recientemente hemos desarrollado un tema visual responsive para la web efisioterapia.net que funciona sobre Drupal 7. Basado en bootstrap, el tema visual debía cumplir los requerimientos de sencillez y limpieza y estar orientado principalmente a los dispositivos móviles. Para no recargar el ya excesivo código que genera el propio drupal y evitar así contruibuir a ralentizar la carga de las páginas, optamos por usar la menor cantidad posible de Javascript en el tema visual y sustituirlo por técnicas CSS.
Las secciones principales de la web muestran listados de contenidos construidos con views y mediante filtros expuestos se ofrece la opción de filtrado por categoría, título y otros campos. Como el filtrado de contenidos es opcional, se optó porque no estuviera visible en primer plano en los dispositivos móviles, con el objetivo de ahorrar espacio y mostrar siempre en primer lugar contenido relevante. No obstante la funcionalidad debía seguir siendo accesible.
Para desplegar los filtros expuestos en los dispositivos móviles se ofrece un botón, pero en lugar de activarse por Javascript lo hace usando estilos y transiciones CSS. Vamos a ver a continuación cómo.
El HTML en Drupal
Para conseguir el efecto deseado se necesita emular el efecto "toggle" o "slide" con CSS y añadir las transiciones necesarias para hacer suavemente el despliegue de los campos.
Para emular el efecto Javascript usamos la técnica desarrollada aquí . A diferencia del ejemplo, que realiza un toggle normal, nosotros vamos a realizar un efecto slide apareciendo los filtros desde un lateral.
Sobreescribimos el template views-view--page.tpl.php para incluir el etiquetado y las clases necesarias. El resultado:
<!-- codigo correspondiente a los filtros expuestos -->
<?php if ($exposed): ?>
<div class="view-filters">
<label id="trigger-toggle" for="element-toggle"><span class="btn btn-default btn-sm"><i class="fa fa-filter" aria-hidden="true"></i> Filtros</span></label>
<input id="element-toggle" type="checkbox" />
<div id="toggled-element">
<?php print $exposed; ?>
</div>
</div>
<?php endif; ?>
De esta manera ya disponemos de los 3 elementos necesarios para ejecutar el efecto:
- un elemento visible que haga de disparador:
<label id="trigger-toggle" for="element-toggle"> - un elemento oculto al que haga referencia el anterior (mediante el atributo
for):<input id="element-toggle" type="checkbox" /> - y el elemento a mostrar/ocultar:
<div id="toggled-element">
El CSS para pantallas móviles
/* El disparador solo será visible para dispositivos de menos de 600px de ancho */
#trigger-toggle,
#element-toggle { display:none; }
/* Hacemos visible el disparador y aplicamos los estilos a partir de 600px */
@media (max-width: 600px) {
/* Hacemos visible el disparador */
#trigger-toggle {
display:block;
cursor: pointer;
}
/* Para conseguir el efecto de desplazamiento lateral posicionamos de manera absoluta el elemento. También le asignamos las transiciones deseadas. Al activar el disparador como se ha descrito, las propiedades se aplican en función de la transición definida */
#toggled-element {
position:absolute;
right:0px;
width:100%;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-mos-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
/* Para hacer un efecto "slide" en lugar de ocultar el elemento con display:none, lo sacamos de la vista por un lateral */
#element-toggle:not(:checked) ~ #toggled-element {
right:-700px;
}
}
La clave para este efecto es el uso de dos selectores CSS: la pseudoclase de negación :not (Info ) en el disparador y el selector de hermanos ~ (Info ) que permite seleccionar el segundo elemento (el que queremos mostrar/ocultar) sólo si está precedido por el primero (el disparador) y ambos comparten un padre común.
En el ejemplo, la etiqueta label del disparador actuaría como un interruptor para marcar y desmarcar la etiqueta input del tipo checkbox. Las propiedades se aplicarían al elemento que no esté representado por el argumento, o sea, cuando el input no está marcado el elemento a mostar/ocultar permanece fuera de la vista porque se le aplica un margen lateral negativo. Si el input se marca (al pinchar el label que actúa de disparador), las propiedades no se aplican y el elemento va a su posición en la pantalla (sin desplazamiento lateral).
Este efecto de vaivén se suaviza con la propiedad de transición que asignemos al elemento a mostar/ocultar. Así de fácil :D
Ejemplo
El código CSS:
#example-view-filters {
overflow: hidden;
position:relative;
height:450px;
}
#example-trigger-toggle {
cursor: pointer;
}
#example-element-toggle {
display:none;
}
#example-toggled-element {
position:absolute;
right:0px;
width:100%;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-mos-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#example-element-toggle:not(:checked) ~ #example-toggled-element {
right:-1000px;
}
Para ver el efecto en acción pincha en el botón:
<div id="example-view-filters">
<p>
Para ver el efecto en acción pincha en el botón:
</p>
<label for="example-element-toggle" id="example-trigger-toggle"><span class="btn btn-success">&Disparador</span></label> <input id="example-element-toggle" type="checkbox" />
<div id="example-toggled-element">
<i aria-hidden="true" class="fa fa-smile-o fa-5x"> </i>
</div>
</div>
Más adelante seguiremos analizando otras opciones para emular efectos Javascript con hojas de estilo CSS.
Si quieres ver el resultado en el entorno real visita efisioterapia.net desde el móvil o juega con el temaño de ventana de tu navegador.
