makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-07 20:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6806 from marc1706/ticket/17501

Browse source 
[ticket/17501] Adjust navbar and breadcrumbs, improve usability
This commit is contained in:
Marc Alexander 2025-05-19 17:51:27 +02:00 • committed by GitHub
commit 1f6f0a3547
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 117 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
phpBB/docs/events.md
View file

@ -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

53
phpBB/styles/prosilver/template/breadcrumbs.html Normal file
View file

@ -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>

2
phpBB/styles/prosilver/template/faq_body.html
View file

@ -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>

63
phpBB/styles/prosilver/template/navbar_header.html
View file

@ -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>

10
phpBB/styles/prosilver/template/overall_header.html
View file

@ -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>

9
phpBB/styles/prosilver/template/viewtopic_body.html
View file

@ -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 -->

26
phpBB/styles/prosilver/theme/colours.css
View file

@ -99,18 +99,19 @@ th a:hover {
}
/* round cornered boxes and backgrounds */
.headerbar {
color: #ffffff;
.headerbar,
.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 {

20
phpBB/styles/prosilver/theme/common.css
View file

@ -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-radius: 8px;
border: solid transparent;
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 {

2
phpBB/styles/prosilver/theme/content.css
View file

@ -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;
}

1
phpBB/styles/prosilver/theme/responsive.css
View file

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