Another threads list redesign. #180

static/cranefly/css/cranefly.css

@@ -904,7 +904,7 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{color:#333;text-decoration:n
 .forum-map-category.forum-map-category-important .header{background-color:#cf402e;border:1px solid #a53325}.forum-map-category.forum-map-category-important .header h2{color:#fff;text-shadow:0 1px 0 #672017}.forum-map-category.forum-map-category-important .header h2 small{color:#280c09;text-shadow:none}
 .forum-map-category.forum-map-category-inverse .header{background-color:#333;border:1px solid #1a1a1a}.forum-map-category.forum-map-category-inverse .header h2{color:#eee;text-shadow:0 1px 0 #000}.forum-map-category.forum-map-category-inverse .header h2 small{color:#b3b3b3;text-shadow:none}
 .forum-map-category.forum-map-category-info .header{background-color:#3c85a3;border:1px solid #2e677e}.forum-map-category.forum-map-category-info .header h2{color:#fff;text-shadow:0 1px 0 #1a3946}.forum-map-category.forum-map-category-info .header h2 small{color:#1a3946;text-shadow:none}
-.watched-threads{margin-top:11.9px}.watched-threads .thread-actions{float:right;overflow:auto;padding:0 14px;position:relative;top:7px}.watched-threads .thread-actions form{display:inline-block;float:left;margin:0;padding:0;overflow:auto}.watched-threads .thread-actions form .btn{float:right;padding:4px 10px;margin-left:16px;text-align:center}.watched-threads .thread-actions form .btn i{margin-right:6px;font-size:17.5px;text-align:center}
+.watched-threads{margin-top:11.9px}.watched-threads .thread-actions{float:right;overflow:auto;margin-right:14px;padding:0 14px;position:relative;top:7px;z-index:2}.watched-threads .thread-actions form{display:inline-block;float:left;margin:0;padding:0;overflow:auto}.watched-threads .thread-actions form .btn{float:right;padding:4px 10px;margin-left:16px;text-align:center}.watched-threads .thread-actions form .btn i{margin-right:6px;font-size:17.5px;text-align:center}
 .user-alerts td{vertical-align:middle}.user-alerts td.alert-icon{color:#d5d5d5;font-size:17.5px}.user-alerts td.alert-icon.alert-new{color:#cf402e}
 .user-alerts td.alert-message{color:#555;font-size:16.8px}.user-alerts td.alert-message a:link,.user-alerts td.alert-message a:visited{color:#333;font-weight:bold}
 .user-alerts td.alert-date{color:#999;text-align:right}
@@ -969,15 +969,25 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{color:#333;text-decoration:n
 .forum-subforums-list.forum-subforums-inverse .header{background-color:#333;border:1px solid #1a1a1a}.forum-subforums-list.forum-subforums-inverse .header h2{color:#eee;text-shadow:0 1px 0 #000}.forum-subforums-list.forum-subforums-inverse .header h2 small{color:#b3b3b3;text-shadow:none}
 .forum-subforums-list.forum-subforums-info .header{background-color:#3c85a3;border:1px solid #2e677e}.forum-subforums-list.forum-subforums-info .header h2{color:#fff;text-shadow:0 1px 0 #1a3946}.forum-subforums-list.forum-subforums-info .header h2 small{color:#1a3946;text-shadow:none}
 .forum-threads-list-new{background-color:#fff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0 0 0 3px #eee;-moz-box-shadow:0 0 0 3px #eee;box-shadow:0 0 0 3px #eee;margin-bottom:20px}.forum-threads-list-new .threads-list-empty{padding:28px 0;color:#999;font-size:26.25px;text-align:center}
-.forum-threads-list-new>ul{list-style:none;margin:0}.forum-threads-list-new>ul>li{border-bottom:1px solid #d5d5d5;padding:9.9px 0;overflow:auto}.forum-threads-list-new>ul>li .thread-icon{float:left;width:39.5px;color:#d5d5d5;font-size:22px;text-align:center;text-decoration:none}
-.forum-threads-list-new>ul>li .thread-body{margin-left:39.5px}.forum-threads-list-new>ul>li .thread-body.checkbox-margin{margin-right:32px}
-.forum-threads-list-new>ul>li .thread-body .thread-title{display:block}.forum-threads-list-new>ul>li .thread-body .thread-title a:link,.forum-threads-list-new>ul>li .thread-body .thread-title a:active,.forum-threads-list-new>ul>li .thread-body .thread-title a:visited,.forum-threads-list-new>ul>li .thread-body .thread-title a:hover{color:#555;font-size:17.5px}
-.forum-threads-list-new>ul>li .thread-body .thread-title .thread-flags{display:inline-block;list-style:none;margin:0;padding:0;position:relative;top:4px;left:-4px}.forum-threads-list-new>ul>li .thread-body .thread-title .thread-flags li{float:left;margin-left:7px}
+.forum-threads-list-new>ul{list-style:none;margin:0}.forum-threads-list-new>ul>li{border-bottom:1px solid #d5d5d5;padding:9.9px 0;overflow:auto}.forum-threads-list-new>ul>li .thread-icon{float:left;width:39.5px;color:#d5d5d5;font-size:22px;text-align:center;text-decoration:none;margin-bottom:-1px}
+.forum-threads-list-new>ul>li .thread-body{margin:-9.9px 0;margin-left:39.5px;padding:9.9px 0}.forum-threads-list-new>ul>li .thread-body .thread-title{display:block;position:relative;top:1px}.forum-threads-list-new>ul>li .thread-body .thread-title a:link,.forum-threads-list-new>ul>li .thread-body .thread-title a:active,.forum-threads-list-new>ul>li .thread-body .thread-title a:visited,.forum-threads-list-new>ul>li .thread-body .thread-title a:hover{color:#555;font-size:17.5px}
+.forum-threads-list-new>ul>li .thread-body .thread-title .thread-flags{display:none;list-style:none;margin:0;padding:0;position:relative;top:4px;left:-4px}.forum-threads-list-new>ul>li .thread-body .thread-title .thread-flags li{float:left;margin-left:7px}
+.forum-threads-list-new>ul>li .thread-body .thread-activity{float:right;list-style:none;margin:0;margin-top:-9.9px;padding:6px 0;padding-right:8px;overflow:auto;position:relative;top:2px;z-index:2}.forum-threads-list-new>ul>li .thread-body .thread-activity li{float:left;margin:0;margin-left:8px;padding:0}.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-flag{color:#999;font-size:26px}.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-flag.thread-moderated:hover{color:#7a43b6}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-flag.thread-closed:hover{color:#cf402e}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-flag.thread-deleted:hover{color:#333}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-replies,.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-replies-reported,.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-replies-moderated{position:relative;top:2px;color:#555;font-size:17.5px;font-weight:bold}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-replies-reported{color:#cf402e}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-replies-moderated{color:#7a43b6}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-replies.thread-replies-new{color:#cf402e}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-replies{position:relative;top:2px;color:#555;font-size:17.5px;font-weight:bold}.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-replies.thread-replies-new{color:#cf402e}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-last-reply{position:relative;top:2px}.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-last-reply a:link,.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-last-reply a:visited{color:#999;font-size:17.5px;font-weight:bold}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-last-reply a:hover,.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-last-reply a:active{color:#333}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-author .user-avatar,.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-poster .user-avatar{border-radius:3px;width:24px;height:24px}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-select label{border-radius:3px;display:inline-block;margin:0;margin-bottom:-5px;padding-right:3px;padding-bottom:4px}.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-select label:hover{background-color:#eee}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-select label:active{background-color:#cf402e}
+.forum-threads-list-new>ul>li .thread-body .thread-activity li.thread-select label input{margin-top:6px;position:relative;left:6px}
 .forum-threads-list-new>ul>li .thread-body .thread-details{float:left;list-style:none;margin:0;padding:0}.forum-threads-list-new>ul>li .thread-body .thread-details li{float:left;margin-right:7px;color:#999;font-size:11.9px}.forum-threads-list-new>ul>li .thread-body .thread-details li a:link,.forum-threads-list-new>ul>li .thread-body .thread-details li a:visited{color:#555}
 .forum-threads-list-new>ul>li .thread-body .thread-details li a:hover,.forum-threads-list-new>ul>li .thread-body .thread-details li a:active{color:#333}
-.forum-threads-list-new>ul>li .thread-select{float:right;width:30px}.forum-threads-list-new>ul>li .thread-select label{border-radius:3px;display:inline-block;padding-right:3px;padding-bottom:4px}.forum-threads-list-new>ul>li .thread-select label:hover{background-color:#eee}
-.forum-threads-list-new>ul>li .thread-select label:active{background-color:#cf402e}
-.forum-threads-list-new>ul>li .thread-select label input{margin-top:6px;position:relative;left:6px}
 .forum-threads-list-new>ul>li.thread-new .thread-icon{color:#cf402e}
 .forum-threads-list-new>ul>li.thread-new .thread-title:link,.forum-threads-list-new>ul>li.thread-new .thread-title:active,.forum-threads-list-new>ul>li.thread-new .thread-title:visited,.forum-threads-list-new>ul>li.thread-new .thread-title:hover{color:#333}
 .forum-threads-list-new>ul>li:last-child{border-bottom:none}

static/cranefly/css/cranefly/forum.less

@@ -331,17 +331,18 @@
 				font-size: @threadIconSize;
 				text-align: center;
 				text-decoration: none;
+				margin-bottom: -1px;
 			}
 
 			.thread-body {
+				margin: ((@fontSizeSmall - 2px) * -1) 0px;
 				margin-left: @threadIconSize + @fontSizeLarge;
-
-				&.checkbox-margin {
-					margin-right: 32px;
-				}
+				padding: (@fontSizeSmall - 2px) 0px;
 
 				.thread-title {
 					display: block;
+					position: relative;
+					top: 1px;
 
 					a:link, a:active, a:visited, a:hover {
 						color: @gray;
@@ -349,7 +350,7 @@
 					}
 
 					.thread-flags {
-						display: inline-block;
+						display: none;
 	  				list-style: none;
 						margin: 0px;
 						padding: 0px;
@@ -364,6 +365,139 @@
 					}
 				}
 
+				.thread-activity {
+					float: right;
+					list-style: none;
+					margin: 0px;
+					margin-top: (@fontSizeSmall - 2px) * -1;
+					padding: 6px 0px;
+					padding-right: 8px;
+					overflow: auto;
+					position: relative;
+					top: 2px;
+					z-index: 2;
+
+					li {
+						float: left;
+						margin: 0px;
+						margin-left: 8px;
+						padding: 0px;
+
+						&.thread-flag {
+							color: @grayLight;
+							font-size: 26px;
+
+							&.thread-moderated {
+								&:hover {
+									color: @purple;
+								}
+							}
+
+							&.thread-closed {
+								&:hover {
+									color: @red;
+								}
+							}
+
+							&.thread-deleted {
+								&:hover {
+									color: @grayDark;
+								}
+							}
+						}
+
+						&.thread-replies,
+						&.thread-replies-reported,
+						&.thread-replies-moderated {
+							position: relative;
+							top: 2px;
+
+							color: @gray;
+							font-size: @fontSizeLarge;
+							font-weight: bold;
+						}
+
+						&.thread-replies-reported {
+							color: @red;
+						}
+
+						&.thread-replies-moderated {
+							color: @purple;
+						}
+
+						&.thread-replies {
+							&.thread-replies-new {
+								color: @itemNewColor;
+							}
+						}
+
+						&.thread-replies {
+							position: relative;
+							top: 2px;
+
+							color: @gray;
+							font-size: @fontSizeLarge;
+							font-weight: bold;
+
+							&.thread-replies-new {
+								color: @itemNewColor;
+							}
+						}
+
+						&.thread-last-reply {
+							position: relative;
+							top: 2px;
+
+							a:link, a:visited {
+								color: @grayLight;
+								font-size: @fontSizeLarge;
+								font-weight: bold;
+							}
+
+							a:hover, a:active {
+								color: @textColor;
+							}
+						}
+
+						&.thread-author, &.thread-poster {
+							.user-avatar {
+								border-radius: @baseBorderRadius;
+								width: 24px;
+								height: 24px;
+							}
+						}
+
+						&.thread-author {}
+
+						&.thread-poster {}
+
+						&.thread-select {
+							label {
+								border-radius: @baseBorderRadius;
+								display: inline-block;
+								margin: 0px;
+								margin-bottom: -5px;
+								padding-right: 3px;
+								padding-bottom: 4px;
+
+								&:hover {
+									background-color: @grayLighter;
+								}
+
+								&:active {
+									background-color: @red;
+								}
+
+								input {
+									margin-top: 6px;
+									position: relative;
+									left: 6px;
+								}
+							}
+						}
+					}
+				}
+
 				.thread-details {
 					float: left;
   				list-style: none;
@@ -388,32 +522,6 @@
 				}
 			}
 
-			.thread-select {
-				float: right;
-				width: 30px;
-
-				label {
-					border-radius: @baseBorderRadius;
-					display: inline-block;
-					padding-right: 3px;
-					padding-bottom: 4px;
-
-					&:hover {
-						background-color: @grayLighter;
-					}
-
-					&:active {
-						background-color: @red;
-					}
-
-					input {
-						margin-top: 6px;
-						position: relative;
-						left: 6px;
-					}
-				}
-			}
-
 			&.thread-new {
 				.thread-icon {
 					color: @itemNewColor;

static/cranefly/css/cranefly/watchedthreads.less

@@ -7,9 +7,11 @@
   .thread-actions {
     float: right;
     overflow: auto;
+    margin-right: @baseFontSize;
     padding: 0px @baseFontSize;
     position: relative;
     top: 7px;
+    z-index: 2;
 
     form {
       display: inline-block;

templates/cranefly/threads/list.html

@@ -143,12 +143,63 @@
           </a>
           {% endif %}
         </div>
-        {% if user.is_authenticated() and list_form %}
-        <div class="thread-select">
-          <label class="checkbox"><input form="threads_form" name="{{ list_form['list_items']['html_name'] }}" type="checkbox" class="checkbox-member" value="{{ thread.pk }}"{% if list_form['list_items']['has_value'] and ('' ~ thread.pk) in list_form['list_items']['value'] %} checked="checked"{% endif %}></label>
-        </div>
-        {% endif %}
-        <div class="thread-body{% if user.is_authenticated() and list_form %} checkbox-margin{% endif %}">
+        <div class="thread-body">
+          <ul class="thread-activity">
+            {% if thread.replies_reported %}
+            <li class="thread-replies-reported tooltip-top" title="{% trans %}Reported replies{% endtrans %}">
+              {{ thread.replies_reported|intcomma }}
+            </li>
+            {% endif %}
+            {% if thread.replies_moderated %}
+            <li class="thread-replies-moderated tooltip-top" title="{% trans %}Unreviewed replies{% endtrans %}">
+              {{ thread.replies_moderated|intcomma }}
+            </li>
+            {% endif %}
+            {% if thread.replies %}
+            <li class="thread-replies{% if not thread.is_read%} thread-replies-new{% endif %} tooltip-top" title="{% trans %}Replies{% endtrans %}">
+              {{ thread.replies|intcomma }}
+            </li>
+            {% endif %}
+            <li class="thread-last-reply tooltip-top" title="{% trans last=thread.last|reldate %}Last post {{ last }}{% endtrans %}">
+              <a href="{{ url('thread_last', thread=thread.pk, slug=thread.slug) }}">{{ thread.last|relcompact }}</a>
+            </li>
+            <li class="thread-author tooltip-top" title="{% if thread.start_poster_name != thread.last_poster_name %}{% trans username=thread.start_poster_name %}Thread by {{ username }}{% endtrans %}{% else %}{% trans username=thread.start_poster_name %}Thread and last post by {{ username }}{% endtrans %}{% endif %}">
+              {% if thread.start_poster_id %}
+              <a href="{{ url('user', user=thread.start_poster_id, username=thread.start_poster_name) }}">{% if settings.avatars_on_threads_list %}<img src="{{ thread.start_poster.get_avatar(18) }}" alt="{{ thread.start_poster_name }}" class="user-avatar">{% else %}{{ thread.start_poster_name }}{% endif %}</a>
+              {% else %}
+              {% if settings.avatars_on_threads_list %}<img src="{{ macros.avatar_guest(24) }}" alt="{{ thread.start_poster_name }}" class="user-avatar">{% else %}{{ thread.start_poster_name }}{% endif %}
+              {% endif %}
+            </li>
+            {% if thread.start_poster_name != thread.last_poster_name %}
+            <li class="thread-poster tooltip-top" title="{% trans username=thread.last_poster_name %}Last reply by {{ username }}{% endtrans %}">
+              {% if thread.last_poster_id %}
+              <a href="{{ url('user', user=thread.last_poster_id, username=thread.last_poster_name) }}">{% if settings.avatars_on_threads_list %}<img src="{{ thread.last_poster.get_avatar(18) }}" alt="{{ thread.last_poster_name }}" class="user-avatar">{% else %}{{ thread.last_poster_name }}{% endif %}</a>
+              {% else %}
+              {% if settings.avatars_on_threads_list %}<img src="{{ macros.avatar_guest(24) }}" alt="{{ thread.last_poster_name }}" class="user-avatar">{% else %}{{ thread.last_poster_name }}{% endif %}
+              {% endif %}
+            </li>
+            {% endif %}
+            {% if thread.moderated %}
+            <li class="thread-flag thread-moderated tooltip-top" title="{% trans %}This thread awaits review{% endtrans %}">
+              <i class="icon-remove-circle"></i>
+            </li>
+            {% endif %}
+            {% if thread.closed %}
+            <li class="thread-flag thread-closed tooltip-top" title="{% trans %}This thread is closed{% endtrans %}">
+              <i class="icon-remove-circle"></i>
+            </li>
+            {% endif %}
+            {% if thread.deleted %}
+            <li class="thread-flag thread-deleted tooltip-top" title="{% trans %}This thread is deleted{% endtrans %}">
+              <i class="icon-trash"></i>
+            </li>
+            {% endif %}
+            {% if user.is_authenticated() and list_form %}
+            <li class="thread-select">
+              <label class="checkbox"><input form="threads_form" name="{{ list_form['list_items']['html_name'] }}" type="checkbox" class="checkbox-member" value="{{ thread.pk }}"{% if list_form['list_items']['has_value'] and ('' ~ thread.pk) in list_form['list_items']['value'] %} checked="checked"{% endif %}></label>
+            </li>
+            {% endif %}
+          </ul>
           <div class="thread-title">
             <a href="{{ url('thread', thread=thread.pk, slug=thread.slug) }}">{{ thread.name }}</a>
             <ul class="thread-flags">
@@ -169,14 +220,6 @@
               {% endif %}
             </ul>
           </div>
-          <ul class="thread-details">
-            <li>{% trans user=thread_starter(thread), start=thread.start|reldate|low %}Started by {{ user }}, {{ start }}{% endtrans %}</li>
-            <li><i class="icon-comments-alt"></i> {% trans count=thread.replies, replies=thread.replies|intcomma, user=thread_reply(thread), last=thread.last|reldate|low -%}
-              {{ replies }} reply, by {{ user }} {{ last }}
-              {%- pluralize -%}
-              {{ replies }} replies, last by {{ user }} {{ last }}
-              {%- endtrans %}</li>
-          </ul>
         </div>
       </li>
       {% endfor %}