Improve alignment of labels in .well-list items

Tom de Bruijn
1 parent b7225bea
Showing 9 changed files with 42 additions and 27 deletions Show diff stats
app/assets/stylesheets/generic/lists.scss
app/views/admin/groups/show.html.haml
app/views/admin/hooks/index.html.haml
app/views/admin/projects/index.html.haml
app/views/admin/projects/show.html.haml
app/views/admin/users/index.html.haml
app/views/admin/users/show.html.haml
app/views/groups/edit.html.haml
app/views/users_groups/_users_group.html.haml
@@ -52,6 +52,12 @@
     .author { color: #999; }
+    .list-item-name {
+      float: left;
+      position: relative;
+      top: 3px;
+    }
+
     p {
       padding-top: 1px;
       margin: 0;
@@ -70,8 +70,9 @@
         - @group.users_groups.order('group_access DESC').each do |member|
           - user = member.user
           %li{class: dom_class(user)}
-            %strong
-              = link_to user.name, admin_user_path(user)
+            .list-item-name
+              %strong
+                = link_to user.name, admin_user_path(user)
             %span.pull-right.light
               = member.human_access
               = link_to group_users_group_path(@group, member), data: { confirm: remove_user_from_group_message(@group, user) }, method: :delete, remote: true, class: "btn-tiny btn btn-remove", title: 'Remove user from group' do
@@ -28,8 +28,10 @@
     %ul.well-list
       - @hooks.each do |hook|
         %li
+          .list-item-name
+            = link_to admin_hook_path(hook) do
+              %strong= hook.url
+
           .pull-right
             = link_to 'Test Hook', admin_hook_test_path(hook), class: "btn btn-small"
             = link_to 'Remove', admin_hook_path(hook), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-remove btn-small"
-          = link_to admin_hook_path(hook) do
-            %strong= hook.url
@@ -44,9 +44,10 @@
       %ul.well-list
         - @projects.each do |project|
           %li
-            %span{ class: visibility_level_color(project.visibility_level) }
-              = visibility_level_icon(project.visibility_level)
-            = link_to project.name_with_namespace, [:admin, project]
+            .list-item-name
+              %span{ class: visibility_level_color(project.visibility_level) }
+                = visibility_level_icon(project.visibility_level)
+              = link_to project.name_with_namespace, [:admin, project]
             .pull-right
               %span.label.label-gray
                 = repository_size(project)
@@ -116,8 +116,9 @@
         - @project.users_projects.each do |users_project|
           - user = users_project.user
           %li.users_project
-            %strong
-              = link_to user.name, admin_user_path(user)
+            .list-item-name
+              %strong
+                = link_to user.name, admin_user_path(user)
             .pull-right
               - if users_project.owner?
                 %span.light Owner
@@ -36,15 +36,16 @@
       %ul.well-list
         - @users.each do |user|
           %li
-            - if user.blocked?
-              %i.icon-lock.cred
-            - else
-              %i.icon-user.cgreen
-            = link_to user.name, [:admin, user]
-            - if user.admin?
-              %strong.cred (Admin)
-            - if user == current_user
-              %span.cred It's you!
+            .list-item-name
+              - if user.blocked?
+                %i.icon-lock.cred
+              - else
+                %i.icon-user.cgreen
+              = link_to user.name, [:admin, user]
+              - if user.admin?
+                %strong.cred (Admin)
+              - if user == current_user
+                %span.cred It's you!
             .pull-right
               %span.light
                 %i.icon-envelope
@@ -124,7 +124,8 @@
           - @user.users_groups.each do |user_group|
             - group = user_group.group
             %li.users_group
-              %strong= link_to group.name, admin_group_path(group)
+              %span{class: ("list-item-name" unless user_group.owner?)}
+                %strong= link_to group.name, admin_group_path(group)
               .pull-right
                 %span.light= user_group.human_access
                 - unless user_group.owner?
@@ -73,8 +73,9 @@
           %ul.well-list
             - @group.projects.each do |project|
               %li
-                = visibility_level_icon(project.visibility_level)
-                = link_to project.name_with_namespace, project
+                .list-item-name
+                  = visibility_level_icon(project.visibility_level)
+                  = link_to project.name_with_namespace, project
                 .pull-right
                   = link_to 'Members', project_team_index_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
                   = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
@@ -2,11 +2,12 @@
 - return unless user
 - show_roles = true if show_roles.nil?
 %li{class: "#{dom_class(member)} js-toggle-container", id: dom_id(member)}
-  = image_tag avatar_icon(user.email, 16), class: "avatar s16"
-  %strong= user.name
-  %span.cgray= user.username
-  - if user == current_user
-    %span.label.label-success It's you
+  %span{class: ("list-item-name" if show_controls)}
+    = image_tag avatar_icon(user.email, 16), class: "avatar s16"
+    %strong= user.name
+    %span.cgray= user.username
+    - if user == current_user
+      %span.label.label-success It's you
   - if show_roles
     %span.pull-right
@@ -22,7 +23,7 @@
           - else
             = link_to group_users_group_path(@group, member), data: { confirm: remove_user_from_group_message(@group, user) }, method: :delete, remote: true, class: "btn-tiny btn btn-remove", title: 'Remove user from group' do
               %i.icon-minus.icon-white
-  
+
     .edit-member.hide.js-toggle-content
       = form_for [@group, member], remote: true do |f|
         .alert.prepend-top-20
	@@ -52,6 +52,12 @@		@@ -52,6 +52,12 @@
52		52
53	.author { color: #999; }	53	.author { color: #999; }
54		54
		55	+ .list-item-name {
		56	+ float: left;
		57	+ position: relative;
		58	+ top: 3px;
		59	+ }
		60	+
55	p {	61	p {
56	padding-top: 1px;	62	padding-top: 1px;
57	margin: 0;	63	margin: 0;