CSS для скрытия колонок «Posted» и «Seen» на странице участников группы, часть 2

Разработка
1

Продолжая тему этого обсуждения на форуме от марта 2021 года:

CSS-код, скрывающий колонки «Posted» и «Seen» в списках участников группы на рабочем столе, теперь также скрывает кнопки «Принять» и «Отклонить», когда для группы включена настройка «Требуется запрос на вступление».

Ниже приведён CSS, который необходимо изменить или заменить.

/* Удалить колонки «Posted» и «Seen» из списков участников в группе */
.group-members {
  th {
    &:nth-child(5),
    &:nth-child(6) {
      display: none;
    }
  }
  td {
    &:nth-child(4),
    &:nth-child(5) {
      display: none;
    }
  }
}

Ниже приведено видео, демонстрирующее компромисс между использованием CSS-кода с nth-child и исчезновением кнопок «Принять» и «Отклонить»:

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

Заранее благодарим доброго человека, который предоставит более точный CSS-код, чтобы я мог скрыть только колонки «Posted» и «Seen», не скрывая ничего другого, на странице https://[yourdiscourseforumurl].com/g/[YourGroupName]

2

Здравствуйте,

Это непростая задача, так как, насколько я вижу, нет конкретного класса для таргетинга. Однако, думаю, я нашел CSS-решение, поэтому это можно реализовать без изменения шаблона. :slightly_smiling_face:

Проблема в том, что у td нет конкретных классов, по которым их можно легко таргетировать, но можно таргетировать то, что находится внутри них.

Этот CSS проверит содержимое td, и если там span, он скроет его (даты находятся в span). Но на странице запросов кнопки имеют тег button, поэтому этот CSS не скроет кнопки в td.

/* Удалить столбцы "Опубликовано" и "Просмотрено" из списков участников в группе */
table.group-members {
  th {
    &:nth-child(4),
    &:nth-child(5) {
      display: none;
    }
  }
  td {
    &:nth-child(4),
    &:nth-child(5) {
      > span {
        display: none;
      }
    }
  }
}

Другой метод :arrow_down_small:

Однако можно таргетировать bulk-select в строке заголовка таблицы и класс group-owner в строке тела таблицы. Этот CSS сработает только там, где присутствуют bulk-select и класс group-owner. На странице запросов их нет, поэтому этот код не сработает.

/* Удалить столбцы "Опубликовано" и "Просмотрено" из списков участников в группе */
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;
    }
  }
}

Надеюсь, это поможет :slightly_smiling_face: