トピックフッターの返信ボタンがスレッドを壊す可能性があります

貢献 UX
11

Don、ありがとうございます。長年これをやりたかったのです！自分のニーズに合わせて、あなたのアイデアをさらに一歩進めました。私のサイトは少し異なり、各カテゴリが単なる直接的な議論ではなく、それぞれ異なるため、返信ボタンのテキストを完全に変更することにしました。そのため、画像レビューカテゴリでは「クリティズムを提供する、または返信する」に変更しました。「または返信する」を追加することで、Jakkeさんの懸念を回避できると考えています。Jakkeさん、指摘してくれてありがとう。最初は「クリティズムを提供する」のみに設定していましたが、すべての状況で機能するわけではないというあなたの意見は正しいです。

font-size: 0 のトリックは好きではありませんが、visibility:hidden のトリックがなぜかこれでは機能しませんでした。また、font-size を px ではなく 1em に設定しようとしましたが、それも機能しないようでした。結局、そのボタンを目立たせるために少し大きめのフォントを使用しましたが、フォントがスケーリングされるように em を使用したいと考えています。

// 画像レビュー
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 {
          // 返信テキストを非表示にする
          font-size: 0;
        }
      }
    }
  }

  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label:after {
          // 新しいテキスト
          font-size: 18px;
          content: "Critique Image or Reply";
        }
      }
    }
  }
}

これは、AMA カテゴリで返信ボタンを「質問する」に変更した際に特に役立ちます。完璧です！また、AMA を行う人が小さな返信ボタンを使用する必要があることを理解するのに役立ちます。

// AMA
body.category-learning-ama {
  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label {
          // 返信テキストを非表示にする
          font-size: 0;
        }
      }
    }
  }

  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label:after {
          // 新しいテキスト
          font-size: 18px;
          content: "Ask a question";
        }
      }
    }
  }
}

返信ボタンに背景色を設定して、少し目立たせました。ホバー時のトランジションを適切に設定する方法はまだ見つかっていません。何かアイデアがあれば教えてください…

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

image
image1880×1430 116 KB

とにかく、私の rambling が他の人の役に立つことを願っています！

「いいね！」 2