トピックカード

タグの場所を変更するには、ファイルをどのように変更すればよいか教えてください。
タイトルを最初にするべきだと思います。

変更前:

変更後:

「いいね!」 4

この素晴らしいTCをありがとうございます。見た目は本当にモダンでシンプル、そして上品に見えます。

質問とリクエストが1つあります。

検索結果の表示も同じような外観にできますか?ユーザーは検索機能をよく利用するため、検索結果の表示がTCの表示と同じであれば、本当に素晴らしいと思います。

改めて、この作業に感謝いたします。

「いいね!」 2

それはクールですが、残念ながらアプリのまったく別の領域です。そのため、そこに適用することはできません。それは基本的にそれを達成するためのまったく新しいコンポーネントになります。

「いいね!」 3

@chapoi 画像サイズと被写界深度を小さくするにはどうすればよいですか?

トピックカードが大きすぎます

「いいね!」 1

これは本当に素晴らしいテーマコンポーネントです。以下の設定を追加する改善を提案してもよろしいでしょうか。

  • 角丸設定値またはオフ
  • 影設定値またはオフ
  • 返信、表示、アクティビティの有効/無効設定
  • ポスター表示の真偽
「いいね!」 3

他の誰かが役立つと思う場合に共有しておきます。

私の場合、Minimaテーマにこのテーマコンポーネントをインストールしたときに、サムネイルがある場合のトピックカードの最大高さが十分でないという同じ問題がありました。

これは、それを修正するために使用した関連CSSです。

//サムネイル付きトピックカードの最大高さを増やす
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

(インスペクターで確認したところ、デフォルトの高さは210pxのようでした)

ただし、調整が必要になる場合があります。モバイル幅では確認していません。

「いいね!」 4

トピックカードを使用するカテゴリを選択するように構成できるかどうか疑問に思っていました。これは、トピックサムネイルがモバイルでそれほど親切ではないため、Theme で使用されると素晴らしいでしょう。

非常に良いコンポーネントです。

「いいね!」 3

はい、これが私が以前言ったことです。他のパラメータによっては、210pxでは小さすぎたり、275pxでは大きすぎたりする可能性があります。万能な解決策を用意するのは難しいです。

@Heliosurgeがリクエストしたように)カテゴリを選択するなどの設定を追加するかもしれません。また、各フォーラムが調整できるように最大サイズ設定も追加するかもしれません。

「いいね!」 5
  1. 写真を右にスライドさせることについてはどうですか?
    写真の有無で配置が異なり、一貫性がありません。
  2. コンテンツの一部が表示されると、下のテキストが切り取られる傾向があるようです。
「いいね!」 3

Air Theme でこのテーマコンポーネントがどのように表示されるか、また画像あり・なしのトピックを組み合わせた場合の表示について気になっていました。有望に見えますが、まだ完璧ではありません。CSSだけで問題を解決できるのか、それともより深い作業が必要なのかもしれません。

モバイルではうまく表示されます!

今はアンインストールしますが、意図したとおりに非常にうまく見えるので、このトピックを注視していきます。

そして、トピック自体に画像がない場合にカテゴリ画像を使用するのは、良い追加機能になるでしょう。

「いいね!」 3

トピックカードコンポーネントが、公式の Topic List Thumbnails のブログモードのように、トピックの「:heart:」だけでなく、ビューとコメントも表示するにはどうすればよいですか?

トピックリストサムネイル

トピックカード

また、「Topic List Thumbnails」の最後の活動日(上記の「1d」)の使用は、「Topic Card」の「Published」日付よりも優れていると思います。活動日はDiscourseのデフォルトと一貫性があり、ユーザーにより多くの情報を提供します。また、デザインの実装は、ビュー、いいね、投稿の横に非常によく収まります。

もしよろしければ、デフォルトテーマ、https://meta.discourse.org/t/discourse-air-theme/197703、Topic Cards、Topic List Thumbnails の組み合わせ、およびかなりのCSSの調整を何時間もテストした後の追加の考えをいくつか紹介します。

