Make flash notifications sticky

This commit also unifies layout structure
and remove no_container flag

app/assets/javascripts/flash.js

 import _ from 'underscore';
+import { spriteIcon } from './lib/utils/common_utils';
 const hideFlash = (flashEl, fadeTransition = true) => {
   if (fadeTransition) {
@@ -35,16 +36,11 @@ const createAction = config => `
   </a>
 `;
-const createFlashEl = (message, type, isFixedLayout = false) => `
-  <div
-    class="flash-${type}"
-  >
-    <div
-      class="flash-text ${
-        isFixedLayout ? 'container-fluid container-limited limit-container-width' : ''
-      }"
-    >
+const createFlashEl = (message, type) => `
+  <div class="flash-content flash-${type} rounded">
+    <div class="flash-text">
       ${_.escape(message)}
+      ${spriteIcon('close', 'close-icon')}
     </div>
   </div>
 `;
@@ -76,15 +72,10 @@ const createFlash = function createFlash(
   addBodyClass = false,
 ) {
   const flashContainer = parent.querySelector('.flash-container');
-  const navigation = parent.querySelector('.content');
   if (!flashContainer) return null;
-  const isFixedLayout = navigation
-    ? navigation.parentNode.classList.contains('container-limited')
-    : true;
-
-  flashContainer.innerHTML = createFlashEl(message, type, isFixedLayout);
+  flashContainer.innerHTML = createFlashEl(message, type);
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
   removeFlashClickListener(flashEl, fadeTransition);

app/assets/javascripts/pages/profiles/two_factor_auths/index.js

@@ -5,9 +5,10 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 document.addEventListener('DOMContentLoaded', () => {
   const twoFactorNode = document.querySelector('.js-two-factor-auth');
   const skippable = parseBoolean(twoFactorNode.dataset.twoFactorSkippable);
+
   if (skippable) {
     const button = `<a class="btn btn-sm btn-warning float-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
-    const flashAlert = document.querySelector('.flash-alert .container-fluid');
+    const flashAlert = document.querySelector('.flash-alert');
     if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
   }

app/assets/stylesheets/framework/flash.scss

+$notification-box-shadow-color: rgba(0, 0, 0, 0.25);
+
 .flash-container {
   cursor: pointer;
   margin: 0;
@@ -6,12 +8,32 @@
   position: relative;
   z-index: 1;
+  &.sticky {
+    position: sticky;
+    position: -webkit-sticky;
+    top: $flash-container-top;
+    z-index: 200;
+
+    .flash-content {
+      box-shadow: 0 2px 4px 0 $notification-box-shadow-color;
+    }
+  }
+
+  .close-icon {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    right: $gl-padding;
+    top: $gl-padding;
+  }
+
   .flash-notice,
   .flash-alert,
   .flash-success,
   .flash-warning {
     border-radius: $border-radius-default;
     color: $white-light;
+    padding-right: $gl-padding * 2;
     .container-fluid,
     .container-fluid.container-limited {
@@ -97,3 +119,28 @@
     }
   }
 }
+
+.gl-browser-ie .flash-container {
+  position: fixed;
+  max-width: $limited-layout-width;
+  left: 50%;
+
+  .flash-alert {
+    position: relative;
+    left: -50%;
+  }
+}
+
+.with-system-header .flash-container {
+  top: $flash-container-top + $system-header-height;
+}
+
+.with-performance-bar {
+  .flash-container {
+    top: $flash-container-top + $performance-bar-height;
+  }
+
+  &.with-system-header .flash-container {
+    top: $flash-container-top + $performance-bar-height + $system-header-height;
+  }
+}

app/assets/stylesheets/framework/layout.scss

@@ -29,6 +29,15 @@ body {
   }
 }
