Merge pull request #839 from mouse-reeve/onboarding
Get started flow for new users
This commit is contained in:
@ -54,27 +54,7 @@
|
||||
{# suggested users on the first page, two statuses down #}
|
||||
<section class="block">
|
||||
<h2 class="title is-5">{% trans "Who to follow" %}</h2>
|
||||
<div class="columns is-mobile scroll-x mb-0">
|
||||
{% for user in suggested_users %}
|
||||
<div class="column is-flex">
|
||||
<div class="box has-text-centered is-shadowless has-background-white-bis m-0">
|
||||
<a href="{{ user.local_path }}" class="has-text-black">
|
||||
{% include 'snippets/avatar.html' with user=user large=True %}
|
||||
<span title="{{ user.display_name }}" class="is-block is-6 has-text-weight-bold">{{ user.display_name|truncatechars:10 }}</span>
|
||||
<span title="@{{ user|username }}" class="is-block pb-3">@{{ user|username|truncatechars:8 }}</span>
|
||||
</a>
|
||||
{% include 'snippets/follow_button.html' with user=user minimal=True %}
|
||||
{% if user.mutuals %}
|
||||
<p class="help">
|
||||
{% blocktrans with mutuals=user.mutuals|intcomma count counter=user.mutuals %}{{ mutuals }} follower you follow{% plural %}{{ mutuals }} followers you follow{% endblocktrans %}
|
||||
</p>
|
||||
{% elif user.shared_books %}
|
||||
<p class="help">{% blocktrans with shared_books=user.shared_books|intcomma count counter=user.shared_books %}{{ shared_books }} book on your shelves{% plural %}{{ shared_books }} books on your shelves{% endblocktrans %}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% include 'feed/suggested_users.html' with suggested_users=suggested_users %}
|
||||
<a class="help" href="{% url 'directory' %}">View directory <span class="icon icon-arrow-right"></a>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
25
bookwyrm/templates/feed/suggested_users.html
Normal file
25
bookwyrm/templates/feed/suggested_users.html
Normal file
@ -0,0 +1,25 @@
|
||||
{% load i18n %}
|
||||
{% load bookwyrm_tags %}
|
||||
{% load humanize %}
|
||||
<div class="columns is-mobile scroll-x mb-0">
|
||||
{% for user in suggested_users %}
|
||||
<div class="column is-flex">
|
||||
<div class="box has-text-centered is-shadowless has-background-white-bis m-0">
|
||||
<a href="{{ user.local_path }}" class="has-text-black">
|
||||
{% include 'snippets/avatar.html' with user=user large=True %}
|
||||
<span title="{{ user.display_name }}" class="is-block is-6 has-text-weight-bold">{{ user.display_name|truncatechars:10 }}</span>
|
||||
<span title="@{{ user|username }}" class="is-block pb-3">@{{ user|username|truncatechars:8 }}</span>
|
||||
</a>
|
||||
{% include 'snippets/follow_button.html' with user=user minimal=True %}
|
||||
{% if user.mutuals %}
|
||||
<p class="help">
|
||||
{% blocktrans with mutuals=user.mutuals|intcomma count counter=user.mutuals %}{{ mutuals }} follower you follow{% plural %}{{ mutuals }} followers you follow{% endblocktrans %}
|
||||
</p>
|
||||
{% elif user.shared_books %}
|
||||
<p class="help">{% blocktrans with shared_books=user.shared_books|intcomma count counter=user.shared_books %}{{ shared_books }} book on your shelves{% plural %}{{ shared_books }} books on your shelves{% endblocktrans %}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
14
bookwyrm/templates/get_started/book_preview.html
Normal file
14
bookwyrm/templates/get_started/book_preview.html
Normal file
@ -0,0 +1,14 @@
|
||||
{% load i18n %}
|
||||
<div class="column is-narrow is-clipped has-text-centered">
|
||||
{% include 'snippets/book_cover.html' with book=book %}
|
||||
<label class="label" for="id_shelve_{{ book.id }}">
|
||||
<div class="select is-small">
|
||||
<select name="{{ book.id }}" aria-label="{% blocktrans with book_title=book.title %}Have you read {{ book_title }}?{% endblocktrans %}">
|
||||
<option disabled selected value>Add to your books</option>
|
||||
{% for shelf in request.user.shelf_set.all %}
|
||||
<option value="{{ shelf.id }}">{{ shelf.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
57
bookwyrm/templates/get_started/books.html
Normal file
57
bookwyrm/templates/get_started/books.html
Normal file
@ -0,0 +1,57 @@
|
||||
{% extends 'get_started/layout.html' %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block panel %}
|
||||
<div class="block">
|
||||
<h2 class="title is-4">{% trans "What are you reading?" %}</h2>
|
||||
<form class="field has-addons" method="get" action="{% url 'get-started-books' %}">
|
||||
<div class="control">
|
||||
<input type="text" name="query" value="{{ request.GET.query }}" class="input" placeholder="{% trans 'Search for a book' %}" aria-label="{% trans 'Search for a book' %}">
|
||||
{% if request.GET.query and not book_results %}
|
||||
<p class="help">{% blocktrans %}Sorry, books were found. You can add books when you start using {{ site_name }}{% endblocktrans %}</p>
|
||||
{% endif %}
|
||||
</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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form class="block" name="add-books" method="post" action="{% url 'get-started-books' %}">
|
||||
{% csrf_token %}
|
||||
<h3 class="title is-5">{% trans "Suggested Books" %}</h3>
|
||||
<fieldset name="books" class="columns scroll-x">
|
||||
{% if book_results %}
|
||||
<div class="column is-narrow content">
|
||||
<p class="help mb-0">Search results</p>
|
||||
<div class="columns">
|
||||
{% for book in book_results %}
|
||||
{% include 'get_started/book_preview.html' %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if popular_books %}
|
||||
<div class="column is-narrow content">
|
||||
<p class="help mb-0">
|
||||
{% blocktrans %}Popular on {{ site_name }}{% endblocktrans %}
|
||||
</p>
|
||||
<div class="columns">
|
||||
{% for book in popular_books %}
|
||||
{% include 'get_started/book_preview.html' %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if not book_results and not popular_books %}
|
||||
<p><em>{% trans "No books found" %}</em></p>
|
||||
{% endif %}
|
||||
</fieldset>
|
||||
<button type="submit" class="button is-primary">{% trans "Save & continue" %}</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
53
bookwyrm/templates/get_started/layout.html
Normal file
53
bookwyrm/templates/get_started/layout.html
Normal file
@ -0,0 +1,53 @@
|
||||
{% extends 'layout.html' %}
|
||||
{% load i18n %}
|
||||
|
||||
{% 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">
|
||||
<h1 class="modal-card-title" id="get-started-header">
|
||||
{% trans "Getting Started" %}
|
||||
</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 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 %}
|
||||
|
||||
|
58
bookwyrm/templates/get_started/profile.html
Normal file
58
bookwyrm/templates/get_started/profile.html
Normal file
@ -0,0 +1,58 @@
|
||||
{% extends 'get_started/layout.html' %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block panel %}
|
||||
<div class="block">
|
||||
<h2 class="title is-4">{% trans "A little bit about you" %}</h2>
|
||||
{% if form.non_field_errors %}
|
||||
<p class="notification is-danger">{{ form.non_field_errors }}</p>
|
||||
{% endif %}
|
||||
<form name="edit-profile" action="{% url 'get-started-profile' %}" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div class="columns">
|
||||
<div class="column is-two-thirds">
|
||||
<div class="block">
|
||||
<label class="label" for="id_name">{% trans "Display name:" %}</label>
|
||||
<input type="text" name="name" maxlength="100" class="input" id="id_name" placeholder="{{ user.localname }}" value="{% if request.user.name %}{{ request.user.name }}{% endif %}">
|
||||
{% for error in form.name.errors %}
|
||||
<p class="help is-danger">{{ error | escape }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="block">
|
||||
<label class="label" for="id_summary">{% trans "Summary:" %}</label>
|
||||
<textarea name="summary" cols="None" rows="None" class="textarea" id="id_summary" placeholder="{% trans 'A little bit about you' %}" value="{{ request.user.summary }}"></textarea>
|
||||
{% for error in form.summary.errors %}
|
||||
<p class="help is-danger">{{ error | escape }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-one-third">
|
||||
<div class="block">
|
||||
<label class="label" for="id_avatar">{% trans "Avatar:" %}</label>
|
||||
{{ form.avatar }}
|
||||
{% for error in form.avatar.errors %}
|
||||
<p class="help is-danger">{{ error | escape }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<label class="checkbox label" for="id_manually_approves_followers">
|
||||
{% trans "Manually approve followers:" %}
|
||||
{{ form.manually_approves_followers }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="block">
|
||||
<label class="checkbox label" for="id_discoverable">
|
||||
{% trans "Show this account in suggested users:" %}
|
||||
<input type="checkbox" name="discoverable" class="checkbox" id="id_discoverable" checked>
|
||||
</label>
|
||||
{% url 'directory' as path %}
|
||||
<p class="help">{% trans "Your account will show up in the directory, and may be recommended to other BookWyrm users." %}</p>
|
||||
</div>
|
||||
<div class="block"><button class="button is-primary" type="submit">{% trans "Save & continue" %}</button></div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
28
bookwyrm/templates/get_started/users.html
Normal file
28
bookwyrm/templates/get_started/users.html
Normal file
@ -0,0 +1,28 @@
|
||||
{% extends 'get_started/layout.html' %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block panel %}
|
||||
<div class="block">
|
||||
<h2 class="title is-4">{% trans "Who to follow" %}</h2>
|
||||
|
||||
<p class="subtitle is-6">You can follow users on other BookWyrm instances and federated services like Mastodon.</p>
|
||||
<form class="field has-addons" method="get" action="{% url 'get-started-users' %}">
|
||||
<div class="control">
|
||||
<input type="text" name="query" value="{{ request.GET.query }}" class="input" placeholder="{% trans 'Search for a user' %}" aria-label="{% trans 'Search for a user' %}">
|
||||
{% if request.GET.query and not user_results %}
|
||||
<p class="help">{% trans "Sorry, no users were found" %}</p>
|
||||
{% endif %}
|
||||
</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>
|
||||
</form>
|
||||
|
||||
{% include 'feed/suggested_users.html' with suggested_users=suggested_users %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
Reference in New Issue
Block a user