Merge pull request #6806 from marc1706/ticket/17501

[ticket/17501] Adjust navbar and breadcrumbs, improve usability

phpBB/docs/events.md

@@ -1746,29 +1746,33 @@ overall_header_body_before
 overall_header_breadcrumb_append
 ===
 * Locations:
-    + styles/prosilver/template/navbar_header.html
+    + styles/prosilver/template/breadcrumbs.html
 * Since: 3.1.0-a1
+* Changed: 4.0.0-a1 Moved to breadcrumbs.html
 * Purpose: Add links to the list of breadcrumbs in the header
 
 overall_header_breadcrumb_prepend
 ===
 * Locations:
-    + styles/prosilver/template/navbar_header.html
+    + styles/prosilver/template/breadcrumbs.html
 * Since: 3.1.0-RC3
+* Changed: 4.0.0-a1 Moved to breadcrumbs.html
 * Purpose: Add links to the list of breadcrumbs in the header (after site-home, but before board-index)
 
 overall_header_breadcrumbs_after
 ===
 * Locations:
-    + styles/prosilver/template/navbar_header.html
+    + styles/prosilver/template/breadcrumbs.html
 * Since: 3.1.0-RC3
+* Changed: 4.0.0-a1 Moved to breadcrumbs.html
 * Purpose: Add content after the breadcrumbs (outside of the breadcrumbs container)
 
 overall_header_breadcrumbs_before
 ===
 * Locations:
-    + styles/prosilver/template/navbar_header.html
+    + styles/prosilver/template/breadcrumbs.html
 * Since: 3.1.0-RC3
+* Changed: 4.0.0-a1 Moved to breadcrumbs.html
 * Purpose: Add content before the breadcrumbs (outside of the breadcrumbs container)
 
 overall_header_content_before
@@ -1830,15 +1834,17 @@ overall_header_navigation_prepend
 overall_header_navlink_append
 ===
 * Locations:
-    + styles/prosilver/template/navbar_header.html
+    + styles/prosilver/template/breadcrumbs.html
 * Since: 3.1.0-b3
+* Changed: 4.0.0-a1 Moved to breadcrumbs.html
 * Purpose: Add content after each individual navlink (breadcrumb)
 
 overall_header_navlink_prepend
 ===
 * Locations:
-    + styles/prosilver/template/navbar_header.html
+    + styles/prosilver/template/breadcrumbs.html
 * Since: 3.1.0-b3
+* Changed: 4.0.0-a1 Moved to breadcrumbs.html
 * Purpose: Add content before each individual navlink (breadcrumb)
 
 overall_header_page_body_before

phpBB/styles/prosilver/template/breadcrumbs.html

@@ -0,0 +1,53 @@
+<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar">
+	{% set MICRODATA = 'itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope' %}
+	{% set navlink_position = 1 %}
+
+	{% EVENT overall_header_breadcrumbs_before %}
+
+	<li class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
+		{% if U_SITE_HOME %}
+		<span class="crumb" {{ MICRODATA }}>
+						{% apply spaceless %}
+						<a itemprop="item" href="{{ U_SITE_HOME }}" data-navbar-reference="home">
+							{{ Icon('font', 'home', '', true, 'fas o-icon-baseline') }}
+							<span itemprop="name">{{ L_SITE_HOME }}</span>
+						</a>
+						{% endapply %}
+						<meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}">
+					</span>
+		{% endif %}
+
+		{% EVENT overall_header_breadcrumb_prepend %}
+
+		<span class="crumb" {{ MICRODATA }}>
+					{% apply spaceless %}
+					<a itemprop="item" href="{{ U_INDEX }}" accesskey="h" data-navbar-reference="index">
+						{% if not U_SITE_HOME %}{{ Icon('font', 'home', '', true, 'fas o-icon-baseline') }}{% endif %}
+						<span itemprop="name">{{ L_INDEX }}</span>
+					</a>
+					{% endapply %}
+					<meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}">
+				</span>
+
+		{% for navlink in navlinks %}
+		{% set NAVLINK_NAME = navlink.BREADCRUMB_NAME | default(navlink.FORUM_NAME) %}
+		{% set NAVLINK_LINK = navlink.U_BREADCRUMB | default(navlink.U_VIEW_FORUM) %}
+
+		{% EVENT overall_header_navlink_prepend %}
+		<span class="crumb" {{ MICRODATA }}{% if navlink.MICRODATA %} {{ navlink.MICRODATA }}{% endif %}>
+						{% apply spaceless %}
+						<a itemprop="item" href="{{ NAVLINK_LINK }}">
+							<span itemprop="name">{{ NAVLINK_NAME }}</span>
+						</a>
+						{% endapply %}
+						<meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}">
+					</span>
+		{% EVENT overall_header_navlink_append %}
+		{% endfor %}
+
+		{% EVENT overall_header_breadcrumb_append %}
+
+	</li>
+
+	{% EVENT overall_header_breadcrumbs_after %}
+</ul>