+.container-fluid {
+  &.limit-container-width {
+    .flash-container.sticky {
+      max-width: $limited-layout-width;
+      margin: 0 auto;
+    }
+  }
+}
+
 .content-wrapper {
   margin-top: $header-height;
   padding-bottom: 100px;

app/assets/stylesheets/framework/variables.scss

@@ -377,6 +377,7 @@ $performance-bar-height: 35px;
 $system-header-height: 16px;
 $system-footer-height: $system-header-height;
 $flash-height: 52px;
+$flash-container-top: 48px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
 $home-panel-title-row-height: 64px;

app/views/admin/background_jobs/show.html.haml

-- @no_container = true
 - page_title "Background Jobs"
-%div{ class: container_class }
-  %h3.page-title Background Jobs
-  %p.light GitLab uses #{link_to "sidekiq", "http://sidekiq.org/"} library for async job processing
-  %hr
-  .card
-    %iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: 0" }
+%h3.page-title Background Jobs
+%p.light GitLab uses #{link_to "sidekiq", "http://sidekiq.org/"} library for async job processing
+%hr
+.card
+  %iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: 0" }

app/views/admin/dashboard/index.html.haml

-- @no_container = true
 - breadcrumb_title "Dashboard"
-%div{ class: container_class }
-  = render_if_exists 'admin/licenses/breakdown', license: @license
-  .admin-dashboard.prepend-top-default
-    .row
-      .col-sm-4
-        .info-well.dark-well
-          .well-segment.well-centered
-            = link_to admin_projects_path do
-              %h3.text-center
-                Projects:
-                = approximate_count_with_delimiters(@counts, Project)
-            %hr
-            = link_to('New project', new_project_path, class: "btn btn-success")
-      .col-sm-4
-        .info-well.dark-well
-          .well-segment.well-centered
-            = link_to admin_users_path do
-              %h3.text-center
-                Users:
-                = approximate_count_with_delimiters(@counts, User)
-            %hr
-            .btn-group.d-flex{ role: 'group' }
-              = link_to 'New user', new_admin_user_path, class: "btn btn-success"
-              = render_if_exists 'admin/dashboard/users_statistics'
-      .col-sm-4
-        .info-well.dark-well
-          .well-segment.well-centered
-            = link_to admin_groups_path do
-              %h3.text-center
-                Groups:
-                = approximate_count_with_delimiters(@counts, Group)
-            %hr
-            = link_to 'New group', new_admin_group_path, class: "btn btn-success"
-    .row
-      .col-md-4
-        .info-well
-          .well-segment.admin-well.admin-well-statistics
-            %h4 Statistics
-            %p
-              Forks
-              %span.light.float-right
-                = approximate_fork_count_with_delimiters(@counts)
-            %p
-              Issues
-              %span.light.float-right
-                = approximate_count_with_delimiters(@counts, Issue)
-            %p
-              Merge Requests
-              %span.light.float-right
-                = approximate_count_with_delimiters(@counts, MergeRequest)
-            %p
-              Notes
-              %span.light.float-right
-                = approximate_count_with_delimiters(@counts, Note)
-            %p
-              Snippets
-              %span.light.float-right
-                = approximate_count_with_delimiters(@counts, Snippet)
-            %p
-              SSH Keys
-              %span.light.float-right
-                = approximate_count_with_delimiters(@counts, Key)
-            %p
-              Milestones
-              %span.light.float-right
-                = approximate_count_with_delimiters(@counts, Milestone)
-            %p
-              Active Users
-              %span.light.float-right
-                = number_with_delimiter(User.active.count)
-      .col-md-4
-        .info-well
-          .well-segment.admin-well.admin-well-features
-            %h4 Features
-            = feature_entry(_('Sign up'), href: admin_application_settings_path(anchor: 'js-signup-settings'))
-            = feature_entry(_('LDAP'), enabled: Gitlab.config.ldap.enabled)
-            = feature_entry(_('Gravatar'), href: admin_application_settings_path(anchor: 'js-account-settings'), enabled: gravatar_enabled?)
-            = feature_entry(_('OmniAuth'), href: admin_application_settings_path(anchor: 'js-signin-settings'), enabled: Gitlab::Auth.omniauth_enabled?)
-            = feature_entry(_('Reply by email'), enabled: Gitlab::IncomingEmail.enabled?)
-            = render_if_exists 'admin/dashboard/elastic_and_geo'
-            = feature_entry(_('Container Registry'), href: ci_cd_admin_application_settings_path(anchor: 'js-registry-settings'), enabled: Gitlab.config.registry.enabled)
-            = feature_entry(_('Gitlab Pages'), href: help_instance_configuration_url, enabled: Gitlab.config.pages.enabled)
-            = feature_entry(_('Shared Runners'), href: admin_runners_path, enabled: Gitlab.config.gitlab_ci.shared_runners_enabled)
-      .col-md-4
-        .info-well
-          .well-segment.admin-well
-            %h4
-              Components
-              - if Gitlab::CurrentSettings.version_check_enabled
-                .float-right
-                  = version_status_badge
-            %p
-              %a{ href: admin_application_settings_path }
-                GitLab
+= render_if_exists 'admin/licenses/breakdown', license: @license
+.admin-dashboard.prepend-top-default
+  .row
+    .col-sm-4
+      .info-well.dark-well
+        .well-segment.well-centered
+          = link_to admin_projects_path do
+            %h3.text-center
+              Projects:
+              = approximate_count_with_delimiters(@counts, Project)
+          %hr
+          = link_to('New project', new_project_path, class: "btn btn-success")
+    .col-sm-4
+      .info-well.dark-well
+        .well-segment.well-centered
+          = link_to admin_users_path do
+            %h3.text-center
+              Users:
+              = approximate_count_with_delimiters(@counts, User)
+          %hr
+          .btn-group.d-flex{ role: 'group' }
+            = link_to 'New user', new_admin_user_path, class: "btn btn-success"
+            = render_if_exists 'admin/dashboard/users_statistics'
+    .col-sm-4
+      .info-well.dark-well
+        .well-segment.well-centered
+          = link_to admin_groups_path do
+            %h3.text-center
+              Groups:
+              = approximate_count_with_delimiters(@counts, Group)
+          %hr
+          = link_to 'New group', new_admin_group_path, class: "btn btn-success"
+  .row
+    .col-md-4
+      .info-well
+        .well-segment.admin-well.admin-well-statistics
+          %h4 Statistics
+          %p
+            Forks
+            %span.light.float-right
+              = approximate_fork_count_with_delimiters(@counts)
+          %p
+            Issues
+            %span.light.float-right
+              = approximate_count_with_delimiters(@counts, Issue)
+          %p
+            Merge Requests
+            %span.light.float-right
+              = approximate_count_with_delimiters(@counts, MergeRequest)
+          %p
+            Notes
+            %span.light.float-right
+              = approximate_count_with_delimiters(@counts, Note)
+          %p
+            Snippets
+            %span.light.float-right
+              = approximate_count_with_delimiters(@counts, Snippet)
+          %p
+            SSH Keys
+            %span.light.float-right
+              = approximate_count_with_delimiters(@counts, Key)
+          %p
+            Milestones
+            %span.light.float-right
+              = approximate_count_with_delimiters(@counts, Milestone)
+          %p
+            Active Users
+            %span.light.float-right
+              = number_with_delimiter(User.active.count)
+    .col-md-4
+      .info-well
+        .well-segment.admin-well.admin-well-features
+          %h4 Features
+          = feature_entry(_('Sign up'), href: admin_application_settings_path(anchor: 'js-signup-settings'))
+          = feature_entry(_('LDAP'), enabled: Gitlab.config.ldap.enabled)
+          = feature_entry(_('Gravatar'), href: admin_application_settings_path(anchor: 'js-account-settings'), enabled: gravatar_enabled?)
+          = feature_entry(_('OmniAuth'), href: admin_application_settings_path(anchor: 'js-signin-settings'), enabled: Gitlab::Auth.omniauth_enabled?)
+          = feature_entry(_('Reply by email'), enabled: Gitlab::IncomingEmail.enabled?)
+          = render_if_exists 'admin/dashboard/elastic_and_geo'
+          = feature_entry(_('Container Registry'), href: ci_cd_admin_application_settings_path(anchor: 'js-registry-settings'), enabled: Gitlab.config.registry.enabled)
+          = feature_entry(_('Gitlab Pages'), href: help_instance_configuration_url, enabled: Gitlab.config.pages.enabled)
+          = feature_entry(_('Shared Runners'), href: admin_runners_path, enabled: Gitlab.config.gitlab_ci.shared_runners_enabled)
+    .col-md-4
+      .info-well
+        .well-segment.admin-well
+          %h4
+            Components
+            - if Gitlab::CurrentSettings.version_check_enabled
+              .float-right
+                = version_status_badge
+          %p
+            %a{ href: admin_application_settings_path }
+              GitLab
+            %span.float-right
+              = Gitlab::VERSION
+              = "(#{Gitlab.revision})"
+          %p
+            GitLab Shell
+            %span.float-right
+              = Gitlab::Shell.new.version
+          %p
+            GitLab Workhorse
+            %span.float-right
+              = gitlab_workhorse_version
+          %p
+            GitLab API
+            %span.float-right
+              = API::API::version
+          - if Gitlab.config.pages.enabled
+            %p
+              GitLab Pages
               %span.float-right
-                = Gitlab::VERSION
-                = "(#{Gitlab.revision})"
-            %p
-              GitLab Shell
-              %span.float-right
-                = Gitlab::Shell.new.version
-            %p
-              GitLab Workhorse
-              %span.float-right
-                = gitlab_workhorse_version
-            %p
-              GitLab API
-              %span.float-right
-                = API::API::version
-            - if Gitlab.config.pages.enabled
-              %p
-                GitLab Pages
-                %span.float-right
-                  = Gitlab::Pages::VERSION
-            = render_if_exists 'admin/dashboard/geo'
-            %p
-              Ruby
-              %span.float-right
-                #{RUBY_VERSION}p#{RUBY_PATCHLEVEL}
-            %p
-              Rails
-              %span.float-right
-                #{Rails::VERSION::STRING}
-            %p
-              = Gitlab::Database.human_adapter_name
-              %span.float-right
-                = Gitlab::Database.version
-            %p
-              = link_to "Gitaly Servers", admin_gitaly_servers_path
-    .row
-      .col-md-4
-        .info-well
-          .well-segment.admin-well
-            %h4 Latest projects
-            - @projects.each do |project|
-              %p
-                = link_to project.full_name, admin_project_path(project), class: 'str-truncated-60'
-                %span.light.float-right
-                  #{time_ago_with_tooltip(project.created_at)}
-      .col-md-4
-        .info-well
-          .well-segment.admin-well
-            %h4 Latest users
-            - @users.each do |user|
-              %p
-                = link_to [:admin, user], class: 'str-truncated-60' do
-                  = user.name
-                %span.light.float-right
-                  #{time_ago_with_tooltip(user.created_at)}
-      .col-md-4
-        .info-well
-          .well-segment.admin-well
-            %h4 Latest groups
-            - @groups.each do |group|
-              %p
-                = link_to [:admin, group], class: 'str-truncated-60' do
-                  = group.full_name
-                %span.light.float-right
-                  #{time_ago_with_tooltip(group.created_at)}
+                = Gitlab::Pages::VERSION
+          = render_if_exists 'admin/dashboard/geo'
+          %p
+            Ruby
+            %span.float-right
+              #{RUBY_VERSION}p#{RUBY_PATCHLEVEL}
+          %p
+            Rails
+            %span.float-right
+              #{Rails::VERSION::STRING}
+          %p
+            = Gitlab::Database.human_adapter_name
+            %span.float-right
+              = Gitlab::Database.version
+          %p
+            = link_to "Gitaly Servers", admin_gitaly_servers_path
+  .row
+    .col-md-4
+      .info-well
+        .well-segment.admin-well
+          %h4 Latest projects
+          - @projects.each do |project|
+            %p
+              = link_to project.full_name, admin_project_path(project), class: 'str-truncated-60'
+              %span.light.float-right
+                #{time_ago_with_tooltip(project.created_at)}
+    .col-md-4
+      .info-well
+        .well-segment.admin-well
+          %h4 Latest users
+          - @users.each do |user|
+            %p
+              = link_to [:admin, user], class: 'str-truncated-60' do
+                = user.name
+              %span.light.float-right
+                #{time_ago_with_tooltip(user.created_at)}
+    .col-md-4
+      .info-well
+        .well-segment.admin-well
+          %h4 Latest groups
+          - @groups.each do |group|
+            %p
+              = link_to [:admin, group], class: 'str-truncated-60' do
+                = group.full_name
+              %span.light.float-right
+                #{time_ago_with_tooltip(group.created_at)}

app/views/admin/groups/index.html.haml

-- @no_container = true
 - page_title _("Groups")
-%div{ class: container_class }
-  .top-area
-    .prepend-top-default.append-bottom-default
-      = form_tag admin_groups_path, method: :get, class: 'js-search-form' do |f|
-        = hidden_field_tag :sort, @sort
-        .search-holder
-          - project_name = params[:name].present? ? params[:name] : nil
-          .search-field-holder
-            = search_field_tag :name, project_name, class: "form-control search-text-input js-search-input", autofocus: true, spellcheck: false, placeholder: 'Search by name'
-            = icon("search", class: "search-icon")
-          = render "shared/groups/dropdown", options_hash: admin_groups_sort_options_hash
-          = link_to new_admin_group_path, class: "btn btn-success" do
-            = _('New group')
-  %ul.content-list
-    = render @groups
-  = paginate @groups, theme: "gitlab"
+.top-area
+  .prepend-top-default.append-bottom-default
+    = form_tag admin_groups_path, method: :get, class: 'js-search-form' do |f|
+      = hidden_field_tag :sort, @sort
+      .search-holder
+        - project_name = params[:name].present? ? params[:name] : nil
+        .search-field-holder
+          = search_field_tag :name, project_name, class: "form-control search-text-input js-search-input", autofocus: true, spellcheck: false, placeholder: 'Search by name'
+          = icon("search", class: "search-icon")
+        = render "shared/groups/dropdown", options_hash: admin_groups_sort_options_hash
+        = link_to new_admin_group_path, class: "btn btn-success" do
+          = _('New group')
+%ul.content-list
+  = render @groups
+= paginate @groups, theme: "gitlab"

app/views/admin/health_check/show.html.haml

-- @no_container = true
 - page_title _('Health Check')
 - no_errors = @errors.blank?
-%div{ class: container_class }
-  %h3.page-title= page_title
-  .bs-callout.clearfix
-    .float-left
-      %p
-    #{ s_('HealthCheck|Access token is') }
-    %code#health-check-token= Gitlab::CurrentSettings.health_check_access_token
-    .prepend-top-10
-      = button_to _("Reset health check access token"), reset_health_check_token_admin_application_settings_path,
-        method: :put, class: 'btn btn-default',
-        data: { confirm: _('Are you sure you want to reset the health check token?') }
-  %p.light
-    #{ _('Health information can be retrieved from the following endpoints. More information is available') }
-    = link_to s_('More information is available|here'), help_page_path('user/admin_area/monitoring/health_check')
-    %ul
-      %li
-        %code= readiness_url(token: Gitlab::CurrentSettings.health_check_access_token)
-      %li
-        %code= liveness_url(token: Gitlab::CurrentSettings.health_check_access_token)
-      %li
-        %code= metrics_url(token: Gitlab::CurrentSettings.health_check_access_token)
-      = render_if_exists 'admin/health_check/health_check_url'
-  %hr
-  .card
-    .card-header
-      Current Status:
-      - if no_errors
-        = icon('circle', class: 'cgreen')
-        #{ s_('HealthCheck|Healthy') }
-      - else
-        = icon('warning', class: 'cred')
-        #{ s_('HealthCheck|Unhealthy') }
-    .card-body
-      - if no_errors
-        #{ s_('HealthCheck|No Health Problems Detected') }
-      - else
-        = @errors
+%h3.page-title= page_title
+.bs-callout.clearfix
+  .float-left
+    %p
+  #{ s_('HealthCheck|Access token is') }
+  %code#health-check-token= Gitlab::CurrentSettings.health_check_access_token
+  .prepend-top-10
+    = button_to _("Reset health check access token"), reset_health_check_token_admin_application_settings_path,
+      method: :put, class: 'btn btn-default',
+      data: { confirm: _('Are you sure you want to reset the health check token?') }
+%p.light
+  #{ _('Health information can be retrieved from the following endpoints. More information is available') }
+  = link_to s_('More information is available|here'), help_page_path('user/admin_area/monitoring/health_check')
+  %ul
+    %li
+      %code= readiness_url(token: Gitlab::CurrentSettings.health_check_access_token)
+    %li
+      %code= liveness_url(token: Gitlab::CurrentSettings.health_check_access_token)
+    %li
+      %code= metrics_url(token: Gitlab::CurrentSettings.health_check_access_token)
+    = render_if_exists 'admin/health_check/health_check_url'
+%hr
+.card
+  .card-header
+    Current Status:
+    - if no_errors
+      = icon('circle', class: 'cgreen')
+      #{ s_('HealthCheck|Healthy') }
+    - else
+      = icon('warning', class: 'cred')
+      #{ s_('HealthCheck|Unhealthy') }
+  .card-body
+    - if no_errors
+      #{ s_('HealthCheck|No Health Problems Detected') }
+    - else
+      = @errors

app/views/admin/jobs/index.html.haml

 - breadcrumb_title "Jobs"
-- @no_container = true
-%div{ class: container_class }
-  .top-area.scrolling-tabs-container.inner-page-scroll-tabs
-    - build_path_proc = ->(scope) { admin_jobs_path(scope: scope) }
-    = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
-    - if @all_builds.running_or_pending.any?
-      #stop-jobs-modal
-      .nav-controls
-        %button#stop-jobs-button.btn.btn-danger{ data: { toggle: 'modal',
-          target: '#stop-jobs-modal',
-          url: cancel_all_admin_jobs_path } }
-          = s_('AdminArea|Stop all jobs')
-  .row-content-block.second-block
-    #{(@scope || 'all').capitalize} jobs
-
-  %ul.content-list.builds-content-list.admin-builds-table
-    = render "projects/jobs/table", builds: @builds, admin: true
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  - build_path_proc = ->(scope) { admin_jobs_path(scope: scope) }
+  = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
+  - if @all_builds.running_or_pending.any?
+    #stop-jobs-modal
+    .nav-controls
+      %button#stop-jobs-button.btn.btn-danger{ data: { toggle: 'modal',
+        target: '#stop-jobs-modal',
+        url: cancel_all_admin_jobs_path } }
+        = s_('AdminArea|Stop all jobs')
+.row-content-block.second-block
+  #{(@scope || 'all').capitalize} jobs
+%ul.content-list.builds-content-list.admin-builds-table
+  = render "projects/jobs/table", builds: @builds, admin: true

