Commit dbac53aa authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'left-align-flash-messages' into 'master'

Align flash messages with left side of page content

## What does this MR do?

- align flash messages with left side of page content

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

- flash messages in general

## Why was this MR needed?

- flash messages didn't fit new design

## What are the relevant issue numbers?

closes  #18688

## Screenshots

# Before

![failed-login](/uploads/fb57d288fb7ae775cc0b8dbb0c7b6af2/failed-login.png)

---

![explore-blocked-account](/uploads/aa6d5ff74a4c9ed29ed361f2ffdf5c8e/explore-blocked-account.png)

---

![project-blocked-account](/uploads/4f36118f5438d661ea202b180bf9cb8d/project-blocked-account.png)

---

![issue-blocked-account](/uploads/68e87385ec30952797dc5c1f8f36216d/issue-blocked-account.png)

---

![inline-flash](/uploads/c0aba047f90d56001265e37ba9751e19/inline-flash.png)

---

# After

![failed-login](/uploads/d45d2d832a16af8e1854f1832e7b87a4/failed-login.png)

---

![blocked-account](/uploads/ddcd3d23569ded403700c01934df61df/blocked-account.png)

---

![project-blocked-account](/uploads/9e286c3b95f70cae1819930a09cc1307/project-blocked-account.png)

---

![issue-blocked-account](/uploads/4fde8e770eab0dae03b25e1402f171a1/issue-blocked-account.png)

---

The left padding will be fixed by  !4854

![inline-flash](/uploads/081b824b99d8ca65d67e9d15778a991d/inline-flash.png)

---

![flash-dismissed](/uploads/641e6227050de22e0df9a85ffca4ced1/flash-dismissed.png)

See merge request !4959
parents f7eceed6 c8d66594
...@@ -4,6 +4,7 @@ v 8.10.0 (unreleased) ...@@ -4,6 +4,7 @@ v 8.10.0 (unreleased)
- Fix commit builds API, return all builds for all pipelines for given commit. !4849 - Fix commit builds API, return all builds for all pipelines for given commit. !4849
- Replace Haml with Hamlit to make view rendering faster. !3666 - Replace Haml with Hamlit to make view rendering faster. !3666
- Wrap code blocks on Activies and Todos page. !4783 (winniehell) - Wrap code blocks on Activies and Todos page. !4783 (winniehell)
- Align flash messages with left side of page content !4959 (winniehell)
- Display last commit of deleted branch in push events !4699 (winniehell) - Display last commit of deleted branch in push events !4699 (winniehell)
- Add Sidekiq queue duration to transaction metrics. - Add Sidekiq queue duration to transaction metrics.
- Let Workhorse serve format-patch diffs - Let Workhorse serve format-patch diffs
......
...@@ -4,11 +4,19 @@ class @Flash ...@@ -4,11 +4,19 @@ class @Flash
@flash.html("") @flash.html("")
innerDiv = $('<div/>', innerDiv = $('<div/>',
class: "flash-#{type}", class: "flash-#{type}"
text: message
) )
innerDiv.appendTo(".flash-container") innerDiv.appendTo(".flash-container")
textDiv = $("<div/>",
class: "flash-text",
text: message
)
textDiv.appendTo(innerDiv)
if @flash.parent().hasClass('content-wrapper')
textDiv.addClass('container-fluid container-limited')
@flash.click -> $(@).fadeOut() @flash.click -> $(@).fadeOut()
@flash.show() @flash.show()
......
...@@ -16,4 +16,11 @@ ...@@ -16,4 +16,11 @@
@extend .alert-danger; @extend .alert-danger;
margin: 0; margin: 0;
} }
.flash-notice, .flash-alert {
.container-fluid.flash-text {
background: transparent;
}
}
} }
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