Clean scss, use proper loading icon and menu position on narrow screens

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

3 files changed, 72 insertions, 50 deletions

diff --git a/core/css/header.scss b/core/css/header.scss
index d6fe3ccf983..ff34f1db357 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,30 +383,28 @@ nav {
 		#expandDisplayName {
 			padding: 8px;
 			opacity: .6;
-		}
-	}
-}
 
-/* full opacity for gear icon if active */
-#body-settings #expandDisplayName {
-	opacity: 1;
-}
+			/* full opacity for gear icon if active */
+			#body-settings & {
+				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;
+		/* 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;
+		}
+	}
 }
 
 #expanddiv {
@@ -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 6f1583cb77a..64e563ce411 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 fa92508ff7a..89f6f465ead 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($('<div/>').addClass('icon-loading-small-dark'));
+				$page.prepend($('<div/>').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);
 	},