patacrep/patanet

Trop de clics

jmclem opened this issue · 20 comments

J'ai créé un carnet avec une 60aine de chants pris chez divers artistes; ça fait un paquet de clics...

  • Pour chaque page d'artistes
    • Pour chaque artiste
      • Pour chaque chant choisi
        • sélectionner chant
      • 'ajouter au carnet'
      • back

Après quelques chants, ça commence à devenir lourd, et ça augmente encore quand il y a plusieurs pages de chants.

Propositions :

  • suppression de la pagination des chants
  • retour automatique à la liste des artistes après "ajouter les chants au carnet"
  • ajout d'un chant en 1 clic (comme 'ajouter au panier' ;) ) (ajax)
  • ouvrir les chants dans la liste des artistes sous un artiste et ajout en 1 clic (ajax)
  • champ de recherche (artiste et chant) avec affichage dynamique des résultats et ajout en 1 clic depuis la liste dynamique (ajax aussi)

suppression de la pagination des chants

Je ne suis pas pour. Avec beaucoup de chants, c'est plus simple.

retour automatique à la liste des artistes après "ajouter les chants au carnet"

Oui, il faut ajouter un champ next pour l'ajout de tous les chants d'un artiste.

ajout d'un chant en 1 clic (comme 'ajouter au panier' ;) ) (ajax)
ouvrir les chants dans la liste des artistes sous un artiste et ajout en 1 clic (ajax)
champ de recherche (artiste et chant) avec affichage dynamique des résultats et ajout en 1 clic depuis la liste dynamique (ajax aussi)

Je suis pour, mais je n'ai pas les compétences. Donc si je m'en charge un jour, ce ne sera pas tout de suite.

Je ne suis pas pour. Avec beaucoup de chants, c'est plus simple.

alors mettre la limite à 30 ?

C'est-a-dire ? Avoir des page A1, A2, A3, etc. ayant chacune 30 chants ?

