こんにちは、デフォルトでモバイルで赤い枠で囲まれた領域を囲むことは可能だと思いますか？
どのファイル/部分を変更すればよいですか？
ありがとうございます。
「いいね！」 1
主な問題は、お使いの携帯電話やブラウザのズームレベル/テキストサイズにあります。
これは、私のPixel 6a（小さい携帯電話！）で返信したときの画面です。
ツールバーはハンバーガーボタンで非表示にできます。
「いいね！」 2
なので：of = ifOPのスクリーンショットはトピック編集のものだと思いますが、トピックタイトル、カテゴリ、タグの各ボックスも返信に比べて余分なスペースを占めています。
「いいね！」 2
返信はOKですが、新しいトピックには小さすぎます。
「いいね！」 2
既存の#uxトピックでも、さらに議論が行われています。よろしければ、そちらにご意見をお寄せください。
「いいね！」 3
フォーマットツールバー（赤い枠の部分）は、右上にあるハンバーガーアイコン（横線3本）をクリックすることで非表示にできます。
「いいね！」 1
はい、おっしゃる通りです。しかし、すべての新規ユーザーがそれを知っているわけではありません。そのため、UXの問題になる可能性があります。
この小さなスクリプトを試すことができます。テーマまたは新しいコンポーネントのHTMLの Head タブに追加してください。
これは、次の条件でツールバーを非表示にします。
- 新しいトピック / トピックの最初の投稿の編集 / トピックの下書きのみ
- モバイルビュー
- ユーザーに保存された設定がない場合 [1]
このコードは、ユーザーの設定をいじりません。
<script type="text/discourse-plugin" version="0.8">
const { on, observes } = require("discourse-common/utils/decorators");
const serviceComposer = api.container.lookup("service:composer");
function canUpdateToolbar(context) {
return (
// 新しいトピック / 最初の投稿の編集 / トピックの下書き
context._isNewTopic &&
// ツールバーが非表示になっていない
context.showToolbar &&
// モバイルビューのみ
context.site.mobileView &&
// ユーザーの設定を上書きしない
context.keyValueStore.get("toolbar-enabled") === undefined
);
}
function updateShowToolBar(value) {
serviceComposer._wasToolbarEnabled = !value;
// ツールバーを非表示にし、ユーザーのブラウザに状態を記憶させない。
serviceComposer._toolbarEnabled = value;
// 計算されたゲッターを更新
serviceComposer.notifyPropertyChange("showToolbar");
}
api.modifyClass("component:composer-editor", {
pluginId: "composer-editor-toolbar",
@observes("composer.action")
_composerSwitchAction() {
// 返信から新しいトピックに切り替える状況を処理する
// コンポーザーを閉じずに。
if (canUpdateToolbar(this)) {
updateShowToolBar(false);
}
},
@on("didInsertElement")
_composerEditorInit() {
this.appEvents.one(`${this.composerEventPrefix}:will-open`, () => {
if (canUpdateToolbar(this)) {
updateShowToolBar(false);
}
});
this._super(...arguments);
},
@on("willDestroyElement")
_composerClosed() {
this._super(...arguments);
// 手動で非表示にされたツールバーを復元する。
if (serviceComposer._wasToolbarEnabled) {
updateShowToolBar(true);
}
},
});
</script>
ユーザーがトグルをクリックすると、ブラウザは状態を記憶します ↩︎
「いいね！」 2
Arkshineさん、返信ありがとうございます。
テーマのheadタブに追加しましたが、動作しません。
間違った方法で実施しましたか？
「いいね！」 1
それはどこで必要ですか？ ハンバーガーをタップするとネイティブに実行されます — いずれにしてもiPhoneでは。
「いいね！」 1
ウェブサイトが少なすぎるのは、テキストとインターフェイスのサイズを大きく設定しすぎたためであり、これはChrome/Safariの問題で、Google/Appleに責任があるということですか？！
スマートフォンのインターフェイス設定を変更するだけで済みます！
携帯電話での編集ウィンドウが非常に小さい件について、Such a tiny window to edit here on a cell phone で多くの情報が繰り返されていると思います。
この件は一旦終了し、会話をそちらに集中させましょう。
「いいね！」 4