토픽 푸터의 답글 버튼이 스레드를 깨뜨릴 수 있음

기여 UX
11

이것을 알려주셔서 감사합니다, Don. 저는 몇 년 동안 이걸 해보고 싶었습니다! 제 필요에 맞춰 이 아이디어를 한 단계 더 발전시켰습니다. 제 사이트는 조금 특별해서 모든 카테고리가 단순한 토론이 아니기 때문에, 답글 버튼의 텍스트를 완전히 변경하는 방식을 선택했습니다. 예를 들어 이미지 비평 카테고리는 "비평을 달거나 답글을 남기세요"로 변경했는데, '또는 답글을 남기세요(or Reply)'를 추가함으로써 Jakke님의 우려를 해결할 수 있다고 생각합니다. 그 점을 언급해 주셔서 감사합니다, Jakke. 처음에는 단순히 "비평을 달아주세요"로 설정해 두었는데, 말씀하신 대로 모든 상황에 적용하기는 어렵다는 점이 맞습니다.

font-size: 0 트릭은 좋아하지 않지만, 어떤 이유인지 모르겠지만 visibility:hidden 트릭은 이 경우 작동하지 않았습니다. 또한 px 대신 1em으로 font-size를 설정해 보았지만 이것도 작동하지 않는 것 같았습니다. 결국 버튼이 눈에 더 잘 띄도록 약간 더 큰 폰트를 사용했지만, 폰트가 스케일링되도록 em을 사용하는 편이 더 좋았을 것 같습니다.

// Image Critique
body.category-image-critiques-abstract-critiques,
body.category-image-critiques-avian-critiques,
body.category-image-critiques-flora-critiques,
body.category-image-critiques-human-fauna-critiques,
body.category-image-critiques-landscape-critiques,
body.category-image-critiques-macro-critiques,
body.category-image-critiques-night-critiques,
body.category-image-critiques-non-nature-critiques,
body.category-image-critiques-wildlife-critiques,
body.category-image-critiques-weekly-challenge {
  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label {
          //hide reply text
          font-size: 0;
        }
      }
    }
  }

  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label:after {
          // New text
          font-size: 18px;
          content: "Critique Image or Reply";
        }
      }
    }
  }
}

이것은 특히 AMA(Ask Me Anything) 카테고리에 매우 유용합니다. 여기서 답글 버튼을 "질문하기"로 변경했는데, 완벽합니다! 또한 AMA 진행자가 작은 답글 버튼을 사용해야 함을 이해하는 데도 도움이 됩니다.

// AMA
body.category-learning-ama {
  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label {
          //hide reply text
          font-size: 0;
        }
      }
    }
  }

  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label:after {
          // New text
          font-size: 18px;
          content: "Ask a question";
        }
      }
    }
  }
}

또한 답글 버튼에 배경색을 설정하여 더 눈에 띄게 했습니다. 호버 시 올바르게 전환되는 방법을 아직 찾지 못했는데,这方面的 아이디어가 있다면 도움이 될 것입니다…

.discourse-no-touch .topic-body .actions .fade-out {
    background: var(--primary-low);
}

image
image1880×1430 116 KB

어쨌든, 제 이 긴 글이 다른 분들에게 도움이 되길 바랍니다!

2개의 좋아요