Merge pull request #20744 from nextcloud/fix/public-design

Fix public layout header title & description

apps/files_sharing/css/public.scss

@@ -186,22 +186,6 @@ thead {
 	text-align: left;
 }
 
-/* Needed to ellipsize long header text on share page */
-#body-login #header-left,
-#body-login .header-left {
-	overflow: hidden;
-}
-
-#header .header-shared-by  {
-	color: var(--color-primary-text);
-	position: relative;
-	font-weight: 300;
-	font-size: 11px;
-	line-height: 11px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
 #note-content {
 	padding: 5px;
 	display:inline-block;

core/css/header.scss

@@ -64,6 +64,7 @@
 	box-sizing: border-box;
 	opacity: 1;
 	align-items: center;
+	display: flex;
 	flex-wrap: wrap;
 	overflow: hidden;
 
@@ -211,9 +212,9 @@
 	}
 
 	#header-left, .header-left {
-		flex: 0 0;
+		flex: 1 0;
-		flex-grow: 1;
 		white-space: nowrap;
+		min-width: 0;
 	}
 
 	#header-right, .header-right {
@@ -269,6 +270,7 @@
 	}
 }
 
+/* TODO: move into minimal css file for public shared template */
 /* only used for public share pages now as we have the app icons when logged in */
 .header-appname {
 	color: var(--color-primary-text);
@@ -279,6 +281,18 @@
 	padding-right: 5px;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	// Take full width to push the header-shared-by bellow (if any)
+	flex: 1 1 100%;
+}
+
+.header-shared-by  {
+	color: var(--color-primary-text);
+	position: relative;
+	font-weight: 300;
+	font-size: 11px;
+	line-height: 11px;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 /* do not show menu toggle on public share links as there is no menu */

core/templates/layout.public.php

@@ -39,17 +39,17 @@
 			<span id="nextcloud">
 				<div class="logo logo-icon svg"></div>
 				<h1 class="header-appname">
-					<?php if (isset($template)) {
+					<?php if (isset($template) && $template->getHeaderTitle() !== '') {
-			p($template->getHeaderTitle());
+						p($template->getHeaderTitle());
-		} else {
+					} else {
-			p($theme->getName());
+						p($theme->getName());
-		} ?>
+					} ?>
 				</h1>
+				<?php if (isset($template) && $template->getHeaderDetails() !== '') { ?>
 				<div class="header-shared-by">
-					<?php if (isset($template)) {
+					<?php p($template->getHeaderDetails()); ?>
-			p($template->getHeaderDetails());
-		} ?>
 				</div>
+				<?php } ?>
 			</span>
 		</div>