app/views/admin/logs/show.html.haml

-- @no_container = true
 - page_title "Logs"
-%div{ class: container_class }
-  %ul.nav-links.log-tabs.nav.nav-tabs
-    - @loggers.each do |klass|
-      %li.nav-item
-        = link_to klass.file_name, "##{klass.file_name_noext}", data: { toggle: 'tab' }, class: "#{active_when(klass == @loggers.first)} nav-link"
-  .row-content-block
-    To prevent performance issues admin logs output the last 2000 lines
-  .tab-content
-    - @loggers.each do |klass|
-      .tab-pane{ class: active_when(klass == @loggers.first), id: klass.file_name_noext }
-        .file-holder#README
-          .js-file-title.file-title
-            %i.fa.fa-file
-            = klass.file_name
-            .float-right
-              = link_to '#', class: 'log-bottom' do
-                %i.fa.fa-arrow-down
-                Scroll down
-          .file-content.logs
-            %ol
-              - klass.read_latest.each do |line|
-                %li
-                  %p= line
+%ul.nav-links.log-tabs.nav.nav-tabs
+  - @loggers.each do |klass|
+    %li.nav-item
+      = link_to klass.file_name, "##{klass.file_name_noext}", data: { toggle: 'tab' }, class: "#{active_when(klass == @loggers.first)} nav-link"
+.row-content-block
+  To prevent performance issues admin logs output the last 2000 lines
+.tab-content
+  - @loggers.each do |klass|
+    .tab-pane{ class: active_when(klass == @loggers.first), id: klass.file_name_noext }
+      .file-holder#README
+        .js-file-title.file-title
+          %i.fa.fa-file
+          = klass.file_name
+          .float-right
+            = link_to '#', class: 'log-bottom' do
+              %i.fa.fa-arrow-down
+              Scroll down
+        .file-content.logs
+          %ol
+            - klass.read_latest.each do |line|
+              %li
+                %p= line