Non, je parle de la pagination des listes de chants pour un artiste. Aujourd'hui, pour plus de 10 chants, j'ai des pages (exemple : 3 pages pour http://songbook-web.tk/en/songs/le-donjon-de-naheulbeuk/ ). Pour en sélectionner quelques uns et les ajouter à un carnet, c'est longuet.

Je propose donc de paginer à 30 chants pour limiter la navigation dans la liste des chants.

Ca me va. Il suffit de modifier ca : https://github.com/patacrep/songbook-web/blob/master/generator/views.py#L180

EDIT: c'est mis sur la beta.

Je vais essayer de trouver du temps pour faire un wip AJAX; je pense que ça vaut le coup d'essayer.

Quelques autres réactions :

retour automatique à la liste des artistes après "ajouter les chants au carnet"

Depuis où ? On revient à la liste des artistes automatiquement si on a fait un ajout depuis la liste des artistes, à la liste des chansons si on a fait un ajout depuis la liste des chansons. On revient aussi au texte de la chanson depuis le texte de la chanson. Il faut donc choisir où redirige l'ajout d'une chanson depuis le texte de cette chanson. Liste des artistes ou liste des chants ?

ouvrir les chants dans la liste des artistes sous un artiste et ajout en 1 clic (ajax)

On peut le faire aussi sans AJAX (ça serait plus simple). On masque/affiche les chants d'un artiste avec du CSS, et on a une structure du type :

<ul class="selection">
  <li>Artiste 1
     <ul class="artist_songs">
      <li>Chant 1</li>
      <li>Chant 2</li>
      <li>Chant 3</li>
    </ul>
  </li>
  <li>Artiste 2
     <ul class="artist_songs">
      <li>Chant 1</li>
      <li>Chant 2</li>
      <li>...</li>
    </ul>
  </li>
</ul>

Du coup, on peut supprimer les SongListByArtist, qui ne sont pas très fournies de toute manière. Ou les garder pour un jour où il y aura plus de 5000 chants sur le site.

On peut le faire aussi sans AJAX (ça serait plus simple). On masque/affiche les chants d'un artiste avec du CSS

👍 Ça me parait un très bon compromis !

Effectivement c'est une bonne idée !

@oliverpool, quelle est la meilleure structure HTML pour faire ça ?

Vaut-il mieux avoir deux checkbox, une pour ajouter tout le contenu de l'article, et une pour afficher/masquer les chants, ou bien ajouter une checkbox "tous les chants" dans la liste des chants d'un artiste pour ajouter tous les chants de cet artiste ? (Je ne suis peut-être pas très clair ...)

@Luthaf je crois comprendre.

Je pense qu'il vaut mieux deux checkbox distinctes (ce qui fait au total 3 "types" de checkbox):

  • Pour les artistes : <input type="checkbox" name="artists[]" value="56" id="artist_56" />
  • Pour les chants : <input type="checkbox" name="songs[]" value="37" id="song_37" />
  • Pour l'affichage/masquage des chants : <input type="checkbox" name="songs_of_56" id="songs_of_56" class="toggle_checkbox" />

Les deux premiers sont assez naturels, et permettent de récupérer en POST deux tableaux (artists et songs) contenant les id des éléments à rajouter au carnet.

Le dernier type est purement artificiel:

  • on écrit les checkbox juste avant une balise contenant les chants de l'artiste (probablement un <ul>)
  • on les cache en CSS .toggle_checkox{display:none}
  • on rajoute un <label for="songs_of_56">Chants (5)</label> (d'où l'utilité de l'id) pour les cocher/décocher
  • on affiche les chants lorsque la case est cochée en CSS .toggle_checkox:not(:checked) + ul {display:none}

Qu'en pensez-vous ?

@oliverpool, c'est exactement ce que je demandais. J'ai essayé de le mettre en place (9f30991), mais le CSS n'est pas pris en compte ...

J'ai pourtant vérifié deux fois les sélecteurs ... Quelqu'un voit-il le bug ?

il faudra rajouter une touche de JS, pour que le (dé)cochage d'un artiste (dé)coche les chants de cet artistes.
Et que le décochage d'un chant, décoche l'artiste
(et que les chants ne soient pas ajoutés deux fois au carnet, mais normalement c'est déjà ok ?)

et que les chants ne soient pas ajoutés deux fois au carnet, mais normalement c'est déjà ok ?

Ça, c'est bon. Moi je veux bien faire du JS, mais que si c'est en python, ou en lua. Plus sérieusement, il faudrait que je m'y mette un jour.

J'ai pas de soucis avec le JS, il faut "juste" que je trouve le temps...

Ça, c'est bon. Moi je veux bien faire du JS, mais que si c'est en python, ou en lua. Plus sérieusement, il faudrait que je m'y mette un jour.

J'ai commencé à jouer avec jquery ! Sur la branche JS, il y a un début d'implémentation du drag'n drop pour la réorganisation des chants. Du coup, je vois moins l'intérêt de séparer affichage du contenu du carnet/organisation des chants. Je propose donc de réunir les urls /fr/songbooks/<id>-<slug>/ et /fr/songbooks/<id>-<slug>/songs en une seule vue.

Réunir les url me parait une bonne idée ! (cf mes issues sur le design)

Edit : j'ai toujours pas énormément de temps libre...mais dites-moi si mes propositions de design vous paraissent pas mal, pour que j'achève de les développer!

j'ai toujours pas énormément de temps libre...mais dites-moi si mes propositions de design vous paraissent pas mal, pour que j'achève de les développer!

Moi ce que j'en ai vu me plaît bien ! Il faut juste voir avec ce qu'est en train de faire @jmclem pour la personnalisation des mises en pages. Mais pour le reste, tu as mon approbation.

il faudra rajouter une touche de JS, pour que le (dé)cochage d'un artiste (dé)coche les chants de cet artistes.

Du coup, on pourra se passer d'un traitement diffèrent en Python : dans tous les cas, on a juste une liste de chansons a traiter.

C'est fait aussi (c3a3b74). Si cela vous convient, on peut fermer. Il ne manquera qu'un peu de CSS

PS : avec jquery, ce n'est pas si terrible JS =)