Skip to content

[72657] Make banners smaller so they do not block important content #22271

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HDinger merged 3 commits into from
Mar 19, 2026
Merged

[72657] Make banners smaller so they do not block important content #22271

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fcc74a7
Make banners smaller so that they do not block important content
HDinger Mar 9, 2026
b925c61
Update DragHandle to match new specification
HDinger Mar 12, 2026
46d79f6
Adapt widths after alignment with UX team
HDinger Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Gemfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -433,4 +433,4 @@ end

gem "openproject-octicons", "~>19.32.0"
gem "openproject-octicons_helper", "~>19.32.0"
gem "openproject-primer_view_components", "~>0.82.0"
gem "openproject-primer_view_components", "~>0.82.1"
6 changes: 3 additions & 3 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -895,7 +895,7 @@ GEM
actionview
openproject-octicons (= 19.32.1)
railties
openproject-primer_view_components (0.82.0)
openproject-primer_view_components (0.82.1)
actionview (>= 7.2.0)
activesupport (>= 7.2.0)
openproject-octicons (>= 19.30.1)
Expand Down Expand Up @@ -1679,7 +1679,7 @@ DEPENDENCIES
openproject-octicons (~> 19.32.0)
openproject-octicons_helper (~> 19.32.0)
openproject-openid_connect!
openproject-primer_view_components (~> 0.82.0)
openproject-primer_view_components (~> 0.82.1)
openproject-recaptcha!
openproject-reporting!
openproject-storages!
Expand Down Expand Up @@ -2059,7 +2059,7 @@ CHECKSUMS
openproject-octicons (19.32.1) sha256=32253f3256ad4e1aec36442558ce140623c01e5241d9b90f6eb6d317f462781e
openproject-octicons_helper (19.32.1) sha256=7676059927ae940170fb13d62f88b885985a3f0d483e1bb246475afcffd90f8f
openproject-openid_connect (1.0.0)
openproject-primer_view_components (0.82.0) sha256=c3d61578d26e6fa6e4bfaf520345de01cc09b487c9841de78494017aadd65ae2
openproject-primer_view_components (0.82.1) sha256=99d9a8efae6dd2d9976bfbb17f15d8423099412537392ca596ea3ca17b3dbfdc
openproject-recaptcha (1.0.0)
openproject-reporting (1.0.0)
openproject-storages (1.0.0)
Expand Down
2 changes: 1 addition & 1 deletion app/views/layouts/base.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ See COPYRIGHT and LICENSE files for more details.
</div>
</noscript>
<opce-toasts-container></opce-toasts-container>
<%= render partial: "layouts/flashes" %>
<opce-modal-overlay></opce-modal-overlay>
<live-region></live-region>
<span id="open-blank-target-link-description" class="sr-only"><%= I18n.t("open_link_in_a_new_tab") %></span>
Expand Down Expand Up @@ -132,7 +133,6 @@ See COPYRIGHT and LICENSE files for more details.
<div class="content-overlay"
data-action="click->menus--main-toggle#toggleNavigation"></div>
<%= content_tag :main, id: "content-wrapper", class: initial_classes, data: stimulus_content_data do %>
<%= render partial: "layouts/flashes" %>
<% if show_onboarding_modal? %>
<section data-augmented-model-wrapper
data-modal-initialize-now="true"
Expand Down
2 changes: 1 addition & 1 deletion app/views/layouts/only_logo.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,14 @@ See COPYRIGHT and LICENSE files for more details.
<%= content_tag :body,
class: body_css_classes,
data: body_data_attributes(local_assigns) do %>
<%= render partial: "layouts/flashes" %>
<div id="wrapper">
<header class="op-app-header<%= " op-app-header_development" if OpenProject::Configuration.development_highlight_enabled? %>">
<div class="op-app-header--center op-logo">
<%= link_to(I18n.t("label_home"), home_url, class: "op-logo--link") %>
</div>
</header>
<main id="content-wrapper">
<%= render partial: "layouts/flashes" %>
<%= yield %>
</main>
</div>
Expand Down
28 changes: 14 additions & 14 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,12 +111,12 @@
"@ng-select/ng-select": "^20.1.0",
"@ngneat/content-loader": "^7.0.0",
"@openproject/octicons-angular": "^19.32.0",
"@openproject/primer-view-components": "^0.82.0",
"@openproject/primer-view-components": "^0.82.1",
"@openproject/reactivestates": "^3.0.1",
"@primer/css": "^22.1.0",
"@primer/live-region-element": "^0.8.0",
"@primer/primitives": "^11.3.2",
"@primer/view-components": "npm:@openproject/primer-view-components@^0.82.0",
"@primer/view-components": "npm:@openproject/primer-view-components@^0.82.1",
"@rails/request.js": "^0.0.13",
"@stimulus-components/auto-submit": "^6.0.0",
"@stimulus-components/reveal": "^5.0.0",
Expand Down
17 changes: 3 additions & 14 deletions frontend/src/global_styles/content/_toast.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@

