Better multiline thread titles

misago/static/misago/css/misago/threadslists.less

@@ -22,25 +22,29 @@
         // Thread icon
         //
         //==
-        &.new {
-          .thread-icon {
-            color: @state-active;
-          }
-        }
-
         .thread-icon {
+          display: block;
+          float: left;
           position: relative;
           right: 5px;
-          bottom: 2px;
+          top: 5px;
 
           color: @state-default;
         }
 
+        &.new {
+          .thread-icon {
+            color: @state-active;
+          }
+        }
+
 
         // Thread title
         //
         //==
         .item-title {
+          display: block;
+          margin-left: @font-size-large * 1.5;
           font-size: @font-size-large;
 
           .opacity(0.7);
@@ -52,6 +56,7 @@
           }
         }
 
+
         // Thread last reply
         //
         //==
@@ -63,7 +68,7 @@
           .thread-flags {
             margin-right: @font-size-large;
             position: relative;
-            top: 3px;
+            top: 2px;
 
             li {
               float: left;
@@ -72,8 +77,6 @@
               .label {
                 border-radius: @border-radius-small;
                 margin-left: @line-height-computed / 3;
-                position: relative;
-                bottom: 1px;
 
                 font-weight: normal;
               }
@@ -95,7 +98,7 @@
             margin: 0px;
             margin-right: @font-size-large;
             margin-top: -2px;
-            .opacity(0.7);
+            .opacity(0.6);
             transition-duration: 0.5s;
             width: @font-size-large * 4.5;
 
@@ -112,6 +115,10 @@
             &.new-replies {
               .opacity(1);
             }
+
+            &.thread-read {
+              padding-top: 2px;
+            }
           }
 
           .thread-author {
@@ -132,7 +139,7 @@
 
           a.last-post {
             display: block;
-            width: 50px;
+            width: 64px;
             position: relative;
             top: 3px;
 

misago/templates/misago/threads/base.html

@@ -12,7 +12,8 @@
         <li class="list-group-item{% if not thread.is_read %} new{% endif %}">
           <div class="row">
 
-            <div class="col-md-8">
+            <div class="col-md-7">
+
               {% if thread.is_announcement %}
                 {% if thread.is_read %}
                 <span class="thread-icon tooltip-top fa fa-star-o fa-lg fa-fw" title="{% trans "Announcement, has no unread posts" %}"></span>
@@ -36,9 +37,10 @@
               <a href="{{ thread.get_absolute_url }}" class="item-title">
                 {{ thread.title }}
               </a>
+
             </div>
             {% block thread-extra %}
-            <div class="col-md-4 thread-stats">
+            <div class="col-md-5 thread-stats">
               <a href="#" class="thread-check">
                 <span class="fa fa-check"></span>
                 <input type="checkbox" form="threads-actions" name="thread" value="{{ thread.pk }}"{% if thread.pk in selected_threads %}checked="checked"{% endif %}>
@@ -60,11 +62,10 @@
               {% endif %}
 
               {% if thread.is_read %}
-              <div class="thread-replies">
-                <div class="tooltip-top" title="{% blocktrans trimmed with replies=thread.replies|intcomma count counter=thread.replies %}{{ replies }} reply{% plural %}{{ replies }} replies{% endblocktrans %}">
-                  <span class="glyphicon glyphicon-comment"></span>
+              <div class="thread-replies thread-read">
+                <span class="tooltip-top" title="{% blocktrans trimmed with replies=thread.replies|intcomma count counter=thread.replies %}{{ replies }} reply{% plural %}{{ replies }} replies{% endblocktrans %}">
                   {{ thread.replies|intcomma }}
-                </div>
+                </span>
               </div>
               {% elif thread.is_new %}
               <div class="thread-replies new-replies">