移动设备上的左侧汉堡菜单

自定义 主题组件
46

请分享您的 CSS！这将有助于我们更方便地修复 TC。

47

这是一个比较取巧的实现方式（在 common/css 中，而不是 /mobile/css）

@use "lib/viewport";

@include viewport.until(md) {
  .d-header:not(:has(.extra-info-wrapper.topic-info-visible)):not(:has(.extra-info-wrapper .topic-link)):not(.header-topic-info-visible) .title {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
  }
}
2 个赞
48

抱歉，我还没来得及将这个组件保持完全最新。不过确实，从移动端/桌面端视图的分离肯定打破了原始主题组件的一些假设。

@Lilly 感谢你的推动，暂时使用 position: absolute 就能解决问题……而这里对组件中项目的重新排序，只是采用了一个简单的 CSS Grid 方案而已。

2 个赞
49

大家好，跟进一下：Lilly 做了大量工作来清理并更新这部分内容。我已合并了她的更改，现在应该可以正常使用了。

4 个赞
50

嘿 @featheredtoast，我这边有一个 PR 来修复 Horizon 主题在折叠屏手机和部分平板电脑视口尺寸下的头部问题。

请看一下并合并它：

4 个赞
Header messes up on mid-size viewports on the Horizon Theme
51

看起来不错——让我们试试看吧，谢谢 @Lilly ！

2 个赞
52

当我在主题内向上滚动，导致标题栏发生变化（以显示主题名称和分类）时，新的标题栏上没有汉堡菜单图标。由于汉堡菜单图标（当存在时）位于左侧，这意味着论坛图标的位置会发生变化。我想知道是否有可能提供一个选项，将汉堡菜单图标放在论坛图标的右侧。这样，两种类型的标题栏中，论坛图标的位置就能保持一致。谢谢。

附注：我刚刚注意到，在桌面端不使用主题组件时，汉堡菜单图标会一直保留在那里。也许这也应该成为移动端的一个选项。

53

个人而言，我不赞成这一改动（也许 @featheredtoast 会有不同看法），但如果你确实需要，只需在论坛的其他主题组件中添加以下 CSS 代码，即可覆盖项目的排列顺序。

   .d-header {
    display: grid;
    grid-template-areas: 'logo left-menu custom-header-icon-link-1 custom-header-icon-link-2 custom-header-icon-link-3 custom-header-icon-link-4 custom-header-icon-link-5 extra-info chat header-buttons search right-menu'!important;
 }

效果如下：

IMG_5618
IMG_56181290×209 16.9 KB

为了最大化标题栏空间以容纳更长的主题标题，移动端滚动后的标题栏不应显示汉堡菜单图标

4 个赞
54

我和这里的 @Lilly 持相同观点，目标是让左侧的汉堡菜单感觉更像其他应用……跳跃效果并不是我优化的重点，因为默认体验已经做到了这一点。

一旦像她展示的那样变成网格布局，就可以通过基础主题组件在此处以最少的输入轻松更新所有元素的位置。

如果有足够的需求，我欢迎提交 PR，但目前这是我第一次听到这样的请求。

4 个赞
55

真的吗？

在桌面上，并没有所谓的“跳跃”效果（凭记忆），因为汉堡菜单图标始终位于论坛图标的左侧。

在移动端也没有“跳跃”效果，因为除了论坛图标外，其他所有元素都会被替换。

1 个赞
56

我开始使用您的主题组件（感谢分享！），并禁用了移动设备上的主图标，以符合我们保持界面尽可能简洁的 UI/UX 理念。

1 个赞