$nm-font-size: var(--body-font-size)
$nm-border-radius: rem-calc(2px)
$nm-box-padding: rem-calc(10px 35px 10px 35px)
$nm-toaster-width: rem-calc(550)
$nm-box-padding: rem-calc(10px 40px 10px 40px)

$nm-color-success-border: var(--borderColor-success-muted)
$nm-color-success-icon: var(--fgColor-success)
Expand Down Expand Up @@ -100,14 +99,13 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
left: $left
font-size: $size



.op-toast
@include spot-z-index("toast")

display: flex
box-shadow: rem-calc(1px 2px 3px) rgba(0, 0, 0, 0.2)
border: rem-calc(1px) solid $nm-color-border
border-radius: var(--borderRadius-medium)
font-size: $nm-font-size
word-wrap: break-word
position: relative
Expand Down Expand Up @@ -217,16 +215,7 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
color: $nm-color-info-icon

.op-toast--wrapper
position: absolute
max-width: $nm-toaster-width
margin: 0 auto
left: 10%
right: 10%

.op-toast--wrapper
// Higher than loading indicator and modal wrapper!
z-index: 10000
top: 4rem
@include banner-styles

.op-toast--casing
position: relative
Expand Down
19 changes: 19 additions & 0 deletions frontend/src/global_styles/openproject/_mixins.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,25 @@
@mixin widget-box--hover-style
box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.1)

@mixin banner-styles
position: absolute
max-width: 33%
min-width: 33%
margin: 0 auto
left: 0
right: 0
// Higher than loading indicator and modal wrapper!
z-index: 10000
top: 4rem

@media screen and (max-width: $breakpoint-md)
max-width: 50%
min-width: 50%

@media screen and (max-width: $breakpoint-sm)
max-width: calc(100% - 2rem)
min-width: calc(100% - 2rem)

// These mixins are necessary so that other classes can inherit the styles.
// In future Sass versions a doubled inheritance like @extend classA.classB will not work any more.
// See https://github.com/sass/sass/issues/1599
Expand Down
9 changes: 1 addition & 8 deletions frontend/src/global_styles/primer/_flash.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,9 @@
// See COPYRIGHT and LICENSE files for more details.
//++

$op-primer-flash-toaster-width: 80%

.op-primer-flash
@include banner-styles
z-index: 599
Copy link
Contributor

@bsatarnejad bsatarnejad Mar 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you keep the z-index?

Copy link
Contributor Author

@HDinger HDinger Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will overwrite the one from the mixin. I kept it, because the number is so oddly specific that I assumed it was put to that for a reason. 🤷‍♂️

position: absolute
max-width: $op-primer-flash-toaster-width
margin: 0 auto
left: 10%
right: 10%
top: 1rem
background-color: var(--body-background)

// Align multiple toasts
Expand Down
6 changes: 1 addition & 5 deletions modules/backlogs/app/components/backlogs/story_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,8 @@ See COPYRIGHT and LICENSE files for more details.
<%=
render(
Primer::OpenProject::DragHandle.new(
role: "button",
classes: "op-backlogs-story--drag_handle_button",
tabindex: 0,
aria: {
label: t(".label_drag_story", name: story.subject)
}
label: t(".label_drag_story", name: story.subject)
)
)
%>
Expand Down
Loading