カテゴリボックスのレイアウトがリストレイアウトと一致しません

いくつかのスクリーンショットをご紹介します:

  1. 既定のカテゴリと注目トピック

    ちなみに、ここにあるロゴは少し大きすぎて、無駄なスペースを多く生んでしまっています。私は高さを 75px に縮小することを好みます。
  2. 既定のボックスとサブカテゴリ

    いくつかのサブカテゴリにはロゴ画像が設定されており、表示されています。
    レイアウトは非常にスペースを無駄にしています。カテゴリロゴは 40px に制限されていますが、タイトルの上に中央揃えで配置されています。サブカテゴリのロゴはアスペクト比を無視しています(–aspect-image の計算が機能しておらず、そもそも高さを設定するだけでスペースがあればアスペクト比は維持されるため、不要です)。
    また、サブカテゴリのロゴも少し大きすぎて、行間に隙間を作ってしまっています。
  3. 私の修正(ステップ1)

    ロゴがタイトルの左側にフロートし、タイトルは残りのスペースで中央揃えになります。
    サブカテゴリは色ストライプとロックアイコンと共に 1 行に 1 つずつ表示されますが、サブカテゴリのロゴは表示されません(これは既定の動作と一致しています)。
    ボックス内では、スペースがある場合でも 2 つの短いサブカテゴリタイトルを 1 行に詰め込むのは理にかなっていないと思います。それぞれを別行に配置する方が見栄えが良いですが、サブカテゴリが多い場合は詰め込むことを好む人もいるかもしれません。
  4. 私の最終的な修正:

    サブカテゴリのロゴは、タイトルの末尾に 18px の高さで正しいアスペクト比を維持して表示されます。これはオプションで、ロックアイコンとテキストの間に配置することもできますが、ストライプとタイトルが揃うように配置する方が好みです。
    また、他の既定のレイアウトでもサブカテゴリロゴを使用するオプションを設けるのが理にかなっているかもしれませんが、それについては触れていません。
    ここでは Category Icons コンポーネントも使用しています(アイコンは「Niki Test」サブカテゴリにのみ設定されています)。そのため、ストライプの位置が少しずれてアイコンがストライプと揃うように調整されており、アイコンの色もストライプの色と同じにしているため、実質的にストライプの代わりに機能しています。ただし、これらはコンポーネント自体への修正であり、コア部分への修正ではありません。
  5. 最後に、親カテゴリのトピックの上にサブカテゴリボックスが表示されるように設定した場合のレンダリング結果です。

    現時点では表示する孫カテゴリはありませんが、将来的に対応が必要になるでしょう。また、タイトルが非常に長い場合はロゴを縦方向にフロートさせた方が良いかもしれませんが、カテゴリタイトルは短く保つ方がより良いかもしれません。

つまり、/head 内の HTML text/x-handlebars を使用してテーマ内の「components/categories-boxes」を実質的に置き換え、SCSS も組み合わせた形です。このコードをテストして GitHub に取り込める方に送ることも喜んで行います。
これは私のサイトでは問題なく動作していますが、見落としている他の影響もあるかもしれません。

「いいね!」 3