Moving on slowly with threads lists

misago/static/misago/admin/css/misago/tables.less

@@ -313,4 +313,3 @@
     }
   }
 }
-

misago/static/misago/css/misago/buttons.less

@@ -51,6 +51,22 @@
 .btn {
   &.btn-default {
     .misago-button-flavour(@btn-default-color, @btn-default-bg, @btn-default-border);
+
+    &.text-success {
+      color: @brand-success;
+    }
+
+    &.text-primary {
+      color: @brand-primary;
+    }
+
+    &.text-danger {
+      color: @brand-danger;
+    }
+
+    &.text-warning {
+      color: @brand-warning;
+    }
   }
 
   &.btn-primary {

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

@@ -12,6 +12,8 @@
 @import "panels.less";
 @import "progressbars.less";
 @import "states.less";
+@import "tables.less";
+@import "threadslists.less";
 @import "typography.less";
 @import "yesnoswitch.less";
 

misago/static/misago/css/misago/tables.less

@@ -0,0 +1,297 @@
+//
+// Tables
+// --------------------------------------------------
+
+
+//== Table actions
+//
+//**
+.table-actions {
+  margin-bottom: @line-height-computed;
+  height: 36px;
+  overflow: visible;
+
+  &>.pull-left {
+    margin-right: @line-height-computed / 2;
+  }
+
+  &>.pull-right {
+    margin-left: @line-height-computed / 2;
+
+    &.master-checkbox {
+      background: none;
+      border-color: transparent;
+      .box-shadow(none);
+      padding: 0px 6px;
+
+      color: @gray-light;
+      font-size: 24px;
+      line-height: 32px;
+
+      &.active, &:active {
+        top: 0px;
+      }
+
+      &.active {
+        color: @brand-success;
+      }
+    }
+
+    .dropdown-menu {
+      left: auto;
+      right: 0px;
+    }
+  }
+}
+
+
+//== Table panel
+//
+//**
+.table-panel {
+  border: 1px solid @table-panel-border;
+  border-radius: @border-radius-base;
+  box-shadow: 0px 0px 0px 3px @table-panel-shadow;
+  margin-bottom: @line-height-computed;
+}
+
+
+//== Panel table
+//
+//**
+.table-panel {
+  table.table {
+    margin: 0px;
+  }
+}
+
+
+//== Table row
+//
+//**
+.table-panel {
+  table.table {
+    tr {
+      &.message-row {
+        td {
+          padding: @line-height-computed;
+
+          p {
+            margin: 0px;
+
+            font-size: @font-size-large;
+          }
+        }
+      }
+
+      th {
+        background: @table-header-bg;
+        border: none;
+        padding: @table-condensed-cell-padding @table-cell-padding;
+
+        color: @table-header-color;
+        font-size: @font-size-small;
+      }
+
+      td {
+        background-color: #fff;
+        vertical-align: middle;
+
+        img {
+          border-radius: @border-radius-base;
+          max-width: 30px;
+          max-height: 30px;
+        }
+
+        &.item-name {
+          color: @text-color;
+          font-size: @font-size-large;
+
+          a:link, a:visited {
+            color: @text-color;
+          }
+        }
+      }
+
+      &:first-child {
+        &>:first-child {
+          border-top-left-radius: (@border-radius-base - 1);
+        }
+
+        &>:last-child {
+          border-top-right-radius: (@border-radius-base - 1);
+        }
+      }
+
+      &:last-child {
+        &>:first-child {
+          border-bottom-left-radius: (@border-radius-base - 1);
+        }
+
+        &>:last-child {
+          border-bottom-right-radius: (@border-radius-base - 1);
+        }
+      }
+    }
+  }
+}
+
+
+//== Row action
+//
+//**
+.table-panel {
+  table.table {
+    tr {
+      td.row-action {
+        vertical-align: middle;
+        width: 1%;
+
+        .btn, &>form .btn, .dropdown-toggle {
+          background: none;
+          border-color: transparent;
+          .box-shadow(none);
+          padding: 0px 4px;
+          position: relative;
+          top: 0px;
+          bottom: 0px;
+
+          color: @gray-light;
+          font-size: @font-size-base * 1.6;
+
+          &:hover {
+            top: 0px;
+            bottom: 0px;
+
+            &.btn-default {
+              color: @gray;
+            }
+
+            &.btn-primary {
+              color: @brand-primary;
+            }
+
+            &.btn-danger {
+              color: @brand-danger;
+            }
+
+            &.btn-warning {
+              color: @brand-warning;
+            }
+
+            &.btn-success {
+              color: @brand-success;
+            }
+          }
+
+          &:active {
+            top: 0px;
+            bottom: 0px;
+
+            &.btn-default {
+              color: @gray-dark;
+            }
+
+            &.btn-primary {
+              color: darken(@brand-primary, 20%);
+            }
+
+            &.btn-danger {
+              color: darken(@brand-danger, 20%);
+            }
+
+            &.btn-warning {
+              color: darken(@brand-warning, 20%);
+            }
+
+            &.btn-success {
+              color: darken(@brand-success, 20%);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+//== Row select
+//
+//**
+.table-panel {
+  table.table {
+    tr {
+      &.active {
+        td {
+          background-color: fadeOut(@brand-warning, 95%);
+        }
+      }
+
+      td.row-select {
+        width: 1%;
+
+        label {
+          padding: 0px;
+          width: 24px;
+          height: 24px;
+
+          text-align: center;
+
+          input {
+            width: 12px;
+            height: 12px;
+          }
+
+          &.ninja-label {
+              border: 0;
+              clip: rect(0 0 0 0);
+              height: 1px;
+              margin: -1px;
+              overflow: hidden;
+              padding: 0;
+              position: absolute;
+              width: 1px;
+          }
+        }
+
+        a {
+          display: block;
+          width: 24px;
+          height: 24px;
+
+          span {
+            color: lighten(@gray-light, 5%);
+            font-size: 24px;
+          }
+
+          &.active {
+            span {
+              color: @brand-success;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+//== Table footer
+//
+//**
+.table-panel {
+  .table-footer {
+    background-color: @form-panel-footer-bg;
+    border-radius: 0px 0px (@border-radius-large - 1px) (@border-radius-large - 1px);
+    border-top: 1px solid @form-panel-border;
+    padding: @form-panel-padding;
+    padding-left: @table-cell-padding;
+    padding-right: @table-cell-padding;
+
+    &>.row {
+      position: relative;
+      left: -2px;
+      margin-left: @table-cell-padding;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+//
+// Threads lists
+// --------------------------------------------------

misago/static/misago/css/misago/variables.less

@@ -289,6 +289,15 @@
 @panel-inner-border:          darken(@body-bg, 8%);
 @panel-footer-bg:             @panel-bg;
 
+//** Table panels
+@table-panel-bg:                        @panel-bg;
+@table-panel-border:                    @panel-default-border;
+@table-panel-shadow:                    @panel-shadow;
+
+@table-header-color:                    @gray;
+@table-header-bg:                       darken(@body-bg, 5%);
+@table-header-border:                   darken(@body-bg, 15%);
+
 //** User cards
 @user-card-bg:                         @body-bg;
 @user-card-border:                     darken(@body-bg, 15%);

misago/templates/misago/threads/list.html

@@ -36,19 +36,62 @@
     {% include "misago/forums/subforums.html" with category=forum %}
     {% endif %}
 
-    {% if forum.is_closed %}
-      {% trans "This forum is closed." %}
-    {% else %}
-      {% if user.is_anonymous %}
-        <a href="{% url LOGIN_URL %}">{% trans "Login to start thread" %}</a>
-      {% elif forum.acl.can_start_threads %}
-        <a href="{% url LOGIN_URL %}" class="btn btn-success">
-          {% trans "Start thread" %}
-        </a>
-      {% else %}
-        {% trans "You can't start threads in this forum." %}
-      {% endif %}
-    {% endif %}
+    <div class="threads-list">
+
+      <div class="table-actions">
+        {% if forum.is_closed %}
+        <span class="btn btn-default disabled pull-right">
+          <span class="fa fa-lock"></span>
+          {% trans "This forum is closed." %}
+        </span>
+        {% else %}
+          {% if user.is_anonymous %}
+          <a href="{% url LOGIN_URL %}" class="btn btn-default pull-right">
+            <span class="fa fa-check-circle"></span>
+            {% trans "Sign in to start thread" %}
+          </a>
+          {% elif forum.acl.can_start_threads %}
+          <a href="{% url LOGIN_URL %}" class="btn btn-success pull-right">
+            <span class="fa fa-plus-circle"></span>
+            {% trans "Start thread" %}
+          </a>
+          {% else %}
+          <span class="btn btn-default btn-closed pull-right">
+            <span class="fa fa-ban"></span>
+            {% trans "Can't start threads" %}
+          </span>
+          {% endif %}
+        {% endif %}
+      </div>
+
+      <div class="table-panel">
+        <table class="table">
+          {% block table-items %}
+          {% for item in items %}
+          <tr>
+            {% block table-row %}{% endblock table-row %}
+            {% if mass_actions %}
+            <td class="row-select">
+              <label>
+                <input type="checkbox" form="mass-action" name="selected_items" value="{{ item.pk }}" {% if item.pk in selected_items %} checked{% endif %}>
+              </label>
+            </td>
+            {% endif %}
+          </tr>
+          {% empty %}
+          <tr class="message-row">
+            {% block emptylist %}
+            {% endblock emptylist %}
+          </tr>
+          {% endfor %}
+          {% endblock table-items %}
+        </table>
+      </div>
+
+      <div class="table-actions">
+      </div>
+    </div>
+
   </div>
 </div>
 {% endblock content %}