app/views/admin/projects/index.html.haml

-- @no_container = true
 - page_title "Projects"
 - params[:visibility_level] ||= []
-%div{ class: container_class }
-  .top-area.scrolling-tabs-container.inner-page-scroll-tabs
-    .prepend-top-default
-      .search-holder
-        = render 'shared/projects/search_form', autofocus: true, icon: true, admin_view: true
-        .dropdown
-          - toggle_text = 'Namespace'
-          - if params[:namespace_id].present?
-            = hidden_field_tag :namespace_id, params[:namespace_id]
-            - namespace = Namespace.find(params[:namespace_id])
-            - toggle_text = "#{namespace.kind}: #{namespace.full_path}"
-          = dropdown_toggle(toggle_text, { toggle: 'dropdown', is_filter: 'true' }, { toggle_class: 'js-namespace-select large' })
-          .dropdown-menu.dropdown-select.dropdown-menu-right
-            = dropdown_title('Namespaces')
-            = dropdown_filter("Search for Namespace")
-            = dropdown_content
-            = dropdown_loading
-        = render 'shared/projects/dropdown'
-        = link_to new_project_path, class: 'btn btn-success' do
-          New Project
-        = button_tag "Search", class: "btn btn-primary btn-search hide"
-    %ul.nav-links.nav.nav-tabs
-      - opts = params[:visibility_level].present? ? {} : { page: admin_projects_path }
-      = nav_link(opts) do
-        = link_to admin_projects_path do
-          All
-      = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PRIVATE.to_s) }) do
-        = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE) do
-          Private
-      = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::INTERNAL.to_s) }) do
-        = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL) do
-          Internal
-      = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PUBLIC.to_s) }) do
-        = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC) do
-          Public
-
-  = render 'projects'
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  .prepend-top-default
+    .search-holder
+      = render 'shared/projects/search_form', autofocus: true, icon: true, admin_view: true
+      .dropdown
+        - toggle_text = 'Namespace'
+        - if params[:namespace_id].present?
+          = hidden_field_tag :namespace_id, params[:namespace_id]
+          - namespace = Namespace.find(params[:namespace_id])
+          - toggle_text = "#{namespace.kind}: #{namespace.full_path}"
+        = dropdown_toggle(toggle_text, { toggle: 'dropdown', is_filter: 'true' }, { toggle_class: 'js-namespace-select large' })
+        .dropdown-menu.dropdown-select.dropdown-menu-right
+          = dropdown_title('Namespaces')
+          = dropdown_filter("Search for Namespace")
+          = dropdown_content
+          = dropdown_loading
+      = render 'shared/projects/dropdown'
+      = link_to new_project_path, class: 'btn btn-success' do
+        New Project
+      = button_tag "Search", class: "btn btn-primary btn-search hide"
+  %ul.nav-links.nav.nav-tabs
+    - opts = params[:visibility_level].present? ? {} : { page: admin_projects_path }
+    = nav_link(opts) do
+      = link_to admin_projects_path do
+        All
+    = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PRIVATE.to_s) }) do
+      = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE) do
+        Private
+    = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::INTERNAL.to_s) }) do
+      = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL) do
+        Internal
+    = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PUBLIC.to_s) }) do
+      = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC) do
+        Public
+= render 'projects'

