From 1dad31168bfc5a0f62e27af8e8e2d6d613b4244e Mon Sep 17 00:00:00 2001 From: Phil-Ah Date: Tue, 8 Mar 2022 07:56:42 +0100 Subject: [PATCH] move triangle on desktop and up to the richt position (#1971) The triangle above the list of notifications needs to point at the bell to communicate the relation between the two. Co-authored-by: Eduard Heimbuch --- .../changelog/place_triangle_of_notification_area.yaml | 2 ++ scm-ui/ui-webapp/src/components/HeaderDropDown.tsx | 9 ++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 gradle/changelog/place_triangle_of_notification_area.yaml diff --git a/gradle/changelog/place_triangle_of_notification_area.yaml b/gradle/changelog/place_triangle_of_notification_area.yaml new file mode 100644 index 0000000000..60661de948 --- /dev/null +++ b/gradle/changelog/place_triangle_of_notification_area.yaml @@ -0,0 +1,2 @@ +- type: fixed + description: Triangle of notifications area points towards bell ([#1971](https://github.com/scm-manager/scm-manager/pull/1971)) diff --git a/scm-ui/ui-webapp/src/components/HeaderDropDown.tsx b/scm-ui/ui-webapp/src/components/HeaderDropDown.tsx index 5cd02bd984..d4ab2a4ec2 100644 --- a/scm-ui/ui-webapp/src/components/HeaderDropDown.tsx +++ b/scm-ui/ui-webapp/src/components/HeaderDropDown.tsx @@ -71,14 +71,17 @@ const DropDownMenu = styled.div` top: -7px; // top padding of dropdown-menu + border-spacing transform-origin: center; transform: rotate(135deg); - left: 4.6rem; - @media screen and (min-width: ${devices.mobile.width + 1}px) { + @media screen and (max-width: ${devices.mobile.width}px) { + left: 4.6rem; + } + + @media screen and (min-width: ${devices.mobile.width + 1}px) and (max-width: ${devices.desktop.width - 1}px) { left: 1.3rem; } @media screen and (min-width: ${devices.desktop.width}px) { - right: 1.3rem; + right: 1.375rem; } ${props =>