Commit 3741402a authored by Fatih Acet's avatar Fatih Acet Committed by Kushal Pandya

Make flash notifications sticky

This commit also unifies layout structure
and remove no_container flag
parent af5f2424
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);
......
......@@ -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);
}
......
$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;
}
}
......@@ -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;
......
......@@ -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;
......
- @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
%h3.page-title Background Jobs
%p.light GitLab uses #{link_to "sidekiq", "http://sidekiq.org/"} library for async job processing
%hr
.card
%hr
.card
%iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: 0" }
- @no_container = true
- breadcrumb_title "Dashboard"
%div{ class: container_class }
= render_if_exists 'admin/licenses/breakdown', license: @license
= render_if_exists 'admin/licenses/breakdown', license: @license
.admin-dashboard.prepend-top-default
.admin-dashboard.prepend-top-default
.row
.col-sm-4
.info-well.dark-well
......
- @no_container = true
- page_title _("Groups")
%div{ class: container_class }
.top-area
.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
......@@ -14,7 +12,7 @@
= 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
%ul.content-list
= render @groups
= paginate @groups, theme: "gitlab"
= paginate @groups, theme: "gitlab"
- @no_container = true
- page_title _('Health Check')
- no_errors = @errors.blank?
%div{ class: container_class }
%h3.page-title= page_title
.bs-callout.clearfix
%h3.page-title= page_title
.bs-callout.clearfix
.float-left
%p
#{ s_('HealthCheck|Access token is') }
......@@ -13,7 +11,7 @@
= 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
%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
......@@ -24,8 +22,8 @@
%li
%code= metrics_url(token: Gitlab::CurrentSettings.health_check_access_token)
= render_if_exists 'admin/health_check/health_check_url'
%hr
.card
%hr
.card
.card-header
Current Status:
- if no_errors
......
- breadcrumb_title "Jobs"
- @no_container = true
%div{ class: container_class }
.top-area.scrolling-tabs-container.inner-page-scroll-tabs
.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
......@@ -15,8 +12,8 @@
url: cancel_all_admin_jobs_path } }
= s_('AdminArea|Stop all jobs')
.row-content-block.second-block
.row-content-block.second-block
#{(@scope || 'all').capitalize} jobs
%ul.content-list.builds-content-list.admin-builds-table
%ul.content-list.builds-content-list.admin-builds-table
= render "projects/jobs/table", builds: @builds, admin: true
- @no_container = true
- page_title "Logs"
%div{ class: container_class }
%ul.nav-links.log-tabs.nav.nav-tabs
%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
.row-content-block
To prevent performance issues admin logs output the last 2000 lines
.tab-content
.tab-content
- @loggers.each do |klass|
.tab-pane{ class: active_when(klass == @loggers.first), id: klass.file_name_noext }
.file-holder#README
......
- @no_container = true
- page_title "Projects"
- params[:visibility_level] ||= []
%div{ class: container_class }
.top-area.scrolling-tabs-container.inner-page-scroll-tabs
.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
......@@ -41,4 +38,4 @@
= link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC) do
Public
= render 'projects'
= render 'projects'
- @no_container = true
- page_title 'Requests Profiles'
%div{ class: container_class }
%h3.page-title
%h3.page-title
= page_title
.bs-callout.clearfix
.bs-callout.clearfix
Pass the header
%code X-Profile-Token: #{@profile_token}
to profile the request
- if @profiles.present?
- if @profiles.present?
.prepend-top-default
- @profiles.each do |path, profiles|
.card.card-small
......@@ -21,6 +19,6 @@
%li
= link_to profile.time.to_s(:long) + ' ' + profile.profile_mode.capitalize,
admin_requests_profile_path(profile)
- else
- else
%p
No profiles found
- breadcrumb_title _('Runners')
- @no_container = true
%div{ class: container_class }
.row
.row
.col-sm-6
.bs-callout
%p
......@@ -42,7 +40,7 @@
type: 'shared',
reset_token_url: reset_registration_token_admin_application_settings_path }
.row
.row
.col-sm-9
= form_tag admin_runners_path, id: 'runners-search', method: :get, class: 'filter-form js-filter-form' do
.filtered-search-wrapper
......@@ -119,7 +117,7 @@
.col-sm-3.text-right-lg
= _('Runners currently online: %{active_runners_count}') % { active_runners_count: @active_runners_count }
- if @runners.any?
- if @runners.any?
.runners-content.content-list
.table-holder
.gl-responsive-table-row.table-row-header{ role: 'row' }
......@@ -137,5 +135,5 @@
- @runners.each do |runner|
= render 'admin/runners/runner', runner: runner
= paginate @runners, theme: 'gitlab'
- else
- else
.nothing-here-block= _('No runners found')
- @no_container = true
- page_title "System Info"
%div{ class: container_class }
.prepend-top-default
.row
.prepend-top-default
.row
.col-sm-4
.card.bg-light.light-well
%h4 CPU
......
- @no_container = true
- page_title "Users"
%div{ class: container_class }
.top-area.scrolling-tabs-container.inner-page-scroll-tabs
.top-area.scrolling-tabs-container.inner-page-scroll-tabs
.fade-left
= icon('angle-left')
.fade-right
......@@ -40,7 +38,7 @@
= 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
.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])
......@@ -62,10 +60,10 @@
= link_to admin_users_path(sort: value, filter: params[:filter], search_query: params[:search_query]) do
= title
- if @users.empty?
- if @users.empty?
.nothing-here-block.border-top-0
= s_('AdminUsers|No users found')
- else
- else
.table-holder
.thead-white.text-nowrap.gl-responsive-table-row.table-row-header{ role: 'row' }
.table-section.section-40{ role: 'rowheader' }= _('Name')
......@@ -74,6 +72,6 @@
= render partial: 'admin/users/user', collection: @users
= paginate @users, theme: "gitlab"
= paginate @users, theme: "gitlab"
#delete-user-modal
- @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'
= render "projects/last_push"
= render 'dashboard/activity_head'
%section.activities
%section.activities
= render 'activities'
- @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 "projects/last_push"
- if show_projects?(@projects, params)
= render 'dashboard/projects_head'
= render 'nav' unless Feature.enabled?(:project_list_filter_bar)
= render 'projects'
- else
- else
= render "zero_authorized_projects"
- @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
= render "projects/last_push"
= render 'dashboard/projects_head', project_tab_filter: :starred
- if params[:filter_projects] || any_projects?(@projects)
- if params[:filter_projects] || any_projects?(@projects)
= render 'projects'
- else
- else
= render 'starred_empty_state'
- @no_container = true
- page_title 'Labels'
- can_admin_label = can?(current_user, :admin_label, @group)
- search = params[:search]
......@@ -7,7 +6,6 @@
- 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
......
- @no_container = true
- add_to_breadcrumbs _("Milestones"), group_milestones_path(@group)
- breadcrumb_title _("New")
- page_title _("Milestones"), @milestone.name, _("Milestones")
%div{ class: container_class }
%h3.page-title
%h3.page-title
New Milestone
%hr
%hr
= render "form"
= render "form"
- @no_container = true
- breadcrumb_title _("Details")
- @content_class = "limit-container-width" unless fluid_layout
= content_for :meta_tags do
= auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity")
%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
%div{ class: [("limit-container-width" unless fluid_layout)] }
= render 'groups/home_panel'
.groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }
......
- breadcrumb_title _("Cohorts")
- @no_container = true
%div{ class: container_class }
- if @cohorts
- if @cohorts
= render 'cohorts_table'
- else
- else
.bs-callout.bs-callout-warning.clearfix
%p
- usage_ping_path = help_page_path('user/admin_area/settings/usage_statistics', anchor: 'usage-ping')
......
- @no_container = true
- page_title _('ConvDev Index')
- usage_ping_enabled = Gitlab::CurrentSettings.usage_ping_enabled
......
- extra_flash_class = local_assigns.fetch(:extra_flash_class, nil)
.flash-container.flash-container-page
.flash-container.flash-container-page.sticky
-# We currently only support `alert`, `notice`, `success`
- flash.each do |key, value|
-# Don't show a flash message if the message is nil
- if value
%div{ class: "flash-#{key}" }
%div{ class: "#{(container_class unless fluid_layout)} #{(extra_flash_class unless @no_container)} #{@content_class}" }
%div{ class: "flash-content flash-#{key} rounded" }
%span= value
= sprite_icon('close', size: 16, css_class: 'close-icon')
......@@ -13,8 +13,8 @@
= render "shared/ping_consent"
- unless @hide_breadcrumbs
= render "layouts/nav/breadcrumbs"
= render "layouts/flash", extra_flash_class: 'limit-container-width'
.d-flex
%div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
.content{ id: "content-body" }
= render "layouts/flash", extra_flash_class: 'limit-container-width'
= yield
- @no_container = true
- page_title _("Activity")
%div{ class: container_class }
= render 'projects/last_push'
= render 'projects/last_push'
= render 'projects/activity'
- @no_container = true
- project_duration = age_map_duration(@blame_groups, @project)
- page_title "Blame", @blob.path, @ref
%div{ class: container_class }
#blob-content-holder.tree-holder
#blob-content-holder.tree-holder
= render "projects/blob/breadcrumb", blob: @blob, blame: true
.file-holder
......
- breadcrumb_title "Repository"
- @no_container = true
- page_title "Edit", @blob.path, @ref
- content_for :page_specific_javascripts do
= page_specific_javascript_tag('lib/ace.js')
%div{ class: container_class }
- if @conflict
- if @conflict
.alert.alert-danger
Someone edited the file the same time you did. Please check out
= link_to "the file", project_blob_path(@project, tree_join(@branch_name, @file_path)), target: "_blank", rel: 'noopener noreferrer'
and make sure your changes will not unintentionally remove theirs.
.editor-title-row
.editor-title-row
%h3.page-title.blob-edit-page-title
Edit file
= render 'template_selectors'
.file-editor
.file-editor
%ul.nav-links.no-bottom.js-edit-mode.nav.nav-tabs
%li.active
= link_to '#editor' do
......
- breadcrumb_title "Repository"
- @no_container = true
- page_title @blob.path, @ref
- signatures_path = namespace_project_signatures_path(namespace_id: @project.namespace.full_path, project_id: @project.path, id: @last_commit)
.js-signature-container{ data: { 'signatures-path': signatures_path } }
%div{ class: container_class }
= render 'projects/last_push'
= render 'projects/last_push'
#tree-holder.tree-holder
#tree-holder.tree-holder
= render 'blob', blob: @blob
- if can_modify_blob?(@blob)
......
- @no_container = true
- page_title _('Branches')
- add_to_breadcrumbs(_('Repository'), project_tree_path(@project))
%div{ class: container_class }
.top-area.adjust
.top-area.adjust
%ul.nav-links.issues-state-filters.nav.nav-tabs
%li{ class: active_when(@mode == 'overview') }>
= link_to s_('Branches|Overview'), project_branches_path(@project), title: s_('Branches|Show overview of the branches')
......@@ -45,25 +43,25 @@
= link_to new_project_branch_path(@project), class: 'btn btn-success' do
= s_('Branches|New branch')
= render_if_exists 'projects/commits/mirror_status'
= render_if_exists 'projects/commits/mirror_status'
.js-branch-list{ data: { diverging_counts_endpoint: diverging_commit_counts_namespace_project_branches_path(@project.namespace, @project, format: :json) } }
- if can?(current_user, :admin_project, @project)
.js-branch-list{ data: { diverging_counts_endpoint: diverging_commit_counts_namespace_project_branches_path(@project.namespace, @project, format: :json) } }
- if can?(current_user, :admin_project, @project)
- project_settings_link = link_to s_('Branches|project settings'), project_protected_branches_path(@project)
.row-content-block
%h5
= s_('Branches|Protected branches can be managed in %{project_settings_link}.').html_safe % { project_settings_link: project_settings_link }
- if @mode == 'overview' && (@active_branches.any? || @stale_branches.any?)
- if @mode == 'overview' && (@active_branches.any? || @stale_branches.any?)
= render "projects/branches/panel", branches: @active_branches, state: 'active', panel_title: s_('Branches|Active branches'), show_more_text: s_('Branches|Show more active branches'), project: @project, overview_max_branches: @overview_max_branches
= render "projects/branches/panel", branches: @stale_branches, state: 'stale', panel_title: s_('Branches|Stale branches'), show_more_text: s_('Branches|Show more stale branches'), project: @project, overview_max_branches: @overview_max_branches
- elsif @branches.any?
- elsif @branches.any?
%ul.content-list.all-branches
- @branches.each do |branch|
= render "projects/branches/branch", branch: branch, merged: @merged_branch_names.include?(branch.name)
= paginate @branches, theme: 'gitlab'
- else
- else
.nothing-here-block
= s_('Branches|No branches to show')
......
-# no_container is needed here because of full width side-by-side diff view
- @no_container = true
- add_to_breadcrumbs _('Commits'), project_commits_path(@project)
- breadcrumb_title @commit.short_id
......
- @no_container = true
- breadcrumb_title _("Commits")
- page_title _("Commits"), @ref
......@@ -6,7 +5,6 @@
= auto_discovery_link_tag(:atom, project_commits_path(@project, @ref, rss_url_options), title: "#{@project.name}:#{@ref} commits")
.js-project-commits-show{ 'data-commits-limit' => @limit }
%div{ class: container_class }
.tree-holder
.nav-block
.tree-ref-container
......
- @no_container = true
- breadcrumb_title "Compare Revisions"
- page_title "Compare"
%div{ class: container_class }
%h3.page-title
%h3.page-title
= _("Compare Git revisions")
.sub-header-block
.sub-header-block
- example_master = capture do
%code.ref-name master
- example_sha = capture do
......@@ -14,5 +12,5 @@
%br
= (_("Changes are shown as if the <b>source</b> revision was being merged into the <b>target</b> revision.")).html_safe
.prepend-top-20
.prepend-top-20
= render "form"
- @no_container = true
- add_to_breadcrumbs _("Compare Revisions"), project_compare_index_path(@project)
- page_title "#{params[:from]}...#{params[:to]}"
%div{ class: container_class }
.sub-header-block.no-bottom-space
.sub-header-block.no-bottom-space
= render "form"
- if @commits.present?
- if @commits.present?
= render "projects/commits/commit_list"
= render "projects/diffs/diffs", diffs: @diffs, environment: @environment, diff_page_context: "is-compare"
- else
- else
.card.bg-light
.center
%h4
......
- @no_container = true
- page_title "Cycle Analytics"
#cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
#cycle-analytics{ "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
- if @cycle_analytics_no_data
%banner{ "v-if" => "!isOverviewDialogDismissed",
"documentation-link": help_page_path('user/project/cycle_analytics'),
......
- @content_class = "limit-container-width" unless fluid_layout
- @no_container = true
- breadcrumb_title _("Details")
= render partial: 'flash_messages', locals: { project: @project }
%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
%div{ class: [("limit-container-width" unless fluid_layout)] }
= render "home_panel"
%h4.prepend-top-0.append-bottom-8
......
- @no_container = true
- page_title _("Edit"), @environment.name, _("Environments")
%div{ class: container_class }
%h3.page-title
%h3.page-title
= _('Edit environment')
%hr
= render 'form'
%hr
= render 'form'
- @no_container = true
- page_title _("Environments")
#environments-folder-list-view{ data: { environments_data: environments_folder_list_view_data,
"css-class" => container_class } }
#environments-folder-list-view{ data: { environments_data: environments_folder_list_view_data } }
- @no_container = true
- page_title _("Environments")
#environments-list-view{ data: { environments_data: environments_list_data,
......@@ -6,5 +5,4 @@
"can-create-environment" => can?(current_user, :create_environment, @project).to_s,
"new-environment-path" => new_project_environment_path(@project),
"help-page-path" => help_page_path("ci/environments"),
"deploy-boards-help-path" => help_page_path("user/project/deploy_boards", anchor: "enabling-deploy-boards"),
"css-class" => container_class } }
"deploy-boards-help-path" => help_page_path("user/project/deploy_boards", anchor: "enabling-deploy-boards") } }
- @no_container = true
- page_title _("Metrics for environment"), @environment.name
.prometheus-container{ class: container_class }
.prometheus-container
#prometheus-graphs{ data: metrics_data(@project, @environment) }
- @no_container = true
- breadcrumb_title _("Environments")
- page_title _("New Environment")
%div{ class: container_class }
%h3.page-title
%h3.page-title
= _("New environment")
%hr
= render 'form'
%hr
= render 'form'
- @no_container = true
- add_to_breadcrumbs _("Environments"), project_environments_path(@project)
- breadcrumb_title @environment.name
- page_title _("Environments")
......@@ -6,8 +5,7 @@
- content_for :page_specific_javascripts do
= stylesheet_link_tag 'page_bundles/xterm'
%div{ class: container_class }
- if can?(current_user, :stop_environment, @environment)
- if can?(current_user, :stop_environment, @environment)
#stop-environment-modal.modal.fade{ tabindex: -1 }
.modal-dialog
.modal-content
......@@ -34,7 +32,7 @@
= button_to stop_project_environment_path(@project, @environment), class: 'btn btn-danger has-tooltip', method: :post do
= s_('Environments|Stop environment')
.top-area
.top-area
%h3.page-title= @environment.name
.nav-controls.ml-auto.my-2
= render 'projects/environments/terminal_button', environment: @environment
......@@ -48,7 +46,7 @@
= sprite_icon('stop')
= s_('Environments|Stop')
.environments-container
.environments-container
- if @deployments.blank?
.empty-state
.text-content
......
- @no_container = true
- page_title _("Terminal for environment"), @environment.name
- content_for :page_specific_javascripts do
= stylesheet_link_tag "xterm.css"
%div{ class: container_class }
.top-area
.top-area
.row
.col-sm-6
%h3.page-title
......
- @no_container = true
- page_title _("Contribution Charts")
.repo-charts{ class: container_class }
.repo-charts
%h4.sub-header
= _("Programming languages used in this repository")
......@@ -20,7 +19,7 @@
.col-md-8
%canvas#languages-chart{ height: 400 }
.repo-charts{ class: container_class }
.repo-charts
.sub-header-block.border-top
.row.tree-ref-header
......
- @no_container = true
- page_title _('Contributors')
.js-graphs-show{ class: container_class, 'data-project-graph-path': project_graph_path(@project, current_ref, format: :json) }
.js-graphs-show{ 'data-project-graph-path': project_graph_path(@project, current_ref, format: :json) }
.sub-header-block
.tree-ref-holder.inline.vertical-align-middle
= render 'shared/ref_switcher', destination: 'graphs'
......
- page_title import_in_progress_title
- @no_container = true
- @content_class = "limit-container-width" unless fluid_layout
.save-project-loader
......
- @no_container = true
- @can_bulk_update = can?(current_user, :admin_issue, @project)
- page_title "Issues"
......@@ -8,7 +7,6 @@
= auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} issues")
- if project_issues(@project).exists?
%div{ class: (container_class) }
.top-area
= render 'shared/issuable/nav', type: :issues
= render "projects/issues/nav_btns"
......
- @no_container = true
- page_title "Jobs"
%div{ class: container_class }
.top-area
.top-area
- build_path_proc = ->(scope) { project_jobs_path(@project, scope: scope) }
= render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
......@@ -14,5 +12,5 @@
= link_to project_ci_lint_path(@project), class: 'btn btn-default' do
%span CI lint
.content-list.builds-content-list
.content-list.builds-content-list
= render "table", builds: @builds, project: @project
- @no_container = true
- add_to_breadcrumbs _("Jobs"), project_jobs_path(@project)
- breadcrumb_title "##{@build.id}"
- page_title "#{@build.name} (##{@build.id})", _("Jobs")
......@@ -6,8 +5,7 @@
- content_for :page_specific_javascripts do
= stylesheet_link_tag 'page_bundles/xterm'
%div{ class: container_class }
#js-job-vue-app{ data: { endpoint: project_job_path(@project, @build, format: :json), project_path: @project.full_path,
#js-job-vue-app{ data: { endpoint: project_job_path(@project, @build, format: :json), project_path: @project.full_path,
deployment_help_url: help_page_path('user/project/clusters/index.html', anchor: 'troubleshooting-failed-deployment-jobs'),
runner_help_url: help_page_path('ci/runners/README.html', anchor: 'setting-maximum-job-timeout-for-a-runner'),
runner_settings_url: project_runners_path(@build.project, anchor: 'js-runners-settings'),
......
- @no_container = true
- add_to_breadcrumbs 'Jobs', project_jobs_path(@project)
- add_to_breadcrumbs "##{@build.id}", project_job_path(@project, @build)
- breadcrumb_title 'Terminal'
......@@ -7,5 +6,5 @@
- content_for :page_specific_javascripts do
= stylesheet_link_tag "xterm.css"
.terminal-container{ class: container_class }
.terminal-container
#terminal{ data: { project_path: terminal_project_job_path(@project, @build, format: :ws) } }
- @no_container = true
- add_to_breadcrumbs "Labels", project_labels_path(@project)
- breadcrumb_title "Edit"
- page_title "Edit", @label.name, "Labels"
%div{ class: container_class }
%h3.page-title
%h3.page-title
Edit Label
%hr
= render 'shared/labels/form', url: project_label_path(@project, @label), back_path: project_labels_path(@project)
%hr
= render 'shared/labels/form', url: project_label_path(@project, @label), back_path: project_labels_path(@project)
- @no_container = true
- page_title "Labels"
- can_admin_label = can?(current_user, :admin_label, @project)
- search = params[:search]
......@@ -7,7 +6,6 @@
- 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-10
......
- @no_container = true
- add_to_breadcrumbs "Labels", project_labels_path(@project)
- breadcrumb_title "New"
- page_title "New Label"
%div{ class: container_class }
%h3.page-title
%h3.page-title
New Label
%hr
= render 'shared/labels/form', url: project_labels_path(@project), back_path: project_labels_path(@project)
%hr
= render 'shared/labels/form', url: project_labels_path(@project), back_path: project_labels_path(@project)
- @no_container = true
- @can_bulk_update = can?(current_user, :admin_merge_request, @project)
- merge_project = merge_request_source_project_for_project(@project)
- new_merge_request_path = project_new_merge_request_path(merge_project) if merge_project
......@@ -6,11 +5,9 @@
- page_title "Merge Requests"
- new_merge_request_email = @project.new_issuable_address(current_user, 'merge_request')
%div{ class: container_class }
= render 'projects/last_push'
= render 'projects/last_push'
- if @project.merge_requests.exists?
%div{ class: container_class }
.top-area
= render 'shared/issuable/nav', type: :merge_requests
.nav-controls
......
- @no_container = true
- breadcrumb_title _('Edit')
- add_to_breadcrumbs _('Milestones'), project_milestones_path(@project)
- page_title _('Edit'), @milestone.title, _('Milestones')
%div{ class: container_class }
%h3.page-title
%h3.page-title
= _('Edit Milestone')
%hr
%hr
= render 'form'
= render 'form'
- @no_container = true
- page_title _('Milestones')
%div{ class: container_class }
.top-area
.top-area
= render 'shared/milestones_filter', counts: milestone_counts(@project.milestones)
.nav-controls
......@@ -12,7 +10,7 @@
= link_to new_project_milestone_path(@project), class: 'btn btn-success qa-new-project-milestone', title: _('New milestone') do
= _('New milestone')
.milestones
.milestones
#delete-milestone-modal
#promote-milestone-modal
......
- @no_container = true
- add_to_breadcrumbs _('Milestones'), project_milestones_path(@project)
- breadcrumb_title _('New')
- page_title _('New Milestone')
%div{ class: container_class }
%h3.page-title
%h3.page-title
= _('New Milestone')
%hr
%hr
= render 'form'
= render 'form'
- @no_container = true
- add_to_breadcrumbs _('Milestones'), project_milestones_path(@project)
- breadcrumb_title @milestone.title
- page_title @milestone.title, _('Milestones')
- page_description @milestone.description
%div{ class: container_class }
.detail-page-header.milestone-page-header
.detail-page-header.milestone-page-header
.status-box{ class: status_box_class(@milestone) }
- if @milestone.closed?
= _('Closed')
......@@ -48,7 +46,7 @@
%a.btn.btn-default.btn-grouped.float-right.d-block.d-sm-none.js-sidebar-toggle{ href: '#' }
= icon('angle-double-left')
.detail-page-description.milestone-detail
.detail-page-description.milestone-detail
%h2.title.qa-milestone-title
= markdown_field(@milestone, :title)
......@@ -57,14 +55,14 @@
.description.md
= markdown_field(@milestone, :description)
= render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
= render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
- if can?(current_user, :read_issue, @project) && @milestone.total_issues_count(current_user).zero?
- if can?(current_user, :read_issue, @project) && @milestone.total_issues_count(current_user).zero?
.alert.alert-success.prepend-top-default
%span= _('Assign some issues to this milestone.')
- elsif @milestone.complete?(current_user) && @milestone.active?
- elsif @milestone.complete?(current_user) && @milestone.active?
.alert.alert-success.prepend-top-default
%span= _('All issues for this milestone are closed. You may close this milestone now.')
= render 'shared/milestones/tabs', milestone: @milestone
= render 'shared/milestones/sidebar', milestone: @milestone, project: @project, affix_offset: 153
= render 'shared/milestones/tabs', milestone: @milestone
= render 'shared/milestones/sidebar', milestone: @milestone, project: @project, affix_offset: 153
- @no_container = true
%div{ class: container_class }
.row-content-block.second-block.content-component-block
.row-content-block.second-block.content-component-block
.tree-ref-holder
= render partial: 'shared/ref_switcher', locals: {destination: 'graph'}
......
- breadcrumb_title _("Schedules")
- @no_container = true
- page_title _("Pipeline Schedules")
%div{ class: container_class }
#pipeline-schedules-callout{ data: { docs_url: help_page_path('user/project/pipelines/schedules') } }
.top-area
#pipeline-schedules-callout{ data: { docs_url: help_page_path('user/project/pipelines/schedules') } }
.top-area
- schedule_path_proc = ->(scope) { pipeline_schedules_path(@project, scope: scope) }
= render "tabs", schedule_path_proc: schedule_path_proc, all_schedules: @all_schedules, scope: @scope
......@@ -14,9 +12,9 @@
= link_to new_project_pipeline_schedule_path(@project), class: 'btn btn-success' do
%span= _('New schedule')
- if @schedules.present?
- if @schedules.present?
%ul.content-list
= render partial: "table"
- else
- else
.card.bg-light
.nothing-here-block= _("No schedules")
- @no_container = true
- page_title _('CI / CD Charts')
%div{ class: container_class }
#charts.ci-charts
#charts.ci-charts
= render 'projects/pipelines/charts/overall'
%hr
= render 'projects/pipelines/charts/pipelines'
- @no_container = true
- page_title _('Pipelines')
= render_if_exists "shared/shared_runners_minutes_limit_flash_message"
%div{ 'class' => container_class }
#pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
#pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
"help-page-path" => help_page_path('ci/quick_start/README'),
"help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
"empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
......
- @no_container = true
- add_to_breadcrumbs _('Pipelines'), project_pipelines_path(@project)
- breadcrumb_title "##{@pipeline.id}"
- page_title _('Pipeline')
.js-pipeline-container{ class: container_class, data: { controller_action: "#{controller.action_name}" } }
.js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
#js-pipeline-header-vue.pipeline-header-container
- if @pipeline.commit.present?
......
- @no_container = true
- page_title _('Releases')
%div{ class: container_class }
#js-releases-page{ data: { project_id: @project.id, illustration_path: image_path('illustrations/releases.svg'), documentation_path: help_page_path('user/project/releases/index') } }
#js-releases-page{ data: { project_id: @project.id, illustration_path: image_path('illustrations/releases.svg'), documentation_path: help_page_path('user/project/releases/index') } }
- @no_container = true
- @content_class = "limit-container-width" unless fluid_layout
- breadcrumb_title 'Serverless'
- page_title 'Serverless'
......@@ -10,7 +9,7 @@
clusters_path: clusters_path,
help_path: help_page_path('user/project/clusters/serverless/index') } }
%div{ class: [container_class, ('limit-container-width' unless fluid_layout)] }
%div{ class: [('limit-container-width' unless fluid_layout)] }
.js-serverless-functions-notice
.flash-container
......
- @no_container = true
- @content_class = "limit-container-width" unless fluid_layout
- clusters_path = project_clusters_path(@project)
- help_path = help_page_path('user/project/clusters/serverless/index')
......@@ -12,7 +11,7 @@
clusters_path: clusters_path,
help_path: help_path } }
%div{ class: [container_class, ('limit-container-width' unless fluid_layout)] }
%div{ class: [('limit-container-width' unless fluid_layout)] }
.serverless-function-details#js-serverless-function-details
.js-serverless-function-notice
......
- @no_container = true
- breadcrumb_title _("Details")
- @content_class = "limit-container-width" unless fluid_layout
......@@ -11,7 +10,7 @@
- signatures_path = project_signatures_path(@project, @project.default_branch)
.js-signature-container{ data: { 'signatures-path': signatures_path } }
%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
%div{ class: [("limit-container-width" unless fluid_layout)] }
= render "projects/last_push"
= render "home_panel"
......
- @no_container = true
- @sort ||= sort_value_recently_updated
- page_title s_('TagsPage|Tags')
= content_for :meta_tags do
= auto_discovery_link_tag(:atom, project_tags_url(@project, rss_url_options), title: "#{@project.name} tags")
.flex-list{ class: container_class }
.flex-list
.top-area.adjust
.nav-text.row-main-content
= s_('TagsPage|Tags give the ability to mark specific points in history as being important')
......
- @no_container = true
- add_to_breadcrumbs "Tags", project_tags_path(@project)
- breadcrumb_title @tag.name
- page_title "Edit", @tag.name, "Tags"
%div{ class: container_class }
.sub-header-block.no-bottom-space
.sub-header-block.no-bottom-space
.oneline
.title
Release notes for tag
%strong= @tag.name
= form_for(@release, method: :put, url: project_tag_release_path(@project, @tag.name),
= form_for(@release, method: :put, url: project_tag_release_path(@project, @tag.name),
html: { class: 'common-note-form release-form js-quick-submit' }) do |f|
= render layout: 'projects/md_preview', locals: { url: preview_markdown_path(@project), referenced_users: true } do
= render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here…"
......
- @no_container = true
- add_to_breadcrumbs s_('TagsPage|Tags'), project_tags_path(@project)
- breadcrumb_title @tag.name
- page_title @tag.name, s_('TagsPage|Tags')
%div{ class: container_class }
.top-area.multi-line.flex-wrap
.top-area.multi-line.flex-wrap
.nav-text
.title
%span.item-title.ref-name
......@@ -37,7 +35,7 @@
%pre.wrap
= strip_gpg_signature(@tag.message)
.append-bottom-default.prepend-top-default
.append-bottom-default.prepend-top-default
- if @release.description.present?
.description.md
= markdown_field(@release, :description)
......
- @no_container = true
- breadcrumb_title _("Repository")
- @content_class = "limit-container-width" unless fluid_layout
- signatures_path = namespace_project_signatures_path(namespace_id: @project.namespace.full_path, project_id: @project.path, id: @last_commit)
......@@ -9,6 +8,5 @@
.js-signature-container{ data: { 'signatures-path': signatures_path } }
%div{ class: [(container_class), ("limit-container-width" unless fluid_layout)] }
= render 'projects/last_push'
= render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_tree_path(@project, @id)
= render 'projects/last_push'
= render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_tree_path(@project, @id)
- @no_container = true
- add_to_breadcrumbs "Wiki", project_wiki_path(@project, :home)
- breadcrumb_title s_("Wiki|Pages")
- page_title s_("Wiki|Pages"), _("Wiki")
- sort_title = wiki_sort_title(params[:sort])
%div{ class: container_class }
.wiki-page-header.top-area.flex-column.flex-lg-row
.wiki-page-header.top-area.flex-column.flex-lg-row
.nav-text.flex-fill
%h2.wiki-page-title
......@@ -28,7 +26,7 @@
= sortable_item(s_("Wiki|Created date"), project_wikis_pages_path(@project, sort: ProjectWiki::CREATED_AT_ORDER), sort_title)
= wiki_sort_controls(@project, params[:sort], params[:direction])
%ul.wiki-pages-list.content-list
%ul.wiki-pages-list.content-list
= render @wiki_entries, context: 'pages'
= paginate @wiki_pages, theme: 'gitlab'
= paginate @wiki_pages, theme: 'gitlab'
- @hide_top_links = true
- @hide_breadcrumbs = true
- @no_container = true
- page_title @user.name
- page_description @user.bio
- header_title @user.name, user_path(@user)
- @no_container = true
= content_for :meta_tags do
= auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")
......
---
title: Make flash notifications sticky
merge_request: 30141
author:
type: changed
......@@ -25,14 +25,6 @@ describe('Flash', () => {
'<script>alert("a");</script>',
);
});
it('adds container classes when inside content wrapper', () => {
el.innerHTML = createFlashEl('testing', 'alert', true);
expect(el.querySelector('.flash-text').classList.contains('container-fluid')).toBeTruthy();
expect(el.querySelector('.flash-text').classList.contains('container-limited')).toBeTruthy();
});
});
describe('hideFlash', () => {
......@@ -171,9 +163,7 @@ describe('Flash', () => {
it('adds container classes when inside content-wrapper', () => {
flash('test');
expect(document.querySelector('.flash-text').className).toBe(
'flash-text container-fluid container-limited limit-container-width',
);
expect(document.querySelector('.flash-text').className).toBe('flash-text');
});
it('does not add container when outside of content-wrapper', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment