mirror/php-phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-08-13 04:04:12 +02:00
Code Issues Releases Wiki Activity

[ticket/16237] fix responsive footer/header navs

Browse Source 
PHPBB3-16237
This commit is contained in:
hanakin
2020-05-07 20:17:06 -10:00
parent 3c7d941135
commit 98e6006c4f
4 changed files with 218 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
phpBB/styles/prosilver/template/navbar_header.html
View File

@@ -1,200 +1,209 @@
<div class="navbar" role="navigation">
<div class="inner">
<ul id="nav-main" class="nav-main linklist" role="menubar">
<ul id="nav-main" class="nav-main linklist" role="menubar">
<li id="quick-links" class="quick-links dropdown-container responsive-menu<!-- IF not S_DISPLAY_QUICK_LINKS and not S_DISPLAY_SEARCH --> hidden<!-- ENDIF -->" data-skip-responsive="true">
<a href="#" class="dropdown-trigger">
{{ Icon('iconify', 'fa:bars', lang('QUICK_LINKS'), false) }}
</a>
<div class="dropdown">
<div class="pointer"><div class="pointer-inner"></div></div>
<ul class="dropdown-contents" role="menu">
<!-- EVENT navbar_header_quick_links_before -->
<li id="quick-links" class="quick-links dropdown-container responsive-menu{% if not S_DISPLAY_QUICK_LINKS and not S_DISPLAY_SEARCH %} hidden{% endif %}">
<a href="#" class="dropdown-trigger">
{{ Icon('iconify', 'fa:bars', lang('QUICK_LINKS'), false) }}
</a>
<div class="dropdown">
<div class="pointer"><div class="pointer-inner"></div></div>
<ul class="dropdown-contents" role="menu">
{% EVENT navbar_header_quick_links_before %}
<!-- IF S_DISPLAY_SEARCH -->
<li class="separator"></li>
<!-- IF S_REGISTERED_USER -->
{% if S_DISPLAY_SEARCH %}
<li class="separator"></li>
{% if S_REGISTERED_USER %}
<li>
<a href="{{ U_SEARCH_SELF }}" role="menuitem">
{{ Icon('iconify', 'mdi:file-account-outline', lang('SEARCH_SELF'), false) }}
</a>
</li>
{% endif %}
{% if S_USER_LOGGED_IN %}
<li>
<a href="{{ U_SEARCH_NEW }}" role="menuitem">
{{ Icon('iconify', 'mdi:file-hidden', lang('SEARCH_NEW'), false) }}
</a>
</li>
{% endif %}
{% if S_LOAD_UNREADS %}
<li>
<a href="{{ U_SEARCH_UNREAD }}" role="menuitem">
{{ Icon('iconify', 'mdi:file', lang('SEARCH_UNREAD'), false) }}
</a>
</li>
{% endif %}
<li>
<a href="{U_SEARCH_SELF}" role="menuitem">
{{ Icon('iconify', 'mdi:file-account-outline', lang('SEARCH_SELF'), false) }}
</a>
</li>
<!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN -->
<li>
<a href="{U_SEARCH_NEW}" role="menuitem">
{{ Icon('iconify', 'mdi:file-hidden', lang('SEARCH_NEW'), false) }}
</a>
</li>
<!-- ENDIF -->
<!-- IF S_LOAD_UNREADS -->
<li>
<a href="{U_SEARCH_UNREAD}" role="menuitem">
{{ Icon('iconify', 'mdi:file', lang('SEARCH_UNREAD'), false) }}
</a>
</li>
<!-- ENDIF -->
<li>
<a href="{U_SEARCH_UNANSWERED}" role="menuitem">
<a href="{{ U_SEARCH_UNANSWERED }}" role="menuitem">
{{ Icon('iconify', 'mdi:file-question-outline', lang('SEARCH_UNANSWERED'), false) }}
</a>
</li>
<li>
<a href="{U_SEARCH_ACTIVE_TOPICS}" role="menuitem">
<a href="{{ U_SEARCH_ACTIVE_TOPICS }}" role="menuitem">
{{ Icon('iconify', 'mdi:file-upload-outline', lang('SEARCH_ACTIVE_TOPICS'), false) }}
</a>
</li>
<li class="separator"></li>
<li>
<a href="{U_SEARCH}" role="menuitem">
<a href="{{ U_SEARCH }}" role="menuitem">
{{ Icon('iconify', 'fa:search', lang('SEARCH'), false) }}
</a>
</li>
<!-- ENDIF -->
{% endif %}
<!-- IF not S_IS_BOT and (S_DISPLAY_MEMBERLIST or U_TEAM) -->
{% if not S_IS_BOT and (S_DISPLAY_MEMBERLIST or U_TEAM) %}
<li class="separator"></li>
{% if S_DISPLAY_MEMBERLIST %}
<li>
<a href="{{ U_MEMBERLIST }}" role="menuitem">
{{ Icon('iconify', 'fa:group', lang('MEMBERLIST'), false) }}
</a>
</li>
{% endif %}
{% if U_TEAM %}
<li>
<a href="{{ U_TEAM }}" role="menuitem">
{{ Icon('iconify', 'fa:shield', lang('THE_TEAM'), false) }}
</a>
</li>
{% endif %}
{% endif %}
<li class="separator"></li>
<!-- IF S_DISPLAY_MEMBERLIST -->
<li>
<a href="{U_MEMBERLIST}" role="menuitem">
{{ Icon('iconify', 'fa:group', lang('MEMBERLIST'), false) }}
</a>
</li>
<!-- ENDIF -->
<!-- IF U_TEAM -->
<li>
<a href="{U_TEAM}" role="menuitem">
{{ Icon('iconify', 'fa:shield', lang('THE_TEAM'), false) }}
</a>
</li>
<!-- ENDIF -->
<!-- ENDIF -->
<li class="separator"></li>
<!-- EVENT navbar_header_quick_links_after -->
</ul>
</div>
</li>
<!-- EVENT overall_header_navigation_prepend -->
<li <!-- IF not S_USER_LOGGED_IN -->data-skip-responsive="true"<!-- ELSE -->data-last-responsive="true"<!-- ENDIF -->>
<a href="{U_FAQ}" rel="help" title="{L_FAQ_EXPLAIN}" role="menuitem">
{{ Icon('iconify', 'fa:question-circle', lang('FAQ'), false) }}
</a>
</li>
<!-- EVENT overall_header_navigation_append -->
<!-- IF U_ACP -->
<li data-last-responsive="true">
<a href="{U_ACP}" title="{L_ACP}" role="menuitem">
{{ Icon('iconify', 'fa:cogs', lang('ACP_SHORT'), false) }}
</a>
</li>
<!-- ENDIF -->
<!-- IF U_MCP -->
<li data-last-responsive="true">
<a href="{U_MCP}" title="{L_MCP}" role="menuitem">
{{ Icon('iconify', 'fa:gavel', lang('MCP_SHORT'), false) }}
</a>
</li>
<!-- ENDIF -->
<!-- IF S_REGISTERED_USER -->
<!-- EVENT navbar_header_user_profile_prepend -->
<li id="username_logged_in" class="rightside <!-- IF CURRENT_USER_AVATAR --> no-bulletin<!-- ENDIF -->" data-skip-responsive="true">
<!-- EVENT navbar_header_username_prepend -->
<div class="header-profile dropdown-container">
<a href="{U_PROFILE}" class="header-avatar dropdown-trigger"><!-- IF CURRENT_USER_AVATAR -->{CURRENT_USER_AVATAR} <!-- ENDIF --> {CURRENT_USERNAME_SIMPLE} {{ Icon('iconify', 'fa:caret-down', '', true, '', {'style': CURRENT_USER_GROUP_COLOR}) }}</a>
<div class="dropdown">
<div class="pointer"><div class="pointer-inner"></div></div>
<ul class="dropdown-contents" role="menu">
<!-- IF U_RESTORE_PERMISSIONS -->
<li>
<a href="{U_RESTORE_PERMISSIONS}">
{{ Icon('iconify', 'fa:refresh', lang('RESTORE_PERMISSIONS'), false) }}
</a>
</li>
<!-- ENDIF -->
<!-- EVENT navbar_header_profile_list_before -->
<li>
<a href="{U_PROFILE}" title="{L_PROFILE}" role="menuitem">
{{ Icon('iconify', 'fa:sliders', lang('PROFILE'), false) }}
</a>
</li>
<!-- IF U_USER_PROFILE -->
<li>
<a href="{U_USER_PROFILE}" title="{L_READ_PROFILE}" role="menuitem">
{{ Icon('iconify', 'fa:user', lang('READ_PROFILE'), false) }}
</a>
</li>
<!-- ENDIF -->
<!-- EVENT navbar_header_profile_list_after -->
{% EVENT navbar_header_quick_links_after %}
<li class="separator"></li>
<li>
<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">
{{ Icon('iconify', 'fa:power-off', lang('LOGIN_LOGOUT'), false) }}
</a>
</li>
{% block nav_main_left_side %}
{% EVENT overall_header_navigation_prepend %}
<li class="in-menu">
<a href="{{ U_FAQ }}" rel="help" title="{{ lang('FAQ_EXPLAIN') }}" role="menuitem">
{{ Icon('iconify', 'fa:question-circle', lang('FAQ'), false) }}
</a>
</li>
{% EVENT overall_header_navigation_append %}
{% endblock nav_main_left_side %}
</ul>
</div>
</div>
<!-- EVENT navbar_header_username_append -->
</li>
<!-- IF S_DISPLAY_PM -->
<li class="rightside" data-skip-responsive="true">
<a href="{U_PRIVATEMSGS}" role="menuitem">
{{ Icon('iconify', 'fa:inbox', lang('PRIVATE_MESSAGES'), false) }}<strong class="badge<!-- IF not PRIVATE_MESSAGE_COUNT --> hidden<!-- ENDIF -->"> {PRIVATE_MESSAGE_COUNT}</strong>
</a>
</li>
<!-- ENDIF -->
<!-- IF S_NOTIFICATIONS_DISPLAY -->
<li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside" data-skip-responsive="true">
<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification-button" class="dropdown-trigger">
{{ Icon('iconify', 'fa:bell', lang('NOTIFICATIONS'), false) }}<strong class="badge<!-- IF not NOTIFICATIONS_COUNT --> hidden<!-- ENDIF -->">{NOTIFICATIONS_COUNT}</strong>
</a>
<!-- INCLUDE notification_dropdown.html -->
</li>
<!-- ENDIF -->
<!-- EVENT navbar_header_user_profile_append -->
<!-- ELSE IF not S_IS_BOT -->
<li class="rightside" data-skip-responsive="true">
<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">
{{ Icon('iconify', 'fa:power-off', lang('LOGIN_LOGOUT'), false) }}
</a>
</li>
<!-- IF S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
<li class="rightside" data-skip-responsive="true">
<a href="{U_REGISTER}" role="menuitem">
{{ Icon('iconify', 'fa:pencil-square-o', lang('REGISTER'), false) }}
</a>
</li>
<!-- ENDIF -->
<!-- EVENT navbar_header_logged_out_content -->
<!-- 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 }}>
<a itemprop="item" href="{{ U_SITE_HOME }}" data-navbar-reference="home">
{{ Icon('iconify', 'fa:home', '', true) }}<span itemprop="name">{{ L_SITE_HOME }}</span>
{{ block('nav_main_left_side', _self) }}
{% if U_ACP %}
<li>
<a href="{{ U_ACP }}" title="{{ lang('ACP') }}" role="menuitem">
{{ Icon('iconify', 'fa:cogs', lang('ACP_SHORT'), false) }}
</a>
<meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}">
</span>
</li>
{% endif %}
{% if U_MCP %}
<li>
<a href="{{ U_MCP }}" title="{{ lang('MCP') }}" role="menuitem">
{{ Icon('iconify', 'fa:gavel', lang('MCP_SHORT'), false) }}
</a>
</li>
{% endif %}
{% EVENT overall_header_breadcrumb_prepend %}
{% if S_REGISTERED_USER %}
{% EVENT navbar_header_user_profile_prepend %}
<li id="username_logged_in" class="rightside {% if CURRENT_USER_AVATAR %} no-bulletin{% endif %}">
{% EVENT navbar_header_username_prepend %}
<div class="header-profile dropdown-container">
<a href="{{ U_PROFILE }}" class="header-avatar dropdown-trigger">
{% if CURRENT_USER_AVATAR %}{{ CURRENT_USER_AVATAR }} {% endif %}
{{ CURRENT_USERNAME_SIMPLE }}
{{ Icon('iconify', 'fa:caret-down', '', true, '', {'style': CURRENT_USER_GROUP_COLOR}) }}
</a>
<div class="dropdown">
<div class="pointer"><div class="pointer-inner"></div></div>
<ul class="dropdown-contents" role="menu">
{% if U_RESTORE_PERMISSIONS %}
<li>
<a href="{{ U_RESTORE_PERMISSIONS }}">
{{ Icon('iconify', 'fa:refresh', lang('RESTORE_PERMISSIONS'), false) }}
</a>
</li>
{% endif %}
{% EVENT navbar_header_profile_list_before %}
<li>
<a href="{{ U_PROFILE }}" title="{{ lang('PROFILE') }}" role="menuitem">
{{ Icon('iconify', 'fa:sliders', lang('PROFILE'), false) }}
</a>
</li>
{% if U_USER_PROFILE %}
<li>
<a href="{{ U_USER_PROFILE }}" title="{{ lang('READ_PROFILE') }}" role="menuitem">
{{ Icon('iconify', 'fa:user', lang('READ_PROFILE'), false) }}
</a>
</li>
{% endif %}
{% EVENT navbar_header_profile_list_after %}
<li class="separator"></li>
<li>
<a href="{{ U_LOGIN_LOGOUT }}" title="{{ lang('LOGIN_LOGOUT') }}" accesskey="x" role="menuitem">
{{ Icon('iconify', 'fa:power-off', lang('LOGIN_LOGOUT'), false) }}
</a>
</li>
</ul>
</div>
</div>
{% EVENT navbar_header_username_append %}
</li>
{% if S_DISPLAY_PM %}
<li class="rightside">
<a href="{{ U_PRIVATEMSGS }}" role="menuitem">
{{ Icon('iconify', 'fa:inbox', lang('PRIVATE_MESSAGES'), false) }}<strong class="badge{% if not PRIVATE_MESSAGE_COUNT %} hidden{% endif %}"> {PRIVATE_MESSAGE_COUNT}</strong>
</a>
</li>
{% endif %}
{% if S_NOTIFICATIONS_DISPLAY %}
<li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside">
<a href="{{ U_VIEW_ALL_NOTIFICATIONS }}" id="notification-button" class="dropdown-trigger">
{{ Icon('iconify', 'fa:bell', lang('NOTIFICATIONS'), false) }}<strong class="badge{% if not NOTIFICATIONS_COUNT %} hidden{% endif %}">{NOTIFICATIONS_COUNT}</strong>
</a>
{% include 'notification_dropdown.html' %}
</li>
{% endif %}
{% EVENT navbar_header_user_profile_append %}
{% elseif not S_IS_BOT %}
<li class="rightside" >
<a href="{{ U_LOGIN_LOGOUT }}" title="{{ lang('LOGIN_LOGOUT') }}" accesskey="x" role="menuitem">
{{ Icon('iconify', 'fa:power-off', lang('LOGIN_LOGOUT'), false) }}
</a>
</li>
{% if S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) %}
<li class="rightside">
<a href="{{ U_REGISTER }}" role="menuitem">
{{ Icon('iconify', 'fa:pencil-square-o', lang('REGISTER'), false) }}
</a>
</li>
{% endif %}
{% EVENT navbar_header_logged_out_content %}
{% 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 }}>
<a itemprop="item" href="{{ U_SITE_HOME }}" data-navbar-reference="home">
{{ Icon('iconify', 'fa:home', '', true) }}<span itemprop="name">{{ L_SITE_HOME }}</span>
</a>
<meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}">
</span>
{% endif %}
{% EVENT overall_header_breadcrumb_prepend %}
<span class="crumb" {{ MICRODATA }}>
<a itemprop="item" href="{{ U_INDEX }}" accesskey="h" data-navbar-reference="index">
{% if not U_SITE_HOME %}{{ Icon('iconify', 'fa:home', '', true) }}{% endif %}<span itemprop="name">{{ L_INDEX }}</span>
@@ -202,32 +211,32 @@
<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) %}
{% 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 %}>
<a itemprop="item" href="{{ NAVLINK_LINK }}">
<span itemprop="name">{{ NAVLINK_NAME }}</span>
</a>
<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('iconify', 'fa:search', lang('SEARCH'), true) }}
</a>
{% EVENT overall_header_navlink_prepend %}
<span class="crumb" {{ MICRODATA }}{% if navlink.MICRODATA %} {{ navlink.MICRODATA }}{% endif %}>
<a itemprop="item" href="{{ NAVLINK_LINK }}">
<span itemprop="name">{{ NAVLINK_NAME }}</span>
</a>
<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>
{% endif %}
</ul>
{% 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('iconify', 'fa:search', lang('SEARCH'), true) }}
</a>
</li>
{% endif %}
</ul>
</div>
</div>