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 #}
         <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 #}