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

カテゴリリストレイアウトでは、サブカテゴリはカラーのドットと、アクセス制限がある場合はタイトルの前にロックアイコンが表示されます。

一方、カテゴリボックスレイアウトでは、カラーのドットもロックアイコンも表示されませんが、サブカテゴリにロゴが定義されている場合は、デフォルトで20pxに縮小されて表示されます。

これは一貫性がありません。少なくとも、サブカテゴリのタイトルを通常のリスト表示に合わせるオプションが必要です。理想的には、リストレイアウトでもロゴを表示できるオプションがあればよいのですが。

あるいは、この非論理的な動作を変更できるようにするプラグインアウトレットがあればなおよいのですが(探しましたが、見つかりませんでした。もしある場合は、何ですか?)

「いいね!」 3

@vinothkannans 問題の調査をお願いします。問題のスクリーンショットと提案する修正策を提示してください。

「いいね!」 2

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

  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

なるほど、休暇が終わるまで待ちましょう。@awesomerobot の意見を聞きたいです。

「いいね!」 5

今週、このレイアウトを確認して、3 段階目のサブカテゴリの統合を試みる予定でした。ついでに、一貫性も確認しようと思っています。

「いいね!」 3

いくつかの初期進捗を含むアップデートをプッシュしました。

サブサブカテゴリはこのトピックとはやや無関係ですが、進行中の作業であり、今後のこのページのスタイルに影響を与えるため、含めています。いくつかの理由でこのアプローチに完全に満足しているわけではありませんが、レイアウトが難しいためです。

これらのボックスのコンテンツが非常に多様であるため、ある時点でサブサブカテゴリを切り捨てるか、JS で高さを計算してボックスの高さを均一にしない レンガ積み風(masonry-style) のレイアウトを適用する必要があるかもしれません。もう少し考える必要があります。

さて、本題に戻ります…

既存のサブカテゴリの単一レベルについては、汎用的なリンクの代わりにカテゴリにバッジスタイルを採用しました。また、アスペクト比の計算も改善しました。以前はほとんど使われていませんでした。

「いいね!」 5

気に入っています。いくつかのコメントがあります。

タイトルの上にあるロゴが、非常に長い説明と複数のサブカテゴリがある状況で、貴重な垂直スペースを多く占めていると感じます。
ボックスレイアウトの利点の一つは、スクロールなしでより多くのカテゴリを表示できることですので、デフォルトでロゴとタイトルを横並びにするのが非常に良いと思います。もちろん、CSS オーバーライドでほぼ同じことは可能ですが、デフォルトでそれが実現すると嬉しいです。

孫カテゴリの問題については、サブボックスのアイデアは気に入っていますが、オプションの設定として、さらに深い階層が存在する場合にインジケーターを表示しつつ、サブカテゴリを1段のみ表示するという方法もあるかもしれません。例えば、孫カテゴリがある場合、子カテゴリのタイトルの下に小さな文字で「+N サブカテゴリ」と表示するといった具合です。

また、メッシュレイアウト(マソンリー)も理想的だと思います。