moviewyrm/bookwyrm/templates/get_started/layout.html
officialkzhang f62e66f5ee
Revised HTML element for onboarding logo
Added navbar class to the parent header of the onboarding logo and removed the previously appended icon class from the image.
2022-01-27 14:51:57 -05:00

63 lines
2.8 KiB
HTML

{% extends 'layout.html' %}
{% load i18n %}
{% load static %}
{% block title %}{% trans "Welcome" %}{% endblock %}
{% block content %}
{% with site_name=site.name %}
<div class="modal is-active" role="dialog" aria-modal="true" aria-labelledby="get_started_header">
<div class="modal-background"></div>
<div class="modal-card is-fullwidth">
<header class="modal-card-head navbar">
<img
class="image logo mr-2"
src="{% if site.logo_small %}{% get_media_prefix %}{{ site.logo_small }}{% else %}{% static "images/logo-small.png" %}{% endif %}"
aria-hidden="true"
alt="{{ site.name }}"
>
<h1 class="modal-card-title" id="get_started_header">
{% blocktrans %}Welcome to {{ site_name }}!{% endblocktrans %}
<span class="subtitle is-block">
{% trans "These are some first steps to get you started." %}
</span>
</h1>
<a href="/" class="delete" aria-label="{% trans 'Close' %}"></a>
</header>
<section class="modal-card-body">
{% block panel %}{% endblock %}
</section>
<footer class="modal-card-foot is-flex is-justify-content-space-between">
<nav class="breadcrumb mb-0" aria-label="breadcrumbs">
<ul>
{% url 'get-started-profile' as url %}
<li {% if request.path in url %}class="is-active"{% endif %}>
<a {% if request.path in url %}aria-current="page"{% endif %} href="{{ url }}">{% trans "Create your profile" %}</a>
</li>
{% url 'get-started-books' as url %}
<li {% if request.path in url %}class="is-active"{% endif %}>
<a {% if request.path in url %}aria-current="page"{% endif %} href="{{ url }}">{% trans "Add books" %}</a>
</li>
{% url 'get-started-users' as url %}
<li {% if request.path in url %}class="is-active"{% endif %}>
<a {% if request.path in url %}aria-current="page"{% endif %} href="{{ url }}">{% trans "Find friends" %}</a>
</li>
</ul>
</nav>
{% if next %}
<a href="{% url next %}" class="button">
<span>{% trans "Skip this step" %}</span>
<span class="icon icon-arrow-right" aria-hidden="true"></span>
</a>
{% else %}
<a href="/" class="button is-primary">{% trans "Finish" %}</a>
{% endif %}
</footer>
</div>
<a href="/" class="modal-close is-large" aria-label="{% trans 'Close' %}"></a>
</div>
{% endwith %}
{% endblock %}