Fix header calculation and better public design

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

apps/files_sharing/css/public.scss

@@ -160,17 +160,26 @@ thead {
 }
 
 #header .header-shared-by  {
-	display: inline-block;
 	color: var(--color-primary-text);
 	position: relative;
-	top: -10px;
 	font-weight: 300;
 	font-size: 11px;
 	opacity: .57;
-	margin-top: 10px;
 }
 
 #note {
 	text-align: center;
 	padding: 10px;
 }
+
+
+// hide the primary on public share on mobile
+@media only screen and (max-width: 768px) {
+	#body-public {
+		.header-right {
+			#header-primary-action {
+				display: none;
+			}
+		}
+	}
+}

core/css/header.scss

@@ -56,10 +56,15 @@
 
 /* LOGO and APP NAME -------------------------------------------------------- */
 #nextcloud {
-	padding: 8px 12px;
+	padding: 7px 12px;
+	padding-left: 86px; // logo width + 2* pa
+	position: relative;
 	height: 100%;
 	box-sizing: border-box;
 	opacity: 1;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
 	&:focus {
 		opacity: .75;
 	}
@@ -107,12 +112,10 @@
 		background-repeat: no-repeat;
 		background-size: contain;
 		background-position: center;
-		width: 256px;
+		width: 62px;
-		height: 128px;
+		height: 100%;
-		margin: 0 auto;
+		position: absolute;
-		&.logo-icon {
+		left: 12px;
-			width: 62px;
-			height: 34px;
 
 		img {
 			opacity: 0;
@@ -121,10 +124,8 @@
 		}
 	}
 
-	}
 	.header-appname-container {
 		display: none;
-		padding-top: 22px;
 		padding-right: 10px;
 		flex-shrink: 0;
 	}
@@ -153,7 +154,6 @@
 
 	#header-right, .header-right {
 		justify-content: flex-end;
-		flex-basis: 210px;
 		flex-shrink: 1;
 	}
 
@@ -207,15 +207,12 @@
 
 /* show appname next to logo */
 .header-appname {
-	display: inline-block;
-	position: relative;
 	color: var(--color-primary-text);
 	font-size: 16px;
 	font-weight: 300;
 	margin: 0;
-	margin-top: -26px;
+	padding: 0;
-	padding: 7px 0 7px 5px;
+	padding-right: 5px;
-	vertical-align: middle;
 }
 
 /* do not show menu toggle on public share links as there is no menu */

core/js/js.js

@@ -1566,7 +1566,7 @@ function initCore() {
 
 	var resizeMenu = function() {
 		var appList = $('#appmenu li');
-		var headerWidth = $('.header-left').width() - $('#nextcloud').width();
+		var headerWidth = $('.header-left').outerWidth() - $('#nextcloud').outerWidth();
 		var usePercentualAppMenuLimit = 0.33;
 		var minAppsDesktop = 8;
 		var availableWidth = headerWidth - $(appList).width();