Items list template

uiframework/admin/layout.html

@@ -199,50 +199,56 @@
           <tr>
             <th>Lorem</th>
             <th>Ipsum</th>
-            <th>Dolor</th>
-            <th>Met</th>
+            <th style="width: 136px;">Dolor</th>
+            <th colspan="3">&nbsp;</th>
           </tr>
           <tr>
-            <td>Lorem</td>
+            <td class="lead">Lorem</td>
             <td>Ipsum</td>
-            <td>Dolor</td>
-            <td>Met</td>
-          </tr>
-          <tr>
-            <td>Lorem</td>
-            <td>Ipsum</td>
-            <td>Dolor</td>
-            <td>Met</td>
-          </tr>
-          <tr>
-            <td>Lorem</td>
-            <td>Ipsum</td>
-            <td>Dolor</td>
-            <td>Met</td>
-          </tr>
-          <tr>
-            <td>Lorem</td>
-            <td>Ipsum</td>
-            <td>Dolor</td>
-            <td>Met</td>
-          </tr>
-          <tr>
-            <td>Lorem</td>
-            <td>Ipsum</td>
-            <td>Dolor</td>
-            <td>Met</td>
-          </tr>
-          <tr>
-            <td>Lorem</td>
-            <td>Ipsum</td>
-            <td>Dolor</td>
-            <td>Met</td>
-          </tr>
-          <tr>
-            <td>Lorem</td>
-            <td>Ipsum</td>
-            <td>Dolor</td>
-            <td>Met</td>
+            <td>
+              <select class="form-control">
+                <option>Pacem</option>
+                <option>Para</option>
+                <option>Bellum</option>
+              </select>
+            </td>
+            <td class="row-action">
+              <button type="button" class="btn btn-success tooltip-top" title="Activate">
+                <span class="fa fa-check"></span>
+              </button>
+            </td>
+            <td class="row-action">
+              <div class="btn-group pull-right">
+                <button type="button" class="btn btn-default dropdown-toggle tooltip-top" data-toggle="dropdown" title="Item options">
+                  <span class="fa fa-gear"></span>
+                </button>
+                <ul class="dropdown-menu" role="menu">
+                  <li>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-desc"></span>
+                      Newest
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-asc"></span>
+                      Oldest
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-desc"></span>
+                      Most posts
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-asc"></span>
+                      Least posts
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </td>
+            <td class="row-action">
+              <button type="button" class="btn btn-danger tooltip-top" title="Activate">
+                <span class="fa fa-times"></span>
+              </button>
+            </td>
           </tr>
         </table>
       </div><!-- /.table-panel -->

uiframework/misago/admin/css/misago/tables.less

@@ -22,7 +22,7 @@
   box-shadow: 0px 0px 0px 3px @table-panel-shadow;
   margin-bottom: @line-height-computed;
 
-  table {
+  table.table {
     margin: 0px;
 
     tr {
@@ -42,6 +42,34 @@
           border-radius: 0px (@border-radius-base - 1) 0px 0px;
         }
       }
+
+      td {
+        vertical-align: middle;
+
+        img {
+          border-radius: @border-radius-base;
+          max-width: 30px;
+          max-height: 30px;
+        }
+
+        &.row-action {
+          width: 1%;
+
+          &>.btn, .dropdown-toggle {
+            padding: 0px;
+            width: 30px;
+            height: 30px;
+
+            font-size: @font-size-large;
+            text-align: center;
+
+            &>span {
+              position: relative;
+              bottom: 1px;
+            }
+          }
+        }
+      }
     }
   }
 }

uiframework/misago/admin/css/style.css

@@ -6073,10 +6073,6 @@ body {
     color: #ffffff;
   }
 }
-/* Sorting menu */
-.sorting-menu > li {
-  padding: 6px 12px;
-}
 .pager {
   margin: 0px;
   padding-bottom: 2px;
@@ -6126,22 +6122,41 @@ body {
   box-shadow: 0px 0px 0px 3px #ededed;
   margin-bottom: 20px;
 }
-.table-panel table {
+.table-panel table.table {
   margin: 0px;
 }
-.table-panel table tr th {
+.table-panel table.table tr th {
   background: #ededed;
   border: none;
   padding: 5px 8px;
   color: #555555;
   font-size: 12px;
 }
-.table-panel table tr th:first-child {
+.table-panel table.table tr th:first-child {
   border-radius: 3px 0px 0px 0px;
 }
-.table-panel table tr th:last-child {
+.table-panel table.table tr th:last-child {
   border-radius: 0px 3px 0px 0px;
 }
+.table-panel table.table tr td {
+  vertical-align: middle;
+}
+.table-panel table.table tr td.row-action {
+  width: 1%;
+}
+.table-panel table.table tr td.row-action > .btn,
+.table-panel table.table tr td.row-action .dropdown-toggle {
+  padding: 0px;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  text-align: center;
+}
+.table-panel table.table tr td.row-action > .btn > span,
+.table-panel table.table tr td.row-action .dropdown-toggle > span {
+  position: relative;
+  bottom: 1px;
+}
 .navbars-container {
   border-bottom: 3px solid #c7c7c7;
 }