在封装 Discourse 时覆盖层位置错误

开发
1

你好 :waving_hand:

当我尝试包裹整个 Discourse 以实现不同颜色的侧边栏时，遇到了覆盖层（例如用户卡片）位置错乱的问题。

17
171113×780 58.9 KB

用户卡片本应打开在点击的用户旁边，但实际上它在水平方向上偏移了正好等于我侧边栏宽度的距离。因此，我想了解这些覆盖层的定位是如何实现的，以及如何在保留侧边栏的同时避免此类错位。

非常感谢 :clinking_beer_mugs:

2

是的，我在为某个客户开发大型插件时，在添加超大横幅时也遇到过这个问题。在我的情况下，偏移量简直离谱（完全跑出屏幕外了！）

也许有更简单的解决方案，但事实证明这有点复杂，需要你覆盖一个函数，例如针对用户卡片：

          api.modifyClass('component:user-card-contents',  {
            _positionCard(target) {

这段代码来自一个 mixin，位于：discourse/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 at b3eb67976dd0c0129736fe0b86167d7e512b51f4 · discourse/discourse · GitHub

我使用了 jQuery 来判断是否根据横幅的可见性应用该修改：在某些页面上我有那个大“横幅”，而在其他页面则没有。你也可以采用类似的策略。

说实话，你的例子看起来没那么糟糕——我倒是考虑让它保持原样？

3

问题在于，基本上所有覆盖层的位置都错了。我并不想重写所有可能存在的覆盖层的每一个定位方法。

在示例图片中看起来还可以，因为浏览器窗口没有全屏。通常侧边更大，因此错位更严重。有些覆盖层几乎已经移出屏幕了。

4

是的，这确实挺烦人。或许可以将自定义选项限制在主题列表上，并尽量保持主题视图不变，同时不要设置太多“变体”，以简化你的工作。

5

我并没有自定义任何特定视图。我想将整个论坛放入一个容器中，以便为两侧设置不同的颜色。

6

你是如何实现这一点的？你是否在 #main div 周围添加了一个新的容器？

或许更简单的方法是：为 #main-outlet 添加背景色，然后为 body 设置侧边的背景色。

7

是的，后来我也这么想过！所以：

body {
   background-color: red;
}

#main-outlet {
    background-color: white;
}

不过还有一个问题，就是那个宽大的横幅，但也不算太大。