[TWIG][BASE] Fixed taborder, Orca will continue to read the whole header though. Navigation should be more clear for each timeline.

This commit is contained in:
Eliseu Amaro 2021-09-07 15:59:19 +01:00 committed by Hugo Sales
parent 61071a6821
commit b0b3ae237a
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
4 changed files with 54 additions and 41 deletions

View File

@ -48,6 +48,9 @@
height: auto; height: auto;
margin-right: 5px; margin-right: 5px;
} }
#user-nickname {
font-size: var(--main-size);
}
.profile-navigation { .profile-navigation {
margin-bottom: var(--main-size); margin-bottom: var(--main-size);

View File

@ -58,7 +58,7 @@
<header id='header' role="banner"> <header id='header' role="banner">
{{ block("leftpanel", "stdgrid.html.twig") }} {{ block("leftpanel", "stdgrid.html.twig") }}
<a role="navigation" rel="help" id="anchor-main-page" class="anchor-hidden"></a> <a role="navigation" rel="help" id="anchor-main-page" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<a id='instance' href="{{ path('main_public') }}" tabindex="0" title="{{ 'This instance\'s name. Access public timeline.' | trans }}"> <a id='instance' href="{{ path('main_public') }}" tabindex="0" title="{{ 'This instance\'s name. Access public timeline.' | trans }}">
<h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1> <h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1>
</a> </a>
@ -70,7 +70,7 @@
{% endblock header %} {% endblock header %}
<div class="container"> <div class="container">
<a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"></a> <a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<div class='content'> <div class='content'>
{% block nav %}{% endblock %} {% block nav %}{% endblock %}
{% block body %}{% endblock %} {% block body %}{% endblock %}

View File

@ -1,15 +1,15 @@
<div class="panel panel-left"> <div class="panel panel-left">
<input type="checkbox" id="panel-left-toggle"> <input type="checkbox" id="panel-left-toggle" aria-hidden="true" tabindex="-1">
<label id="panel-left-icon" for="panel-left-toggle">{{ icon('menu', 'icon icon-left') | raw }}</label> <label id="panel-left-icon" for="panel-left-toggle" aria-hidden="true" tabindex="-1">{{ icon('menu', 'icon icon-left') | raw }}</label>
<a id="anchor-left-panel" class="anchor-hidden"></a> <a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<aside class="panel-content"> <aside class="panel-content">
{% if app.user %} {% if app.user %}
<section class='profile'> <section class='profile'>
<a id="user" href="{{ path('settings') }}"> <a id="user" href="{{ path('settings') }}">
<img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar"> <img src='{{ user_avatar }}' alt="{{ 'Your avatar.' | trans }}" title="{{ 'Your avatar.' | trans }}" class="icon icon-avatar">
<div id="user-info"> <div id="user-info">
<h1>{{ user_nickname }}</h1> <strong id="user-nickname" title="{{ 'Your nickname.' | trans }}">{{ user_nickname }}</strong>
<nav id="user-tags"> <nav id="user-tags">
{% if user_tags %} {% if user_tags %}
@ -34,53 +34,63 @@
</section> </section>
<nav class="profile-navigation"> <nav class="profile-navigation">
<a href='#'>Messages</a> <a href='#' title="{{ 'Check your messages.' | trans }}">Messages</a>
<a href="{{ path("replies", {'nickname' : user_nickname}) }}" <a href="{{ path("replies", {'nickname' : user_nickname}) }}"
class='hover-effect {{ active("replies") }}'>Replies</a> class='hover-effect {{ active("replies") }}' title="{{ 'Replies to your notes.' | trans }}">Replies</a>
{% for link in handle_event('InsertLeftPanelLink', user_nickname) %} {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
{{ link | raw }} {{ link | raw }}
{% endfor %} {% endfor %}
<a href="{{ path('settings') }}" <a href="{{ path('settings') }}"
class='{{ active('settings') }}'>Settings</a> class='{{ active('settings') }}' title="{{ 'Access your account settings.' | trans }}">Settings</a>
<a href='{{ path('logout') }}'>Logout</a> <a href='{{ path('logout') }}' title="{{ 'Logout from your account.' | trans }}">Logout</a>
</nav> </nav>
{% else %} {% else %}
<nav class="profile-navigation"> <nav class="profile-navigation">
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a> <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}' title="{{ 'Login through your existing account.' | trans }}">Login</a>
<a href="{{ path('register') }}">Register</a> <a href="{{ path('register') }}" title="{{ 'Register a new account!' | trans }}">Register</a>
</nav> </nav>
{% endif %} {% endif %}
<nav class="timeline-nav" role="menu"> <div class="timeline-nav" title="Navigate through different timelines.">
<h1 role="tab">Timeline</h1> <h1 role="tab">Timeline</h1>
<nav class='sec-nav' role="navigation"> <nav class='sec-nav' role="navigation">
<a href="{{ path('main_public') }}" <ul>
class='{{ active('main_public') }}'>Public</a> <li>
<a href="{{ path('main_public') }}"
class='{{ active('main_public') }}'>Public</a>
</li>
<li>
{% if user_nickname is defined %}
<a href="{{ path("home_all", {'nickname' : user_nickname}) }}"
class='{{ active("home_all") }}'>Home</a>
{% endif %}
</li>
<li>
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
</li>
{% if user_nickname is defined %} {% if main_nav_tabs is defined %}
<a href="{{ path("home_all", {'nickname' : user_nickname}) }}" {% for tab in main_nav_tabs %}
class='{{ active("home_all") }}'>Home</a> <li>
{% endif %} <a href="{{ path(tab['route']) }}"
class='{{ active(tab['route']) }}'>{{ tab['title'] }}</a>
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a> </li>
{% endfor %}
{% if main_nav_tabs is defined %} {% endif %}
{% for tab in main_nav_tabs %} </ul>
<a href="{{ path(tab['route']) }}"
class='{{ active(tab['route']) }}'>{{ tab['title'] }}</a>
{% endfor %}
{% endif %}
</nav> </nav>
</nav>
<div class="footer" role="contentinfo">
<a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>FAQ</a>
<a href="{{ path('doc_tos') }}" class='hover-effect {{ active('doc_tos') }}'>TOS</a>
<a href="{{ path('doc_privacy') }}" class='hover-effect {{ active('doc_privacy') }}'>Privacy</a>
<a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>Source</a>
<a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>Version</a>
</div> </div>
<footer class="footer">
<nav>
<a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>FAQ</a>
<a href="{{ path('doc_tos') }}" class='hover-effect {{ active('doc_tos') }}'>TOS</a>
<a href="{{ path('doc_privacy') }}" class='hover-effect {{ active('doc_privacy') }}'>Privacy</a>
<a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>Source</a>
<a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>Version</a>
</nav>
</footer>
</aside> </aside>
</div> </div>

View File

@ -1,8 +1,8 @@
<div class="panel panel-right"> <div class="panel panel-right" tabindex="-1">
<input type="checkbox" id="panel-right-toggle"> <input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
<label id="panel-right-icon" for="panel-right-toggle">{{ icon('notes', 'icon icon-right') | raw }}</label> <label id="panel-right-icon" for="panel-right-toggle" aria-hidden="true" tabindex="-1">{{ icon('notes', 'icon icon-right') | raw }}</label>
<a id="anchor-right-panel" class="anchor-hidden"></a> <a id="anchor-right-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<aside class="panel-content"> <aside class="panel-content">
{% if post_form is defined %} {% if post_form is defined %}