diff --git a/core/css/header.scss b/core/css/header.scss index d6fe3ccf98..ff34f1db35 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -99,7 +99,7 @@ width: 0; position: absolute; pointer-events: none; - right: 13px; + right: 12px; } } .logo { @@ -257,21 +257,6 @@ nav { } } -/* arrow look */ -#expanddiv:after { - bottom: 100%; - border: solid transparent; - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-color: transparent; - border-bottom-color: $color-main-background; - border-width: 10px; - margin-left: -10px; -} - #navigation { box-sizing: border-box; * { @@ -361,16 +346,10 @@ nav { margin-right: 13px; flex: 0 0 auto; - .icon-loading-small-dark { - display: inline-block; - margin-bottom: -3px; - margin-right: 6px; - background-size: 16px 16px; - } - /* User menu on the right */ #expand { opacity: 1; /* override icon opacity */ + img { opacity: .7; margin-bottom: -2px; @@ -379,8 +358,8 @@ nav { &:focus, &:active { color: $color-primary-text; - img, - #expandDisplayName { + + img, #expandDisplayName { opacity: 1; } } @@ -390,6 +369,7 @@ nav { cursor: pointer; height: 32px; width: 32px; + img { opacity: 1; cursor: pointer; @@ -403,32 +383,30 @@ nav { #expandDisplayName { padding: 8px; opacity: .6; + + /* full opacity for gear icon if active */ + #body-settings & { + opacity: 1; + } + } + + /* show triangle below user menu if active */ + #body-settings &:before { + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border: 0 solid transparent; + border-bottom-color: $color-main-background; + border-width: 10px; + bottom: 0; + z-index: 100; + display: block; } } } -/* full opacity for gear icon if active */ -#body-settings #expandDisplayName { - opacity: 1; -} - -/* show triangle below user menu if active */ -#body-settings #expand:before { - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border: 0 solid transparent; - border-bottom-color: $color-main-background; - border-width: 10px; - transform: translateX(-50%); - left: 26px; - bottom: 0; - z-index: 100; - display: block; -} - #expanddiv { a { display: inline-flex; @@ -438,6 +416,12 @@ nav { padding: 12px; box-sizing: border-box; opacity: .7; + white-space: nowrap; + + .icon-loading-small { + margin-right: 9px; + background-size: 16px 16px; + } img { margin-right: 9px; height: 16px; @@ -477,7 +461,7 @@ nav { opacity: .6; } } - .app-loading .icon-loading-small-dark { + .app-loading .icon-loading-small { top: 12px; width: 20px; height: 20px; diff --git a/core/css/mobile.scss b/core/css/mobile.scss index 6f1583cb77..64e563ce41 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -131,3 +131,36 @@ table.multiselect thead { /* end of media query */ } + +@media only screen and (max-width: 480px) { + #header .menu { + max-width: calc(100vw - 26px); + position: fixed; + right: 13px; + top: 45px; + &::after { + display: none !important; + } + } + /* Arrow directly child of menutoggle */ + #header .header-right > div { + &.openedMenu{ + &::after { + display: block; + } + } + &::after { + border: 10px solid transparent; + border-bottom-color: $color-main-background; + bottom: 0; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + right: 13px; + z-index: 2001; + display: none; + } + } +} diff --git a/core/js/js.js b/core/js/js.js index fa92508ff7..89f6f465ea 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -681,6 +681,7 @@ var OCP = {}, * @returns {undefined} */ registerMenu: function($toggle, $menuEl, toggle) { + console.trace(); var self = this; $menuEl.addClass('menu'); $toggle.on('click.menu', function(event) { @@ -696,6 +697,9 @@ var OCP = {}, // close it self.hideMenus(); } + + $(event.currentTarget).addClass('openedMenu'); + $menuEl.slideToggle(OC.menuSpeed, toggle); OC._currentMenu = $menuEl; OC._currentMenuToggle = $toggle; @@ -730,6 +734,7 @@ var OCP = {}, } }); } + $('.openedMenu').removeClass('openedMenu'); OC._currentMenu = null; OC._currentMenuToggle = null; }, @@ -1480,7 +1485,7 @@ function initCore() { if(event.which === 1 && !event.ctrlKey && !event.metaKey) { $page.find('img').remove(); $page.find('div').remove(); // prevent odd double-clicks - $page.prepend($('
').addClass('icon-loading-small-dark')); + $page.prepend($('
').addClass('icon-loading-small')); } else { // Close navigation when opening menu entry in // a new tab @@ -1702,7 +1707,7 @@ OC.PasswordConfirmation = { requiresPasswordConfirmation: function() { var serverTimeDiff = this.pageLoadTime - (nc_pageLoad * 1000); var timeSinceLogin = moment.now() - (serverTimeDiff + (nc_lastLogin * 1000)); - + // if timeSinceLogin > 30 minutes and user backend allows password confirmation return (backendAllowsPasswordConfirmation && timeSinceLogin > 30 * 60 * 1000); },