Sorting dropdown WIP

uiframework/admin/layout.html

@@ -157,9 +157,17 @@
           </li>
         </ul>
 
-        <a href="#" class="btn btn-default pull-left">
-          Sorting: <strong>Username</strong>
-        </a>
+        <div class="btn-group pull-left">
+          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            Sorting: <span class="fa fa-sort-alpha-asc"></span> <strong>Username</strong>
+          </button>
+          <ul class="dropdown-menu" role="menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div>
 
         <a href="#" class="btn btn-success pull-left">
           <span class="glyphicon glyphicon-ok"></span> Filters</a>

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

@@ -33,7 +33,6 @@
 
       color: @dropdown-link-color;
       text-align: left;
-      white-space: nowrap;
 
       &:hover {
         background-color: @dropdown-link-hover-bg;
@@ -97,8 +96,6 @@
 /* Big displays */
 @media (min-width: @screen-sm-min) {
   .dropdown-menu {
-    min-width: 300px;
-
     .dropdown-title {
       background-color: #ecf0f1;
       border-radius: @border-radius-base @border-radius-base 0px 0px;
@@ -117,14 +114,18 @@
         margin-left: @line-height-computed / 2;
       }
 
+      a {
+        white-space: nowrap;
+      }
+
       button {
         background: none;
         border: none;
         padding: 3px 20px;
-        width: 100%;
 
         color: @dropdown-link-color;
         text-align: left;
+        white-space: nowrap;
 
         &:hover {
           background-color: @dropdown-link-hover-bg;

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

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

uiframework/misago/admin/css/style.css

@@ -5998,7 +5998,6 @@ body {
   width: 100%;
   color: #5e5e5e;
   text-align: left;
-  white-space: nowrap;
 }
 .dropdown-menu li button:hover {
   background-color: #666666;
@@ -6039,9 +6038,6 @@ body {
 }
 /* Big displays */
 @media (min-width: 768px) {
-  .dropdown-menu {
-    min-width: 300px;
-  }
   .dropdown-menu .dropdown-title {
     background-color: #ecf0f1;
     border-radius: 4px 4px 0px 0px;
@@ -6056,13 +6052,16 @@ body {
   .dropdown-menu > li .badge {
     margin-left: 10px;
   }
+  .dropdown-menu > li a {
+    white-space: nowrap;
+  }
   .dropdown-menu > li button {
     background: none;
     border: none;
     padding: 3px 20px;
-    width: 100%;
     color: #5e5e5e;
     text-align: left;
+    white-space: nowrap;
   }
   .dropdown-menu > li button:hover {
     background-color: #666666;
@@ -6108,8 +6107,8 @@ body {
 }
 .table-actions {
   margin-bottom: 20px;
-  padding: 2px 0px;
-  overflow: auto;
+  height: 36px;
+  overflow: visible;
 }
 .table-actions > .pull-left {
   margin-right: 10px;