England Football

Efl Comments Item Group 

<div class="efl-comments-item-group reply">
    <div class="efl-comments-item">
        <div class="efl-comments-item__user-detail">
            <img alt="Tim Bamber" src="/assets/example-content/user-comment-1.jpg" loading="lazy">
            <div class="efl-comments-item__user-detail--name">
                <p>Tim Bamber</p>
                <span data-posted-time="2023-07-11T11:10:20Z"></span>
            </div>
        </div>
        <div class="efl-comments-item__message">
            Oh my. God, you sound in the same Position as me. Firstly, massive well done for stepping upto the plate. I don&#x27;t have this at matches but do at training. I started by posting things in our WhatsApp chat.. Like The respect code and bluntly putting that spectators do not know what the coach has Told the kids so to please only shout positive encouragement, then put it bluntly.. Anyone not respecting this will be asked to leave..
        </div>
        <div class="efl-comments-item__like-reply">
            <a class="efl-comments-item__message--like">6</a>
            <a class="efl-comments-item__message--reply">Reply</a>
        </div>
        <div class="efl-comments-item__reply-comment hidden"></div>
    </div>
    <div class="efl-comments-item-group__reply">
        <div class="efl-comments-item">
            <div class="efl-comments-item__user-detail">
                <img alt="Tim Bamber" src="/assets/example-content/user-comment-1.jpg" loading="lazy">
                <div class="efl-comments-item__user-detail--name">
                    <p>Tim Bamber</p>
                    <span data-posted-time="2023-07-11T11:10:20Z"></span>
                </div>
            </div>
            <div class="efl-comments-item__message">
                Oh my. God, you sound in the same Position as me. Firstly, massive well done for stepping upto the plate. I don&#x27;t have this at matches but do at training. I started by posting things in our WhatsApp chat.. Like The respect code and bluntly putting that spectators do not know what the coach has Told the kids so to please only shout positive encouragement, then put it bluntly.. Anyone not respecting this will be asked to leave..
            </div>
            <div class="efl-comments-item__like-reply">
                <a class="efl-comments-item__message--like">6</a>
                <a class="efl-comments-item__message--reply">Reply</a>
            </div>
            <div class="efl-comments-item__reply-comment hidden"></div>
        </div>
        <div class="efl-comments-item">
            <div class="efl-comments-item__user-detail">
                <img alt="Tim Bamber" src="/assets/example-content/user-comment-1.jpg" loading="lazy">
                <div class="efl-comments-item__user-detail--name">
                    <p>Tim Bamber</p>
                    <span data-posted-time="2023-07-11T11:10:20Z"></span>
                </div>
            </div>
            <div class="efl-comments-item__message">
                Oh my. God, you sound in the same Position as me. Firstly, massive well done for stepping upto the plate. I don&#x27;t have this at matches but do at training. I started by posting things in our WhatsApp chat.. Like The respect code and bluntly putting that spectators do not know what the coach has Told the kids so to please only shout positive encouragement, then put it bluntly.. Anyone not respecting this will be asked to leave..
            </div>
            <div class="efl-comments-item__like-reply">
                <a class="efl-comments-item__message--like">6</a>
                <a class="efl-comments-item__message--reply">Reply</a>
            </div>
            <div class="efl-comments-item__reply-comment hidden"></div>
        </div>
    </div>
    <a class="efl-comments-item-group__showmore hidden"></a>
</div>

No notes defined.

{
  "isReply": true,
  "replyComments": [
    {},
    {}
  ]
}
  • Content: 
    .efl-comments-item-group {
  &__reply {
    display: flex;
    flex-direction: column;
    & > .efl-comments-item {
      padding: 0;
      margin: 0;
      border: none;
      margin-top: 2.4rem;
      position: relative;
      &::before {
        content: '';
        width: 3px;
        height: calc(100% - 69px);
        background-color: $light-blue;
        position: absolute;
        top: 6.9rem;
        left: 2.05rem;
        display: flex;
      }
      .efl-comments-item__message {
        margin-left: 6rem;
        &::before {
          content: '';
          width: 1.1rem;
          height: 1.1rem;
          border-radius: 50%;
          background-color: $light-blue;
          display: flex;
          position: absolute;
          left: 1.65rem;
        }
      }
      .efl-comments-item__like-reply {
        margin-left: 6rem;
      }
    }
  }
  &__showmore {
    @extend .efl-p-large;

    color: $blue-accent;
    text-decoration: underline;
    margin-top: 1.6rem;
    cursor: pointer;
    display: flex;
  }
  &.reply {
    & > .efl-comments-item {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: none;
    }
  }
}
  • URL: /components/raw/efl-comments-item-group/efl-comments-item-group.scss
  • Filesystem Path: src/library/components/efl-comments-item-group/efl-comments-item-group.scss
  • Size: 1.2 KB 
<div class="efl-comments-item-group {{#if isReply}}reply{{/if}}">
    {{render '@efl-comments-item' this merge="true"}}
    <div class="efl-comments-item-group__reply">
        {{#each replyComments}}
            {{render '@efl-comments-item' this merge="true"}}
        {{/each}}
    </div>
    <a class="efl-comments-item-group__showmore hidden"></a>
</div>