user admin facelift

* added drag & drop help message for empty groups
* fixed overflow issue with more than ~10 members in one group
* CSS improvements

3 files changed, 56 insertions, 20 deletions

diff --git a/modules/user/views/admin_users.html.php b/modules/user/views/admin_users.html.php
index 859f3c8e..a99c9506 100644
--- a/modules/user/views/admin_users.html.php
+++ b/modules/user/views/admin_users.html.php
@@ -118,7 +118,7 @@
   <div class="gBlockContent">
     <ul>
       <? foreach ($groups as $i => $group): ?>
-      <li id="group-<?= $group->id ?>" class="gGroup">
+      <li id="group-<?= $group->id ?>" class="gGroup <?= ($group->special ? "gDefaultGroup" : "") ?>" />
         <? $v = new View("admin_users_group.html"); $v->group = $group; ?>
         <?= $v ?>
       </li>
diff --git a/modules/user/views/admin_users_group.html.php b/modules/user/views/admin_users_group.html.php
index 820b3031..dfc8232f 100644
--- a/modules/user/views/admin_users_group.html.php
+++ b/modules/user/views/admin_users_group.html.php
@@ -1,28 +1,34 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<strong><?= p::clean($group->name) ?></strong>
-<? if (!$group->special): ?>
-<a href="<?= url::site("admin/users/delete_group_form/$group->id") ?>"
-  title="<?= t("Delete %name", array("name" => p::clean($group->name))) ?>"
-  class="gDialogLink gButtonLink ui-state-default ui-corner-all">
-  <span class="ui-icon ui-icon-trash"><?= t("delete") ?></span></a>
-<? else: ?>
-<a title="<?= t("This group cannot be deleted") ?>"
-   class="gDialogLink gButtonLink ui-state-disabled ui-corner-all ui-icon-left">
-  <span class="ui-icon ui-icon-trash"><?= t("delete") ?></span></a>
-<? endif ?>
+<h4>
+  <?= p::clean($group->name) ?>
+  <? if (!$group->special): ?>
+  <a href="<?= url::site("admin/users/delete_group_form/$group->id") ?>"
+    title="<?= t("Delete the %name group", array("name" => p::clean($group->name))) ?>"
+    class="gDialogLink gButtonLink ui-state-default ui-corner-all">
+    <span class="ui-icon ui-icon-trash"><?= t("delete") ?></span></a>
+  <? else: ?>
+  <a title="<?= t("This default group cannot be deleted") ?>"
+     class="gDialogLink gButtonLink ui-state-disabled ui-corner-all ui-icon-left">
+    <span class="ui-icon ui-icon-trash"><?= t("delete") ?></span></a>
+  <? endif ?>
+</h4>
+
+<? if ($group->users->count() > 0): ?>
 <ul>
   <? foreach ($group->users as $i => $user): ?>
   <li class="gUser">
     <?= p::clean($user->name) ?>
     <? if (!$group->special): ?>
     <a href="javascript:remove_user(<?= $user->id ?>, <?= $group->id ?>)"
-       class="gButtonLink ui-state-default ui-corner-all ui-icon-left">
-      <span class="ui-icon ui-icon-closethick">
-        <?= t("Remove %user from %group",
-              array("user" => p::clean($user->name), "group" => p::clean($group->name))) ?>
-      </span>
+       class="gButtonLink ui-state-default ui-corner-all ui-icon-left"
+       title="<?= t("Remove %user from %group group",
+              array("user" => p::clean($user->name), "group" => p::clean($group->name))) ?>">
+      <span class="ui-icon ui-icon-closethick"><?= t("remove") ?></span>
     </a>
     <? endif ?>
   </li>
   <? endforeach ?>
 </ul>
+<? else: ?>
+<div><p>Drag &amp; drop users from the User Admin above into this group box to add group members.</p></div>
+<? endif ?>
diff --git a/themes/admin_default/css/screen.css b/themes/admin_default/css/screen.css
index 2d5f086c..38fcf089 100644
--- a/themes/admin_default/css/screen.css
+++ b/themes/admin_default/css/screen.css
@@ -192,6 +192,9 @@
 #gUserAdminList {
   margin-bottom: 1em;
 }
+#gUserAdminList td {
+  vertical-align: bottom;
+}
 
 #gUserAdminList .gDraggable:hover {
   border: 1px dashed black;
@@ -211,11 +214,38 @@ li.gGroup {
   float: left;
   display: block;
   width: 200px;
-  height: 200px;
   border: 1px solid gray;
-  padding: .5em;
-  margin-right: 0 1em 1em 0;
+  padding: 0;
+  margin: 0 1em 1em 0;
+}
+li.gGroup h4 {
+  background-color: #EEEEEE;
+  border-bottom: 1px dashed #CCCCCC;
+  padding: .5em 0 .5em .5em;
+}
+li.gGroup .gButtonLink {
+  padding: 0;
+}
+li.gGroup ul, li.gGroup div {
+  height: 180px;
+  margin: 1px;
   overflow: auto;
+  padding-top: .2em;
+}
+li.gGroup div p {
+  color: gray;
+  text-align: center;
+  padding: 2em .5em 0 .5em
+}
+li.gGroup .gUser {
+  padding: .2em 0 0 .5em;
+}
+li.gGroup .gUser .gButtonLink {
+  vertical-align: middle;
+}
+
+li.gDefaultGroup h4, li.gDefaultGroup .gUser {
+  color: gray;
 }
 
 #gAdminAdvancedSettings tr.setting:hover {