bookwyrm/bookwyrm/templates/layout.html
Hugh Rundle 3f67bc3b61 standardise ids for tour anchors
To make it harder to accidentally mess up the tour when making changes to pages, this commit adds ids with 'tour' prefixes to (nearly) all elements used by the guided tour as anchor points. The exception is where an element already had an id that is being used by something else in Bookwyrm.

Some minor changes also made to clean up the wording of the tour.
2022-07-03 15:57:10 +10:00

234 lines
11 KiB
HTML

{% load layout %}
{% load sass_tags %}
{% load i18n %}
{% load static %}
<!DOCTYPE html>
<html lang="{% get_lang %}">
<head>
<title>{% block title %}BookWyrm{% endblock %} - {{ site.name }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% sass_src site_theme %}" rel="stylesheet" type="text/css" />
<link rel="search" type="application/opensearchdescription+xml" href="{% url 'opensearch' %}" title="{% blocktrans with site_name=site.name %}{{ site_name }} search{% endblocktrans %}" />
<link rel="shortcut icon" type="image/x-icon" href="{% if site.favicon %}{% get_media_prefix %}{{ site.favicon }}{% else %}{% static "images/favicon.ico" %}{% endif %}">
{% if preview_images_enabled is True %}
<meta name="twitter:card" content="summary_large_image">
{% else %}
<meta name="twitter:card" content="summary">
{% endif %}
<meta name="twitter:title" content="{% if title %}{{ title }} - {% endif %}{{ site.name }}">
<meta name="og:title" content="{% if title %}{{ title }} - {% endif %}{{ site.name }}">
<meta name="twitter:description" content="{{ site.instance_tagline }}">
<meta name="og:description" content="{{ site.instance_tagline }}">
{% block opengraph_images %}
{% include 'snippets/opengraph_images.html' %}
{% endblock %}
<meta name="twitter:image:alt" content="BookWyrm Logo">
{% block head_links %}{% endblock %}
</head>
<body>
{% block body %}
<nav class="navbar" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img class="image logo" src="{% if site.logo_small %}{% get_media_prefix %}{{ site.logo_small }}{% else %}{% static "images/logo-small.png" %}{% endif %}" alt="{% blocktrans with site_name=site.name %}{{ site_name }} home page{% endblocktrans %}">
</a>
<form class="navbar-item column is-align-items-start pt-5" action="{% url 'search' %}">
<div class="field has-addons">
<div class="control">
{% if user.is_authenticated %}
{% trans "Search for a book, user, or list" as search_placeholder %}
{% else %}
{% trans "Search for a book" as search_placeholder %}
{% endif %}
<input aria-label="{{ search_placeholder }}" id="tour-search" class="input" type="text" name="q" placeholder="{{ search_placeholder }}" value="{{ query }}">
</div>
<div class="control">
<button class="button" type="submit">
<span class="icon icon-search" title="{% trans 'Search' %}">
<span class="is-sr-only">{% trans "Search" %}</span>
</span>
</button>
</div>
<div class="control">
<button class="button" type="button" data-modal-open="barcode-scanner-modal">
<span class="icon icon-barcode" title="{% trans 'Scan Barcode' %}" id="tour-barcode">
<span class="is-sr-only">{% trans "Scan Barcode" %}</span>
</span>
</button>
</div>
</div>
</form>
{% include "search/barcode_modal.html" with id="barcode-scanner-modal" %}
<button type="button" tabindex="0" class="navbar-burger pulldown-menu my-4" data-controls="main_nav" aria-expanded="false">
<i class="icon icon-dots-three-vertical" aria-hidden="true"></i>
<span class="is-sr-only">{% trans "Main navigation menu" %}</span>
</button>
</div>
<div class="navbar-menu" id="main_nav">
<div class="navbar-start" id="tour-navbar-start">
{% if request.user.is_authenticated %}
<a href="/#feed" class="navbar-item mt-3 py-0">
{% trans "Feed" %}
</a>
<a href="{% url 'lists' %}" class="navbar-item mt-3 py-0">
{% trans "Lists" %}
</a>
<a href="{% url 'discover' %}" class="navbar-item mt-3 py-0">
{% trans "Discover" %}
</a>
{% endif %}
</div>
<div class="navbar-end">
{% if request.user.is_authenticated %}
<div class="navbar-item mt-3 py-0">
{% include 'user_menu.html' %}
</div>
<div class="navbar-item mt-3 py-0">
<a href="{% url 'notifications' %}" class="tags has-addons" id="tour-notifications">
<span class="tag is-medium">
<span class="icon icon-bell" title="{% trans 'Notifications' %}">
<span class="is-sr-only">{% trans "Notifications" %}</span>
</span>
</span>
{% with request.user.unread_notification_count as notification_count %}
<span
class="{% if not notification_count %}is-hidden {% elif request.user.has_unread_mentions %}is-danger {% endif %}tag is-medium transition-x"
data-poll-wrapper
>
<span data-poll="notifications">{{ notification_count }}</span>
</span>
{% endwith %}
</a>
</div>
{% else %}
<div class="navbar-item pt-5 pb-0">
{% if request.path != '/login' and request.path != '/login/' %}
<div class="columns">
<div class="column">
<form name="login" method="post" action="{% url 'login' %}?next={{ request.path }}">
{% csrf_token %}
<div class="columns is-variable is-1">
<div class="column">
<label class="is-sr-only" for="id_localname">{% trans "Username:" %}</label>
<input type="text" name="localname" maxlength="150" class="input" required="" id="id_localname" placeholder="{% trans 'username' %}">
</div>
<div class="column">
<label class="is-sr-only" for="id_password">{% trans "Password:" %}</label>
<input type="password" name="password" maxlength="128" class="input" required="" id="id_password" placeholder="{% trans 'password' %}">
<p class="help"><a href="{% url 'password-reset' %}">{% trans "Forgot your password?" %}</a></p>
</div>
<div class="column is-narrow">
<button class="button is-primary" type="submit">{% trans "Log in" %}</button>
</div>
</div>
</form>
</div>
{% if site.allow_registration and request.path != '' and request.path != '/' %}
<div class="column is-narrow">
<a href="/" class="button is-link">
{% trans "Join" %}
</a>
</div>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</nav>
{% if request.user.is_authenticated and active_announcements.exists %}
<div class="block is-flex-grow-1">
<div class="container">
{% for announcement in active_announcements %}
{% include 'snippets/announcement.html' with announcement=announcement %}
{% endfor %}
</div>
</div>
{% endif %}
<main class="section is-flex-grow-1">
<div class="container">
{# almost every view needs to know the user shelves #}
{% with request.user.shelf_set.all as user_shelves %}
{% block content %}
{% endblock %}
{% endwith %}
</div>
</main>
<div role="region" aria-live="polite" id="live-messages">
<p id="status-success-message" class="live-message is-sr-only is-hidden">{% trans "Successfully posted status" %}</p>
<p id="status-error-message" class="live-message notification is-danger p-3 pr-5 pl-5 is-hidden">{% trans "Error posting status" %}</p>
</div>
<footer class="footer">
<div class="container">
<div class="columns">
<div class="column is-one-fifth">
<p>
<a href="{% url 'about' %}">{% blocktrans with site_name=site.name %}About {{ site_name }}{% endblocktrans %}</a>
</p>
{% if site.admin_email %}
<p>
<a href="mailto:{{ site.admin_email }}">{% trans "Contact site admin" %}</a>
</p>
{% endif %}
<p>
<a href="https://docs.joinbookwyrm.com/">{% trans "Documentation" %}</a>
</p>
{% if request.user.is_authenticated %}
<p id="tour-begin">
<a href="/guided-tour/True">{% trans "Guided Tour" %}</a>
</p>
{% endif %}
</div>
<div class="column content is-two-fifth">
{% if site.support_link %}
<p>
<span class="icon icon-heart"></span>
{% blocktrans with site_name=site.name support_link=site.support_link support_title=site.support_title %}Support {{ site_name }} on <a href="{{ support_link }}" target="_blank">{{ support_title }}</a>{% endblocktrans %}
</p>
{% endif %}
<p>
{% blocktrans %}BookWyrm's source code is freely available. You can contribute or report issues on <a href="https://github.com/mouse-reeve/bookwyrm">GitHub</a>.{% endblocktrans %}
</p>
</div>
{% if site.footer_item %}
<div class="column">
<p>{{ site.footer_item|safe }}</p>
</div>
{% endif %}
</div>
</div>
</footer>
{% endblock %}
<script>
var csrf_token = '{{ csrf_token }}';
</script>
<script src="{% static "js/bookwyrm.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/localstorage.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/status_cache.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/vendor/quagga.min.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/vendor/shepherd.min.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/guided_tour.js" %}?v={{ js_cache }}"></script>
{% block scripts %}{% endblock %}
</body>
</html>