Clean scss, use proper loading icon and menu position on narrow screens
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
c3016d3291
commit
67699f9506
|
|
@ -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,17 +383,15 @@ nav {
|
|||
#expandDisplayName {
|
||||
padding: 8px;
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* full opacity for gear icon if active */
|
||||
#body-settings #expandDisplayName {
|
||||
#body-settings & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* show triangle below user menu if active */
|
||||
#body-settings #expand:before {
|
||||
#body-settings &:before {
|
||||
content: ' ';
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
|
@ -422,12 +400,12 @@ nav {
|
|||
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 {
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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($('<div/>').addClass('icon-loading-small-dark'));
|
||||
$page.prepend($('<div/>').addClass('icon-loading-small'));
|
||||
} else {
|
||||
// Close navigation when opening menu entry in
|
||||
// a new tab
|
||||
|
|
|
|||
Loading…
Reference in New Issue