Masquer tous les champs personnalisés sauf un dans la file d'attente d'examen de l'approbation des utilisateurs

Soutien
1

Quelqu’un peut-il m’aider avec du CSS ?

Nous avons beaucoup de champs personnalisés par l’utilisateur (UCF) dans notre forum, dont un seul est utilisé pour l’inscription ; celui-ci est essentiel pour décider de l’approbation ou non.

Par conséquent, je souhaite maintenant masquer tous ces champs sauf celui-ci (qui se trouve être le premier) dans la file d’attente de révision, afin que mes modérateurs n’aient pas à parcourir une foule de champs vides pour chaque approbation de nouvel utilisateur.

J’en suis arrivé là :

.reviewable-user-details.user-field{
     display: none;
    /*tentative de masquer les UCF dans la file d'attente de révision - pour l'instant, cela les masque tous*/
}

Cela les masque tous, mais je dois toujours afficher le premier. J’ai essayé &:nth-of-type(1), mais cela ne fonctionne pas ici - je pense à cause de la façon dont le HTML fonctionne. Les éléments n’ont pas de classes.

Des suggestions ?

6

J’ai apporté une modification mineure qui permettra à votre CSS &:nth-of-type(1) de fonctionner ; nous avions un div conteneur supplémentaire qui l’empêchait. Cela devrait être disponible si vous mettez à jour votre site dans quelques heures.

7

Vous êtes formidables !!! Merci beaucoup !!!

8

Je vois que les divs Ember ont maintenant disparu — merci.

Cependant, je n’arrive toujours pas à faire fonctionner le CSS ; il les cache tous. J’ai essayé plusieurs variantes ; peut-être que je fais quelque chose de bête. D’ailleurs, je me demande ce qui se passerait si cela fonctionnait comme je le souhaite : est-ce que la 2ᵉ ou la 3ᵉ personne ayant besoin d’une approbation verrait tous ses champs masqués ?

Voici ce que j’ai essayé :

.reviewable-user-details.user-field {
    display: none;
            &:nth-of-type(1){
            display: block;
        }
}
9

Ah, c’est logique que ça ne fonctionne pas… J’oublie toujours que nth-of-type se concentre sur l’élément et non sur la classe.

Donc, dans ce cas, il n’y a que des noms de classe et aucun élément, c’est pourquoi cela ne fonctionne pas. Cependant, si vous ajoutez l’élément (div dans ce cas), la règle ne correspondra que si le premier frère div possède également la classe .user-field (ce qui n’est pas le cas car il y a d’autres div dans ce parent qui précèdent les .user-field).

En bref… un sélecteur de frère général fonctionne ici à la place. Au sein de .reviewable-user-fields, cela sélectionne tous les .user-field qui sont des frères du premier .user-field.

.reviewable-user-fields .user-field ~ .user-field {
    display: none;
}
10

Je ne sais pas du tout de quoi vous parlez, mais cela fonctionne à merveille ; merci !

Cela pourrait aider d’autres personnes disposant d’un forum privé et qui utilisent le plugin Custom Wizard lors de l’inscription @Angus.

Comment pourrait-on révéler un 2e ou 3e .user-field ? Je n’en ai pas besoin pour le moment, mais cela pourrait devenir nécessaire à l’avenir.