最終的に、Topic Cards + デフォルトテーマに、カテゴリ用のカードを提供し、トピックカードと一致するModern Category + Group Boxes を追加して落ち着いています。

理由:

  • Topic Cards は、画像のある投稿とない投稿をエレガントに処理します。
  • Airテーマは非常にクールですが、Topic CardsとModern Categoryでほとんどそこに到達します。
  • デフォルトテーマを使い続けることで、公式のテーマコンポーネントとの互換性がすぐに確保されます。
「いいね!」 3

わかりました、おそらくこの質問はもっと簡単です。 :sweat_smile:

現在、どのページの最後にも表示される「おすすめトピック」は、カード形式でも表示されています。メインページでのカード表示は気に入っていますが、すべてのページの最後に表示されるカードは大きすぎ、実際のページコンテンツやディスカッションの邪魔になっていると思います。

メインページのトピックカードに影響を与えることなく、おすすめトピックを(デフォルトテーマにできるだけ近い)プレーンなリストで表示する方法はありますか?

「いいね!」 2

現時点では、いいえ。しかし、それは私の意見では良い質問なので、機能リクエストを作成して、それがそのように採用されるかどうかを試すことができます。

「いいね!」 3

わかりました、ありがとうございます。上記の他のリクエストについても同様に行いました。

ところで、昨日、カードからはみ出すコンテンツの問題に遭遇したので、これを試しました。

これはモバイルビューを壊しませんでしたか?試してみましたが、私の場合は壊れてしまいました。

「いいね!」 3

確認してみます。最低でも、調整を容易にするために高さの設定を追加します。忘れないようにリマインダーを設定しておきます。

「いいね!」 5

トピックカードの高さを制限するのに役立つ可能性のあるいくつかの観察事項があります。これを徹底的にテストしたわけではありませんが、次のようです…

  • 説明は常に3行に制限されていますが、タイトルは2行以上にジャンプする可能性があります。タイトルが2行目を必要とするのは比較的簡単であり、デザインはそのことを考慮に入れることができます。
  • タグが多く、カテゴリの隣に収まらない場合、それらはすべて下の新しい行にジャンプします。タグが常にカテゴリの隣でレンダリングを開始し、最初の行に収まらないタグを2行目に流し込む方が、より自然でスペース効率が良いでしょう。
  • 「公開 [日付]」と「:heart:」は、著者の下に新しい行に表示されます。ただし、「公開」要素は、著者の行と同じ行で、右揃えで「:heart:」の隣に配置できます。これにより、すべてのエントリで垂直スペースが節約され、コンテンツがはみ出すリスクが軽減されます。

念のため、タグに関する説明が不明瞭な場合。ここでは、デフォルトでカテゴリの隣で開始するのではなく、新しい行で開始する方法を示します。

「いいね!」 3

これはここで発生しています

「いいね!」 2

タグに1行の制限を強制することは技術的に可能かどうか疑問に思っていました。タイトルには2行、説明には3行の制限が強制されているのと同じようにです。

ほとんどのDiscourseインスタンスでは0〜5個のタグが使用され、それらには1行で十分です。一部のインスタンス(私たちのインスタンスなど)ではタグが広範囲に使用されるかもしれませんが、トピックカードでそれらすべてを見る必要はありません。最初のいくつかを見るだけで、アイデアを得るのに十分です。

行数に制約を追加すると、さまざまな画像サイズやアスペクト比でトピックカードがより信頼性が高くなります。

  • カテゴリとタグには1行
  • タイトルには最大2行
  • 説明には最大3行
  • 作成者、公開日、いいね!には1行
「いいね!」 3

参考までに、これは Add icons for Views and Replies, and Last Activity date in Topic Cards で対応する予定です。

「いいね!」 4

ああ、はい、そこでコメントするのを忘れました:そのコードを common.scss ではなく desktop.scss に追加する必要がありました。

元のコメントは編集できませんが、テーマコンポーネントで更新しました:Minima Adjustments for Topic Cards

「いいね!」 3