phpBB/styles/prosilver/template/faq_body.html

@@ -44,7 +44,7 @@
 <!-- END faq_block -->
 
 <div class="to-top-button">
-	<a href="#faqlinks">
+	<a href="#faqlinks" title="{{ lang('BACK_TO_TOP') }}">
 		{{ Icon('font', 'chevron-up', '', false) }}
 	</a>
 </div>

phpBB/styles/prosilver/template/navbar_header.html

@@ -203,68 +203,5 @@
 
 			{% endif %}
 		</ul>
-
-		<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar">
-			{% set MICRODATA = 'itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope' %}
-			{% set navlink_position = 1 %}
-
-			{% EVENT overall_header_breadcrumbs_before %}
-
-			<li class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
-				{% if U_SITE_HOME %}
-					<span class="crumb" {{ MICRODATA }}>
-						{% apply spaceless %}
-						<a itemprop="item" href="{{ U_SITE_HOME }}" data-navbar-reference="home">
-							{{ Icon('font', 'home', '', true, 'fas o-icon-baseline') }}
-							<span itemprop="name">{{ L_SITE_HOME }}</span>
-						</a>
-						{% endapply %}
-						<meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}">
-					</span>
-				{% endif %}
-
-				{% EVENT overall_header_breadcrumb_prepend %}
-
-				<span class="crumb" {{ MICRODATA }}>
-					{% apply spaceless %}
-					<a itemprop="item" href="{{ U_INDEX }}" accesskey="h" data-navbar-reference="index">
-						{% if not U_SITE_HOME %}{{ Icon('font', 'home', '', true, 'fas o-icon-baseline') }}{% endif %}
-						<span itemprop="name">{{ L_INDEX }}</span>
-					</a>
-					{% endapply %}
-					<meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}">
-				</span>
-
-				{% for navlink in navlinks %}
-					{% set NAVLINK_NAME = navlink.BREADCRUMB_NAME | default(navlink.FORUM_NAME) %}
-					{% set NAVLINK_LINK = navlink.U_BREADCRUMB | default(navlink.U_VIEW_FORUM) %}
-
-					{% EVENT overall_header_navlink_prepend %}
-					<span class="crumb" {{ MICRODATA }}{% if navlink.MICRODATA %} {{ navlink.MICRODATA }}{% endif %}>
-						{% apply spaceless %}
-						<a itemprop="item" href="{{ NAVLINK_LINK }}">
-							<span itemprop="name">{{ NAVLINK_NAME }}</span>
-						</a>
-						{% endapply %}
-						<meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}">
-					</span>
-					{% EVENT overall_header_navlink_append %}
-				{% endfor %}
-
-				{% EVENT overall_header_breadcrumb_append %}
-
-			</li>
-
-			{% EVENT overall_header_breadcrumbs_after %}
-
-			{% if S_DISPLAY_SEARCH and not S_IN_SEARCH %}
-				<li class="rightside responsive-search">
-					<a href="{{ U_SEARCH }}" title="{{ lang('SEARCH_ADV_EXPLAIN') }}" role="menuitem">
-						{{ Icon('font', 'search', lang('SEARCH'), true) }}
-					</a>
-				</li>
-			{% endif %}
-		</ul>
-
 	</div>
 </div>

phpBB/styles/prosilver/template/overall_header.html

@@ -68,7 +68,7 @@
 <!-- EVENT overall_header_stylesheets_after -->
 
 {% if NOTIFICATIONS_WEBPUSH_ENABLE %}
-	{% include('ucp_notifications_webpush.html') %}
+	{% include 'ucp_notifications_webpush.html' %}
 {% endif %}
 
 </head>
@@ -79,7 +79,11 @@
 <div id="wrap" class="wrap">
 	<a id="top" class="top-anchor" accesskey="t"></a>
 	<div id="page-header">
+		<!-- EVENT overall_header_navbar_before -->
+
 		<div class="headerbar" role="banner">
+
+			{% include 'navbar_header.html' %}
 		<!-- EVENT overall_header_headerbar_before -->
 			<div class="inner">
 
@@ -117,10 +121,10 @@
 			</div>
 			<!-- EVENT overall_header_headerbar_after -->
 		</div>
-		<!-- EVENT overall_header_navbar_before -->
-		<!-- INCLUDE navbar_header.html -->
 	</div>
 
+	{% include 'breadcrumbs.html' %}
+
 	<!-- EVENT overall_header_page_body_before -->
 
 	<a id="start_here" class="anchor"></a>

phpBB/styles/prosilver/template/viewtopic_body.html

@@ -423,9 +423,6 @@
 		<!-- EVENT viewtopic_body_postrow_back2top_before -->
 		<div class="back2top">
 			<!-- EVENT viewtopic_body_postrow_back2top_prepend -->
