Lists actions

uiframework/admin/layout.html

@@ -129,13 +129,47 @@
         </div>
 
       </div>
-    </div>
+    </div><!-- /.page-header -->
 
     <div class="container">
 
       <div class="table-actions">
-        [page] [filters] [sorting] &lt;- - - nothing - - -&gt; [with selected]
-      </div>
+
+        <ul class="pager pull-left">
+          <li class="page">
+            Page 7 of 46
+          </li>
+          <li>
+            <a href="#">First</a>
+          </li>
+          <li>
+            <a href="#">
+              <span class="glyphicon glyphicon-chevron-left"></span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span class="glyphicon glyphicon-chevron-right"></span>
+            </a>
+          </li>
+          <li>
+            <a href="#">Last</a>
+          </li>
+        </ul>
+
+        <a href="#" class="btn btn-default pull-left">
+          Sorting: <strong>Username</strong>
+        </a>
+
+        <a href="#" class="btn btn-success pull-left">
+          <span class="glyphicon glyphicon-ok"></span> Filters</a>
+
+        <a href="#" class="btn btn-primary pull-right">
+          <span class="fa fa-gears"></span>
+          Selected: 123
+        </a>
+
+      </div><!-- /.table-actions -->
 
       <div class="table-panel">
         <table class="table">
@@ -188,11 +222,32 @@
             <td>Met</td>
           </tr>
         </table>
-      </div>
+      </div><!-- /.table-panel -->
 
       <div class="table-actions">
-        [page]
-      </div>
+        <ul class="pager pull-left">
+          <li class="page">
+            Page 7 of 46
+          </li>
+          <li>
+            <a href="#">First</a>
+          </li>
+          <li>
+            <a href="#">
+              <span class="glyphicon glyphicon-chevron-left"></span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span class="glyphicon glyphicon-chevron-right"></span>
+            </a>
+          </li>
+          <li>
+            <a href="#">Last</a>
+          </li>
+        </ul>
+
+      </div><!-- /.table-actions -->
 
     </div><!-- /.container -->
 

uiframework/misago/admin/css/misago/header.less

@@ -39,6 +39,16 @@
   .page-actions {
     float: right;
     margin: -4px 0px;
+
+    .dropdown-menu {
+      left: auto;
+      right: 0px;
+
+      &:after {
+        left: auto;
+        right: 12px;
+      }
+    }
   }
 }
 

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

@@ -7,6 +7,7 @@ html, body {
 @import "alerts.less";
 @import "buttons.less";
 @import "dropdowns.less";
+@import "pager.less";
 @import "tables.less";
 
 // Layout elements

uiframework/misago/admin/css/misago/pager.less

@@ -0,0 +1,44 @@
+//
+// Pager
+// --------------------------------------------------
+
+.pager {
+  margin: 0px;
+  padding-bottom: 2px;
+
+  &>li {
+    &.page {
+      padding-right: @line-height-computed / 3;
+    }
+
+    a {
+      &, &:link, &:visited {
+        background-color: @btn-default-bg;
+        border-color: @btn-default-bg;
+        border-radius: @border-radius-base;
+        box-shadow: 0px 2px 0px 0px @btn-default-border;
+        padding: 6px 9px;
+
+        color: @btn-default-color;
+      }
+
+      &:hover {
+        background-color: darken(@btn-default-bg, 10%);
+        border-color: darken(@btn-default-bg, 10%);
+        box-shadow: 0px 2px 0px 0px darken(@btn-default-border, 10%);
+
+        color: @btn-default-color;
+      }
+
+      &:active, &:focus {
+        background-color: darken(@btn-default-bg, 15%);
+        border-color: darken(@btn-default-bg, 15%);
+        box-shadow: none;
+        position: relative;
+        top: 2px;
+
+        color: darken(@btn-default-color, 10%);
+      }
+    }
+  }
+}

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

@@ -4,6 +4,16 @@
 
 .table-actions {
   margin-bottom: @line-height-computed;
+  padding: 2px 0px;
+  overflow: auto;
+
+  &>.pull-left {
+    margin-right: @line-height-computed / 2;
+  }
+
+  &>.pull-right {
+    margin-left: @line-height-computed / 2;
+  }
 }
 
 .table-panel {

uiframework/misago/admin/css/style.css

@@ -6074,8 +6074,48 @@ body {
     color: #ffffff;
   }
 }
+.pager {
+  margin: 0px;
+  padding-bottom: 2px;
+}
+.pager > li.page {
+  padding-right: 6.66666667px;
+}
+.pager > li a,
+.pager > li a:link,
+.pager > li a:visited {
+  background-color: #ededed;
+  border-color: #ededed;
+  border-radius: 4px;
+  box-shadow: 0px 2px 0px 0px #d4d4d4;
+  padding: 6px 9px;
+  color: #777777;
+}
+.pager > li a:hover {
+  background-color: #d4d4d4;
+  border-color: #d4d4d4;
+  box-shadow: 0px 2px 0px 0px #bababa;
+  color: #777777;
+}
+.pager > li a:active,
+.pager > li a:focus {
+  background-color: #c7c7c7;
+  border-color: #c7c7c7;
+  box-shadow: none;
+  position: relative;
+  top: 2px;
+  color: #5e5e5e;
+}
 .table-actions {
   margin-bottom: 20px;
+  padding: 2px 0px;
+  overflow: auto;
+}
+.table-actions > .pull-left {
+  margin-right: 10px;
+}
+.table-actions > .pull-right {
+  margin-left: 10px;
 }
 .table-panel {
   border: 1px solid #d4d4d4;
@@ -6209,6 +6249,14 @@ body {
   float: right;
   margin: -4px 0px;
 }
+.page-header .page-actions .dropdown-menu {
+  left: auto;
+  right: 0px;
+}
+.page-header .page-actions .dropdown-menu:after {
+  left: auto;
+  right: 12px;
+}
 .admin-footer {
   margin-top: 30px;
   margin-bottom: 30px;