Discourse Tab Bar for Mobile

このアイデア、大好きです!この機能を実装するプルリクエストのレビューとマージ、喜んで引き受けます :smiley:

「いいね!」 11

このアイデア、本当に気に入っています :heart_eyes: 早速少し試してみました。もっと良い方法があると思いますが、現時点では私のサイトでよく機能しています :slight_smile:

これを実現するために、Big Header - Little Header コンポーネントの <head> 側コードを使用しています。


残念ながら iPhone では制限があり、footer-nav が Discourse のタブバーを完全に隠してしまうため、それを非表示にしています。

コードを更新しました!
ここにコードを共有します(マージ可能かどうかはわかりません):

モバイルの <head> セクションに以下を追加してください。

<script type="text/discourse-plugin" version="0.8.18">
   $(document).ready(function() {
        var lastScrollTop = 0;
        var body = $("body");
        var scrollMax = 30;
        $(window).scroll(function() {
            var scroll = $(this).scrollTop();
            if (lastScrollTop < scroll && scroll > scrollMax && !body.hasClass("tab-bar-hidden")) {
                body.addClass("tab-bar-hidden");
            } else if (lastScrollTop > scroll && body.hasClass("tab-bar-hidden")) {
                body.removeClass("tab-bar-hidden");
            }
            lastScrollTop = scroll;
        });
    });
</script>

モバイルの CSS セクションに以下を追加してください。

html:not(.anon) {
  #topic-progress-wrapper,
  #reply-control.draft {
    bottom: 49px;
  }
  #reply-control.draft {
    margin-bottom: env(safe-area-inset-bottom);
    padding-bottom: 0px;
    transition: all .1s ease-out;
  }
  .posts-filtered-notice {
    transition: all .1s ease-out;
    bottom: 49px;
  } 
}

body.tab-bar-hidden {
  .d-tab-bar {
    bottom: -49px;
    transition: all .2s ease-in;
  }
  #topic-progress-wrapper:not(.docked),
  #reply-control.draft {
    bottom: 0;
    transition: all .2s ease-in;
  }
  #reply-control.draft {
    margin-bottom: env(safe-area-inset-bottom);
    padding-bottom: 0px;
    transition: all .2s ease-in;
  }
  .posts-filtered-notice {
    transition: all .2s ease-in;
    bottom: 0;
  }
}

.d-tab-bar {
  transition: all .1s ease-out;
}

body:not(.footer-nav-ipad) .footer-nav {
  display: none;
}

デモ

「いいね!」 17

:smiley: すごいものを作りましたね!

「いいね!」 5

便利な小さなコンポーネントですね!ありがとうございます。

個別のユーザーがこれをカスタマイズしたり、完全に非表示にしたりする方法はありますか?

「いいね!」 5

素晴らしいですね、@Don さん、ありがとうございます!コードを(少し修正を加えて)コンポーネントにプッシュしました。

個々のユーザーがコンポーネントをカスタマイズしたり非表示にしたりするための組み込みオプションはありませんが、Discourse コアには、個々のユーザーがコンポーネントを非表示にするための回避策があります。メインテーマのバリエーションを作成し、そのコンポーネントを含めないようにし、それをユーザーが「設定」→「インターフェース」で選択できるようにするという方法です。

その様子は以下のようになります:

このコンポーネントを不要とするユーザーは、Grey Amber (w/o Tab Bar) を選択できます。これは Grey Amber と全く同じ設定ですが、タブバーコンポーネントが含まれていません。

「いいね!」 6

素晴らしいアイデアですね!ありがとうございます!

「いいね!」 4

@Osama さん、ありがとうございます!素晴らしいです!:heart_eyes:

CSS に一点気づいた点があります。Discourse のタブバーがアクティブになり、コンポーザーを押し上げてしまうようです。
これは #reply-control 全体ではなく、#reply-control.draft のみでアクティブになるべきだと考えられます。

「いいね!」 4

はい、これで修正されました。ご連絡ありがとうございます!:grinning_face_with_smiling_eyes:

「いいね!」 6

これ本当にありがとうございます。Discourse サイトにとって素晴らしい追加機能ですね。@discoverearth さんは、これを全ユーザーに常に表示されるように設定できましたか?

「いいね!」 5

