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:
parent
c3016d3291
commit
67699f9506
|
@ -99,7 +99,7 @@
|
||||||
width: 0;
|
width: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
right: 13px;
|
right: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.logo {
|
.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 {
|
#navigation {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
* {
|
* {
|
||||||
|
@ -361,16 +346,10 @@ nav {
|
||||||
margin-right: 13px;
|
margin-right: 13px;
|
||||||
flex: 0 0 auto;
|
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 */
|
/* User menu on the right */
|
||||||
#expand {
|
#expand {
|
||||||
opacity: 1; /* override icon opacity */
|
opacity: 1; /* override icon opacity */
|
||||||
|
|
||||||
img {
|
img {
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
margin-bottom: -2px;
|
margin-bottom: -2px;
|
||||||
|
@ -379,8 +358,8 @@ nav {
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
color: $color-primary-text;
|
color: $color-primary-text;
|
||||||
img,
|
|
||||||
#expandDisplayName {
|
img, #expandDisplayName {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -390,6 +369,7 @@ nav {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -403,32 +383,30 @@ nav {
|
||||||
#expandDisplayName {
|
#expandDisplayName {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
opacity: .6;
|
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 {
|
#expanddiv {
|
||||||
a {
|
a {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
@ -438,6 +416,12 @@ nav {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
.icon-loading-small {
|
||||||
|
margin-right: 9px;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
}
|
||||||
img {
|
img {
|
||||||
margin-right: 9px;
|
margin-right: 9px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
|
@ -477,7 +461,7 @@ nav {
|
||||||
opacity: .6;
|
opacity: .6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.app-loading .icon-loading-small-dark {
|
.app-loading .icon-loading-small {
|
||||||
top: 12px;
|
top: 12px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
@ -131,3 +131,36 @@ table.multiselect thead {
|
||||||
|
|
||||||
/* end of media query */
|
/* 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}
|
* @returns {undefined}
|
||||||
*/
|
*/
|
||||||
registerMenu: function($toggle, $menuEl, toggle) {
|
registerMenu: function($toggle, $menuEl, toggle) {
|
||||||
|
console.trace();
|
||||||
var self = this;
|
var self = this;
|
||||||
$menuEl.addClass('menu');
|
$menuEl.addClass('menu');
|
||||||
$toggle.on('click.menu', function(event) {
|
$toggle.on('click.menu', function(event) {
|
||||||
|
@ -696,6 +697,9 @@ var OCP = {},
|
||||||
// close it
|
// close it
|
||||||
self.hideMenus();
|
self.hideMenus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$(event.currentTarget).addClass('openedMenu');
|
||||||
|
|
||||||
$menuEl.slideToggle(OC.menuSpeed, toggle);
|
$menuEl.slideToggle(OC.menuSpeed, toggle);
|
||||||
OC._currentMenu = $menuEl;
|
OC._currentMenu = $menuEl;
|
||||||
OC._currentMenuToggle = $toggle;
|
OC._currentMenuToggle = $toggle;
|
||||||
|
@ -730,6 +734,7 @@ var OCP = {},
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
$('.openedMenu').removeClass('openedMenu');
|
||||||
OC._currentMenu = null;
|
OC._currentMenu = null;
|
||||||
OC._currentMenuToggle = null;
|
OC._currentMenuToggle = null;
|
||||||
},
|
},
|
||||||
|
@ -1480,7 +1485,7 @@ function initCore() {
|
||||||
if(event.which === 1 && !event.ctrlKey && !event.metaKey) {
|
if(event.which === 1 && !event.ctrlKey && !event.metaKey) {
|
||||||
$page.find('img').remove();
|
$page.find('img').remove();
|
||||||
$page.find('div').remove(); // prevent odd double-clicks
|
$page.find('div').remove(); // prevent odd double-clicks
|
||||||
$page.prepend($('<div/>').addClass('icon-loading-small-dark'));
|
$page.prepend($('<div/>').addClass('icon-loading-small'));
|
||||||
} else {
|
} else {
|
||||||
// Close navigation when opening menu entry in
|
// Close navigation when opening menu entry in
|
||||||
// a new tab
|
// a new tab
|
||||||
|
|
Loading…
Reference in New Issue