app/views/admin/requests_profiles/index.html.haml

-- @no_container = true
 - page_title 'Requests Profiles'
-%div{ class: container_class }
-  %h3.page-title
-    = page_title
-  .bs-callout.clearfix
-    Pass the header
-    %code X-Profile-Token: #{@profile_token}
-    to profile the request
-  - if @profiles.present?
-    .prepend-top-default
-      - @profiles.each do |path, profiles|
-        .card.card-small
-          .card-header
-            %code= path
-          %ul.content-list
-            - profiles.each do |profile|
-              %li
-                = link_to profile.time.to_s(:long) + ' ' + profile.profile_mode.capitalize,
-                  admin_requests_profile_path(profile)
-  - else
-    %p
-      No profiles found
+%h3.page-title
+  = page_title
+.bs-callout.clearfix
+  Pass the header
+  %code X-Profile-Token: #{@profile_token}
+  to profile the request
+- if @profiles.present?
+  .prepend-top-default
+    - @profiles.each do |path, profiles|
+      .card.card-small
+        .card-header
+          %code= path
+        %ul.content-list
+          - profiles.each do |profile|
+            %li
+              = link_to profile.time.to_s(:long) + ' ' + profile.profile_mode.capitalize,
+                admin_requests_profile_path(profile)
+- else
+  %p
+    No profiles found

app/views/admin/runners/index.html.haml

 - breadcrumb_title _('Runners')
-- @no_container = true
-%div{ class: container_class }
-  .row
-    .col-sm-6
-      .bs-callout
-        %p
-          = (_"A 'Runner' is a process which runs a job. You can set up as many Runners as you need.")
-          %br
-          = _('Runners can be placed on separate users, servers, even on your local machine.')
-          %br
-        %div
-          %span= _('Each Runner can be in one of the following states:')
-          %ul
-            %li
-              %span.badge.badge-success shared
-              \-
-              = _('Runner runs jobs from all unassigned projects')
-            %li
-              %span.badge.badge-success group
-              \-
-              = _('Runner runs jobs from all unassigned projects in its group')
-            %li
-              %span.badge.badge-info specific
-              \-
-              = _('Runner runs jobs from assigned projects')
-            %li
-              %span.badge.badge-warning locked
-              \-
-              = _('Runner cannot be assigned to other projects')
-            %li
-              %span.badge.badge-danger paused
-              \-
-              = _('Runner will not receive any new jobs')
-    .col-sm-6
-      .bs-callout
-        = render partial: 'ci/runner/how_to_setup_runner',
-                 locals: { registration_token: Gitlab::CurrentSettings.runners_registration_token,
-                           type: 'shared',
-                           reset_token_url: reset_registration_token_admin_application_settings_path }
-  .row
-    .col-sm-9
-      = form_tag admin_runners_path, id: 'runners-search', method: :get, class: 'filter-form js-filter-form' do
-        .filtered-search-wrapper
-          .filtered-search-box
-            = dropdown_tag(custom_icon('icon_history'),
-              options: { wrapper_class: 'filtered-search-history-dropdown-wrapper',
-              toggle_class: 'filtered-search-history-dropdown-toggle-button',
-              dropdown_class: 'filtered-search-history-dropdown',
-              content_class: 'filtered-search-history-dropdown-content',
-              title: _('Recent searches') }) do
-              .js-filtered-search-history-dropdown{ data: { full_path: admin_runners_path } }
-            .filtered-search-box-input-container.droplab-dropdown
-              .scroll-container
-                %ul.tokens-container.list-unstyled
-                  %li.input-token
-                    %input.form-control.filtered-search{ search_filter_input_options('runners') }
-              #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
-                %ul{ data: { dropdown: true } }
-                  %li.filter-dropdown-item{ data: { action: 'submit' } }
-                    = button_tag class: %w[btn btn-link] do
-                      = sprite_icon('search')
-                      %span
-                        = _('Press Enter or click to search')
-                %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
-                  %li.filter-dropdown-item
-                    = button_tag class: %w[btn btn-link] do
-                      -# Encapsulate static class name `{{icon}}` inside #{} to bypass
-                      -# haml lint's ClassAttributeWithStaticValue
-                      %svg
-                        %use{ 'xlink:href': "#{'{{icon}}'}" }
-                      %span.js-filter-hint
-                        {{hint}}
-                      %span.js-filter-tag.dropdown-light-content
-                        {{tag}}
-
-              #js-dropdown-admin-runner-status.filtered-search-input-dropdown-menu.dropdown-menu
-                %ul{ data: { dropdown: true } }
-                  - Ci::Runner::AVAILABLE_STATUSES.each do |status|
-                    %li.filter-dropdown-item{ data: { value: status } }
-                      = button_tag class: %w[btn btn-link] do
-                        = status.titleize
-              #js-dropdown-admin-runner-type.filtered-search-input-dropdown-menu.dropdown-menu
-                %ul{ data: { dropdown: true } }
-                  - Ci::Runner::AVAILABLE_TYPES.each do |runner_type|
-                    %li.filter-dropdown-item{ data: { value: runner_type } }
-                      = button_tag class: %w[btn btn-link] do
-                        = runner_type.titleize
+.row
+  .col-sm-6
+    .bs-callout
+      %p
+        = (_"A 'Runner' is a process which runs a job. You can set up as many Runners as you need.")
+        %br
+        = _('Runners can be placed on separate users, servers, even on your local machine.')
+        %br
+      %div
+        %span= _('Each Runner can be in one of the following states:')
+        %ul
+          %li
+            %span.badge.badge-success shared
+            \-
+            = _('Runner runs jobs from all unassigned projects')
+          %li
+            %span.badge.badge-success group
+            \-
+            = _('Runner runs jobs from all unassigned projects in its group')
+          %li
+            %span.badge.badge-info specific
+            \-
+            = _('Runner runs jobs from assigned projects')
+          %li
+            %span.badge.badge-warning locked
+            \-
+            = _('Runner cannot be assigned to other projects')
+          %li
+            %span.badge.badge-danger paused
+            \-
+            = _('Runner will not receive any new jobs')
+  .col-sm-6
+    .bs-callout
+      = render partial: 'ci/runner/how_to_setup_runner',
+                locals: { registration_token: Gitlab::CurrentSettings.runners_registration_token,
+                          type: 'shared',
+                          reset_token_url: reset_registration_token_admin_application_settings_path }
+.row
+  .col-sm-9
+    = form_tag admin_runners_path, id: 'runners-search', method: :get, class: 'filter-form js-filter-form' do
+      .filtered-search-wrapper
+        .filtered-search-box
+          = dropdown_tag(custom_icon('icon_history'),
+            options: { wrapper_class: 'filtered-search-history-dropdown-wrapper',
+            toggle_class: 'filtered-search-history-dropdown-toggle-button',
+            dropdown_class: 'filtered-search-history-dropdown',
+            content_class: 'filtered-search-history-dropdown-content',
+            title: _('Recent searches') }) do
+            .js-filtered-search-history-dropdown{ data: { full_path: admin_runners_path } }
+          .filtered-search-box-input-container.droplab-dropdown
+            .scroll-container
+              %ul.tokens-container.list-unstyled
+                %li.input-token
+                  %input.form-control.filtered-search{ search_filter_input_options('runners') }
+            #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
+              %ul{ data: { dropdown: true } }
+                %li.filter-dropdown-item{ data: { action: 'submit' } }
+                  = button_tag class: %w[btn btn-link] do
+                    = sprite_icon('search')
+                    %span
+                      = _('Press Enter or click to search')
+              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+                %li.filter-dropdown-item
+                  = button_tag class: %w[btn btn-link] do
+                    -# Encapsulate static class name `{{icon}}` inside #{} to bypass
+                    -# haml lint's ClassAttributeWithStaticValue
+                    %svg
+                      %use{ 'xlink:href': "#{'{{icon}}'}" }
+                    %span.js-filter-hint
+                      {{hint}}
+                    %span.js-filter-tag.dropdown-light-content
+                      {{tag}}
+            #js-dropdown-admin-runner-status.filtered-search-input-dropdown-menu.dropdown-menu
+              %ul{ data: { dropdown: true } }
+                - Ci::Runner::AVAILABLE_STATUSES.each do |status|
+                  %li.filter-dropdown-item{ data: { value: status } }
+                    = button_tag class: %w[btn btn-link] do
+                      = status.titleize
             #js-dropdown-admin-runner-type.filtered-search-input-dropdown-menu.dropdown-menu
               %ul{ data: { dropdown: true } }
