移动主题中的帖子回复列表

你好,
能否在移动主题中添加一个按钮,用于打开帖子回复?在大型话题中,移动用户很容易错过他们的回复!

2 个赞

抱歉,我不太明白。这是什么意思?能否提供一张带标注的截图?

是的,当然可以。正如您在下面的图片中看到的,桌面用户只需按下此键,即可在隔离空间中加载帖子回复。

此功能非常有用,尤其是在成千上万条帖子发布的主题中。但遗憾的是,我在移动主题中找不到此功能,我想这可能是由于空间不足而未设计该功能。

是否有可能为移动主题添加这样一个出色的功能?

2 个赞

有人有这方面的信息吗?

很奇怪,竟然还没有人提到这个问题!
我想原因可能是大多数论坛管理员使用的是桌面浏览器 :slight_smile:

有人遇到过这个问题吗?

我认为这是为了节省手机屏幕空间而移除的。

如果我们只使用移动端,那么在大型主题上我们确实需要这个功能。许多用户告诉我们,他们找不到我们提供的答案。我们一直想知道为什么?!直到我们使用了一段时间移动端,才发现这个键在移动端主题中根本不存在。

如果存在空间问题,或许将其作为弹窗打开对用户来说是个不错的选择……:thinking:

迄今为止,许多用户都提出了这个问题,很多人对此表示不满。

以下是我们一位用户消息的翻译:

假设在一个有数千条回复的话题中,有几个人回复了我,例如 2 个人,
当我前往相应的通知查看他们的回复时,
它只显示第一条回复并跳转到那里,
现在我必须去寻找下一条回复!
这样是不对的!
请为每条回复单独显示通知,或者修复这个问题

请就此事给予答复 :pray:

你好,Nildarar,

我今天刚做了这件事。在管理员后台创建一个新组件,并将以下内容添加到该组件的移动端 CSS中。

这将启用移动端的回复按钮。可能需要做一些调整以适配你的主题,但如果你提供你的网站链接,我可以帮你完成。:slight_smile:

.show-replies {
    display: block;
    margin-bottom: 10px;
    margin-left: -6px;
    font-weight: 600;
}

.show-replies span {
    margin-right: 5px;
}

.embedded-posts .topic-avatar {
    padding-left: 0;
    padding-top: 0;
    width: 45px;
}

.embedded-posts {
   margin-top: 20px;
   padding: 10px;
   background: var(--primary-low, $primary-low);
   border-radius: 4px;
}

.embedded-posts > div:not(:last-of-type) {
   border-bottom: 1px solid var(--primary-medium, $primary-medium);
   margin: 10px 0px 20px 0px;
}

.embedded-posts .topic-body .cooked {
    display: inline-block;
    margin-top: 10px;
}

这是移动端视图的效果 :arrow_down:

你可以在此页面通过移动端查看效果。

更新: 最新的回复不再带有边框。

5 个赞

哇!
真不敢相信这个功能存在这么久,而我们只是需要自定义 CSS。:sweat:
我为提出这个问题表示歉意,非常感谢你们提醒我们这个解决方案。

万分感谢 :pray: :bouquet:

2 个赞

由于移动显示空间有限,我们应用了以下样式:

.embedded-posts {
    .topic-avatar {
        float: right;
        width: 30px;
        border: 0;
        padding: 0.3rem 0.2rem 0 0;
        margin: 0;
        
        .avatar-flair {
            transform: scale(0.6) translate(-2px, 11px);
        }
        
        img {
            width: 30px;
            height: 30px;
        }
    }

    .topic-body {
        float: none;
        width: auto;
        border-top: 0;
        margin-right: 40px;
    
        .cooked {
            padding: 0 0 0.25em 25px;
            display: inline-block;
            font-size: 90%;
            max-height: calc(1.4rem * 5);
            overflow: hidden;
            text-overflow: ellipsis;
            
            
            & > :not(p) {
                display: none;
            }
            
            & > p {
                margin: 0;
                text-indent: 0;
                display: inline;
                
                img:not(.emoji) {
                    content:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAJxSURBVDhPpdXfT1JhGAdwLty6oWHLCR266T9wcSHLkloZaF208qrLropyI1ct17Jw0JJJrM3ZFBBRuyBcy7bcVNxqWa0LG5Am2swbDz+EMIPW7317n7dgqaeFcPHdec97zvM5z/sezpCJooi4uIRktLSQQZaMBpPvovDNxTE0v7n455fZMcFrySBLRrqPXWwJJdEaLjyXghm0hWO4GMzicjDFDbI4SE+jmyyvC8vV0CpGF4aBlRP4mjzHUf//wPaZDG5Or66Zy6Ul+Ali1AKkTjG0kXd6jy39n+CtyHccftSB2uFWOCI/12AUc/g9HDOLWGIodUrLJ0MStL3J4uyLZ5D37GbR4MzzJ7DNZCXQNO+Ulk+1kuCN6RWYQzEonNUQ+vQ8NLbwa+k8RttB9+bOJcFr4RRf6k7vEag8h6D21vMo2XjXwHHcngMvdkR+QD9iR5XfmJ+TBDsigGaoCRW9ujyWy3b3PugemnFnATg9+Rhyp4Z33hjwwj77bSM4svgZR0fdKHdqN2AUoc8AhasaJ8d9UDRXQeg3QPAasJXtsenlFCzTf72UlfgyOl89xZZuDS+UAnOp8OhQeWUvVLYDUA/WYwfb422uPbjO3vr9t8nfYCbxAU1jFijc+yWR9RE8BlReqIH6z8OVnoOs22NslV+QirJvmcDzAVvBoHqAddZZB2Ub2+vBBj4nd9agecKOj4l0ESDlbgOUFh0Ep56fU60p0A6yigMprDuVldWwI9WSURrIIrjYj7+rDoredaBxzIqybi1HN5NyBim6alHWo+UGB1OxJPqnHsA4boVpwlZUqJYMsvhfAA1ILyVkiKKIXzGHc6NOmAkVAAAAAElFTkSuQmCC');
                    display: inline;
                    width: 18px;
                    height: 18px;
                    padding-left: 2px;
                }
            }
        }
    }

    .topic-meta-data {
        position: relative;
        width: auto;
        left: auto;
        top: auto;
        margin: 0 0 3px;
        
        .names {
            padding-left: $topic-body-width-padding;
          
            span {
                flex-basis: auto;
            }
        }
        
        .user-title {
            display:none;
        }
        
        .post-link-arrow a {
            padding: 8px;
            position: absolute;
            left: 0;
            margin: 0;
        }
    }
}

这将使答案的显示效果类似于评论。