Add a skip link for keyboard users

Someone might use it...
This commit is contained in:
2020-03-18 15:07:29 +00:00
parent e42989637e
commit 264b306b2f
7 changed files with 56 additions and 42 deletions

View File

@@ -31,26 +31,26 @@
</head>
<body>
<a class="skip-link" href='#main'>Skip to content</a>
{% include "analytics.html" %}
{% block navbar %}
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" role="navigation">
<div class="container">
{% block titleheader %}
{% endblock %}
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
{% block titleelements %}
{% endblock %}
</ul>
</div>
{% block navbar %}
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" role="navigation">
<div class="container">
{% block titleheader %}
{% endblock %}
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
{% block titleelements %}
{% endblock %}
</ul>
</div>
</nav>
</div>
</nav>
{% endblock %}
<div class="container py-4">
<div class="container py-4" id="main">
{% block content-header %}
{% if error %}
<div class="error">{{ error }}</div>{% endif %}

View File

@@ -1,34 +0,0 @@
{% extends 'base.html' %}
{% block extrahead %}
<meta name="google" content="notranslate">
{% endblock %}
{% block titleheader %}
<a class="nav navbar-brand navbar-left" href="/"><i class="fas fa-arrow-circle-left" style="vertical-align: middle !important;"></i> RIGS</a>
<a class="nav navbar-brand" href="{% url 'asset_index' %}">Assets</a>
{% endblock %}
{% block titleelements %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Assets</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{% url 'asset_list' %}"><span class="fas fa-list"></span> List Assets</a>
{% if perms.assets.add_asset %}
<a class="dropdown-item" href="{% url 'asset_create' %}"><span class="fas fa-plus"></span> Create Asset</a>
{% endif %}
</div>
</li>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Suppliers</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="{% url 'supplier_list' %}"><span class="fas fa-list"></span> List Suppliers</a>
{% if perms.assets.add_supplier %}
<a class="dropdown-item" href="{% url 'supplier_create' %}"><span class="fas fa-plus"></span> Create Supplier</a>
{% endif %}
</ul>
</div>
{% if perms.assets.view_asset %}
<li class="nav-item"><a class="nav-link" href="{% url 'asset_activity_table' %}">Recent Changes</a></li>
{% endif %}
{% endblock %}

View File

@@ -1,122 +0,0 @@
{% extends 'base.html' %}
{% load static %}
{% block titleheader %}
<a class="navbar-brand" href="/">RIGS</a>
{% endblock %}
{% block titleelements %}
{% if user.is_authenticated %}
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownRigboard" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Rigboard
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownRigboard">
<a class="dropdown-item" href="{% url 'rigboard' %}"><span class="fas fa-list"></span>
Rigboard</a>
<a class="dropdown-item" href="{% url 'event_archive' %}"><span class="fas fa-book"></span>
Archive</a>
<a class="dropdown-item" href="{% url 'web_calendar' %}"><span class="fas fa-calendar"></span>
Calendar</a>
{% if perms.RIGS.view_event %}
<a class="dropdown-item" href="{% url 'activity_table' %}"><span
class="fas fa-random"></span> Recent Changes</a>
{% endif %}
{% if perms.RIGS.add_event %}
<a class="dropdown-item" href="{% url 'event_create' %}"><span class="fas fa-plus"></span>
New Event</a>
{% endif %}
</div>
</li>
{% if perms.RIGS.view_invoice %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownInvoices" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Invoices
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownInvoices">
{% if perms.RIGS.add_invoice %}
<a class="dropdown-item" href="{% url 'invoice_waiting' %}"><span class="fas fa-briefcase text-danger"></span> Waiting</a>
{% endif %}
<a class="dropdown-item" href="{% url 'invoice_list' %}"><span class="fas fa-pound-sign text-warning"></span> Outstanding</a>
<a class="dropdown-item" href="{% url 'invoice_archive' %}"><span class="fas fa-book"></span> Archive</a>
</div>
</li>
{% endif %}
{% if perms.RIGS.view_person %}
<li class="nav-item"><a class="nav-link" href="{% url 'person_list' %}">People</a></li>
{% endif %}
{% if perms.RIGS.view_organisation %}
<li class="nav-item"><a class="nav-link" href="{% url 'organisation_list' %}">Organisations</a></li>
{% endif %}
{% if perms.RIGS.view_venue %}
<li class="nav-item"><a class="nav-link" href="{% url 'venue_list' %}">Venues</a></li>
{% endif %}
<form id="searchForm" class="form-inline flex-nowrap mx-3" role="form" method="GET">
<div class="input-group input-group-sm flex-nowrap">
<div class="input-group-prepend">
<input id="id_search_input" type="search" name="q" class="form-control form-control-sm" placeholder="Search..." />
</div>
<select id="search-options" class="custom-select form-control">
<option selected data-action="{% url 'event_archive' %}" href="#">Events</option>
<option data-action="{% url 'person_list' %}" href="#">People</option>
<option data-action="{% url 'organisation_list' %}" href="#">Organisations</option>
<option data-action="{% url 'venue_list' %}" href="#">Venues</option>
{% if perms.RIGS.view_invoice %}
<option data-action="{% url 'invoice_archive' %}" href="#">Invoices</option>
{% endif %}
</select>
</div>
<button class="btn btn-primary form-control form-control-sm btn-sm">Search</button>
<a href="{% url 'search_help' %}" class="nav-link modal-href btn-sm"><span class="fas fa-question-circle"></span></a>
</form>
{% endif %}
<li class="nav-item dropdown" id="user">
{% if user.is_authenticated %}
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Hi {{ user.first_name }}
</a>
<ul class="dropdown-menu p-3" id="userdropdown">
<li class="media">
<a href="{% url 'profile_detail' %}">
<img src="{{ request.user.profile_picture }}" class="media-object"/>
<div class="media-body">
<b>{{ request.user.first_name }} {{ request.user.last_name }}</b>
<p class="muted">{{ request.user.email }}</p>
</div>
</a>
</li>
<li>
<a href="{% url 'logout' %}" class="btn btn-primary align"><i class="fas fa-sign-out-alt"></i> Logout</a>
</li>
</ul>
{% else %}
<a class="nav-link" href="{% url 'login' %}">
Login
</a>
{% endif %}
</li>
{% endblock %}
{% block js %}
<script src="{% static 'js/tooltip.js' %}"></script>
<script src="{% static 'js/popover.js' %}"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
</script>
<script>
$(document).ready(function(){
$('#search-options option').click(function(){
$('#searchForm').attr('action', $(this).data('action')).submit();
});
$('#id_search_input').keypress(function (e) {
if (e.which == 13) {
$('#searchForm').attr('action', $('#search-options option').first().data('action')).submit();
return false;
}
});
});
</script>
{% endblock %}