새 주제 버튼 숨김 텍스트

개발
1

안녕하세요! 새 글(New Post) 버튼의 스타일을 변경하려고 시도하고 있지만 방법을 찾지 못해서, 어떻게 해결할 수 있을지 아이디어를 얻고자 도움을 요청합니다.

데스크톱과 모바일 뷰에서 새 글(New Topic) 버튼이 다음과 같이 보입니다:

image
image743×157 12.1 KB

반응형 디자인 때문에 버튼의 New Topic 텍스트가 숨겨집니다. 모바일 뷰에서도 이 텍스트가 보이도록 유지하고 싶은데, 어떻게 하면 될까요?

추가로, 각 뷰에서 나타나는 HTML 요소는 다음과 같습니다:

모바일의 요소:

<button class="btn no-text btn-icon btn-default" id="create-topic" type="button">
<svg class="fa d-icon d-icon-far-pen-to-square svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#far-pen-to-square"></use></svg>      <span aria-hidden="true">
          ​
        </span>
    </button>

데스크톱의 요소

<button class="btn btn-icon-text btn-default" id="create-topic" type="button">
<svg class="fa d-icon d-icon-far-pen-to-square svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#far-pen-to-square"></use></svg>      <span class="d-button-label">New Post<!----></span>
    </button>

도움 주시면 감사하겠습니다!

3

실제로 모바일에서 이 텍스트를 다시 가져올 좋은 방법이 없었기 때문에, 하나 추가했습니다: DEV: add create-topic-label value transformer by awesomerobot · Pull Request #32621 · discourse/discourse · GitHub — 다음 Discourse 업데이트 시 이 기능이 적용됩니다.

이 변경 사항을 통해 원격 테마의 초기화 파일(initializer file) 또는 관리자 패널의 admin/customize/themes 코드 편집기 JS 탭을 통해 기본 동작을 오버라이드할 수 있습니다:

The image shows a webpage development tool focused on editing HTML, with options to modify CSS, edit before and after headers, and include JavaScript. (Captioned by AI)
The image shows a webpage development tool focused on editing HTML, with options to modify CSS, edit before and after headers, and include JavaScript. (Captioned by AI)1090×129 7.82 KB

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {

  api.registerValueTransformer("create-topic-label", ({ value, context }) => {
    return context.defaultKey;
  });

});

:backhand_index_pointing_up: 이 코드는 모바일/데스크톱 전환 기본 동작을 오버라이드하여 라벨이 두 곳 모두에 표시되도록 합니다:

image
image431×151 6.84 KB