カテゴリ:スマートフォン表示コンポーネント

テーマコンポーネント(カテゴリ:スマートフォンビュー)を実装すると、下の例の画像のようにカテゴリをスマートフォンのアイコンとして表示できるようになり、便利だと思います。いかがでしょうか。

「いいね!」 2

クリスティアンさん、おかえりなさい :v:

タイトルやカテゴリの説明にはあまりスペースがなくなります。これらはデフォルトで匿名ユーザーや信頼レベル0のユーザー向けに有効になっています。実際の例を使ったモックアップがあれば、どのように機能するかを見るのに役立ちます。

それは同じではありませんが、私は自分のフォーラムでモバイルカテゴリページのレイアウトを変更しました。

から:

しかし、あなたが提案するようにグリッドビューを使用したり、カテゴリごとに3つのトピックを削除したりすることで、さらに改善できると思います。

OPのモックアップは、スマートフォンと同じ問題を抱えています。

  • 何が何であるかを識別し、記憶する方法。
  • 多すぎるとどうなるか。

こんにちは🙋🏼‍♂️ スマートフォン表示でこのスタイル(下の画像)を許可するだけで十分です。カテゴリの説明、サブカテゴリのリスト、最新の投稿のリストを無効にする機能もあればなお良いです。そして、スマートフォンのアプリリストのようにカテゴリリストを利用できるようにします(グリッドバージョン - 角丸の四角形)。

もう1つの便利な機能は、「スマートフォン表示でのカスタムカテゴリ名」です。これにより、たとえば「Entertainment」を「ENT」のようにカテゴリ名を短縮できます。

これはフォーラムで見つけた例ですが、リスト形式です。

「いいね!」 4

なぜそれが機能するのでしょうか?ENTが何を意味するのか誰も知りません。

これが機能する状況は想像できます。特定のゲームやニッチな興味を持つファンは、独自の専門用語やシンボルを持っていることがよくあります。新規ユーザーにとって最も発見しやすく、分かりやすいでしょうか?おそらくそうではありませんが、それは必ずしも重要な価値ではありません。

「いいね!」 1

参照できるようにアクセスリンクを共有していただけますか。または、https://businesslab.vn の私のサイトもご覧いただけます。私が知っていること、そして行ってきたことを喜んで共有します。
また、お探しのものに似ていると思ったテーマのカテゴリページ Air Theme も参照できます。

「いいね!」 1

カテゴリページのナビゲーションについてお話ししています。カテゴリを見つけるために下にスクロールするのではなく、最初の投稿で説明したように、すべてを 1 ページで見られるようにすると便利です。将来の Discourse のバージョンでは、この機能が実装されることは避けられないので、なぜ先取りしないのでしょうか?

はい、最初の投稿で最後に投稿した画像のように、それは間違いなく問題を部分的に解決します。
テーマコンポーネントは GitHub - discourse/discourse-minimal-category-boxes です。

この議論はよく理解できません。なぜ避けられないのですか?(もしそうなら、なぜ急ぐのですか?)

「いいね!」 1

サムネイルの#themeグリッドレイアウトで、ある程度すでに実現しています。

まあ、なんとか実現可能でしょう。ショートプレス/ロングプレス、シングル/ダブルタップのアイデアを使えば、説明が表示されるようにすることもできるかもしれません。

@Canapin

どの程度使いやすいかは、アプリケーションによって異なるかもしれません。正直なところ、モバイルでは#themeのトピックリストが見つけにくいため、煩わしいと感じています。

しかし、OPがよりシンプルなカテゴリ名と、その下にテキストを表示するアイコンを考えているのであれば、うまくいくだろうと思います。

いくつのカテゴリについて話していますか?上記の私の投稿を参照し、サムネイル付きのトピックレイアウトについては#themeリンクを確認してください。

確かに。笑

誰かが#theme-componentを作成するか、あるいは望ましい効果を達成するために必要なものに応じて#pluginを作成することは避けられないでしょう。

承知しており、議論中です :+1:

興味があったので、@derakのようなものが好きになるように、これらの調整を加えました。

.category-boxes, .category-boxes-with-topics {
    gap: 1em;
}
.mobile-view .category-boxes .category-box, .mobile-view .category-boxes-with-topics .category-box {
    width: 100%;
    flex: 0 0 calc(50% - 0.5em);
}
.category-boxes .description {
    display: none;
}
.category-boxes .category-box .category-box-inner .category-details .category-box-heading h3 {
    text-align: center !important;
}
.category-boxes .category-logo .category-notifications-button, .category-boxes-with-topics .category-logo .category-notifications-button {
    visibility: hidden;
}
.category-boxes .category-box {
     box-shadow: 0px 0px 8px rgba(0,0,0,.2);
}
「いいね!」 4

とてもミニマルに見えます。別のプロジェクトでこのバージョンを検討します^^

「いいね!」 2