-			<a href="#top" class="top" title="{L_BACK_TO_TOP}">
-				{{ Icon('font', 'circle-chevron-up', lang('BACK_TO_TOP'), false, 'fas c-top-icon') }}
-			</a>
 			<!-- EVENT viewtopic_body_postrow_back2top_append -->
 		</div>
 		<!-- EVENT viewtopic_body_postrow_back2top_after -->
@@ -496,6 +493,12 @@
 	<!-- ENDIF -->
 </div>
 
+<div class="to-top-button">
+	<a href="#top" title="{{ lang('BACK_TO_TOP') }}">
+		{{ Icon('font', 'chevron-up', '', false) }}
+	</a>
+</div>
+
 <!-- EVENT viewtopic_body_footer_before -->
 <!-- INCLUDE jumpbox.html -->
 

phpBB/styles/prosilver/theme/colours.css

@@ -99,18 +99,19 @@ th a:hover {
 }
 
 /* round cornered boxes and backgrounds */
-.headerbar {
+.headerbar,
-	color: #ffffff;
+.headerbar h1 {
+	color: #eaf8ff;
 }
 
 .headerbar,
 .forumbg {
-	background-color: #13a4ec;
+	background-color: #4688ce;
 	background-repeat: repeat-x;
 }
 
 .forabg {
-	background-color: #13a4ec;
+	background-color: #4688ce;
 	background-repeat: repeat-x;
 }
 
@@ -118,6 +119,18 @@ th a:hover {
 	background-color: #c9dee8;
 }
 
+.headerbar .navbar a {
+	color: #eaf8ff;
+}
+
+.headerbar .navbar .dropdown a {
+	color: #0f4d8a;
+}
+
+.header-profile {
+	text-shadow: 0 0 1.75rem #eaf8ff;
+}
+
 .panel {
 	background-color: #f0f3f5;
 	color: #29303d;
@@ -814,6 +827,10 @@ dd.profile-warnings {
 /*  icon images */
 .site_logo { background-image: url("./images/site_logo.svg"); }
 
+.c-hero-logo-img g {
+	fill: #eaf8ff;
+}
+
 /*	colours and backgrounds for cp.css */
 
 /* main cp box */
@@ -1109,6 +1126,7 @@ input.disabled {
 
 .dropdown-extended .dropdown-extended-item {
 	border-top-color: #bdbdbd;
+	color: #47536b;
 }
 
 .dropdown-extended .dropdown-extended-item:hover {

phpBB/styles/prosilver/theme/common.css

@@ -17,7 +17,7 @@ body {
 	line-height: normal;
 	word-wrap: break-word;
 	margin: 0;
-	padding: 12px 0;
+	padding: 0 0 12px;
 	-webkit-print-color-adjust: exact;
 }
 
@@ -151,12 +151,13 @@ a:hover {
 /* Main blocks
 ---------------------------------------- */
 .wrap {
-	border: 1px solid transparent;
+	border: solid transparent;
-	border-radius: 8px;
+	border-width: 0 1px 1px;
+	border-radius: 0 0 8px 8px;
 	min-width: 625px;
 	max-width: 1152px;
 	margin: 0 auto;
-	padding: 15px;
+	padding: 0 15px 15px;
 }
 
 .page-body {
@@ -200,7 +201,7 @@ a:hover {
 /* Round cornered boxes and backgrounds
 ---------------------------------------- */
 .headerbar {
-	border-radius: 7px;
+	border-radius: 0 0 7px 7px;
 	display: flex;
 	flex-direction: column;
 	margin-bottom: 0.5rem;
@@ -212,6 +213,11 @@ a:hover {
 	padding: 3px 10px;
 }
 
+.headerbar .navbar {
+	background: none;
+	padding: calc(var(--ps-line-height) * 0.25) 5px calc(var(--ps-line-height) * 0.5);
+}
+
 .forabg {
 	border-radius: 7px;
 	clear: both;
@@ -340,6 +346,10 @@ ul.linklist .dropdown-up .dropdown {
 	bottom: 18px;
 }
 
+ul.nav-breadcrumbs {
+	margin: calc(var(--ps-line-height) * 0.75) 0;
+}
+
 /* Bulletin icons for list items
 ---------------------------------------- */
 ul.linklist.bulletin > li:before {

phpBB/styles/prosilver/theme/content.css

@@ -465,7 +465,7 @@ p.author {
 	clear: left;
 	overflow: hidden;
 	width: 100%;
-	margin-top: calc(var(--ps-font-small) * 1.4);
+	margin: calc(var(--ps-font-small) * 1.4) 0;
 	padding-top: 2px;
 }
 

phpBB/styles/prosilver/theme/responsive.css

@@ -328,7 +328,6 @@
 		vertical-align: bottom;
 		text-overflow: ellipsis;
 		overflow: hidden;
-		max-width: 100px;
 	}
 
 	/* Pagination