From 59f36b4cce4888903820a6d434463b397cfa386c Mon Sep 17 00:00:00 2001 From: Tim Zallmann Date: Thu, 28 Sep 2017 15:43:52 +0200 Subject: [PATCH 1/4] Updated All Navigation Icons to Sprite_Icons --- app/assets/images/icons.json | 2 +- app/assets/images/icons.svg | 2 +- app/assets/images/sprite.symbol.html | 3297 ----------------- .../stylesheets/framework/gitlab-theme.scss | 6 +- app/assets/stylesheets/framework/header.scss | 9 +- app/assets/stylesheets/framework/images.scss | 2 + app/assets/stylesheets/framework/new-nav.scss | 13 +- .../stylesheets/framework/new-sidebar.scss | 40 +- app/assets/stylesheets/pages/search.scss | 10 +- app/helpers/breadcrumbs_helper.rb | 2 +- app/helpers/icons_helper.rb | 4 +- app/views/layouts/_search.html.haml | 4 +- app/views/layouts/header/_default.html.haml | 14 +- app/views/layouts/header/_new_dropdown.haml | 4 +- app/views/layouts/nav/_dashboard.html.haml | 6 +- .../breadcrumbs/_collapsed_dropdown.html.haml | 2 +- .../layouts/nav/sidebar/_admin.html.haml | 3 +- .../layouts/nav/sidebar/_profile.html.haml | 2 +- .../shared/_sidebar_toggle_button.html.haml | 6 +- yarn.lock | 2 +- 20 files changed, 65 insertions(+), 3365 deletions(-) delete mode 100644 app/assets/images/sprite.symbol.html diff --git a/app/assets/images/icons.json b/app/assets/images/icons.json index e5da75faf38..6b8f85e37fd 100644 --- a/app/assets/images/icons.json +++ b/app/assets/images/icons.json @@ -1 +1 @@ -{"iconCount":134,"icons":["abuse","account","admin","angle-double-left","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-right","assignee","bold","book","branch","calendar","cancel","chevron-down","chevron-left","chevron-right","chevron-up","clock","code","comment-dots","comment-next","comment","comments","commit","credit-card","disk","doc_code","doc_image","doc_text","download","duplicate","earth","eye-slash","eye","file-additions","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","merge-request-close-m","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","star-o","star","stop","talic","task-done","template","thump-down","thump-up","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]} \ No newline at end of file +{"iconCount":135,"spriteSize":58718,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-right","assignee","bold","book","branch","calendar","cancel","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","comment-dots","comment-next","comment","comments","commit","credit-card","disk","doc_code","doc_image","doc_text","download","duplicate","earth","eye-slash","eye","file-additions","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","star-o","star","stop","talic","task-done","template","thump-down","thump-up","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]} \ No newline at end of file diff --git a/app/assets/images/icons.svg b/app/assets/images/icons.svg index 5c3a9962bd3..30cb2109ec2 100644 --- a/app/assets/images/icons.svg +++ b/app/assets/images/icons.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/assets/images/sprite.symbol.html b/app/assets/images/sprite.symbol.html deleted file mode 100644 index d928d3f73b8..00000000000 --- a/app/assets/images/sprite.symbol.html +++ /dev/null @@ -1,3297 +0,0 @@ - - - - - - - - SVG <symbol> sprite preview | svg-sprite - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

SVG <symbol> sprite preview

-

This preview features two methods of using the generated sprite in conjunction with inline SVG. Please have a look at the HTML source for further details and be aware of the following constraints:

- -
-
- - - -

A) Inline SVG with embedded sprite

- - - - -
-
- - - -

B) Inline SVG with external sprite (IE 9-11 with polyfill only)

