Experimental thread list redesign. #180

static/cranefly/css/cranefly.css

@@ -795,12 +795,12 @@ footer .breadcrumb li.active{color:#555}
 .form-container .form-actions{border-radius:0 0 3px 3px;margin:-20px;margin-top:10px}.form-container .form-actions .form-actions-protip{margin-left:14px;color:#555;font-weight:bold}
 textarea{resize:vertical}
 @media (min-width:1200px){.form-container.container-horizontal{margin:0 -21px;margin-bottom:20px}}.btn{background:none;background-color:#fbfbfb;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-weight:bold}.btn:hover,.btn:active{background-color:#fff;border-color:#a6a6a6;color:#333}
-.btn.btn-primary{background-color:#3c85a3;border-color:#357690;color:rgba(255,255,255,0.85);text-shadow:0 1px 0 #27576b}.btn.btn-primary:hover,.btn.btn-primary:active{color:#fff}.btn.btn-primary:hover:enabled,.btn.btn-primary:active:enabled{background-color:#268eb9;border-color:#217ea4}
-.btn.btn-info{background-color:#587987;border-color:#4e6b78;color:rgba(255,255,255,0.85);text-shadow:0 1px 0 #3a5059}.btn.btn-info:hover,.btn.btn-info:active{color:#fff}.btn.btn-info:hover:enabled,.btn.btn-info:active:enabled{background-color:#478098;border-color:#3f7286}
-.btn.btn-success{background-color:#589358;border-color:#4e834e;color:rgba(255,255,255,0.85);text-shadow:0 1px 0 #2f6f2f}.btn.btn-success:hover,.btn.btn-success:active{color:#fff}.btn.btn-success:hover:enabled,.btn.btn-success:active:enabled{background-color:#46a546;border-color:#3e933e}
-.btn.btn-warning{background-color:#e59119;border-color:#ce8217;color:rgba(255,255,255,0.85);text-shadow:0 1px 0 #ad6704}.btn.btn-warning:hover,.btn.btn-warning:active{color:#fff}.btn.btn-warning:hover:enabled,.btn.btn-warning:active:enabled{background-color:#f89406;border-color:#df8505}
-.btn.btn-danger{background-color:#cf402e;border-color:#ba3a29;color:rgba(255,255,255,0.85);text-shadow:0 1px 0 #902d20}.btn.btn-danger:hover,.btn.btn-danger:active{color:#fff}.btn.btn-danger:hover:enabled,.btn.btn-danger:active:enabled{background-color:#e82c15;border-color:#d12813}
-.btn.btn-inverse{background-color:#333;border-color:#262626;color:rgba(255,255,255,0.85);text-shadow:0 1px 0 #0d0d0d}.btn.btn-inverse:hover,.btn.btn-inverse:active{color:#fff}.btn.btn-inverse:hover:enabled,.btn.btn-inverse:active:enabled{background-color:#262626;border-color:#1a1a1a}
+.btn.btn-primary{background-color:#3c85a3;border-color:#357690;color:#fff;text-shadow:0 1px 0 #27576b}.btn.btn-primary:hover,.btn.btn-primary:active{color:#fff}.btn.btn-primary:hover:enabled,.btn.btn-primary:active:enabled{background-color:#268eb9;border-color:#217ea4}
+.btn.btn-info{background-color:#587987;border-color:#4e6b78;color:#fff;text-shadow:0 1px 0 #3a5059}.btn.btn-info:hover,.btn.btn-info:active{color:#fff}.btn.btn-info:hover:enabled,.btn.btn-info:active:enabled{background-color:#478098;border-color:#3f7286}
+.btn.btn-success{background-color:#589358;border-color:#4e834e;color:#fff;text-shadow:0 1px 0 #2f6f2f}.btn.btn-success:hover,.btn.btn-success:active{color:#fff}.btn.btn-success:hover:enabled,.btn.btn-success:active:enabled{background-color:#46a546;border-color:#3e933e}
+.btn.btn-warning{background-color:#e59119;border-color:#ce8217;color:#fff;text-shadow:0 1px 0 #ad6704}.btn.btn-warning:hover,.btn.btn-warning:active{color:#fff}.btn.btn-warning:hover:enabled,.btn.btn-warning:active:enabled{background-color:#f89406;border-color:#df8505}
+.btn.btn-danger{background-color:#cf402e;border-color:#ba3a29;color:#fff;text-shadow:0 1px 0 #902d20}.btn.btn-danger:hover,.btn.btn-danger:active{color:#fff}.btn.btn-danger:hover:enabled,.btn.btn-danger:active:enabled{background-color:#e82c15;border-color:#d12813}
+.btn.btn-inverse{background-color:#333;border-color:#262626;color:#fff;text-shadow:0 1px 0 #0d0d0d}.btn.btn-inverse:hover,.btn.btn-inverse:active{color:#fff}.btn.btn-inverse:hover:enabled,.btn.btn-inverse:active:enabled{background-color:#262626;border-color:#1a1a1a}
 .btn.btn-link{background:none;border:none;color:#999}.btn.btn-link:hover,.btn.btn-link:active,.btn.btn-link:focus{color:#333}.btn.btn-link:hover:enabled,.btn.btn-link:active:enabled,.btn.btn-link:focus:enabled{text-decoration:none}
 a.btn-link:hover,a.btn-link:active,a.btn-link:focus{color:#333;text-decoration:none}
 .pagination{margin:0;padding:0}.pagination .count{margin-right:10.5px;padding:4px 0;color:#999}
@@ -967,6 +967,20 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{color:#333;text-decoration:n
 .forum-subforums-list.forum-subforums-important .header{background-color:#cf402e;border:1px solid #a53325}.forum-subforums-list.forum-subforums-important .header h2{color:#fff;text-shadow:0 1px 0 #672017}.forum-subforums-list.forum-subforums-important .header h2 small{color:#280c09;text-shadow:none}
 .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>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}
+.forum-threads-list-new .threads-actions{background-color:#fbfbfb;border-top:1px solid #d5d5d5;border-radius:0 0 2px 2px;overflow:auto;padding:4px;color:#999;font-size:11.9px}.forum-threads-list-new .threads-actions form{margin-bottom:0}
 .forum-threads-list{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 .header{background-color:#fbfbfb;border:1px solid #d5d5d5;border-radius:2px 2px 0 0;margin:-1px;margin-bottom:0;padding-bottom:1px;overflow:auto;color:#999;font-weight:bold;font-size:11.9px}.forum-threads-list .header .row-fluid>div{margin-bottom:0;min-height:1px;padding:2px 10px;padding-top:2px;padding-bottom:2px}
 .forum-threads-list .header .row-fluid .thread-replies{float:left;width:106px}
 .forum-threads-list .header .row-fluid .thread-last{float:left}

static/cranefly/css/cranefly/buttons.less

@@ -19,7 +19,7 @@
     background-color: @bluePale;
     border-color: darken(@bluePale, 5%);
 
-    color: fadeOut(@white, 15%);
+    color: @white;
     text-shadow: 0px 1px 0px darken(@bluePale, 15%);
 
     &:hover, &:active {
@@ -36,7 +36,7 @@
     background-color: desaturate(@bluePale, 25%);
     border-color: darken(desaturate(@bluePale, 25%), 5%);
 
-    color: fadeOut(@white, 15%);
+    color: @white;
     text-shadow: 0px 1px 0px darken(desaturate(@bluePale, 25%), 15%);
 
     &:hover, &:active {
@@ -53,7 +53,7 @@
     background-color: desaturate(@green, 15%);
     border-color: darken(desaturate(@green, 15%), 5%);
 
-    color: fadeOut(@white, 15%);
+    color: @white;
     text-shadow: 0px 1px 0px darken(@green, 15%);
 
     &:hover, &:active {
@@ -70,7 +70,7 @@
     background-color: desaturate(@orange, 15%);
     border-color: darken(desaturate(@orange, 15%), 5%);
 
-    color: fadeOut(@white, 15%);
+    color: @white;
     text-shadow: 0px 1px 0px darken(@orange, 15%);
 
     &:hover, &:active {
@@ -87,7 +87,7 @@
     background-color: @red;
     border-color: darken(@red, 5%);
 
-    color: fadeOut(@white, 15%);
+    color: @white;
     text-shadow: 0px 1px 0px darken(@red, 15%);
 
     &:hover, &:active {
@@ -104,7 +104,7 @@
     background-color: @textColor;
     border-color: darken(@textColor, 5%);
 
-    color: fadeOut(@white, 15%);
+    color: @white;
     text-shadow: 0px 1px 0px darken(@textColor, 15%);
 
     &:hover, &:active {

static/cranefly/css/cranefly/forum.less

@@ -298,6 +298,156 @@
   }
 }
 
+// New threads list
+.forum-threads-list-new {
+  background-color: @categoryBackground;
+  border: 1px solid @categoryBorder;
+  border-radius: @borderRadiusSmall;
+  .box-shadow(0px 0px 0px 3px @categoryShadow);
+  margin-bottom: @baseLineHeight;
+
+  .threads-list-empty {
+  	padding: (@baseFontSize * 2) 0px;
+
+  	color: @grayLight;
+  	font-size: @fontSizeLarge * 1.5;
+  	text-align: center;
+  }
+
+  &>ul {
+  	list-style: none;
+  	margin: 0px;
+
+  	&>li {
+    	border-bottom: 1px solid @categoryBorder;
+			padding: (@fontSizeSmall - 2px) 0px;
+			overflow: auto;
+
+			.thread-icon {
+				float: left;
+				width: @threadIconSize + @fontSizeLarge;
+
+				color: @itemOldColor;
+				font-size: @threadIconSize;
+				text-align: center;
+				text-decoration: none;
+			}
+
+			.thread-body {
+				margin-left: @threadIconSize + @fontSizeLarge;
+
+				&.checkbox-margin {
+					margin-right: 32px;
+				}
+
+				.thread-title {
+					display: block;
+
+					a:link, a:active, a:visited, a:hover {
+						color: @gray;
+						font-size: @fontSizeLarge;
+					}
+
+					.thread-flags {
+						display: inline-block;
+	  				list-style: none;
+						margin: 0px;
+						padding: 0px;
+						position: relative;
+						top: 4px;
+						left: -4px;
+
+						li {
+							float: left;
+							margin-left: @baseFontSize / 2;
+						}
+					}
+				}
+
+				.thread-details {
+					float: left;
+  				list-style: none;
+					margin: 0px;
+					padding: 0px;
+
+					li {
+						float: left;
+						margin-right: @baseFontSize / 2;
+
+						color: @grayLight;
+						font-size: @fontSizeSmall;
+
+						a:link, a:visited {
+							color: @gray;
+						}
+
+						a:hover, a:active {
+							color: @textColor;
+						}
+					}
+				}
+			}
+
+			.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;
+				}
+
+				.thread-title {
+					&:link, &:active, &:visited, &:hover {
+						color: @textColor;
+					}
+				}
+			}
+  	}
+
+  	&>li:last-child {
+  		border-bottom: none;
+  	}
+  }
+
+  .threads-actions {
+    background-color: @bodyBackground;
+    border-top: 1px solid @categoryBorder;
+    border-radius: 0px 0px @borderRadiusSmall @borderRadiusSmall;
+    overflow: auto;
+    padding: 4px;
+
+    color: @grayLight;
+    font-size: @fontSizeSmall;
+
+    form {
+      margin-bottom: 0px;
+    }
+  }
+}
+
 // Threads list
 .forum-threads-list {
   background-color: @categoryBackground;

templates/cranefly/threads/list.html

@@ -111,6 +111,81 @@
     {% endif %}
   </div>
 
+  <div class="forum-threads-list-new">
+    {% if threads %}
+    <ul>
+      {% for thread in threads %}
+      <li{% if not thread.is_read %} class="thread-new"{% endif %}>
+        <div class="thread-icon">
+          {% if thread.is_read %}
+          <a href="{{ url('thread_new', thread=thread.pk, slug=thread.slug) }}" class="thread-icon thread-icon-last tooltip-top" title="{% trans %}Click to see last post{% endtrans %}">
+          {% else %}
+          <a href="{{ url('thread_new', thread=thread.pk, slug=thread.slug) }}" class="thread-icon thread-icon-new tooltip-top" title="{% trans %}Click to see first unread post{% endtrans %}">
+          {% endif %}
+            {% if thread.weight == 2%}
+            <i class="icon-star{% if thread.is_read %}-empty{% endif %}"></i>
+            {% elif thread.weight == 1 %}
+            <i class="icon-bookmark{% if thread.is_read %}-empty{% endif %}"></i>
+            {% else %}
+            <i class="icon-circle{% if thread.is_read %}-blank{% endif %}"></i>
+            {% endif %}
+          </a>
+        </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-title">
+            <a href="{{ url('thread', thread=thread.pk, slug=thread.slug) }}">{{ thread.name }}</a>
+            <ul class="thread-flags">
+              {% if thread.replies_reported and ((forum is defined and acl.threads.can_mod_posts(forum)) or acl.threads.can_mod_posts(thread.forum)) %}
+              <li><span class="label label-warning tooltip-bottom" title="{% trans %}This thread has reported replies{% endtrans %}">{% trans %}Reported{% endtrans %}</span></li>
+              {% endif %}
+              {% if thread.replies_moderated %}
+              <li><span class="label label-info tooltip-bottom" title="{% trans %}This thread has unreviewed replies{% endtrans %}">{% trans %}Unreviewed{% endtrans %}</span></li>
+              {% endif %}
+              {% if thread.moderated  %}
+              <li><span class="label tooltip-bottom" title="{% trans %}This thread awaits review{% endtrans %}">{% trans %}Hidden{% endtrans %}</span></li>
+              {% endif %}
+              {% if thread.closed %}
+              <li><span class="label label-important tooltip-bottom" title="{% trans %}This thread is closed{% endtrans %}">{% trans %}Closed{% endtrans %}</span></li>
+              {% endif %}
+              {% if thread.deleted %}
+              <li><span class="label label-inverse tooltip-bottom" title="{% trans %}This thread is deleted{% endtrans %}">{% trans %}Deleted{% endtrans %}</span></li>
+              {% 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 %}
+    </ul>
+    {% if user.is_authenticated() and list_form %}
+    <div class="threads-actions">
+      <form id="threads_form" class="form-inline pull-right" action="{{ request_path }}" method="POST">
+        <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+        {{ form_theme.field(list_form.list_action, attrs={'class': 'span3'}) }}
+        <button type="submit" class="btn btn-danger">{% trans %}Go{% endtrans %}</button>
+      </form>
+    </div>
+    {% endif %}
+    {% else %}
+    <div class="threads-list-empty">
+      {% trans %}There are no threads in this forum.{% endtrans %}
+    </div>
+    {% endif %}
+  </div>
+
+  {# START OLD THREADS
   <div class="forum-threads-list">
     <div class="header">
       <div class="row-fluid">
@@ -137,7 +212,7 @@
 
           {{ macros.thread_flags(thread) }}
 
-          <a href="{{ url('thread', thread=thread.pk, slug=thread.slug) }}" class="thread-name{% if thread.name|length > 70 %} tooltip-top" title="{{ thread.name }}{% endif %}">{{ thread.name|short_string(70) }}</a>
+          <a href="{{ url('thread', thread=thread.pk, slug=thread.slug) }}" class="thread-name{% if thread.name|length > 70 %} tooltip-top" title="{{ thread.name }}{% endif %}">{{ thread.name }}</a>
 
           <div class="thread-details">
             {% trans user=thread_starter(thread), start=thread.start|reldate|low %}by {{ user }}, {{ start }}{% endtrans %}
@@ -183,6 +258,7 @@
     </div>
     {% endif %}
   </div>
+  END OLD THREADS #}
 
   <div class="forum-threads-extra">
     {{ pager() }}