For consistency with the rest of the admin UI, display User list as table, not list. Apply cursor: move to jQuery UI draggable and sortable. Clean up admin table styles a bit.

2 files changed, 51 insertions, 49 deletions

diff --git a/modules/user/views/admin_users.html.php b/modules/user/views/admin_users.html.php
index fc20ef51..b21ef16d 100644
--- a/modules/user/views/admin_users.html.php
+++ b/modules/user/views/admin_users.html.php
@@ -52,27 +52,34 @@
   </h2>
 
   <div class="gBlockContent">
-    <ul id="gUserAdminList">
-      <li class="gHeaderRow">
-        <strong><?= t("Username") ?></strong> <?= t("(Full name)") ?>
-        <span class="understate"><?= t("last login") ?></span>
-      </li>
+    <table id="gUserAdminList">
+      <tr>
+        <th></th>
+        <th><?= t("Username") ?></th>
+        <th><?= t("Full name") ?></th>
+        <th class="understate"><?= t("last login") ?></th>
+        <th>Actions</th>
+      </tr>
 
       <? foreach ($users as $i => $user): ?>
-      <li class="<?= text::alternate("gOddRow", "gEvenRow") ?> user">
-        <div id="user-<?= $user->id ?>" class="core-info" style="display: inline">
+      <tr class="<?= text::alternate("gOddRow", "gEvenRow") ?> user">
+        <td id="user-<?= $user->id ?>" class="core-info">
           <img src="<?= $user->avatar_url(20, $theme->url("images/avatar.jpg", true)) ?>"
                title="<?= t("Drag user onto group below to add as a new member") ?>"
                alt="<?= $user->name ?>"
                width="20"
                height="20" />
-          <strong><?= $user->name ?></strong>
-        </div>
-        (<?= $user->full_name ?>)
-        <span class="understate">
+        </td>
+        <td>
+          <?= $user->name ?>
+        </td>
+        <td>
+          <?= $user->full_name ?>
+        </td>
+        <td class="understate">
           <?= ($user->last_login == 0) ? "" : date("m j, y", $user->last_login) ?>
-        </span>
-        <span class="gActions">
+        </td>
+        <td class="gActions">
           <a href="<?= url::site("admin/users/edit_user_form/$user->id") ?>" class="gPanelLink"><?= t("edit") ?></a>
           <? if (user::active()->id != $user->id && !$user->guest): ?>
           <a href="<?= url::site("admin/users/delete_user_form/$user->id") ?>" class="gDialogLink"><?= t("delete") ?></a>
@@ -81,10 +88,10 @@
             <?= t("delete") ?>
           </span>
           <? endif ?>
-        </span>
-      </li>
+        </td>
+      </tr>
       <? endforeach ?>
-    </ul>
+    </table>
     <p>
       <a href="<?= url::site("admin/users/add_user_form") ?>"
          class="gDialogLink gButtonLink"
diff --git a/themes/admin_default/css/screen.css b/themes/admin_default/css/screen.css
index 11b275da..670f9afc 100644
--- a/themes/admin_default/css/screen.css
+++ b/themes/admin_default/css/screen.css
@@ -3,15 +3,28 @@
  *
  * Extends themes/default/css/screen.css
  *
- * 1) Reusable content blocks
- * 2) Page layout containers
- * 3) Content blocks in specific layout containers
- * 4) Browser hacks
- * 5) jQuery and jQuery UI
+ * 1)  Basic HTML elements
+ * 2) Reusable content blocks
+ * 3) Page layout containers
+ * 4) Content blocks in specific layout containers
+ * 5) Browser hacks
+ * 6) jQuery and jQuery UI
  */
 
 /** *******************************************************************
- * 1) Reusable content blocks
+ * 1) Basic HTML elements
+ **********************************************************************/
+
+th,
+td {
+  border: none;
+  border-bottom: 1px solid #ccc;
+  padding-right: .5em;
+}
+
+
+/** *******************************************************************
+ * 2) Reusable content blocks
  **********************************************************************/
 
 .gBlock {
@@ -45,7 +58,6 @@
 
 .gUnavailable {
   border-color: #999;
-  cursor: default;
   opacity: 0.4;
 }
 
@@ -54,12 +66,6 @@
   opacity: 1;
 }
 
-.gHeaderRow {
-  border-bottom: 1px solid #ccc;
-  padding-bottom: .5em;
-  padding-left: 30px !important;
-}
-
 .gOddRow {
   background-color: #eee;
 }
@@ -69,7 +75,7 @@
 }
 
 /** *******************************************************************
- * 2) Page layout containers
+ * 3) Page layout containers
  **********************************************************************/
 
 .gView {
@@ -89,7 +95,7 @@
 }
 
 /** *******************************************************************
- * 3) Content blocks in specific layout containers
+ * 4) Content blocks in specific layout containers
  *********************************************************************/
 
 #gHeader #gLogo {
@@ -122,7 +128,6 @@
 
 #gSidebar .gBlock h2 {
   background: none;
-  cursor: move;
 }
 
 #gPhotoStream .gBlockContent {
@@ -168,21 +173,6 @@
   margin-bottom: 1em;
 }
 
-#gUserAdminList li {
-  display: block;
-  padding: .4em .4em .3em .4em !important;
-}
-
-#gUserAdminList li img {
-  cursor: move;
-  margin-right: .8em;
-}
-
-.gActions {
-  position: absolute;
-  left: 450px;
-}
-
 .gActions a,
 .gActions span {
   margin-right: 3em;
@@ -199,7 +189,7 @@ li.gGroup {
 }
 
 /** *******************************************************************
- * 4) Browser hacks
+ * 5) Browser hacks
  *********************************************************************/
 
 #gHeader:after,
@@ -214,7 +204,7 @@ li.gGroup {
 }
 
 /** *******************************************************************
- * 5) jQuery and jQuery UI
+ * 6) jQuery and jQuery UI
  *********************************************************************/
 
 #gPanel {
@@ -229,3 +219,8 @@ li.gGroup {
 #gPanel fieldset {
   border: none;
 }
+
+.ui-draggable,
+.ui-sortable {
+  cursor: move;
+}