List of post replies in mobile theme

Feature
1

Hi,
Can I add a button for opening post replies in mobile theme? Mobile users miss their replies in large topics!

2 Likes
2

Sorry, I don’t understand. What does this mean? Can you provide a screenshot with annotations?

3

Yes, of course, as you can see in the picture below, desktop users can load the post replies in an isolated space by pressing this key.

image
image820Ă—730 38 KB

This feature is very useful, especially on topics where thousands of posts are sent. But unfortunately, I could not find this feature on the mobile theme and I think due to lack of space it was not designed.

Is it possible to add such a nice feature for the mobile theme?

2 Likes
4

Does anyone have any information on this?

5

It’s very strange to me that no one has mentioned this problem yet!
I think the reason is that most forum admins use the desktop browsers :slight_smile:

6

Has anyone encountered this problem?

7

I believe this was dropped from mobile due to taking up too much space on the screen.

8

If we only use mobile, we really need this feature on large topics. Many users told us that we could not find the answers we were given. And we always wondered why ?! Until we used the mobile for a while and realized that this key does not exist on the mobile theme.

If we have a space problem, it might not be bad to open it as a modal for the user … :thinking:

9

This problem has been raised by many of our users so far and many people are really complaining about this issue.

This is a translation of a message from one of our users:

Suppose in a topic with thousands of replies, several people answered to me, for example, 2 peoples,
When I go to the desired notification to see their answers,
It only shows me the first answer and jumps to it,
Now I have to look for the next answer!
It’s not right to be like this!
Set notifications to appear for each response, or fix this

Please give me an answer on this subject :pray:

10

Hi Nildarar,

I just do this today. Create a new component in admin and add this to the mobile section CSS into the component.

This will enable the reply button on mobile. Maybe need some modification to fit your theme but if you post your website I can help you in this. :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;
}

This is how it looks like on mobile view :arrow_down:

reply-mobile

You can check it with mobile on this page.

Update: The latest reply no longer has border.

5 Likes
11

Wow!
I can’t believe this has been around for so long and we just had to customize the CSS. :sweat:
I apologize for announcing this problem and thank you very much for reminding us of this solution.

Thank you a million :pray: :bouquet:

2 Likes
12

Due to the problem of space in the mobile display, we applied the following style:

.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;
        }
    }
}

This will make the answers appear like comments.