zedfrigg/bookwyrm
1
0
Fork 0
Code Activity
bookwyrm/bookwyrm/templates/layout.html

203 lines
9.7 KiB
HTML
Raw Normal View History

Use the right snippets on Templates
2021-06-07 18:13:24 +02:00
{% load layout %}
Adds custom compile management command
2022-03-04 12:40:06 -08:00
{% load sass_tags %}
Use the right snippets on Templates
2021-06-07 18:13:24 +02:00
{% load i18n %}
{% load static %}
Compiles css framework from sass (#1956) * Compiles css framework from sass * Adds watch commands * Copies existing css to sass file * Moves sass out of static path * Removes global linter I wasn't sure how to customize this, and it's not providing a lot of additional value on top of the domain-specific linters * Reverts invalid change to dockerfile * Changes stylelint path * Remove unused bulma files * Properly minifies generated css * Fixes regression in thread display * rgba function only works with percents for whatever reason * Hush stylelint * Removes trailing zeros * Compile sass in Django Co-authored-by: Joachim <joachim.robert@protonmail.com> * Python formatting * Updates linter * Updates commands * Adds css-config file Co-authored-by: Joachim <joachim.robert@protonmail.com> * Stylelint fix * Removes unused compiled bulma files Co-authored-by: Joachim <joachim.robert@protonmail.com>
2022-02-19 15:29:47 -08:00
Basic authentication views
2020-01-25 15:25:19 -08:00
<!DOCTYPE html>
Accessibility: add language to `lang` attr on `html` tag I only use the first subtag of the language string given by `get_language()`, because `get_language()` returns an all-lowercase string, and I don't know if it'll be considered valid by browsers.
2021-04-22 20:41:58 +02:00
<html lang="{% get_lang %}">
Basic authentication views
2020-01-25 15:25:19 -08:00
<head>
Use dash instead of vertical line to separate page name and site name
2021-09-18 17:09:18 -07:00
<title>{% block title %}BookWyrm{% endblock %} - {{ site.name }}</title>
Basic authentication views
2020-01-25 15:25:19 -08:00
<meta name="viewport" content="width=device-width, initial-scale=1">
Adds custom compile management command
2022-03-04 12:40:06 -08:00
<link href="{% sass_src site_theme %}" rel="stylesheet" type="text/css" />
Basic authentication views
2020-01-25 15:25:19 -08:00
Adds opensearch xml file
2021-09-10 16:47:59 -07:00
<link rel="search" type="application/opensearchdescription+xml" href="{% url 'opensearch' %}" title="{% blocktrans with site_name=site.name %}{{ site_name }} search{% endblocktrans %}" />
Use the right snippets on Templates
2021-06-07 18:13:24 +02:00
<link rel="shortcut icon" type="image/x-icon" href="{% if site.favicon %}{% get_media_prefix %}{{ site.favicon }}{% else %}{% static "images/favicon.ico" %}{% endif %}">
Add apple-touch-icon to global layout
2022-12-10 17:57:05 +01:00
<link rel="apple-touch-icon" href="{% if site.logo %}{{ media_full_url }}{{ site.logo }}{% else %}{% static "images/logo.png" %}{% endif %}">
Basic authentication views
2020-01-25 15:25:19 -08:00
Move all opengraph (/twitter) metadata into one template This makes it easier to modify & allows us to set title & description for specific types of pages. Sets us up for #2575
2023-01-11 16:17:41 -05:00
{% block opengraph %}
{% include 'snippets/opengraph.html' %}
Add opengraph image depending on context
2021-05-26 14:44:15 +02:00
{% endblock %}
Add serif styles
2021-12-20 23:38:18 +01:00
{% block head_links %}{% endblock %}
Basic authentication views
2020-01-25 15:25:19 -08:00
</head>
<body>
Adds setup templates
2022-02-17 10:02:27 -08:00
{% block body %}
Set body height
2021-04-15 21:51:14 +02:00
<nav class="navbar" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="/">
Translate `home page` on main layout
2021-12-04 16:17:51 +01:00
<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 %}">
Set body height
2021-04-15 21:51:14 +02:00
</a>
Handle navbar alignment thank to Bulma helper classes
2021-12-17 17:30:14 +01:00
<form class="navbar-item column is-align-items-start pt-5" action="{% url 'search' %}">
Set body height
2021-04-15 21:51:14 +02:00
<div class="field has-addons">
<div class="control">
Updates search box placeholder for logged out users
2021-09-20 12:28:08 -07:00
{% 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 %}
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
<input aria-label="{{ search_placeholder }}" id="tour-search" class="input" type="text" name="q" placeholder="{{ search_placeholder }}" value="{{ query }}">
Set body height
2021-04-15 21:51:14 +02:00
</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>
Fix barcode button
2022-02-26 23:28:13 -08:00
<div class="control">
Worked more on visuals of modal Need to finish camera selection mode.
2022-02-15 02:38:57 -08:00
<button class="button" type="button" data-modal-open="barcode-scanner-modal">
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
<span class="icon icon-barcode" title="{% trans 'Scan Barcode' %}" id="tour-barcode">
Super messy initial working version. To clean up.
2022-02-14 02:56:05 -08:00
<span class="is-sr-only">{% trans "Scan Barcode" %}</span>
</span>
</button>
Set body height
2021-04-15 21:51:14 +02:00
</div>
Fix navbar on mobile, make search an addon In reading up on Bulma I found the has-addons option which is a nice touch, I think
2020-11-20 21:19:26 -08:00
</div>
Set body height
2021-04-15 21:51:14 +02:00
</form>
Worked more on visuals of modal Need to finish camera selection mode.
2022-02-15 02:38:57 -08:00
{% include "search/barcode_modal.html" with id="barcode-scanner-modal" %}
Switches to Bulma for layout
2020-09-28 14:47:53 -07:00
Add notifications count on mobile header
2022-08-05 11:15:11 +02:00
<button
type="button"
tabindex="0"
class="navbar-burger pulldown-menu my-4 is-flex-touch is-align-items-center is-justify-content-center"
data-controls="main_nav"
aria-expanded="false"
aria-label="{% trans 'Main navigation menu' %}"
>
<i class="icon-dots-three-vertical" aria-hidden="true"></i>
{% with request.user.unread_notification_count as notification_count %}
<strong
class="{% if not notification_count %}is-hidden {% elif request.user.has_unread_mentions %}is-danger {% else %}is-primary {% endif %} tag is-small px-1"
data-poll-wrapper
>
<span class="is-sr-only">{% trans "Notifications" %}</span>
<strong data-poll="notifications" class="has-text-white">
{{ notification_count }}
</strong>
</strong>
{% endwith %}
Handle navbar alignment thank to Bulma helper classes
2021-12-17 17:30:14 +01:00
</button>
Fixes mobile menu dropdown
2021-01-17 20:31:37 -08:00
</div>
Switches to Bulma for layout
2020-09-28 14:47:53 -07:00
Always use underscores in html ids Plus some other shifting around
2021-08-08 18:40:47 -07:00
<div class="navbar-menu" id="main_nav">
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
<div class="navbar-start" id="tour-navbar-start">
Set body height
2021-04-15 21:51:14 +02:00
{% if request.user.is_authenticated %}
Handle navbar alignment thank to Bulma helper classes
2021-12-17 17:30:14 +01:00
<a href="/#feed" class="navbar-item mt-3 py-0">
Set body height
2021-04-15 21:51:14 +02:00
{% trans "Feed" %}
</a>
Handle navbar alignment thank to Bulma helper classes
2021-12-17 17:30:14 +01:00
<a href="{% url 'lists' %}" class="navbar-item mt-3 py-0">
Set body height
2021-04-15 21:51:14 +02:00
{% trans "Lists" %}
Use "tag" for notifications
2020-09-30 11:56:02 -07:00
</a>
Handle navbar alignment thank to Bulma helper classes
2021-12-17 17:30:14 +01:00
<a href="{% url 'discover' %}" class="navbar-item mt-3 py-0">
Show link to discover view
2021-08-08 08:07:20 -07:00
{% trans "Discover" %}
Switches out links in the top bar and dropdown
2021-05-10 15:55:42 -07:00
</a>
Set body height
2021-04-15 21:51:14 +02:00
{% endif %}
Redesign (front page, login page)
2020-03-15 14:15:36 -07:00
</div>
Set body height
2021-04-15 21:51:14 +02:00
<div class="navbar-end">
{% if request.user.is_authenticated %}
Uses details for user menu in main navbar
2022-04-08 13:11:41 -07:00
<div class="navbar-item mt-3 py-0">
{% include 'user_menu.html' %}
Set body height
2021-04-15 21:51:14 +02:00
</div>
Handle navbar alignment thank to Bulma helper classes
2021-12-17 17:30:14 +01:00
<div class="navbar-item mt-3 py-0">
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
<a href="{% url 'notifications' %}" class="tags has-addons" id="tour-notifications">
Set body height
2021-04-15 21:51:14 +02:00
<span class="tag is-medium">
<span class="icon icon-bell" title="{% trans 'Notifications' %}">
<span class="is-sr-only">{% trans "Notifications" %}</span>
</span>
</span>
Improves status template performance Reduces queries about about 65
2021-05-22 18:34:34 -07:00
{% with request.user.unread_notification_count as notification_count %}
Only make notification count red for mentions
2021-04-30 07:49:34 -07:00
<span
Improves status template performance Reduces queries about about 65
2021-05-22 18:34:34 -07:00
class="{% if not notification_count %}is-hidden {% elif request.user.has_unread_mentions %}is-danger {% endif %}tag is-medium transition-x"
Only make notification count red for mentions
2021-04-30 07:49:34 -07:00
data-poll-wrapper
>
Improves status template performance Reduces queries about about 65
2021-05-22 18:34:34 -07:00
<span data-poll="notifications">{{ notification_count }}</span>
Set body height
2021-04-15 21:51:14 +02:00
</span>
Improves status template performance Reduces queries about about 65
2021-05-22 18:34:34 -07:00
{% endwith %}
Set body height
2021-04-15 21:51:14 +02:00
</a>
</div>
{% else %}
Handle navbar alignment thank to Bulma helper classes
2021-12-17 17:30:14 +01:00
<div class="navbar-item pt-5 pb-0">
Set body height
2021-04-15 21:51:14 +02:00
{% if request.path != '/login' and request.path != '/login/' %}
<div class="columns">
<div class="column">
Stay on page when logging in from top bar Was this bugging other people? It bugged me to no end.
2021-08-02 16:24:36 -07:00
<form name="login" method="post" action="{% url 'login' %}?next={{ request.path }}">
Set body height
2021-04-15 21:51:14 +02:00
{% 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">
Fixes label on layout login form
2021-10-16 10:20:06 -07:00
<label class="is-sr-only" for="id_password">{% trans "Password:" %}</label>
Set body height
2021-04-15 21:51:14 +02:00
<input type="password" name="password" maxlength="128" class="input" required="" id="id_password" placeholder="{% trans 'password' %}">
Use reverse lookups for urls
2021-05-04 09:34:16 -07:00
<p class="help"><a href="{% url 'password-reset' %}">{% trans "Forgot your password?" %}</a></p>
Set body height
2021-04-15 21:51:14 +02:00
</div>
<div class="column is-narrow">
<button class="button is-primary" type="submit">{% trans "Log in" %}</button>
</div>
Make login form wrap nicely on mobile Changing to columns from a grouped form item isn't my favorite, but I think it's okay, and it gets us better mobile behavior for free
2021-01-13 19:14:01 -08:00
</div>
Set body height
2021-04-15 21:51:14 +02:00
</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 %}
Discovery landing page
2021-01-03 11:10:04 -08:00
</div>
Hide join button when registration is closed
2021-01-03 15:41:20 -08:00
{% endif %}
Switches to Bulma for layout
2020-09-28 14:47:53 -07:00
</div>
Hide join button when registration is closed
2021-01-03 15:41:20 -08:00
{% endif %}
Basic authentication views
2020-01-25 15:25:19 -08:00
</div>
</div>
Switches to Bulma for layout
2020-09-28 14:47:53 -07:00
</div>
</nav>
Only show banner to authenticated users
2021-05-20 15:11:47 -07:00
{% if request.user.is_authenticated and active_announcements.exists %}
Remove extra whitespace in announcements
2022-10-20 07:45:53 -07:00
<div class="is-flex-grow-1">
Show announcements on all pages
2021-05-19 15:35:14 -07:00
<div class="container">
{% for announcement in active_announcements %}
Adds admin view for individual announcement
2021-05-20 08:09:35 -07:00
{% include 'snippets/announcement.html' with announcement=announcement %}
Show announcements on all pages
2021-05-19 15:35:14 -07:00
{% endfor %}
</div>
</div>
{% endif %}
Basic authentication views
2020-01-25 15:25:19 -08:00
Page must have one main landmark https://dequeuniversity.com/rules/axe/4.3/landmark-one-main
2022-02-12 16:10:40 +01:00
<main class="section is-flex-grow-1">
Set body height
2021-04-15 21:51:14 +02:00
<div class="container">
Fixes error in previous PR
2022-02-17 17:10:12 -08:00
{# almost every view needs to know the user shelves #}
{% with request.user.shelf_set.all as user_shelves %}
Set body height
2021-04-15 21:51:14 +02:00
{% block content %}
{% endblock %}
Fixes error in previous PR
2022-02-17 17:10:12 -08:00
{% endwith %}
Set body height
2021-04-15 21:51:14 +02:00
</div>
Page must have one main landmark https://dequeuniversity.com/rules/axe/4.3/landmark-one-main
2022-02-12 16:10:40 +01:00
</main>
Basic authentication views
2020-01-25 15:25:19 -08:00
General function for displaying messages
2021-09-10 10:12:37 -07:00
<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>
Uses the same snippet for the footer across different templates
2022-11-14 18:18:27 -08:00
{% include 'snippets/footer.html' %}
Adds overview page to setup
2022-02-17 13:01:36 -08:00
{% endblock %}
Use context processor to include site settings in templates
2020-12-11 12:07:37 -08:00
Redesign (front page, login page)
2020-03-15 14:15:36 -07:00
<script>
Javascript boost/favorite button
2020-03-15 18:12:45 -07:00
var csrf_token = '{{ csrf_token }}';
Redesign (front page, login page)
2020-03-15 14:15:36 -07:00
</script>
Clear localstorage items
2021-09-09 07:39:38 -07:00
Adds javascript cache value to templates
2021-09-10 10:57:16 -07:00
<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>
Move quagga to vendor.
2022-02-28 21:22:49 -08:00
<script src="{% static "js/vendor/quagga.min.js" %}?v={{ js_cache }}"></script>
add help button if page has tour - include logic in main layout to add button if there is a page tour available - add button for main user feed page
2022-06-12 19:41:50 +10:00
<script src="{% static "js/vendor/shepherd.min.js" %}?v={{ js_cache }}"></script>
make guided tour cancel button DRY Move cancel button function into a separate JS file. The selector JS for this function cannot be within bookwyrm.js because the guided tour elements load after bookwyrm.js.
2022-06-18 13:27:00 +10:00
<script src="{% static "js/guided_tour.js" %}?v={{ js_cache }}"></script>
Clear localstorage items
2021-09-09 07:39:38 -07:00
Move tabs javascript into separate file
2021-03-19 10:47:32 -07:00
{% block scripts %}{% endblock %}
Clear localstorage items
2021-09-09 07:39:38 -07:00
Basic authentication views
2020-01-25 15:25:19 -08:00
</body>
</html>
Copy permalink