トピックカード

テーマコンポーネント
,
62

The image shows a screenshot of a real estate listing from nhasi.com.vn for apartments located at 9/11 Nguyễn Văn Đà Kao, Quận 1, Tầng 1, featuring photographs of the building and local street scenery. (Captioned by AI)
The image shows a screenshot of a real estate listing from nhasi.com.vn for apartments located at 9/11 Nguyễn Văn Đà Kao, Quận 1, Tầng 1, featuring photographs of the building and local street scenery. (Captioned by AI)1080×2316 142 KB

現在、ホームページがSamsung S23 Ultraで正しく表示されていません。単一の投稿が原因で、テキストがオーバーフローし、レイアウト全体が崩れています。

この問題は、投稿自体によるものですか、それともテーマコンポーネントのバグによるものですか？

よろしくお願いします！

「いいね！」 1
63

投稿内のGoogleマップのリンクが原因で問題が発生していることを確認しました。

リンクがmaps.google.comの形式であれば、問題なく動作します。

「いいね！」 2
65

Topic Cards コンポーネントは、Upcoming topic-list changes - how to prepare themes and plugins の準備をしていますか？ Discourse をアップグレードしたところ、管理者にこのコンポーネントを更新する必要があるという通知が表示されました。

66

すでに更新済みですので、警告は表示されないはずです。このコンポーネントの最新の公式バージョンを実行しており、フォークではないことを再確認していただけますか？

「いいね！」 1
67

ああ、本当だ！私のミスです。https://github.com/communiteq/discourse-topic-cards を実行していることを忘れていました。 https://github.com/communiteq/discourse-topic-cards

@RGJ お手数ですが、あなたのフォークとメインリポジトリとの現在の違いについてご存知ですか？

「いいね！」 2
69

はい、メインリポジトリは適切にメンテナンスされています…来週初めには対応します。

「いいね！」 2
70

モバイルバージョンは、なぜか「トピック抜粋」コンポーネントが有効になっている場合とそうでない場合の両方で壊れています（このコンポーネントの有無に関係なく2つのテーマがあり、両方とも壊れています） ¯\_(ツ)_/¯ なので、このCSSだけで十分です

追記：このコードを管理ダッシュボードのモバイルSCSSに貼り付けてください

.topic-card__excerpt-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    white-space: normal !important; 
}

.topic-card__excerpt {
    max-width: 100% !important;
    overflow: hidden !important;
}

.topic-list-item {
    overflow: hidden !important;
    max-width: 100% !important;
    white-space: normal !important;
}

td {
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: normal !important;
}
「いいね！」 2
71

これを単一のカテゴリ、またはカテゴリのリストに適用するにはどうすればよいですか。たとえば、Topic Thumbnails のようなものです。

「いいね！」 1
72

コンポーネントにロジックを追加する必要があります。それが公式のロードマップにない場合は、フォークすることでのみ実現可能です。

73

はい、これも私たちにとって絶対に必要になることです。@jordan-violet さんは @manuel さんが提案したことをしましたか…

私にはそれを実行する技術的な知識がありません。:disappointed_face:

「いいね！」 1
74

より好ましい方向へ進みました。Topic List Thumbnails を使用し、独自のCSSを追加して、希望通りの見た目と動作を実現しました。実際の動作は以下で確認できます。

「いいね！」 5
75

良さそうです

「いいね！」 1
76

こちらこそ、ありがとうございます！

「いいね！」 1
77

タイトルのいくつかが黒く、他が青い理由をご存知ですか？ 3つのトピックはすべて私が読んだものです。

Title madness
Title madness1126×1542 210 KB

ハッ！投稿直後に自分で質問に答えました。黒は未読の返信を示します。しかし、# バブルがすぐそこにあるので、色で呼び出す必要はないでしょう。

「いいね！」 1
78

トピックカード自体の色を背景の他の部分と異なる色にしたい場合、どのCSSを変更すればよいですか？

また、記載されていないようですが、トピックカードは一括操作アイコンを非表示にしますが、これを表示させることはできますか？
トピックに一括更新を適用する必要があるたびに、それをオフにする必要があります。

「いいね！」 1
79

変更したい要素を右クリックして「検証」を選択します。ブラウザの開発者ツールが開き、CSS セレクターが表示されます。

「いいね！」 1
80

ありがとうございます。以下を追加しました。

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

そして、標準の「Shades of Blue」パレットで完璧に動作します。

さて、パート2です。2つのカラーパレットで動作するように編集するにはどうすればよいですか？ブラウザがダークモードに切り替わるまでは見栄えが良かったのですが。

またしても自問自答…

昨夜@media (prefers-color-scheme: light/dark)について学んだので、すべて問題ありません。

「いいね！」 1
81

@eisammyさん、本当にありがとうございます!!!
この問題でずっと悩んでいて、頭を抱えていました！
なぜか、外部サイトへのリンクをonebox化できず、抜粋の長いリンクがテキストをボックスから引き伸ばしてしまい、サイトのUIを台無しにしていました。あなたの助けで、解決しました！

「いいね！」 1
82

このコンポーネントで問題が発生しています。トピックのタイトルをクリックすると、Discourse で期待どおりにページに移動した後でも、ページがリロードされます。最初にロードされ、その後、理由もなくページが再度リロードされます。最近現在のバージョンに更新し、すべての可能性を数回テストしましたが、コンポーネントを無効にして初めて、異常な動作が停止しました。

Discourse 3.5.0.beta7-dev - https://github.com/discourse/discourse version 773ae006b7d4315c01a37170b1ebad27332d515e

「いいね！」 1
83

これは今後実装される可能性はありますか？