アップデートでセクションバナーが超小さく縮小されました。元に戻す方法は?

20分前に最新バージョンにアップデートした後、個々のセクションのすべてのバナーが奇妙なボックスに追いやられ、信じられないほど小さいサイズに縮小されました。テキストがあった場合、テキストは読みやすいサイズで横に表示されます(これも再設計されています)。アップグレード以外の設定は何も変更していません。

設定を確認すると、アスペクト比1:1が必要だと表示されています。これは常に「推奨」されていたものですか、それとも変更ですか?そうは言われていなかったように思いますが、わかりません。間違いなく必須ではありませんでした。なぜなら、私のバナーはすべて、明らかに長方形になるように設計されているメインサイトのものと一致しているからです。これは強制するにはかなりひどい変更です。私は40個のユニークなバナーを作成しました。

「個別のセクションバナー」とはどういう意味ですか?

「カテゴリロゴ」はすべてのボードにあります。このサイトには、サポートと書かれた巨大なピンクの箱があります。

category banner component(サポートのようにカテゴリの色を使用しているもの)に問題があるのですか、それともDiscourseコアがカテゴリ画像をアップロードしたときに表示するカテゴリの説明と画像に問題があるのですか?

セーフモードを試しましたか?

「いいね!」 1

カテゴリヘッダーは最近、UX: Category header restyle by jordanvidrine · Pull Request #34081 · discourse/discourse · GitHub で再スタイル設定されました。

CSS で画像サイズを変更できます。たとえば、次のようになります。

.category-heading__logo.category-logo.aspect-image {
  width: auto;
  height: 100px;
}
「いいね!」 3

これは私のせいではありません。最新のアップデートでコアに変更が加えられました。プラグインは使用していません。デザイン全体が変更されました。これ以上うまく説明する方法がわかりませんし、古いスタイルのスクリーンショットもありませんが、両方を見たことがある人なら私が何を求めているかわかるはずです。ロゴのアスペクト比全体が変更され、テキストの表示方法が異なり、現在はボックス内に表示されています。デフォルトのオプションを使用した方法が完全に台無しになりました。

編集:上記のリンクのスクリーンショットで確認できます。UX: Category header restyle by jordanvidrine · Pull Request #34081 · discourse/discourse · GitHub 古いスタイルは左側にありましたが、ロゴに1:1のアスペクト比は必要ありませんでした(または要求されていませんでした)。フォーマット全体が異なっていました。現在はすべてのロゴが縮小された正方形に強制され、全体が再フォーマットされ、テキストが主要な要素になったため、すべてが台無しになりました。

最初に1:1のアスペクト比を使用するように指示されていれば問題ありませんでしたが、そうではなかったので、セクションごとに同じ形状とデザインを維持したメインのバナー画像(正方形のロゴではなく)の個別のバージョンを作成しました。

これはうまくいくように思えます。サイズを調整するだけで済みます。ありがとうございます!

編集:モバイルでは機能せず、テキストがボックスの外に押し出され、ページが水平方向に引き伸ばされます。これを次のように修正しました。

@media (max-width: 768px) {
  .category-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3em; /* ロゴとテキストの間に最小限の間隔を追加 */
  }

  .category-heading__logo.category-logo.aspect-image {
    height: 140px;
    width: auto;
    margin-bottom: 0; /* 余分な間隔を削除 */
  }

  .category-heading__title {
    font-size: 1.4em;
    margin-top: 0; /* テキストの上の余分な間隔を防ぐ */
  }
}

これにより、テキストがロゴの下に配置されます。他に必要とする人がいれば…

「いいね!」 2