-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Los formularios web de AI se encuentran dentro del entorno Web. Por lo tanto, en cuanto a diseño, se basan en el diseño general de la web. Además, cuentan con un diseño propio general para los formularios y, finalmente, individualmente pueden tener desarrollos extra a medida.
Los proyectos que almacenan estos diseños son:
- Estilo general de la web: https://github.com/amnesty/ai-frontend
- Estilo general de los formularios y específico para el formulario de asociación: https://github.com/amnesty/ai-formulario
- Tema usado para formularios en el entorno CiviCRM (Drupal), aplicando los dos estilos anteriores, el primero para cabecera y pie y el segundo para el formulario. También contiene la maquetación específica para el formulario de asociación: https://github.com/amnesty/ai-theme-civicrm
Para aplicar el diseño genérico a un nuevo formulario, nos basaremos en el estilo genérico de formularios de AI (el segundo del apartado anterior).
Se pueden ver un ejemplo de código en el diseño general de los formularios, y en concreto:
- Estructura: https://github.com/amnesty/ai-formulario/blob/master/example.html
- Diseño: https://github.com/amnesty/ai-formulario/blob/master/css/style-form.css
- JS: https://github.com/amnesty/ai-formulario/blob/master/js/example.js
Para bajar y ver el código:
git clone https://github.com/amnesty/ai-formulario.git
cd ai-formulario
Para generar compatibilidad entre la estructura de formularios que genera Drupal y el diseño genérico de formularios basado en Bootstrap, se han estandarizado una serie de clases CSS asociadas a cada tipo de elemento:
Genéricas del formulario:
- Contenedor de todo el formulario:
<div class=”content-form”> - Formulario:
<form class=”webform-conditional-processed”>
Genéricas elementos formulario:
- Elementos del formulario con borde negro redondeado:
<input class=”border-radius-form”> - Elementos / cajas con sombra
<input class=”shadow”>
Bloques de campos:
- Contenedor de cada bloque de campos:
<div class=”caja-content”> - Bloque de elementos activo:
<div class=”active”>(se debe usar una función en javascript que active la zona donde se encuentra el ratón / scroll en ese momento. Cuando la zona se activa, se pinta el background de otro color ) - Las filas de elementos (en horizontal) dentro de un bloque están en conjuntos de campos:
<fieldset class="clearfix">...</fieldset>
Checkboxes:
- Caja con checkboxes:
<div class=”caja-checkbox”>
Selects:
- Capa contenedora de la caja de select:
<div class=”margin-medium”> - Caja contenedora de un select:
<div class=”capa-select"> - Select:
<select class=”input-generic select”>
Inputs:
- Capa contenedora de un input de texto:
<div class=”margin-medium”> - Input:
<input type=”text” class=”input-generic”>
Botones:
- Botón de enviar:
<input type=”submit” class=”button-primary”>
Títulos:
- Título de bloque de datos:
<h2>...</h2>
El código CSS específico para cada formulario de AI también se encuentra dentro de este proyecto y se puede consultar a modo de ejemplo.
El código específico del formulario de asociación es el siguiente:
- Estructura: https://github.com/amnesty/ai-formulario/blob/master/formulario-socixs.html
- Diseño: https://github.com/amnesty/ai-formulario/blob/master/css/socixs-form.css
- JS: https://github.com/amnesty/ai-formulario/blob/master/js/socixs-form.js
A partir de la estructura general de los elementos descritos en el primer apartado se puede adaptar de manera específica su diseño. En concreto, es preciso especificar:
- Ancho del elemento (con el size del tag html o con el width del elemento)
- Márgenes y espaciados
Existe código Javascript/JQuery ad-hoc para algunos formularios.
En concreto, el formulario de socias y socios lo usa para conseguir, por ejemplo, el cambio de zona activa en el formulario. Las funciones están contenidas en https://github.com/amnesty/ai-formulario/blob/master/js/socixs-form.js y se pueden usar a modo de ejemplo.