diff --git a/css/freepost.css b/css/freepost.css index 9a9d039..9c52781 100644 --- a/css/freepost.css +++ b/css/freepost.css @@ -164,6 +164,7 @@ html, body .content > .post > .text { margin: 1em 2.5em; + word-wrap: break-word; } /* Post "new comment" form */ @@ -201,23 +202,26 @@ html, body .content > .post > .comments > .comment { margin: 0 0 2em 0; + overflow: hidden; } - .content > .post > .comments > .comment .pin + .content > .post > .comments > .comment > .pin { color: #CD006B; + float: left; font-size: .8em; padding: 0 1em 0 0; - vertical-align: top; + vertical-align: top; } - .content > .post > .comments > .comment .info + .content > .post > .comments > .comment > .info { font-size: .9em; + margin: 0 0 0 1em; } - .content > .post > .comments > .comment .info .username > a, - .content > .post > .comments > .comment .info .username > a:hover + .content > .post > .comments > .comment > .info .username > a, + .content > .post > .comments > .comment > .info .username > a:hover { font-weight: bold; } @@ -234,11 +238,17 @@ html, body text-decoration: none; } - .content > .post > .comments > .comment .info > .vote + .content > .post > .comments > .comment > .info > .vote { margin: 0 1em; } - + + .content > .post > .comments > .comment > .text + { + margin: .5em 0 0 1.5em; + word-wrap: break-word; + } + /* User home page */ .content table.user { diff --git a/template/comment.twig b/template/comment.twig index 2c2610c..b29fe29 100644 --- a/template/comment.twig +++ b/template/comment.twig @@ -4,49 +4,45 @@ {# Add an anchor link for this comment #} <a id="comment-{{ comment.hashId }}"></a> - <table class="comment" style="margin-left:{{ depth * 2 }}em"> - <tr> - <td class="pin">▣</td> + <div class="comment" style="margin-left:{{ depth * 2 }}em"> + <div class="pin">▣</div> + + <div class="info"> + {# Username #} + <span class="username {{ post.userId == comment.userId ? 'op' }}"> + <a href="{{ ('user/' ~ comment.username)|docroot }}">{{ comment.username }}</a> + </span> - <td class="info"> - {# Username #} - <span class="username {{ post.userId == comment.userId ? 'op' }}"> - <a href="{{ ('user/' ~ comment.username)|docroot }}">{{ comment.username }}</a> - </span> - - {% - include 'vote.twig' with { - target: 'comment', - hash_id: comment.hashId, - vote: votes[comment.id] is defined ? votes[comment.id].vote : null, - vote_count: comment.vote, - user: user is defined ? user : null - } only - %} + {% + include 'vote.twig' with { + target: 'comment', + hash_id: comment.hashId, + vote: votes[comment.id] is defined ? votes[comment.id].vote : null, + vote_count: comment.vote, + user: user is defined ? user : null + } only + %} + + {# DateTime #} + <a href="{{ ('post/' ~ post.hashId ~ '#comment-' ~ comment.hashId)|docroot }}"><em>{{ comment.created|ago }}</em></a> + + {% if user %} + — - {# DateTime #} - <a href="{{ ('post/' ~ post.hashId ~ '#comment-' ~ comment.hashId)|docroot }}"><em>{{ comment.created|ago }}</em></a> + {# Reply #} + <a href="../reply?comment={{ comment.hashId }}">Reply</a> - {% if user %} - — - - {# Reply #} - <a href="../reply?comment={{ comment.hashId }}">Reply</a> - - {% if comment.userId == user.id %} - {# Edit #} - <a href="../edit?comment={{ comment.hashId }}">Edit</a> - {% endif %} + {% if comment.userId == user.id %} + {# Edit #} + <a href="../edit?comment={{ comment.hashId }}">Edit</a> {% endif %} - </td> - </tr> - <tr> - <td></td> - <td> + {% endif %} + </div> + + <div class="text"> {{ comment.text|markdown|raw }} - </td> - </tr> - </table> + </div> + </div> {# Add replies #}