@@ -99,43 +90,50 @@
                     = button_tag class: %w[btn btn-link] do
                       = runner_type.titleize
-            #js-dropdown-runner-tag.filtered-search-input-dropdown-menu.dropdown-menu
-              %ul{ data: { dropdown: true } }
-                %li.filter-dropdown-item{ data: { value: 'none' } }
-                  %button.btn.btn-link
-                    = _('No Tag')
-                %li.divider.droplab-item-ignore
-              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
-                %li.filter-dropdown-item
-                  %button.btn.btn-link.js-data-value
-                    %span.dropdown-light-content
-                      {{name}}
-            = button_tag class: %w[clear-search hidden] do
-              = icon('times')
-          .filter-dropdown-container
-            = render 'sort_dropdown'
-    .col-sm-3.text-right-lg
-      = _('Runners currently online: %{active_runners_count}') % { active_runners_count: @active_runners_count }
-  - if @runners.any?
-    .runners-content.content-list
-      .table-holder
-        .gl-responsive-table-row.table-row-header{ role: 'row' }
-          .table-section.section-10{ role: 'rowheader' }= _('Type')
-          .table-section.section-10{ role: 'rowheader' }= _('Runner token')
-          .table-section.section-20{ role: 'rowheader' }= _('Description')
-          .table-section.section-10{ role: 'rowheader' }= _('Version')
-          .table-section.section-10{ role: 'rowheader' }= _('IP Address')
-          .table-section.section-5{ role: 'rowheader' }= _('Projects')
-          .table-section.section-5{ role: 'rowheader' }= _('Jobs')
-          .table-section.section-10{ role: 'rowheader' }= _('Tags')
-          .table-section.section-10{ role: 'rowheader' }= _('Last contact')
-          .table-section.section-10{ role: 'rowheader' }
-        - @runners.each do |runner|
-          = render 'admin/runners/runner', runner: runner
-      = paginate @runners, theme: 'gitlab'
-  - else
-    .nothing-here-block= _('No runners found')
+          #js-dropdown-admin-runner-type.filtered-search-input-dropdown-menu.dropdown-menu
+            %ul{ data: { dropdown: true } }
+              - Ci::Runner::AVAILABLE_TYPES.each do |runner_type|
+                %li.filter-dropdown-item{ data: { value: runner_type } }
+                  = button_tag class: %w[btn btn-link] do
+                    = runner_type.titleize
+
+          #js-dropdown-runner-tag.filtered-search-input-dropdown-menu.dropdown-menu
+            %ul{ data: { dropdown: true } }
+              %li.filter-dropdown-item{ data: { value: 'none' } }
+                %button.btn.btn-link
+                  = _('No Tag')
+              %li.divider.droplab-item-ignore
+            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+              %li.filter-dropdown-item
+                %button.btn.btn-link.js-data-value
+                  %span.dropdown-light-content
+                    {{name}}
+          = button_tag class: %w[clear-search hidden] do
+            = icon('times')
+        .filter-dropdown-container
+          = render 'sort_dropdown'
+  .col-sm-3.text-right-lg
+    = _('Runners currently online: %{active_runners_count}') % { active_runners_count: @active_runners_count }
+- if @runners.any?
+  .runners-content.content-list
+    .table-holder
+      .gl-responsive-table-row.table-row-header{ role: 'row' }
+        .table-section.section-10{ role: 'rowheader' }= _('Type')
+        .table-section.section-10{ role: 'rowheader' }= _('Runner token')
+        .table-section.section-20{ role: 'rowheader' }= _('Description')
+        .table-section.section-10{ role: 'rowheader' }= _('Version')
+        .table-section.section-10{ role: 'rowheader' }= _('IP Address')
+        .table-section.section-5{ role: 'rowheader' }= _('Projects')
+        .table-section.section-5{ role: 'rowheader' }= _('Jobs')
+        .table-section.section-10{ role: 'rowheader' }= _('Tags')
+        .table-section.section-10{ role: 'rowheader' }= _('Last contact')
+        .table-section.section-10{ role: 'rowheader' }
+      - @runners.each do |runner|
+        = render 'admin/runners/runner', runner: runner
+    = paginate @runners, theme: 'gitlab'
+- else
+  .nothing-here-block= _('No runners found')

