新话题编辑区域对手机用户太小

支持
1

您好，我想知道是否可以在默认情况下不显示手机上的红色边框区域？
我应该更改哪个文件/部分？
谢谢。

image
image438×797 98 KB

1 个赞
2

您主要的问题在于手机和/或浏览器上的缩放级别/文本大小。

这是我在 Pixel 6a（一部小手机！）上回复您时屏幕的样子：

Screenshot_20231216-195624
Screenshot_20231216-1956241080×2400 135 KB

您可以使用汉堡包按钮隐藏工具栏。

2 个赞
3

IMG_4756
IMG_4756750×1334 57.1 KB

但是…还有更多 :wink:

IMG_4757
IMG_4757750×895 110 KB

  • 快速编辑在图片中不起作用 :man_facepalming: 所以：of = if
4

虽然 OP 中的屏幕截图是一个主题编辑，但主题标题、类别和标签框也比回复占用了更多的空间。

2 个赞
5

回复是可以的，但新主题太小了。

2 个赞
6

还有一个现有的 UX 主题，其中有更多讨论，如果您想在其中添加您的想法：

3 个赞
7

您可以通过点击右上角的汉堡包图标（3条水平线）来隐藏格式工具栏（您红色框中的区域）。

1 个赞
8

是的，你说得对。但并非所有新用户都知道这一点，这可能会成为一个用户体验问题。

9

您可以尝试使用这个小程序。将其添加到您的主题或新组件的 Head 选项卡中的 HTML 中。

它会在以下条件下隐藏工具栏：

  • 仅针对新主题/编辑主题首帖/主题草稿
  • 移动视图
  • 如果用户没有保存的偏好设置。 [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 (
    // New topic / Editing first post / Topic draft 
    context._isNewTopic &&
    // Toolbar is not hidden
    context.showToolbar &&
    // Mobile view only
    context.site.mobileView &&
    // Do not override user's preference
    context.keyValueStore.get("toolbar-enabled") === undefined
  );
}

function updateShowToolBar(value) {
  serviceComposer._wasToolbarEnabled = !value;
  // Hides the toolbar without remembering the state in the user's browser.
  serviceComposer._toolbarEnabled = value;
  // Refresh computed getter
  serviceComposer.notifyPropertyChange("showToolbar");
}

api.modifyClass("component:composer-editor", {
  pluginId: "composer-editor-toolbar",

  @observes("composer.action")
  _composerSwitchAction() {
    // Handles the situation when switching from a reply to a new topic
    // without closing the composer.
    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);

    // Restores the toolbar if it is manually hidden.
    if (serviceComposer._wasToolbarEnabled) {
      updateShowToolBar(true);
    }
  },
});
</script>

  1. 用户单击切换按钮后，浏览器会记住该状态 ↩︎

2 个赞
10

你好 Arkshine，谢谢你的回复，
我把它添加到了我的主题的 head 选项卡中，但它不起作用。
我是不是做错了？

1 个赞
11

这需要用在哪里？点击汉堡包按钮即可原生完成——至少在 iPhone 上是这样。

1 个赞
12

如果因为您将文本和界面大小设置得太大而导致显示了不够多的网站，这是 Chrome/Safari 的问题，是 Google/Apple 的错？！:rofl:

只需更改手机上的界面偏好设置即可！

Screenshot_20231217-114740
Screenshot_20231217-1147401080×1058 96.5 KB

13

我认为我们正在讨论大量重复信息，来自 Such a tiny window to edit here on a cell phone

让我们关闭这个，并将对话集中在那里。

4 个赞