- - - - -
- - - diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss index 0d1c04026b8..6b69e8018be 100644 --- a/app/assets/stylesheets/framework/gitlab-theme.scss +++ b/app/assets/stylesheets/framework/gitlab-theme.scss @@ -126,7 +126,7 @@ .search-input-wrap { .search-icon, .clear-icon { - color: rgba($color-200, .8); + fill: rgba($color-200, .8); } } @@ -141,7 +141,7 @@ .search-input-wrap { .search-icon { - color: rgba($color-200, .8); + fill: rgba($color-200, .8); } } } @@ -252,7 +252,7 @@ body { .search-input-wrap { .search-icon { - color: $theme-gray-200; + fill: $theme-gray-200; } .search-input { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index ab3c34df1fb..d932ea8794f 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -109,8 +109,7 @@ header { .user-counter { svg { - height: 16px; - width: 23px; + margin-right: 3px; } } @@ -133,16 +132,16 @@ header { } &.navbar-gitlab-new { - .fa-times { + .close-icon { display: none; } .menu-expanded { - .fa-ellipsis-v { + .more-icon { display: none; } - .fa-times { + .close-icon { display: block; } } diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss index 60d61c68d63..59bfc5a8d77 100644 --- a/app/assets/stylesheets/framework/images.scss +++ b/app/assets/stylesheets/framework/images.scss @@ -27,7 +27,9 @@ } svg { + &.s8 { @include svg-size(8px); } &.s16 { @include svg-size(16px); } + &.s18 { @include svg-size(18px); } &.s24 { @include svg-size(24px); } &.s32 { @include svg-size(32px); } &.s48 { @include svg-size(48px); } diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss index 81022d4af2a..5e4619638e2 100644 --- a/app/assets/stylesheets/framework/new-nav.scss +++ b/app/assets/stylesheets/framework/new-nav.scss @@ -122,15 +122,22 @@ header.navbar-gitlab-new { min-width: 45px; padding: 4px $gl-padding; margin-right: -7px; - font-size: 14px; text-align: center; color: currentColor; + svg { + fill: currentColor; + } + &:hover, &:focus, &.active { color: currentColor; background-color: transparent; + + svg { + fill: currentColor; + } } } @@ -279,10 +286,6 @@ header.navbar-gitlab-new { } } -.admin-icon i { - font-size: 18px; -} - .caret-down { height: 11px; width: 11px; diff --git a/app/assets/stylesheets/framework/new-sidebar.scss b/app/assets/stylesheets/framework/new-sidebar.scss index 3f1cb97aebc..ccbacc463b3 100644 --- a/app/assets/stylesheets/framework/new-sidebar.scss +++ b/app/assets/stylesheets/framework/new-sidebar.scss @@ -56,8 +56,8 @@ $new-sidebar-collapsed-width: 50px; color: $hover-color; .settings-avatar { - i { - color: $hover-color; + svg { + fill: $hover-color; } } } @@ -76,12 +76,9 @@ $new-sidebar-collapsed-width: 50px; .settings-avatar { background-color: $white-light; - i { - font-size: 20px; - width: 100%; - color: $gl-text-color-secondary; - text-align: center; - align-self: center; + svg { + fill: $gl-text-color-secondary; + margin: auto; } } @@ -177,16 +174,16 @@ $new-sidebar-collapsed-width: 50px; .nav-icon-container { display: flex; margin-right: 8px; - - svg { - height: 16px; - width: 16px; - } } .fly-out-top-item { display: none; } + + svg { + height: 16px; + width: 16px; + } } .nav-sidebar-inner-scroll { @@ -354,18 +351,22 @@ $new-sidebar-collapsed-width: 50px; display: flex; align-items: center; - i { - font-size: 20px; + svg { + fill: $gl-text-color-secondary; margin-right: 8px; } - .fa-angle-double-right { + .icon-angle-double-right { display: none; } &:hover { background-color: $border-color; color: $gl-text-color; + + svg { + fill: $gl-text-color; + } } } @@ -407,15 +408,16 @@ $new-sidebar-collapsed-width: 50px; .toggle-sidebar-button { width: $new-sidebar-collapsed-width - 2px; - padding: 16px 18px; + padding: 16px 16px; .collapse-text, - .fa-angle-double-left { + .icon-angle-double-left { display: none; } - .fa-angle-double-right { + .icon-angle-double-right { display: block; + margin: 0; } } } diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 2fa710a05b5..89ebe3f9917 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -81,17 +81,10 @@ input[type="checkbox"]:hover { .clear-icon { position: absolute; right: 5px; - top: 0; - - &::before { - font-family: FontAwesome; - font-weight: $gl-font-weight-normal; - font-style: normal; - } + top: 4px; } .search-icon { - @extend .fa-search; transition: color $default-transition-duration; -webkit-user-select: none; -moz-user-select: none; @@ -99,7 +92,6 @@ input[type="checkbox"]:hover { } .clear-icon { - @extend .fa-times; display: none; } diff --git a/app/helpers/breadcrumbs_helper.rb b/app/helpers/breadcrumbs_helper.rb index ee1b7ed083e..adf39380b8e 100644 --- a/app/helpers/breadcrumbs_helper.rb +++ b/app/helpers/breadcrumbs_helper.rb @@ -25,7 +25,7 @@ module BreadcrumbsHelper def breadcrumb_list_item(link) content_tag "li" do - link + icon("angle-right", class: "breadcrumbs-list-angle") + link + sprite_icon("angle-right", size: 8, css_class: "breadcrumbs-list-angle") end end diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb index 08e6443bd0f..ec779c1c447 100644 --- a/app/helpers/icons_helper.rb +++ b/app/helpers/icons_helper.rb @@ -24,9 +24,9 @@ module IconsHelper end def sprite_icon(icon_name, size: nil, css_class: nil) - css_classes = size ? "s#{size}" : nil + css_classes = size ? "s#{size}" : "" css_classes << " #{css_class}" unless css_class.blank? - content_tag(:svg, content_tag(:use, "", { "xlink:href" => "#{image_path('icons.svg')}##{icon_name}" } ), class: css_classes) + content_tag(:svg, content_tag(:use, "", { "xlink:href" => "#{image_path('icons.svg')}##{icon_name}" } ), class: css_classes.empty? ? nil : css_classes) end def audit_icon(names, options = {}) diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml index cd7a47da4a1..29387d6627e 100644 --- a/app/views/layouts/_search.html.haml +++ b/app/views/layouts/_search.html.haml @@ -21,8 +21,8 @@ %a Loading... = dropdown_loading - %i.search-icon - %i.clear-icon.js-clear-input + = sprite_icon('search', size: 16, css_class: 'search-icon') + = sprite_icon('close', size: 16, css_class: 'clear-icon js-clear-input') = hidden_field_tag :group_id, @group.try(:id), class: 'js-search-group-options', data: group_data_attrs diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index d8fc371497d..9f77e72751a 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -22,29 +22,29 @@ = render 'layouts/search' unless current_controller?(:search) %li.visible-sm-inline-block.visible-xs-inline-block = link_to search_path, title: 'Search', aria: { label: "Search" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do - = icon('search') + = sprite_icon('search', size: 16) - if current_user %li.user-counter = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues', aria: { label: "Issues" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do - = custom_icon('issues') + = sprite_icon('issues', size: 16) - issues_count = assigned_issuables_count(:issues) %span.badge.issues-count{ class: ('hidden' if issues_count.zero?) } = number_with_delimiter(issues_count) %li.user-counter = link_to assigned_mrs_dashboard_path, title: 'Merge requests', class: 'dashboard-shortcuts-merge_requests', aria: { label: "Merge requests" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do - = custom_icon('mr_bold') + = sprite_icon('git-merge', size: 16) - merge_requests_count = assigned_issuables_count(:merge_requests) %span.badge.merge-requests-count{ class: ('hidden' if merge_requests_count.zero?) } = number_with_delimiter(merge_requests_count) %li.user-counter = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, class: 'shortcuts-todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do - = custom_icon('todo_done') + = sprite_icon('todo-done', size: 16) %span.badge.todos-count{ class: ('hidden' if todos_pending_count.zero?) } = todos_count_format(todos_pending_count) %li.header-user.dropdown = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do = image_tag avatar_icon(current_user, 23), width: 23, height: 23, class: "header-user-avatar" - = custom_icon('caret_down') + = sprite_icon('angle-down', css_class: 'caret-down') .dropdown-menu-nav.dropdown-menu-align-right %ul %li.current-user @@ -73,7 +73,7 @@ %button.navbar-toggle.hidden-sm.hidden-md.hidden-lg{ type: 'button' } %span.sr-only Toggle navigation - = icon('ellipsis-v', class: 'js-navbar-toggle-right') - = icon('times', class: 'js-navbar-toggle-left') + = sprite_icon('more', size: 16, css_class: 'more-icon js-navbar-toggle-right') + = sprite_icon('close', size: 16, css_class: 'close-icon js-navbar-toggle-left') = render 'shared/outdated_browser' diff --git a/app/views/layouts/header/_new_dropdown.haml b/app/views/layouts/header/_new_dropdown.haml index 63d1c077ecd..088f2785092 100644 --- a/app/views/layouts/header/_new_dropdown.haml +++ b/app/views/layouts/header/_new_dropdown.haml @@ -1,7 +1,7 @@ %li.header-new.dropdown = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip", title: "New...", ref: 'tooltip', aria: { label: "New..." }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body' } do - = custom_icon('plus_square') - = custom_icon('caret_down') + = sprite_icon('plus-square', size: 16) + = sprite_icon('angle-down', css_class: 'caret-down') .dropdown-menu-nav.dropdown-menu-align-right %ul - if @group&.persisted? diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml index c254ee02dd8..e0d8d9cb402 100644 --- a/app/views/layouts/nav/_dashboard.html.haml +++ b/app/views/layouts/nav/_dashboard.html.haml @@ -2,7 +2,7 @@ = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown header-projects" }) do %a{ href: "#", data: { toggle: "dropdown" } } Projects - = custom_icon('caret_down') + = sprite_icon('angle-down', css_class: 'caret-down') .dropdown-menu.projects-dropdown-menu = render "layouts/nav/projects_dropdown/show" @@ -25,7 +25,7 @@ %li.header-more.dropdown.hidden-lg %a{ href: "#", data: { toggle: "dropdown" } } More - = custom_icon('caret_down') + = sprite_icon('angle-down', css_class: 'caret-down') .dropdown-menu %ul = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "visible-xs" }) do @@ -54,7 +54,7 @@ - if current_user.admin? = nav_link(controller: 'admin/dashboard') do = link_to admin_root_path, class: 'admin-icon', title: 'Admin area', aria: { label: "Admin area" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do - = icon('wrench fw') + = sprite_icon('admin', size: 18) - if Gitlab::Sherlock.enabled? %li = link_to sherlock_transactions_path, class: 'admin-icon', title: 'Sherlock Transactions', diff --git a/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml b/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml index 28022eebb19..610ff9001f7 100644 --- a/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml +++ b/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml @@ -4,7 +4,7 @@ %li.dropdown %button.text-expander.has-tooltip.js-breadcrumbs-collapsed-expander{ type: "button", data: { toggle: "dropdown", container: "body" }, "aria-label": button_tooltip, title: button_tooltip } = icon("ellipsis-h") - = icon("angle-right", class: "breadcrumbs-list-angle") + = sprite_icon("angle-right", css_class: "breadcrumbs-list-angle") .dropdown-menu %ul - @breadcrumb_dropdown_links[dropdown_location].each_with_index do |link, index| diff --git a/app/views/layouts/nav/sidebar/_admin.html.haml b/app/views/layouts/nav/sidebar/_admin.html.haml index 9eef006b6a8..0d0543860dc 100644 --- a/app/views/layouts/nav/sidebar/_admin.html.haml +++ b/app/views/layouts/nav/sidebar/_admin.html.haml @@ -3,7 +3,7 @@ .context-header = link_to admin_root_path, title: 'Admin Overview' do .avatar-container.s40.settings-avatar - = icon('wrench') + =sprite_icon('admin', size: 24) .sidebar-context-title Admin Area %ul.sidebar-top-level-items = nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts conversational_development_index), html_options: {class: 'home'}) do @@ -12,7 +12,6 @@ = sprite_icon('overview') %span.nav-item-name Overview - %ul.sidebar-sub-level-items = nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts conversational_development_index), html_options: { class: "fly-out-top-item" } ) do = link_to admin_root_path do diff --git a/app/views/layouts/nav/sidebar/_profile.html.haml b/app/views/layouts/nav/sidebar/_profile.html.haml index a015c94c60e..458b5010d36 100644 --- a/app/views/layouts/nav/sidebar/_profile.html.haml +++ b/app/views/layouts/nav/sidebar/_profile.html.haml @@ -3,7 +3,7 @@ .context-header = link_to profile_path, title: 'Profile Settings' do .avatar-container.s40.settings-avatar - = icon('user') + = sprite_icon('user', size: 24) .sidebar-context-title User Settings %ul.sidebar-top-level-items = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do diff --git a/app/views/shared/_sidebar_toggle_button.html.haml b/app/views/shared/_sidebar_toggle_button.html.haml index eb5ddb0dde4..2530db986e0 100644 --- a/app/views/shared/_sidebar_toggle_button.html.haml +++ b/app/views/shared/_sidebar_toggle_button.html.haml @@ -1,8 +1,8 @@ %a.toggle-sidebar-button.js-toggle-sidebar{ role: "button", type: "button", title: "Toggle sidebar" } - = icon('angle-double-left') - = icon('angle-double-right') + = sprite_icon('angle-double-left', css_class: 'icon-angle-double-left') + = sprite_icon('angle-double-right', css_class: 'icon-angle-double-right') %span.collapse-text Collapse sidebar = button_tag class: 'close-nav-button', type: 'button' do - = icon ('times') + = sprite_icon('close', size: 16) %span.collapse-text Close sidebar diff --git a/yarn.lock b/yarn.lock index c95dd6433ca..ae86887630b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2714,7 +2714,7 @@ getpass@^0.1.1: "gitlab-svgs@https://gitlab.com/gitlab-org/gitlab-svgs.git": version "1.0.2" - resolved "https://gitlab.com/gitlab-org/gitlab-svgs.git#7f36f3951dd08904761780da48efcd639f34c3af" + resolved "https://gitlab.com/gitlab-org/gitlab-svgs.git#e7621d7b028607ae9c69f8b496cd49b42fe607e4" glob-base@^0.3.0: version "0.3.0" From 8326f585da3863e1176dd6086cf4993376b72d6c Mon Sep 17 00:00:00 2001 From: Tim Zallmann Date: Thu, 28 Sep 2017 19:31:33 +0200 Subject: [PATCH 2/4] Fixed CSS Lint Error --- app/assets/stylesheets/framework/new-sidebar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/framework/new-sidebar.scss b/app/assets/stylesheets/framework/new-sidebar.scss index ccbacc463b3..8332cec2962 100644 --- a/app/assets/stylesheets/framework/new-sidebar.scss +++ b/app/assets/stylesheets/framework/new-sidebar.scss @@ -408,7 +408,7 @@ $new-sidebar-collapsed-width: 50px; .toggle-sidebar-button { width: $new-sidebar-collapsed-width - 2px; - padding: 16px 16px; + padding: 16px; .collapse-text, .icon-angle-double-left { From e97e130e47daaa24507fd402584e2e0e0690bfe9 Mon Sep 17 00:00:00 2001 From: Tim Zallmann Date: Thu, 28 Sep 2017 23:30:45 +0200 Subject: [PATCH 3/4] Fixed another linting error this time HAML --- app/views/layouts/nav/sidebar/_admin.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/layouts/nav/sidebar/_admin.html.haml b/app/views/layouts/nav/sidebar/_admin.html.haml index 0d0543860dc..0ec07605631 100644 --- a/app/views/layouts/nav/sidebar/_admin.html.haml +++ b/app/views/layouts/nav/sidebar/_admin.html.haml @@ -3,7 +3,7 @@ .context-header = link_to admin_root_path, title: 'Admin Overview' do .avatar-container.s40.settings-avatar - =sprite_icon('admin', size: 24) + = sprite_icon('admin', size: 24) .sidebar-context-title Admin Area %ul.sidebar-top-level-items = nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts conversational_development_index), html_options: {class: 'home'}) do From 5c17fe58fba1cb7f8c5edb336b4de0feaa6254ea Mon Sep 17 00:00:00 2001 From: Tim Zallmann Date: Fri, 29 Sep 2017 12:41:00 +0200 Subject: [PATCH 4/4] FIxed the clearing icon + jumping of fluid nav bar --- app/assets/javascripts/search_autocomplete.js | 1 + app/assets/stylesheets/framework/new-nav.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js index 38c9a71dd20..f15452ec683 100644 --- a/app/assets/javascripts/search_autocomplete.js +++ b/app/assets/javascripts/search_autocomplete.js @@ -287,6 +287,7 @@ import { isInGroupsPage, isInProjectPage, getGroupSlug, getProjectSlug } from '. onClearInputClick(e) { e.preventDefault(); + this.wrap.toggleClass('has-value', !!e.target.value); return this.searchInput.val('').focus(); } diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss index 5e4619638e2..3abf3e4ac7d 100644 --- a/app/assets/stylesheets/framework/new-nav.scss +++ b/app/assets/stylesheets/framework/new-nav.scss @@ -120,7 +120,7 @@ header.navbar-gitlab-new { .container-fluid { .navbar-toggle { min-width: 45px; - padding: 4px $gl-padding; + padding: 0 $gl-padding; margin-right: -7px; text-align: center; color: currentColor;