dashboard: minor fixes to group detail

circle/dashboard/static/dashboard/dashboard.css

@@ -554,3 +554,26 @@ footer a, footer a:hover, footer a:visited {
 #notifications-button {
   margin: 0;
 }
+
+#group-detail-user-table td:first-child, #group-detail-user-table th:last-child,
+#group-detail-user-table td:last-child,
+#group-detail-perm-table td:first-child, #group-detail-perm-table th:last-child,
+#group-detail-perm-table td:last-child {
+  text-align: center;
+  width: 100px;
+}
+
+#group-detail-perm-header {
+  margin-top: 25px;
+}
+
+textarea[name="list-new-namelist"] {
+  max-width: 500px;
+  min-height: 80px;
+  margin-bottom: 10px;
+}
+
+/* 2px border bottom for all bootstrap tables */
+.table thead>tr>th {
+  border-bottom: 1px;
+}

circle/dashboard/templates/dashboard/group-detail.html

@@ -38,60 +38,86 @@
     <div class="col-md-12" id="group-detail-pane">
       <div class="panel panel-default" id="group-detail-panel">
         <div class="tab-content panel-body" id="group-form-body">
-
           <h3>{% trans "User list"|capfirst %}</h3>
 <form action="" method="post">{% csrf_token %}
-<table class="table table-striped table-with-form-fields">
+<table class="table table-striped table-with-form-fields table-bordered" id="group-detail-user-table">
     <tbody>
-     <thead><tr><th></th><th>{% trans "Who" %}</th><th></th><th></th></tr></thead>
+      <thead><tr><th></th><th>{% trans "Who" %}</th><th>{% trans "Remove" %}</th></tr></thead>
         {% for i in users %}
-	<tr><td><i class="icon-user"></i></td><td>{{i.username}}</td>
-		<td><a data-group_pk="{{ group.pk }}" data-member_pk="{{i.pk}}" href="{% url "dashboard.views.remove-user" member_pk=i.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+	  <tr>
+            <td><i class="icon-user"></i></td><td>{{i.username}}</td>
+	    <td>
+              <a data-group_pk="{{ group.pk }}" data-member_pk="{{i.pk}}" href="{% url "dashboard.views.remove-user" member_pk=i.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a>
+            </td>
+          </tr>
         {% endfor %}
-        <tr><td><i class="icon-plus"></i></td>
-            <td><input type="text" class="form-control" name="list-new-name"
-                placeholder="{% trans "Name of user" %}"></td>
+        <tr>
+          <td><i class="icon-plus"></i></td>
+          <td colspan="2">
+            <input type="text" class="form-control" name="list-new-name"placeholder="{% trans "Name of user" %}">
+          </td>
         </tr>
   </tbody>
   </table>
-    	  <textarea name="list-new-namelist" class="form-control" placeholder="{% trans "List of usernames (one per line)." %}"></textarea>
+  <textarea name="list-new-namelist" class="form-control" 
+    placeholder="{% trans "List of usernames (one per line)." %}"></textarea>
   <div class="form-actions">
     <button type="submit" class="btn btn-success">{% trans "Save" %}</button>
   </div>
   </form>
 
 
-<h3>{% trans "Permissions"|capfirst %}</h3>
+<h3 id="group-detail-perm-header">{% trans "Permissions"|capfirst %}</h3>
   <form action="{{acl.url}}" method="post">{% csrf_token %}
-  <table class="table table-striped table-with-form-fields">
-    <thead><tr><th></th><th>{% trans "Who" %}</th><th>{% trans "What" %}</th><th></th></tr></thead>
+  <table class="table table-striped table-with-form-fields table-bordered" id="group-detail-perm-table">
+    <thead>
+      <tr>
+        <th></th><th>{% trans "Who" %}</th><th>{% trans "What" %}</th><th>{% trans "Remove" %}</th>
+      </tr>
+    </thead>
     <tbody>
     {% for i in acl.users %}
-        <tr><td><i class="icon-user"></i></td><td>{{i.user}}</td>
-            <td><select class="form-control" name="perm-u-{{i.user.id}}">
+    <tr>
+      <td><i class="icon-user"></i></td><td>{{i.user}}</td>
+      <td>
+        <select class="form-control" name="perm-u-{{i.user.id}}">
         {% for id, name in acl.levels %}
           <option{%if id = i.level%} selected="selected"{%endif%} value="{{id}}">{{name}}</option>
         {% endfor %}
-            </select></td>
-	    <td class="user-remove"><a data-group_pk="{{ group.pk }}" data-member_pk="{{i.user.pk }}" href="{% url "dashboard.views.remove-acluser" member_pk=i.user.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+        </select>
+      </td>
+      <td class="user-remove"><a data-group_pk="{{ group.pk }}" data-member_pk="{{i.user.pk }}" href="{% url "dashboard.views.remove-acluser" member_pk=i.user.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td>
+    </tr>
     {% endfor %}
+    
     {% for i in acl.groups %}
-        <tr><td><i class="icon-user"></i></td><td>{{ i.group }}</td>
-            <td><select class="form-control" name="perm-g-{{ i.group.pk }}">
+      <tr>
+        <td><i class="icon-group"></i></td><td>{{ i.group }}</td>
+        <td>
+          <select class="form-control" name="perm-g-{{ i.group.pk }}">
           {% for id, name in acl.levels %}
             <option{%if id = i.level%} selected="selected"{%endif%} value="{{id}}">{{name}}</option>
           {% endfor %}
-            </select></td>
-	    <td class="user-remove"><a data-group_pk="{{ i.pk }}"data-member_pk="{{i.group.pk }}" href="{% url "dashboard.views.remove-aclgroup" member_pk=i.group.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+          </select>
+        </td>
+        <td class="user-remove"><a data-group_pk="{{ i.pk }}"data-member_pk="{{i.group.pk }}" href="{% url "dashboard.views.remove-aclgroup" member_pk=i.group.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a>
+        </td>
+      </tr>
       {% endfor %}
-        <tr><td><i class="icon-plus"></i></td>
-            <td><input type="text" class="form-control" name="perm-new-name"
-                placeholder="{% trans "Name of group or user" %}"></td>
-            <td><select class="form-control" name="perm-new">
+      <tr>
+        <td><i class="icon-plus"></i></td>
+        <td>
+          <input type="text" class="form-control" name="perm-new-name"
+          placeholder="{% trans "Name of group or user" %}">
+        </td>
+        <td>
+          <select class="form-control" name="perm-new">
             {% for id, name in acl.levels %}
               <option value="{{id}}">{{name}}</option>
             {% endfor %}
-            </select></td><td></td>
+          </select>
+        </td>
+        <td></td>
       </tr>
   </tbody>
   </table>