Commit 12a7e717 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch '25743-clean-up-css-for-project-alerts-and-flash-notifications' into 'master'

Resolve "Clean up CSS for project alerts and flash notifications."

## What does this MR do?

Cleans up CSS and html for alert stripes at the top of project pages.

## Screenshots

#### Before:

![Screen_Shot_2016-12-16_at_2.39.01_PM_copy](/uploads/6a700cf1e41557c00cdaef40f6a2a5b2/Screen_Shot_2016-12-16_at_2.39.01_PM_copy.png)

#### After:

![Screen_Shot_2016-12-16_at_2.39.23_PM_copy](/uploads/c849578becc3a634e8b15ab5340d86a2/Screen_Shot_2016-12-16_at_2.39.23_PM_copy.png)

## Are there points in the code the reviewer needs to double check?

In order to get multiple alerts to appear manually while testing, I simply added the following block to [app/views/shared/_no_password.html.haml](app/views/shared/_no_password.html.haml):

```

.no-password-message.alert.alert-warning.hidden-xs
  You won't be able to pull or push project code via #{gitlab_config.protocol.upcase} until you #{link_to 'set a password', edit_profile_password_path} on your account

  .pull-right
    = link_to "Don't show again", profile_path(user: {hide_no_password: true}), method: :put
    |
    = link_to 'Remind later', '#', class: 'hide-no-password-message'

.no-password-message.alert.alert-warning.hidden-xs
  You won't be able to pull or push project code via #{gitlab_config.protocol.upcase} until you #{link_to 'set a password', edit_profile_password_path} on your account

  .pull-right
    = link_to "Don't show again", profile_path(user: {hide_no_password: true}), method: :put
    |
    = link_to 'Remind later', '#', class: 'hide-no-password-message'

.no-password-message.alert.alert-warning.hidden-xs
  You won't be able to pull or push project code via #{gitlab_config.protocol.upcase} until you #{link_to 'set a password', edit_profile_password_path} on your account

  .pull-right
    = link_to "Don't show again", profile_path(user: {hide_no_password: true}), method: :put
    |
    = link_to 'Remind later', '#', class: 'hide-no-password-message'
```


## Why was this MR needed?

More alert-warning stripes are coming via the CI usage limits implementation in EE (https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/965), and these layout margins and colors were becoming messy.

## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] ~~[Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)~~
- [ ] ~~API support added~~
- Tests
  - [ ] ~~Added for this feature/bug~~
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #25743

See merge request !8151
parents 77bfad1f ac07ce64
......@@ -32,6 +32,41 @@ body {
}
}
.alert-wrapper {
margin-bottom: $gl-padding;
.alert {
margin-bottom: 0;
}
/* Stripe the background colors so that adjacent alert-warnings are distinct from one another */
.alert-warning {
transition: background-color 0.15s, border-color 0.15s;
background-color: lighten($gl-warning, 4%);
border-color: lighten($gl-warning, 4%);
}
.alert-warning + .alert-warning {
background-color: $gl-warning;
border-color: $gl-warning;
}
.alert-warning + .alert-warning + .alert-warning {
background-color: darken($gl-warning, 4%);
border-color: darken($gl-warning, 4%);
}
.alert-warning + .alert-warning + .alert-warning + .alert-warning {
background-color: darken($gl-warning, 8%);
border-color: darken($gl-warning, 8%);
}
.alert-warning:only-of-type {
background-color: $gl-warning;
border-color: $gl-warning;
}
}
/* The following prevents side effects related to iOS Safari's implementation of -webkit-overflow-scrolling: touch,
which is applied to the body by jquery.nicescroling plugin to force hardware acceleration for momentum scrolling. Side
......
......@@ -474,7 +474,6 @@ $project-option-descr-color: #54565b;
$project-breadcrumb-color: #999;
$project-private-forks-notice-odd: #2aa056;
$project-network-controls-color: #888;
$project-limit-message-bg: #f28d35;
/*
* Runners
......
......@@ -6,12 +6,6 @@
}
}
.no-ssh-key-message,
.project-limit-message {
background-color: $project-limit-message-bg;
margin-bottom: 0;
}
.new_project,
.edit-project {
......
......@@ -22,6 +22,7 @@
= render "layouts/nav/#{nav}"
.content-wrapper{ class: "#{layout_nav_class}" }
= yield :sub_nav
.alert-wrapper
= render "layouts/broadcast"
= render "layouts/flash"
= yield :flash_message
......
---
title: fix colors and margins for adjacent alert banners
merge_request: 8151
author:
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