app/views/admin/system_info/show.html.haml

-- @no_container = true
 - page_title "System Info"
-%div{ class: container_class }
-  .prepend-top-default
-  .row
-    .col-sm-4
-      .card.bg-light.light-well
-        %h4 CPU
-        .data
-          - if @cpus
-            %h1 #{@cpus.length} cores
-          - else
-            = icon('warning', class: 'text-warning')
-            Unable to collect CPU info
-    .col-sm-4
-      .card.bg-light.light-well
-        %h4 Memory Usage
-        .data
-          - if @memory
-            %h1 #{number_to_human_size(@memory.active_bytes)} / #{number_to_human_size(@memory.total_bytes)}
-          - else
-            = icon('warning', class: 'text-warning')
-            Unable to collect memory info
-    .col-sm-4
-      .card.bg-light.light-well
-        %h4 Disk Usage
-        .data
-          - @disks.each do |disk|
-            %h1 #{number_to_human_size(disk[:bytes_used])} / #{number_to_human_size(disk[:bytes_total])}
-            %p= disk[:disk_name]
-            %p= disk[:mount_path]
-    .col-sm-4
-      .card.bg-light.light-well
-        %h4 Uptime
-        .data
-          %h1= distance_of_time_in_words_to_now(Rails.application.config.booted_at)
+.prepend-top-default
+.row
+  .col-sm-4
+    .card.bg-light.light-well
+      %h4 CPU
+      .data
+        - if @cpus
+          %h1 #{@cpus.length} cores
+        - else
+          = icon('warning', class: 'text-warning')
+          Unable to collect CPU info
+  .col-sm-4
+    .card.bg-light.light-well
+      %h4 Memory Usage
+      .data
+        - if @memory
+          %h1 #{number_to_human_size(@memory.active_bytes)} / #{number_to_human_size(@memory.total_bytes)}
+        - else
+          = icon('warning', class: 'text-warning')
+          Unable to collect memory info
+  .col-sm-4
+    .card.bg-light.light-well
+      %h4 Disk Usage
+      .data
+        - @disks.each do |disk|
+          %h1 #{number_to_human_size(disk[:bytes_used])} / #{number_to_human_size(disk[:bytes_total])}
+          %p= disk[:disk_name]
+          %p= disk[:mount_path]
+  .col-sm-4
+    .card.bg-light.light-well
+      %h4 Uptime
+      .data
+        %h1= distance_of_time_in_words_to_now(Rails.application.config.booted_at)

app/views/admin/users/index.html.haml

-- @no_container = true
 - page_title "Users"
-%div{ class: container_class }
-  .top-area.scrolling-tabs-container.inner-page-scroll-tabs
-    .fade-left
-      = icon('angle-left')
-    .fade-right
-      = icon('angle-right')
-    %ul.nav-links.nav.nav-tabs.scrolling-tabs
-      = nav_link(html_options: { class: active_when(params[:filter].nil?) }) do
-        = link_to admin_users_path do
-          = s_('AdminUsers|Active')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.active)
-      = nav_link(html_options: { class: active_when(params[:filter] == 'admins') }) do
-        = link_to admin_users_path(filter: "admins") do
-          = s_('AdminUsers|Admins')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.admins)
-      = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_enabled')} filter-two-factor-enabled" }) do
-        = link_to admin_users_path(filter: 'two_factor_enabled') do
-          = s_('AdminUsers|2FA Enabled')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.with_two_factor)
-      = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_disabled')} filter-two-factor-disabled" }) do
-        = link_to admin_users_path(filter: 'two_factor_disabled') do
-          = s_('AdminUsers|2FA Disabled')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.without_two_factor)
-      = nav_link(html_options: { class: active_when(params[:filter] == 'external') }) do
-        = link_to admin_users_path(filter: 'external') do
-          = s_('AdminUsers|External')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.external)
-      = nav_link(html_options: { class: active_when(params[:filter] == 'blocked') }) do
-        = link_to admin_users_path(filter: "blocked") do
-          = s_('AdminUsers|Blocked')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.blocked)
-      = nav_link(html_options: { class: active_when(params[:filter] == 'wop') }) do
-        = link_to admin_users_path(filter: "wop") do
-          = s_('AdminUsers|Without projects')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.without_projects)
-    .nav-controls
-      = render_if_exists 'admin/users/admin_email_users'
-      = link_to s_('AdminUsers|New user'), new_admin_user_path, class: 'btn btn-success btn-search float-right'
-  .filtered-search-block.row-content-block.border-top-0
-    = form_tag admin_users_path, method: :get do
-      - if params[:filter].present?
-        = hidden_field_tag "filter", h(params[:filter])
-      .search-holder
-        .search-field-holder
-          = search_field_tag :search_query, params[:search_query], placeholder: s_('AdminUsers|Search by name, email or username'), class: 'form-control search-text-input js-search-input', spellcheck: false
-          - if @sort.present?
-            = hidden_field_tag :sort, @sort
-          = icon("search", class: "search-icon")
-          = button_tag s_('AdminUsers|Search users') if Rails.env.test?
-        .dropdown.user-sort-dropdown
-          - toggle_text = @sort.present? ? users_sort_options_hash[@sort] : sort_title_name
-          = dropdown_toggle(toggle_text, { toggle: 'dropdown' })
-          %ul.dropdown-menu.dropdown-menu-right
-            %li.dropdown-header
-              = s_('AdminUsers|Sort by')
-            %li
-              - users_sort_options_hash.each do |value, title|
-                = link_to admin_users_path(sort: value, filter: params[:filter], search_query: params[:search_query]) do
-                  = title
-  - if @users.empty?
-    .nothing-here-block.border-top-0
-      = s_('AdminUsers|No users found')
-  - else
-    .table-holder
-      .thead-white.text-nowrap.gl-responsive-table-row.table-row-header{ role: 'row' }
-        .table-section.section-40{ role: 'rowheader' }= _('Name')
-        .table-section.section-25{ role: 'rowheader' }= _('Created on')
-        .table-section.section-15{ role: 'rowheader' }= _('Last activity')
-      = render partial: 'admin/users/user', collection: @users
-  = paginate @users, theme: "gitlab"
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  .fade-left
+    = icon('angle-left')
+  .fade-right
+    = icon('angle-right')
+  %ul.nav-links.nav.nav-tabs.scrolling-tabs
+    = nav_link(html_options: { class: active_when(params[:filter].nil?) }) do
+      = link_to admin_users_path do
+        = s_('AdminUsers|Active')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.active)
+    = nav_link(html_options: { class: active_when(params[:filter] == 'admins') }) do
+      = link_to admin_users_path(filter: "admins") do
+        = s_('AdminUsers|Admins')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.admins)
+    = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_enabled')} filter-two-factor-enabled" }) do
+      = link_to admin_users_path(filter: 'two_factor_enabled') do
+        = s_('AdminUsers|2FA Enabled')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.with_two_factor)
+    = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_disabled')} filter-two-factor-disabled" }) do
+      = link_to admin_users_path(filter: 'two_factor_disabled') do
+        = s_('AdminUsers|2FA Disabled')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.without_two_factor)
+    = nav_link(html_options: { class: active_when(params[:filter] == 'external') }) do
+      = link_to admin_users_path(filter: 'external') do
+        = s_('AdminUsers|External')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.external)
+    = nav_link(html_options: { class: active_when(params[:filter] == 'blocked') }) do
+      = link_to admin_users_path(filter: "blocked") do
+        = s_('AdminUsers|Blocked')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.blocked)
+    = nav_link(html_options: { class: active_when(params[:filter] == 'wop') }) do
+      = link_to admin_users_path(filter: "wop") do
+        = s_('AdminUsers|Without projects')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.without_projects)
+  .nav-controls
+    = render_if_exists 'admin/users/admin_email_users'
+    = link_to s_('AdminUsers|New user'), new_admin_user_path, class: 'btn btn-success btn-search float-right'
+.filtered-search-block.row-content-block.border-top-0
+  = form_tag admin_users_path, method: :get do
+    - if params[:filter].present?
+      = hidden_field_tag "filter", h(params[:filter])
+    .search-holder
+      .search-field-holder
+        = search_field_tag :search_query, params[:search_query], placeholder: s_('AdminUsers|Search by name, email or username'), class: 'form-control search-text-input js-search-input', spellcheck: false
+        - if @sort.present?
+          = hidden_field_tag :sort, @sort
+        = icon("search", class: "search-icon")
+        = button_tag s_('AdminUsers|Search users') if Rails.env.test?
+      .dropdown.user-sort-dropdown
+        - toggle_text = @sort.present? ? users_sort_options_hash[@sort] : sort_title_name
+        = dropdown_toggle(toggle_text, { toggle: 'dropdown' })
+        %ul.dropdown-menu.dropdown-menu-right
+          %li.dropdown-header
+            = s_('AdminUsers|Sort by')
+          %li
+            - users_sort_options_hash.each do |value, title|
+              = link_to admin_users_path(sort: value, filter: params[:filter], search_query: params[:search_query]) do
+                = title
+- if @users.empty?
+  .nothing-here-block.border-top-0
+    = s_('AdminUsers|No users found')
+- else
+  .table-holder
+    .thead-white.text-nowrap.gl-responsive-table-row.table-row-header{ role: 'row' }
+      .table-section.section-40{ role: 'rowheader' }= _('Name')
+      .table-section.section-25{ role: 'rowheader' }= _('Created on')
+      .table-section.section-15{ role: 'rowheader' }= _('Last activity')
+    = render partial: 'admin/users/user', collection: @users
+= paginate @users, theme: "gitlab"
 #delete-user-modal

app/views/dashboard/activity.html.haml

 - @hide_top_links = true
-- @no_container = true
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, dashboard_projects_url(rss_url_options), title: "All activity")
-
 = render_dashboard_gold_trial(current_user)
 - page_title    "Activity"
 - header_title  "Activity", activity_dashboard_path
-%div{ class: container_class }
-  = render "projects/last_push"
-  = render 'dashboard/activity_head'
-  %section.activities
-    = render 'activities'
+= render "projects/last_push"
+= render 'dashboard/activity_head'
+%section.activities
+  = render 'activities'

app/views/dashboard/projects/index.html.haml

-- @no_container = true
 - @hide_top_links = true
 = content_for :meta_tags do
@@ -9,11 +8,10 @@
 - page_title    "Projects"
 - header_title  "Projects", dashboard_projects_path
-%div{ class: container_class }
-  = render "projects/last_push"
-  - if show_projects?(@projects, params)
-    = render 'dashboard/projects_head'
-    = render 'nav' unless Feature.enabled?(:project_list_filter_bar)
-    = render 'projects'
-  - else
-    = render "zero_authorized_projects"
+= render "projects/last_push"
+- if show_projects?(@projects, params)
+  = render 'dashboard/projects_head'
+  = render 'nav' unless Feature.enabled?(:project_list_filter_bar)
+  = render 'projects'
+- else
+  = render "zero_authorized_projects"

app/views/dashboard/projects/starred.html.haml

 - @hide_top_links = true
-- @no_container = true
 - breadcrumb_title _("Projects")
 - page_title _("Starred Projects")
 - header_title _("Projects"), dashboard_projects_path
 = render_dashboard_gold_trial(current_user)
-%div{ class: container_class }
-  = render "projects/last_push"
-  = render 'dashboard/projects_head', project_tab_filter: :starred
-  - if params[:filter_projects] || any_projects?(@projects)
-    = render 'projects'
-  - else
-    = render 'starred_empty_state'
+= render "projects/last_push"
+= render 'dashboard/projects_head', project_tab_filter: :starred
+- if params[:filter_projects] || any_projects?(@projects)
+  = render 'projects'
+- else
+  = render 'starred_empty_state'

app/views/groups/labels/index.html.haml

-- @no_container = true
 - page_title 'Labels'
 - can_admin_label = can?(current_user, :admin_label, @group)
 - search = params[:search]
@@ -7,24 +6,23 @@
 - if labels_or_filters
   #promote-label-modal
-  %div{ class: container_class }
-    = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
-    .labels-container.prepend-top-5
-      - if @labels.any?
-        .text-muted
-          = _('Labels can be applied to %{features}. Group labels are available for any project within the group.') % { features: issuable_types.to_sentence }
-        .other-labels
-          %h5= _('Labels')
-          %ul.content-list.manage-labels-list.js-other-labels
-            = render partial: 'shared/label', collection: @labels, as: :label, locals: { use_label_priority: false, subject: @group }
-            = paginate @labels, theme: 'gitlab'
-      - elsif search.present?
-        .nothing-here-block
-          = _('No labels with such name or description')
-      - elsif subscribed.present?
-        .nothing-here-block
-          = _('You do not have any subscriptions yet')
+  = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
+  .labels-container.prepend-top-5
+    - if @labels.any?
+      .text-muted
+        = _('Labels can be applied to %{features}. Group labels are available for any project within the group.') % { features: issuable_types.to_sentence }
+      .other-labels
+        %h5= _('Labels')
+        %ul.content-list.manage-labels-list.js-other-labels
+          = render partial: 'shared/label', collection: @labels, as: :label, locals: { use_label_priority: false, subject: @group }
+          = paginate @labels, theme: 'gitlab'
+    - elsif search.present?
+      .nothing-here-block
+        = _('No labels with such name or description')
+    - elsif subscribed.present?
+      .nothing-here-block
+        = _('You do not have any subscriptions yet')
 - else
   = render 'shared/empty_states/labels'