iOS에서 주제 푸터 버튼을 삭제할 수 없습니다

개발
1

데스크톱에서 토픽 하단의 플래그(Flag)와 공유(Share) 버튼을 제거하는 데 성공했지만, iOS 앱에는 여전히 플래그와 공유가 포함된 “토픽 제어(Topic Controls)” 드롭다운 메뉴가 남아 있습니다. CSS는 “공통(Common)” 섹션에서 수정했습니다.

이것이 버그인가요?

(토픽 하단 버튼들은 모바일 화면에서 특히 어수선한데, 불필요하게 큰 “토픽 제어” 버튼이 있는 것은 좀 짜증스럽습니다. 게다가 "북마크"도 제거할 방법이 없는 것 같아 또 다른 큰 버튼으로 자리 잡고 있거든요. 만약 이것들이 아이콘 형태였다면 덜 불편했을 텐데, 현재로서는 토픽 끝부분의 화면 절반 가까이가 버튼으로 가득 차 있습니다.)

2

관련 CSS를 여기에 공유해 주실 수 있나요? 모바일에 적용되려면 더 구체적으로 지정해야 할 가능성이 큽니다.

3 
button#topic-footer-button-flag {
    display: none;
}

button#topic-footer-button-share-and-invite {
    display: none;
}

고정(pinned)과 알림(notifications) 텍스트도 제거했습니다:

#topic-footer-buttons .pinned-button {
    display: none;
}


#topic-footer-buttons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    button.create { order: -1; }
    
    .topic-notifications-button {
        margin-block: 0;
        
        .reason  {
            margin-top: 0;
            
            .text {
                display: none;
            }
        }
    }
}

@media screen and (max-width: 924px) {
    html.desktop-view #topic-footer-buttons .topic-notifications-button {
        margin-top: 1em;
    }
}

감사합니다!

4

네, 모바일에서는 토픽 푸터 컨트롤이 완전히 별도의 컴포넌트로 구성되어 있어서, 현재 CSS가 너무 구체적이라 데스크톱에만 적용되고 있습니다.

아래처럼 하면 데스크톱과 모바일 모두에서 동작해야 합니다:

#topic-footer-buttons {
  .flag-topic, 
  .share-and-invite {
    display: none;
  }
}

CSS 셀렉터를 확인하는 방법에 대한 간단한 튜토리얼이 있습니다: Making custom CSS changes on your site

개발 환경을 설정하지 않은 상태에서는 모바일을 확인하는 것이 조금 까다로울 수 있지만, 포럼 URL 끝에 ?mobile_view=1을 추가하면 데스크톱에서 모바일 뷰를 볼 수 있어 작업이 훨씬 쉬워집니다.

5

감사합니다! ?mobile_view=1에 대해서는 몰랐네요.

참고로, (이제 비어 있는) 드롭다운을 없애기 위해 다음 코드도 추가해야 했습니다:

#topic-footer-buttons .topic-footer-mobile-dropdown {
  display: none;
}