モバイルテーマでの投稿返信リスト

こんにちは
モバイルテーマで投稿の返信を開くボタンを追加することはできますか?モバイルユーザーは、大きなトピックで自分の返信を見逃してしまいます!

「いいね!」 2

申し訳ありませんが、意味がわかりません。これは何を意味するのでしょうか?注釈付きのスクリーンショットを提供していただけますか?

はい、もちろんです。下の画像をご覧ください。デスクトップユーザーは、このキーを押すことで、投稿の返信を隔離されたスペースに読み込むことができます。

この機能は非常に便利で、特に数千件の投稿が送られるトピックで役立ちます。しかし残念ながら、モバイルテーマではこの機能が見つからず、スペース不足のため実装されなかったのではないかと考えています。

モバイルテーマにもこのような優れた機能を追加することは可能でしょうか?

「いいね!」 2

これについて情報をお持ちの方はいらっしゃいますか?

まだ誰もこの問題に言及していないのは私にはとても不思議です!
その理由はおそらく、ほとんどのフォーラム管理者がデスクトップブラウザを使っているからでしょう :slight_smile:

この問題に遭遇した方はいらっしゃいますか?

これは、画面のスペースを多く占めるため、モバイル版から削除されたと考えています。

モバイルのみを使用する場合、大きなトピックではこの機能は本当に必要です。多くのユーザーから、提供された答えが見つからないという声を聞きました。なぜだろう?と常に疑問に思っていました。しかし、しばらくモバイルを使ってみて、このキーがモバイルテーマには存在しないことに気づきました。

もしスペースの問題があるなら、ユーザーのためにモーダルとして表示するのも悪くないかもしれません… :thinking:

この問題はこれまで多くのユーザーから提起されており、多くの方がこの件について不満を述べています。

これは当社のユーザーの一人からのメッセージの翻訳です:

数千の返信があるトピックで、例えば2人の人が私に返信したとします。
通知を見てそれらの返信を確認しようとすると、
最初の返信のみが表示され、そこにジャンプしてしまいます。
次の返信を探す必要があります!
これは正しくありません!
各返信に対して通知が表示されるように設定するか、この問題を修正してください

この件についてご回答をお願いいたします :pray:

こんにちは、Nildarar さん、

本日、この対応を行いました。管理画面で新しいコンポーネントを作成し、その中にモバイル向けの CSSを追加しました。

これでモバイル環境でも返信ボタンが表示されるようになります。テーマに合わせて調整が必要な場合もあるかもしれませんが、ウェブサイトURLを教えていただければ、お手伝いできますよ :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;
        }
    }
}

これにより、回答がコメントのように表示されます。