diff --git a/app/assets/stylesheets/layout/_top_menu.sass b/app/assets/stylesheets/layout/_top_menu.sass index 6735c4aec2..7814ada6dd 100644 --- a/app/assets/stylesheets/layout/_top_menu.sass +++ b/app/assets/stylesheets/layout/_top_menu.sass @@ -30,7 +30,8 @@ $hamburger-right: -3px $hamburger-width: 50px $search-input-width: 200px -$search-input-width-expanded: 300px +$search-input-width-expanded: 20vw +$search-input-height: 30px %top-menu-hover-styles @include varprop(background, header-item-bg-hover-color) @@ -178,6 +179,9 @@ $search-input-width-expanded: 300px line-height: $header-height margin: 0 15px + .top-menu-search--back-button + display: none + .top-menu-search--button position: absolute right: 2px @@ -185,9 +189,8 @@ $search-input-width-expanded: 300px @include varprop(color, header-item-font-color) &:hover text-decoration: none - - .top-menu-search--button.-input-focused - color: $header-search-field-font-color + &.-input-focused + color: $header-search-field-font-color .top-menu-search--loading top: $header-height - 11px // display directly under ng-input field @@ -205,26 +208,25 @@ $search-input-width-expanded: 300px .ng-select-container background: transparent - border-width: 1px - border-style: solid @include varprop(border-color, header-item-font-color) - max-height: 32px - min-height: unset &:hover @include varprop(border-color, header-item-font-hover-color) .ng-arrow-wrapper - opacity: 0 + display: none .ng-clear-wrapper @include varprop(color, header-item-font-color) top: 1px + width: 30px + right: 25px + text-align: center .ng-input top: 0 input @include varprop(color, header-item-font-color) - height: 30px + height: $search-input-height cursor: text .ng-placeholder @@ -232,6 +234,7 @@ $search-input-width-expanded: 300px &.-expanded width: $search-input-width-expanded + min-width: 250px background: white border-radius: 4px color: $header-search-field-font-color diff --git a/app/assets/stylesheets/layout/_top_menu_mobile.sass b/app/assets/stylesheets/layout/_top_menu_mobile.sass index 78802c4cf1..47857e276d 100644 --- a/app/assets/stylesheets/layout/_top_menu_mobile.sass +++ b/app/assets/stylesheets/layout/_top_menu_mobile.sass @@ -26,12 +26,11 @@ // See docs/COPYRIGHT.rdoc for more details. //++ -@include breakpoint(778px down) - .top-menu-search--wrapper - display: none @include breakpoint(680px down) $hamburger-right: -3px $hamburger-width: 50px + $search-input-height-mobile: 36px + #logo background-color: transparent @@ -67,27 +66,63 @@ .nosidebar & left: 0px - #account-nav-right - > li - display: none + .top-menu-search + &.-mobile + width: 100vw + margin: 0 + padding-right: 15px - &.drop-down, - &:last-child - display: block + .top-menu-search--button + display: none + @include varprop(color, header-item-font-color) - &.last-child - > a - display: block - text-align: center + #global-search-input.-expanded + width: calc(100vw - 50px) + min-width: unset + position: unset - > ul - top: $header-height-mobile - width: 100vw - box-shadow: 1px 1px 4px #cccccc - border: solid 1px rgba(0, 0, 0, 0.2) + .scroll-host + max-height: calc(100vh - #{$header-height}) + + .ng-clear-wrapper + width: 40px + right: 0 + + .ng-select-bottom + height: calc(100vh - #{$header-height}) + overflow-y: auto + margin: 0 + + .ng-select-container + height: $search-input-height-mobile !important + border-radius: 4px - li - max-width: none + .ng-input input + height: 36px + + .top-menu-search--back-button + display: initial + width: 50px + text-align: center + @include varprop(color, header-item-font-color) + &:hover, &:focus, &:active + text-decoration: none + + .top-menu-search--loading + top: $header-height + 1px + + .top-menu-search--button.-input-focused + @include varprop(color, header-item-font-color) + + #account-nav-right + > li ul + top: $header-height-mobile + width: 100vw + box-shadow: 1px 1px 4px #cccccc + border: solid 1px rgba(0, 0, 0, 0.2) + + li + max-width: none #more-menu.drop-down--modules // 58 = Width of one menu item @@ -123,4 +158,3 @@ border-left: none !important .project-menu-autocomplete--results border-bottom: 2px solid $header-drop-down-border-color !important - diff --git a/app/views/search/_mini_form.html.erb b/app/views/search/_mini_form.html.erb index 2ba41be7d9..063f67e291 100644 --- a/app/views/search/_mini_form.html.erb +++ b/app/views/search/_mini_form.html.erb @@ -26,7 +26,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. See docs/COPYRIGHT.rdoc for more details. ++#%> -