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 { ...@@ -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, /* 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 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; ...@@ -474,7 +474,6 @@ $project-option-descr-color: #54565b;
$project-breadcrumb-color: #999; $project-breadcrumb-color: #999;
$project-private-forks-notice-odd: #2aa056; $project-private-forks-notice-odd: #2aa056;
$project-network-controls-color: #888; $project-network-controls-color: #888;
$project-limit-message-bg: #f28d35;
/* /*
* Runners * Runners
......
...@@ -6,12 +6,6 @@ ...@@ -6,12 +6,6 @@
} }
} }
.no-ssh-key-message,
.project-limit-message {
background-color: $project-limit-message-bg;
margin-bottom: 0;
}
.new_project, .new_project,
.edit-project { .edit-project {
......
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
= render "layouts/nav/#{nav}" = render "layouts/nav/#{nav}"
.content-wrapper{ class: "#{layout_nav_class}" } .content-wrapper{ class: "#{layout_nav_class}" }
= yield :sub_nav = yield :sub_nav
.alert-wrapper
= render "layouts/broadcast" = render "layouts/broadcast"
= render "layouts/flash" = render "layouts/flash"
= yield :flash_message = 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