ユーザーがプラットフォームを移動中にタブをクリックするように設定しようとしています。このユースケースでは、Kanban、Calendar、Voting プラグインのタブを開くボタンを設定しようとしています。

Kanban:
カテゴリまたはサブカテゴリにいて、URL に ‘?board=default’ を追加すると、Kanban のタブ(Board)に移動します。したがって、これは可能であるはずです。問題は、このプラグインが現在ユーザーがいるパスではなく、ルートからの相対パスを使用していることです。
(また、ホームページの URL ロジックが異なるため、そこへの回避策も考える必要があります)。

Calendar:
Calendar タブには、URL の末尾に ‘/l/calendar’ を追加する必要があります。

それは可能に見えるのですが、ユーザーがいるカテゴリ/サブカテゴリより前の URL 内のテキストを削除する必要があります。例えば、ユーザーが ‘latest’ や ‘kanban’ に移動した場合、/l/calendar’ を末尾に追加する前に、その部分を削除する必要があります。

これらのプラグインでこれを使用できるようになれば素晴らしいことですが、どのように進めればよいかアイデアをお持ちの方はいらっしゃいますか。タブセレクタは現在、モバイルでは基本的に非表示になっており、Kanban や Calendar などのコンポーネントを頻繁に使用するサイトにとっては問題です。

「いいね!」 1

このプラグインは素晴らしい作品ですが、DiscourseHub(少なくとも iPhone では)では使用できません。同じ位置にナビゲーションタブを隠してしまうため、フォーラムを切り替えることができないからです。

そのため、DiscourseHub を何らかの理由で使用できないフォーラムや、フォーラム訪問後にアプリを完全に終了するようユーザーに教えることで UX を大きく損なうような場合のみ、有用と言えます。

もちろん、コーディングができる人なら、ブラウザを使用している場合のみこのタブバーを表示させることも可能でしょう。しかし、同じデバイス内でユーザーに異なる UI を教えるのは非常に悪い考えです。

このコンポーネントを使用すると:

純粋な DiscourseHub の場合:

「いいね!」 3

どのフォーラムかご存知ですか?ユーザーインターフェースが本当に大好きです!:heart_eyes:

「いいね!」 3

デフォルトのバージョンのトップメニューボタンのように、通知ボタンに赤い通知バッジを表示したいのですが、その方法を教えていただけませんか?プログラミングはあまり得意ではありません。

@nildarar さん、通知数がボタンに表示されるようにできましたか?よろしくお願いします。

「いいね!」 1

こんにちは!このコンセプト、とても気に入っています。ありがとうございます。

一点質問です。ウェブサイトの他の部分との一貫性を保つため、塗りつぶされたアイコンではなく、アウトライン版の FontAwesome アイコンを使用したいと考えています。

それを指定する方法はありますか?通常、アイコンのフルネーム(例:far fa-star)を使うことで区別できるはずです(単に star ではなく)。しかし、そのようなフルネームを入力しようとすると、コンポーネントは何も表示されません。

これを可能にする方法はありませんか?

「いいね!」 1

これは本当にクールですね。フォローフィードを表示するタブを作成する方法はありますか?これにより、ユーザーはフォローしているすべての人々のフィードを簡単に確認できます。

また、ページ固有のことは可能ですか?

.user-main .about {
    margin-bottom: 0;
    color: var(--secondary);
    display: none;
}

フィードページ専用ですか?

「いいね!」 1

確認ですが、Discourse Follow のフォローフィードについて言及していますか?もしそうであれば、フォローフィードにリダイレクトしたいタブの設定で、feed をルート(3番目のセグメント)として設定してください。

「いいね!」 4

はい、そうです。ありがとうございます!

「いいね!」 3

バーの真ん中に「新しいトピック」ボタンを追加できたらいいなと思います。:thinking:

Redditが良い例です。

「いいね!」 6

はい、できます。中央の効果を得るには、3番目または4番目のタブ設定で以下を試してください。

New, plus, /new-topic
「いいね!」 6

素晴らしいですね!ちょうどそれを実行したところですが、YouTubeの実装を思い出させます。全体的に、とても良いです!:grinning:


ユーザーをコミュニティの「Discourse Chat」セクションにリダイレクトするボタンを追加することは可能でしょうか?

「いいね!」 4