CSS pour masquer les colonnes Posté et Vu sur la page des membres du groupe, 2ème essai

Dev
1

Suite à ce fil de discussion de mars 2021 :

Le CSS pour masquer les colonnes « Publié » et « Vu » des listes de membres des détails de groupe en vue de bureau masque désormais les boutons Accepter et Refuser lorsqu’un groupe nécessite une demande pour rejoindre.

Voici le CSS qui doit être modifié ou remplacé.

/* Supprimer les colonnes "Publié" et "Vu" des listes de membres des détails de groupe */
.group-members {
  th {
    &:nth-child(5),
    &:nth-child(6) {
      display: none;
    }
  }
  td {
    &:nth-child(4),
    &:nth-child(5) {
      display: none;
    }
  }
}

Voici une vidéo qui montre le compromis entre l’utilisation du code CSS nth-child et la disparition des boutons Accepter et Refuser :

https://www.loom.com/share/d066ea1a765a4ce4b3b13a952f98fb1b

Merci d’avance à la personne aimable qui fournira un CSS plus ciblé afin que je puisse masquer uniquement les colonnes Publié et Vu sans masquer quoi que ce soit d’autre sur https://[votreurlduforumdiscourse].com/g/[votre nom de groupe]

2 « J'aime »
2

Bonjour,

C’est délicat car, d’après ce que je vois, il n’y a pas de classe spécifique à cibler. Mais je pense avoir trouvé des solutions CSS, donc cela devrait être réalisable sans modifier le modèle. :slightly_smiling_face:

Le problème vient du fait que les td n’ont pas de classes spécifiques que vous pouvez cibler facilement, mais vous pouvez cibler ce qu’il y a à l’intérieur.

Ce CSS vérifiera ce qu’il y a à l’intérieur du td et si c’est un span, il le masquera (les dates sont dans des span). Mais sur la page des requêtes, les boutons sont des button, donc ce CSS ne masquera pas les td des boutons.

/* Supprimer les colonnes "Posté" et "Vu" des listes de membres group-detail */
table.group-members {
  th {
    &:nth-child(4),
    &:nth-child(5) {
      display: none;
    }
  }
  td {
    &:nth-child(4),
    &:nth-child(5) {
      > span {
        display: none;
      }
    }
  }
}

Autre méthode :arrow_down_small:

Cependant, vous pouvez cibler bulk-select sur la ligne d’en-tête du tableau et la classe group-owner sur la ligne du corps du tableau. Ce CSS ne s’active que là où les classes bulk-select et group-owner apparaissent. Celles-ci n’apparaissent pas sur la page des requêtes, donc cela ne s’activera pas.

/* Supprimer les colonnes "Posté" et "Vu" des listes de membres group-detail */
table.group-members {
  th.bulk-select {
    + th + th + th,
    + th + th + th + th {
      display: none;
    }
  }
  td.group-owner {
    + td + td,
    + td + td + td {
      display: none;
    }
  }
}

J’espère que cela vous aidera :slightly_smiling_face:

3 « J'aime »
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.