トピック一覧プレビュー(レガシー)

ありがとうございます、試してみます。

「いいね!」 2

Jon も /latest.json とサムネイルに送られてくるデータを確認してください。URL が機能するか確認してください。例:

「いいね!」 2

今日は、TC(トピックカード)からプラグインへ「注目画像」の改善点を移植しました。これにより、モバイル端末でも注目画像が表示されるようになり、フォーマットも大幅に改善されました。

これにより、これまでカスタマイズされた CSS が動作しなくなる可能性がありますが、これはどうにも避けられないことです。申し訳ありませんが、これらの改善は価値があるはずです。

レイアウトがアスペクト比に合わせて幅を決定し、より整った見た目を実現するために、横方向の幅をゼロに設定することもできます。また、画像や設定によってスペースが窮屈すぎる場合は、設定から抜粋を非表示にすることも可能です。

このサイトでは現在、このプラグインが動作しています:

なお、よりスリムなスクロールバーを持つ Safari だと、少し見栄えが良くなります :slight_smile:

「いいね!」 3

こんにちは、アップデート後に無駄な水平スクロールバーが表示されてしまいます。これを消す方法はありませんか?:slight_smile:

現在は、CSSをいじってスクロールバーを非表示にしています:

.tlp-featured-topics.has-topics .topics {
    overflow-x: hidden;
}
「いいね!」 2

はい、そのアプローチで問題ありません。現時点ではオーバーフローしている様子は見られません。余談ですが、Safari ではそのスクロールバーの見た目がかなり良くなっていますね。

ただし、その方法だと、注目記事が大幅に増え右側に並んで表示された場合にスクロールできなくなる可能性があります。

そこで別のアプローチとして、注目コンテンツをさらに多く公開することはいかがでしょうか!

「いいね!」 2

余談ですが、スクロールバーのスタイルをいじってみることもできます。残念ながら、すべてのブラウザで標準化されていないため、少し複雑です。例:

/* Firefox で動作 */
* {
  scrollbar-width: thin;
  scrollbar-color: grey darkgrey;
}

/* Chrome、Edge、Safari で動作 */
*::-webkit-scrollbar {
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: darkgrey;
}

*::-webkit-scrollbar-thumb {
  background-color: grey;
  border-radius: 0px;
  border: 0px solid grey;
}

出典: How to Customize Scrollbars with CSS: Styling Guide with Examples | DigitalOcean

「いいね!」 2

ありがとうございます!素晴らしい解決策ですね :slight_smile:

「いいね!」 2

@merefield さん、こんにちは。プラグインをありがとうございます。私たちのコミュニティで非常に人気があります。私たちは、トピック一覧でトピックのサムネイルを表示するだけの非常にシンプルな設定で利用しています。

しかし、数週間使用した後、トピックの移動時に深刻な問題が発生するため、現在は無効にせざるを得なくなりました。具体的には、トピックに移動するとレイアウトが一瞬点滅し、トピックが描画される前にナビゲーションバーが瞬間的に消えてしまいます。逆に、戻る際にも同様の現象が起き、トピック一覧のスクロール位置がリセットされてしまいます。さらに、プラグインを無効にした場合に比べて、トピックへの移動と戻りが明らかに遅くなっています。こちらがモバイル環境での様子を示す画面録画です(Discourse にアップロードするにはスクリーンショットが大きすぎたため、gfycat のリンクになってしまい申し訳ありません)。

これらの問題の原因は何だとお考えでしょうか?また、これを防ぐ方法はありますか?コンソールにはエラーも表示されず、何が壊れているかを示す手がかりとなるようなものもありません。

画像サイズが要因ではないよう、必要十分な大きな画像は不要なため、「トピック一覧のサムネイル解像度レベル」は最低設定の 6 に設定しています。他にも問題解決に役立つ情報があればお知らせください。

「いいね!」 2

ご報告ありがとうございます。興味本位ですが、TCを試されましたか?

「いいね!」 1

いいえ、まだ試していません。もし改善が見込めるなら試してみます。無効化されているプラグインと並行してインストールしても問題ないでしょうか?

「いいね!」 1

おそらく安全ではありません。再インストールが必要になるでしょう。

あなたが説明している動作は奇妙です。タイトルの href は、サムネイルのそれとほとんど同一です。

サムネイルをクリックしても問題が発生しないことを確認できますか?(プラグイン内で)

「いいね!」 1

確認しました!サムネイルをクリックするとトピックの最初の投稿に移動することに気づいていませんでした。サムネイルをクリックする反応は、期待通りに素早いです。

ありがとうございます、試してみます。ただ、今夜は時間が取れないかもしれません。また、Topic list thumbnails TC というものがあることを発見しました。スコープが限られているため、私たちのユースケースにはこちらの方が適しているかもしれませんね。:thinking:

それにしても、超高速なレスポンスありがとうございます!

「いいね!」 2

私もTCを試してみましたが、残念ながら同じ挙動を示しました。

「いいね!」 2

ありがとうございます。

はい、これは興味深いですね。

URL は正しいのですが、Ember がタイトルクリックをフルページリフレッシュにエスカレートさせているようです。

ブラウザのネットワークタブを見ると、その違いが確認できます。

以前はこのようなことは起こらなかったはずです。

タイトルはコア内の同じコードで作成されているため、これは非常に不可解です。

「いいね!」 2

投稿の上部に画像がある場合、「トピックリストの抜粋」で書式の問題が発生するようです。
(この問題はプラグインと TC の両方で発生します)

以下は例です。
最初の 2 行は正しいですが、画像の後に 3 行目と 4 行目のスタイルが変更されます。(試したすべてのテーマで発生します)

インスペクタで確認すると、「トピックリストの抜粋」が画像のリンクを抜粋に含めようとしており、それがスタイルの問題を引き起こしているようです。

「いいね!」 1

「list/topic-excerpt」は、プラグインや TC ではなく、コアに含まれています。

直接オーバーライドはしていません。

もしかして、jQuery 由来の問題でしょうか?

デバッグのお手伝いができる方がいれば、ぜひご協力ください。

「いいね!」 1

お忙しい中、迅速にご返信いただきありがとうございます。 :smiling_face_with_three_hearts:

また、投稿の抜粋内に含まれる一部のリンクが、タイル画像の重なりの原因となっていることも発見しました。

これはインライン・ワンボックスリンクが原因のようです。

これが Discourse コアの問題か、TLP プラグインの問題かは現時点では不明です。 :thinking:

当面は抜粋機能を無効にしようと思います。
よろしくお願いいたします。 :grinning:

「いいね!」 2

すみません、はい、おそらくそれは CSS の問題かもしれません。修正してみてください。TC(テックコミュニティ)の方が、そのための CSS を改善しているかもしれませんね……覚えていませんが :slight_smile:

「いいね!」 1

ありがとうございます。:grinning:

はい、おっしゃる通りだと思います。TCを使用している間は問題ありませんでした。
重なり合う問題は、プラグインに切り替えてから発生するようになりました。

ChromeがCSS Gridの1000行制限を早急に修正してくれることを願っています。そうすれば、プラグインを完全にTCに置き換えることができるようになります。

「いいね!」 1

ご確認ありがとうございます。そのCSSを後で移行させるよう努めます。当面は、ローカルTCで上書きしてご使用ください。

「いいね!」 1