그룹 멤버 페이지에서 게시 및 확인 열을 숨기는 CSS, 2탄

개발
1

2021년 3월에 작성된 이 포럼 스레드를 이어가겠습니다:

데스크톱 뷰에서 그룹 상세 페이지의 멤버 목록에서 “게시”(Posted)와 “확인”(Seen) 열을 숨기도록 설정한 CSS가, 가입 요청을 받아들이도록 설정된 그룹에서 승인(Accept) 및 거절(Deny) 버튼까지 함께 숨기는 문제가 발생하고 있습니다.

수정 또는 교체해야 하는 CSS는 다음과 같습니다.

/* Remove "Posted" and "Seen" columns from group-detail member lists */
.group-members {
  th {
    &:nth-child(5),
    &:nth-child(6) {
      display: none;
    }
  }
  td {
    &:nth-child(4),
    &:nth-child(5) {
      display: none;
    }
  }
}

nth-child CSS 코드를 사용할 경우와 승인 및 거절 버튼이 사라지는 문제 사이의 트레이드오프를 보여주는 영상이 있습니다:

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

https://[yourdiscourseforumurl].com/g/[YourGroupName]에서 오직 "게시"와 “확인” 열만 숨기고 다른 것은 숨기지 않도록 더 정밀하게 조정된 CSS를 제공해 주실 분께 미리 감사드립니다.

2

안녕하세요,

이 문제는 타겟팅할 특정 클래스가 없어서 다소 까다로울 수 있습니다. 하지만 CSS 솔루션을 찾았으니 템플릿을 수정하지 않고도 해결할 수 있을 것 같습니다. :slightly_smiling_face:

문제는 td 요소 자체에는 쉽게 타겟팅할 수 있는 특정 클래스가 없다는 점입니다. 대신 td 내부의 요소를 타겟팅할 수는 있습니다.

아래 CSS는 td 내부의 요소를 확인하여 span이면 숨깁니다(날짜는 span 안에 있습니다). 하지만 요청 페이지에서는 버튼이 button 요소이므로 이 CSS는 버튼이 포함된 td를 숨기지 않습니다.

/* Remove "Posted" and "Seen" columns from group-detail member lists */
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 클래스가 나타나는 곳에서만 활성화됩니다. 요청 페이지에는 이러한 클래스가 나타나지 않으므로 활성화되지 않습니다.

/* Remove "Posted" and "Seen" columns from group-detail member lists */
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: