From ad633afdec35b4f972706b71e50fad652f65d112 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 19 Jul 2017 08:38:20 +0100 Subject: [PATCH] transform the position correctly position the arrow fix scss lint --- app/assets/javascripts/main.js | 16 +++++++-- app/assets/stylesheets/new_sidebar.scss | 43 ++++++++++++++----------- 2 files changed, 38 insertions(+), 21 deletions(-) diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 9364d19def1..95c0082e8dd 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -348,6 +348,9 @@ $(function () { $(document).trigger('init.scrolling-tabs'); + const style = document.createElement("style"); + document.head.appendChild(style); + $('.sidebar-top-level-items > li:not(.active)').on('mouseover', (e) => { const windowHeight = window.innerHeight; const $this = e.currentTarget; @@ -355,13 +358,20 @@ $(function () { if ($subitems.length) { const boundingRect = $this.getBoundingClientRect(); - const bottomOverflow = windowHeight - (boundingRect.top + $subitems.outerHeight()); const top = bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top; $subitems.css({ - top, + transform: `translate3d(0, ${top}px, 0)`, }); + + style.sheet.insertRule(`.sidebar-sub-level-items::before { transform: translate3d(0, ${boundingRect.top - top}px, 0); }`, 0); } - }).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide()); + }).on('mouseout', (e) => { + $('.sidebar-sub-level-items', e.currentTarget).hide(); + + if (style.sheet.rules.length) { + style.sheet.deleteRule(0); + } + }); }); diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss index 527d47d5353..5326ce627f5 100644 --- a/app/assets/stylesheets/new_sidebar.scss +++ b/app/assets/stylesheets/new_sidebar.scss @@ -98,7 +98,6 @@ $new-sidebar-width: 220px; } li { - position: relative; white-space: nowrap; a { @@ -127,20 +126,6 @@ $new-sidebar-width: 220px; padding-bottom: 8px; > li { - &:not(.active) { - @media (min-width: $screen-sm-min) { - a { - padding: 11px 16px 11px 24px; - - &:hover, - &:focus { - background: transparent; - font-weight: 600; - } - } - } - } - a { padding: 8px 16px 8px 24px; @@ -170,13 +155,14 @@ $new-sidebar-width: 220px; .sidebar-sub-level-items { @media (min-width: $screen-sm-min) { position: fixed; + top: 0; left: 220px; width: 150px; margin-left: -1px; padding-bottom: 0; - background-color: #fff; - box-shadow: 2px 1px 3px rgba(0,0,0,.1); - border: 1px solid #e5e5e5; + background-color: $white-light; + box-shadow: 2px 1px 3px $dropdown-shadow-color; + border: 1px solid $dropdown-border-color; border-left: 0; &::before { @@ -189,6 +175,27 @@ $new-sidebar-width: 220px; border-style: solid; border-width: 21px 12px; border-color: transparent transparent transparent $hover-background; + pointer-events: none; + } + + &::after { + content: ""; + position: absolute; + top: 44px; + left: -20px; + right: 0; + bottom: 0; + z-index: -1; + } + + a { + padding: 11px 16px 11px 24px; + + &:hover, + &:focus { + background: transparent; + font-weight: 600; + } } } }