From c20deeafa8d8511497cd912ea5dbbcd7eeba1a72 Mon Sep 17 00:00:00 2001 From: zPlus <-> Date: Thu, 21 Apr 2016 16:41:57 +0200 Subject: [PATCH] Word-Wrap long text in posts and comments --- css/freepost.css | 24 ++++++++++----- template/comment.twig | 72 ++++++++++++++++++++----------------------- 2 files changed, 51 insertions(+), 45 deletions(-) diff --git a/css/freepost.css b/css/freepost.css index 9a9d0396..9c52781f 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 2c2610c2..b29fe295 100644 --- a/template/comment.twig +++ b/template/comment.twig @@ -4,49 +4,45 @@ {# Add an anchor link for this comment #} - - - +
+
+ +
+ {# Username #} + + {{ comment.username }} + -
- - - - - -
- {# Username #} - - {{ comment.username }} - - - {% - 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 #} + {{ comment.created|ago }} + + {% if user %} + — - {# DateTime #} - {{ comment.created|ago }} + {# Reply #} + Reply - {% if user %} - — - - {# Reply #} - Reply - - {% if comment.userId == user.id %} - {# Edit #} - Edit - {% endif %} + {% if comment.userId == user.id %} + {# Edit #} + Edit {% endif %} -
+ {% endif %} + + +
{{ comment.text|markdown|raw }} -
+ + {# Add replies #}