Put all sidebar icons in fixed width container

2 files changed, 26 insertions, 10 deletions

diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index b7ec3f70bfb..4668e7e911b 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -83,6 +83,12 @@
       margin-top: 10px;
     }
 
+    .icon-container {
+      width: 34px;
+      display: inline-block;
+      text-align: center;
+    }
+
     a {
       width: $sidebar_width;
       padding: 7px 15px 7px 23px;
diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index 18cae5bf87f..52e41b1a857 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -1,54 +1,64 @@
 %ul.nav.nav-sidebar
   = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: {class: "#{project_tab_class} home"}) do
     = link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do
-      = navbar_icon('project')
+      .icon-container
+        = navbar_icon('project')
       %span
         Projects
   = nav_link(controller: :todos) do
     = link_to dashboard_todos_path, title: 'Todos' do
-      = icon('bell fw')
+      .icon-container
+        = icon('bell fw')
       %span
         Todos
         %span.count= number_with_delimiter(todos_pending_count)
   = nav_link(path: 'dashboard#activity') do
     = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do
-      = navbar_icon('activity')
+      .icon-container
+        = navbar_icon('activity')
       %span
         Activity
   = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
     = link_to dashboard_groups_path, title: 'Groups' do
-      = navbar_icon('group')
+      .icon-container
+        = navbar_icon('group')
       %span
         Groups
   = nav_link(controller: 'dashboard/milestones') do
     = link_to dashboard_milestones_path, title: 'Milestones' do
-      = navbar_icon('milestones')
+      .icon-container
+        = navbar_icon('milestones')
       %span
         Milestones
   = nav_link(path: 'dashboard#issues') do
     = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do
-      = navbar_icon('issues')
+      .icon-container
+        = navbar_icon('issues')
       %span
         Issues
         %span.count= number_with_delimiter(current_user.assigned_issues.opened.count)
   = nav_link(path: 'dashboard#merge_requests') do
     = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'dashboard-shortcuts-merge_requests' do
-      = navbar_icon('mr')
+      .icon-container
+        = navbar_icon('mr')
       %span
         Merge Requests
         %span.count= number_with_delimiter(current_user.assigned_merge_requests.opened.count)
   = nav_link(controller: :snippets) do
     = link_to dashboard_snippets_path, title: 'Snippets' do
-      = icon('clipboard fw')
+      .icon-container
+        = icon('clipboard fw')
       %span
         Snippets
   = nav_link(controller: :help) do
     = link_to help_path, title: 'Help' do
-      = icon('question-circle fw')
+      .icon-container
+        = icon('question-circle fw')
       %span
         Help
   = nav_link(html_options: {class: profile_tab_class}) do
     = link_to profile_path, title: 'Profile Settings', data: {placement: 'bottom'} do
-      = icon('user fw')
+      .icon-container
+        = icon('user fw')
       %span
         Profile Settings