모바일 테마의 게시물 답변 목록

안녕하세요,
모바일 테마에서 게시글 답글을 열 수 있는 버튼을 추가할 수 있을까요? 큰 주제에서 모바일 사용자들이 자신의 답글을 놓치기 쉽습니다!

2개의 좋아요

죄송합니다, 이해가 되지 않습니다. 이 문장이 무슨 뜻인가요? 주석이 달린 스크린샷을 제공해 주시겠습니까?

네, 물론입니다. 아래 이미지에서 볼 수 있듯이, 데스크톱 사용자는 이 키를 눌러 게시글 답글을 격리된 공간에서 불러올 수 있습니다.

이 기능은 특히 수천 개의 게시글이 올라온 주제에서 매우 유용합니다. 하지만 안타깝게도 모바일 테마에서는 이 기능을 찾을 수 없었으며, 공간 부족으로 인해 설계되지 않은 것으로 보입니다.

모바일 테마에도 이러한 훌륭한 기능을 추가할 수 있을까요?

2개의 좋아요

이 내용에 대해 정보를 알고 계신 분 계신가요?

아직 아무도 이 문제를 언급하지 않은 것이 정말 이상합니다!
대부분의 포럼 관리자가 데스크톱 브라우저를 사용하기 때문이라고 생각합니다. :slight_smile:

이 문제를 경험하신 분이 계신가요?

화면 공간을 너무 많이 차지하기 때문에 모바일에서는 제거되었을 것으로 생각합니다.

모바일만 사용하는 경우, 큰 주제에서 이 기능이 정말 필요합니다. 많은 사용자가 우리가 제공한 답변을 찾을 수 없다고 알려주셨습니다. 그리고 우리는 왜 그런지 항상 궁금해했습니다! 모바일을 한동안 사용해 본 후에야, 이 키가 모바일 테마에 존재하지 않는다는 것을 깨달았습니다.

공간 문제가 있다면, 사용자에게 모달로 여는 것도 나쁘지 않을 것 같습니다 … :thinking:

이 문제는 지금까지 많은 사용자들로부터 제기되었으며, 이 문제에 대해 많은 분들이 불만을 표출하고 있습니다.

다음은 우리 사용자 중 한 분의 메시지를 번역한 것입니다:

수천 개의 답변이 있는 주제에서, 예를 들어 2명의 사람이 나에게 답변을 했다고 가정해 봅시다.
내가 그들의 답변을 확인하기 위해 해당 알림으로 이동하면,
첫 번째 답변만 표시되고 그 위치로 이동합니다.
이제 다음 답변을 직접 찾아야 합니다!
이런 방식은 맞지 않습니다!
각 답변에 대해 알림이 나타나도록 설정하거나, 이 문제를 수정해 주세요.

이 주제에 대해 답변을 부탁드립니다 :pray:

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

이렇게 하면 답변이 댓글처럼 보이도록 표시됩니다.