Merge pull request #127 from SURFnet/align-columns

Align columns

Author: nicwortel

app/Resources/views/popups/group_users.html.twig

@@ -1,6 +1,14 @@
 <div class="jscroll-inner">
 {% for user in users %}
     <li class="user user-{{ user.id }}" data-user-id="{{ user.id }}">
+
+        <div class="user-expand">
+            {% if group.semiFormal and user.extraAttributes|length > 0 %}
+                <a class="btn-circular toggle-extra-user-info" href="#"><span
+                        class="fa fa-angle-double-down"></span></a>
+            {% endif %}
+        </div>
+
         {% if group.semiFormal %}
             <div class="user-avatar">
                 {% if user.avatarUrl is not empty %}
@@ -10,10 +18,6 @@
         {% endif %}
 
         <div class="user-name">
-            {% if group.semiFormal and user.extraAttributes|length > 0 %}
-                <a class="btn-circular toggle-extra-user-info" href="#"><span
-                        class="fa fa-angle-double-down"></span></a>
-            {% endif %}
             <p>{{ user|display_name }}</p>
             <span>{{ user.emailAddress }}&nbsp;</span>
 

web/css/grouphub.css

@@ -1413,7 +1413,7 @@ footer a {
     font-size: 12px;
     margin-top: 4px; }
 /* line 248, _edit_group.scss */
-.edit_group_container ul.member_collection li a {
+.edit_group_container ul.member_collection li .actions a {
     float: right;
 }
 
@@ -1550,6 +1550,15 @@ li.spinner a {
     margin-bottom: 4px;
 }
 
+.user-expand, .user-avatar {
+    min-height: 10px;
+}
+
+.user-expand {
+    float: left;
+    width: 30px;
+}
+
 .user-avatar {
     float: left;
     width: 45px;
@@ -1561,7 +1570,11 @@ li.spinner a {
 
 .actions {
     float: right;
-    width: 55%;
+    width: 310px;
+}
+
+.actions select {
+    width: 200px;
 }
 
 .header ul:first-child a {

web/js/scripts.js

@@ -495,7 +495,7 @@ var grouphub = (function ($) {
         });
 
         $editGroup.on('click', '.toggle-extra-user-info', function () {
-            var $extraGroupInfo = $(this).parent().find('.extra-attributes');
+            var $extraGroupInfo = $(this).closest('li').find('.extra-attributes');
             var $span = $(this).find('span');
 
             $extraGroupInfo.toggleClass('hidden');