Dissocier le formulaire de vote du tableau des résultats
Je remets ici un truc que j'avais déjà proposé l'été dernier et pour lequel je n'avais pas eu de retour :
J'ai pondu un brouillon de script[1] qui, à partir du code existant, remplace le formulaire de vote actuellement sur une seule ligne par une fenêtre modale dans laquelle les champs sont en colonnes (cf 2 captures d'écran "tablette" en 768x1024).
L'intérêt concerne surtout les interfaces mobiles mais on pourrait peut-être l'appliquer par défaut partout ou au moins permettre de switcher entre ces 2 affichages ? Il y a un vrai souci d'ergonomie avec les sondages qui contiennent un très grand nombre de colonnes. Pour le tableau des résultats ce n'est pas forcément très grave mais pour participer en revanche c'est nettement plus embêtant : pb de scroll horizontal, boutons "Enregistrer" masqué, pb de clavier…
[1] en pj, vous pouvez l'ouvrir avec l'ardoise javascript, l'exécuter sur un sondage existant et en modifiant la largeur sur la vue adaptative de Firefox vous devriez voir le boutons apparaître ; y a des petits ajustements css à faire mais tel quel déjà le formulaire fonctionne)
Voilà le script en question :
var voteTable = '<table id="#colVoteForm" class="table" style="margin-bottom:0">';
jQuery('#vote-form').find('td').each(function (labelIndex) {
if(jQuery(this).find('.yes label').attr('title')!=undefined) {
voteTable = voteTable+
'<tr>'+
' <td><p class="text-right"><b>'+jQuery(this).find('.yes label').attr('title').replace('Voter « oui » pour ','')+'</b></p></td>'+
' <td>'+jQuery(this).html().replace('list-unstyled choice','list-inline').replace(/class="btn /g,'style="border-radius:3px !important;margin:0 !important" class="btn ')+'</td>'+
'</tr>';
}
});
voteTable = voteTable+'</table>';
var modalVoteForm = '<p class="text-center visible-xs-block">'+
' <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#modalVoteForm"><i class="fa fa-fw fa-lg fa-check-square-o"></i> Participer au vote</button>'+
'</p>'
jQuery('#tableContainer').after(
modalVoteForm+
'<div class="modal fade" id="modalVoteForm" tabindex="-1" role="dialog" aria-labelledby="modalVoteForm">'+
' <div class="modal-dialog" role="document">'+
' <div class="modal-content">'+
' <div class="modal-header">'+
' <button type="button" class="close" data-dismiss="modal" aria-label="Fermer"><span aria-hidden="true">×</span></button>'+
' <h4 class="modal-title" id="modalVoteFormLabel">Voter</h4>'+
' </div>'+
' <div class="modal-body">'+
' '+jQuery('#vote-form td:eq(0)').html()+
' <br/>'+voteTable+
' </div>'+
' <div class="modal-footer">'+
' <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>'+
' '+jQuery('#vote-form button[name="boutonp"]').parent().html()+
' </div>'+
' </div>'+
' </div>'+
'</div>'
)
jQuery('#tableContainer').before(modalVoteForm);
jQuery('#vote-form').addClass('hidden-xs');