Data list comment markup

[dhornbein]

The following is markup for comments in updates data lists. Comments are list items nested within the <li> of the parent update. There are some discrepency between the proposed markup and the actual markup generated by the current system, these are not critical to unify.

Comment Markup

<ul>
  <li>
    <aside class='card-post-comment'>
      <p class='meta'>Updated Nov 23, 2016 @ 03:45 by Admin@example.com</p>
      <div class='desc'>comment body text</div>
      <footer class='footer'>
        <p><a href='#' class='more'>More Info</a></p>
      </footer>
    </aside>
  </li>
<!-- more <li> for other comments -->
</ul>

Comment input Markup

<ul>
  <li>
    <aside class='card-post-comment'>
      <textarea class='desc' placeholder='comment here'></textarea>
      <footer class='footer'>
        <p><a href='#'>Submit Comment</a></p>
      </footer>
    </aside>
  </li>
</ul>

Parent update with NO comment

<li class='dl-item'>
  <aside class='card-post'>
    <header class='status-bar description'>
      ...
    </header>
    <div class='body'>
      <div class='meta'>
        <span class='meta-update'>Updated Nov 23, 2016 @ 03:45 by Admin@example.com</span>
        <span class='meta-comments'>n Comment(s)</span> <!-- comment indicator  -->
      </div>
      <h4 class='title'>Event Title</h4>
      <div class='desc'>...</div>
    </div>
    <footer class='footer'>
      <p><a href='#' class='more'>More Info</a></p>
      <p class='tags'>Taggit tags</p>
      <p><a href='#'>Add Comment</a></p> <!-- Add comment button -->
    </footer>
  </aside>
</li>

Parent update WITH comment INPUT

<li class='dl-item'>
  <aside class='card-post'>
    <header class='status-bar description'>
      ...
    </header>
    <div class='body'>
      <div class='meta'>
        <span class='meta-update'>Updated Nov 23, 2016 @ 03:45 by Admin@example.com</span>
        <span class='meta-comments'>n Comment(s)</span> <!-- comment indicator  -->
      </div>
      <h4 class='title'>Event Title</h4>
      <div class='desc'>...</div>
    </div>
    <footer class='footer'>
      <p><a href='#' class='more'>More Info</a></p>
      <p class='tags'>Taggit tags</p>
      <p><a href='#'>Add Comment</a></p> <!-- Add comment button -->
    </footer>
    <ul> <!-- start comment list -->
      <li>
        <aside class='card-post-comment'>
          <textarea class='desc' placeholder='comment here'></textarea>
          <footer class='footer'>
            <p><a href='#'>Submit Comment</a></p>
          </footer>
        </aside>
      </li>
    </ul> <!-- end comment list -->
  </aside>
</li>

Parent update WITH comment

<li class='dl-item'>
  <aside class='card-post'>
    <header class='status-bar description'>
      ...
    </header>
    <div class='body'>
      <div class='meta'>
        <span class='meta-update'>Updated Nov 23, 2016 @ 03:45 by Admin@example.com</span>
        <span class='meta-comments'>n Comment(s)</span> <!-- comment indicator  -->
      </div>
      <h4 class='title'>Event Title</h4>
      <div class='desc'>...</div>
    </div>
    <footer class='footer'>
      <p><a href='#' class='more'>More Info</a></p>
      <p class='tags'>Taggit tags</p>
      <p><a href='#'>Add Comment</a></p> <!-- Add comment button -->
    </footer>
    <ul> <!-- start comment list -->
      <li>
        <aside class='card-post-comment'>
          <p class='meta'>Updated Nov 23, 2016 @ 03:45 by Admin@example.com</p>
          <div class='desc'>comment body text</div>
          <footer class='footer'>
            <p><a href='#' class='more'>More Info</a></p>
          </footer>
        </aside>
      </li>
    </ul> <!-- end comment list -->
  </aside>
</li>

[devinbalkind]

@flavour how's this?

[flavour]

Useful to have screenshots of what this should look like too. So it seems that you want comments to NOT be created in a popup but rather inline to the card...everything is possible, of course, but this is going to require a lot of custom code to make it work...ok so start at the beginning ;)

[flavour]

Previously the comment indicator had an associated href..presumably to show the comments, but that is't used now? So comments are always all visible? So if the topmost comment has 20 comments then that's the only update we see?

[flavour]

What would 'More Info' do for Updates & Comments? Is there anything more for these? To handle the case where there are a zillion comments to an Update, I can see wantign to see that on a dedicated page, although is there really 'more Info? Whatwould we find there that isn't on this page? Comments wouldn't have dedicated pages would they? Again I am unaware of any info not shown here already that a 'More Info' could mean?

[flavour]

Permissions: Who can create comments? Any logged-in user?

[flavour]

Not sure what the markup should look like if there is a comment already & we display the INPUT? I would assume that the newly-visible INPUT becomes the top-most comment?

[devinbalkind]

I'll address the more complex issues your bring up shortly but here are a few responses:

• Submission can be via popup instead of inline if that's easier
• any logged in User should be able to comment.
• I think newest comments should be on the bottom of the comment thread

[flavour]

I think newest comments should be on the bottom of the comment thread

So the INPUT which is unhidden by the 'Add Comment' button is added at the bottom & we scroll down the page to focus in it?

[devinbalkind]

Yes I think that's good and how Facebook does it. Which people are very familiar with.

[devinbalkind]

I think displaying all comments for now is fine. If we get a lot we can figure out a design mechanism to deal with that.

"More Info" on updates and comments should probably be relabeled "Expand." The idea is anything over 300 (?) words would get a "..." and an expand button. So if a user clicks it would reveal the entire post/comment.

[flavour]

Implementation is complete from my side, but needs some CSS to make it look right