Redesign (front page, login page)
This commit is contained in:
Mouse Reeve
@ -5,7 +5,7 @@
|
||||
<div>
|
||||
<h2><q>{{ book.title }}</q> and You</h2>
|
||||
<p>{% if shelf %}On shelf <q>{{ shelf.name }}</q>{% endif %}</p>
|
||||
{% include 'snippets/shelve-button.html' with book=book pulldown=True %}
|
||||
{% include 'snippets/shelve_button.html' with book=book pulldown=True %}
|
||||
|
||||
<div id="tag-cloud">
|
||||
{% for tag in user_tags %}
|
||||
|
||||
@ -2,44 +2,52 @@
|
||||
{% load fr_display %}
|
||||
{% block content %}
|
||||
|
||||
<div id="sidebar">
|
||||
<div class="all-shelves content-container">
|
||||
{% for shelf in shelves %}
|
||||
{% if shelf.books %}
|
||||
<div>
|
||||
{% if shelves %}
|
||||
{% for shelf in shelves %}
|
||||
<h2>{{ shelf.name }}</h2>
|
||||
{% for book in shelf.books %}
|
||||
<div class="book-preview">
|
||||
{% include 'snippets/book.html' with book=book size="small" %}
|
||||
<h2>{{ shelf.name }}
|
||||
{% if shelf.size > shelf.books|length %}
|
||||
<small>(<a href="/shelf/{{ user | username }}/{{ shelf.identifier }}">See all {{ shelf.size }}</a>)</small>
|
||||
{% endif %}
|
||||
</h2>
|
||||
<div class="covers-shelf {{ shelf.identifier }}">
|
||||
{% for book in shelf.books %}
|
||||
<div class="book-preview" onclick="show_compose(this)" id="book-{{ book.id }}">
|
||||
{% include 'snippets/book_cover.html' with book=book %}
|
||||
{% include 'snippets/shelve_button.html' with book=book %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if shelf.size > shelf.books.count %}
|
||||
<a href="/shelf/{{ user | username }}/{{ shelf.identifier }}">See all {{ shelf.size }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
<h2>Reading Activity</h2>
|
||||
<p>Start a book!</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Recently Added Books</h2>
|
||||
{% for book in recent_books %}
|
||||
<div class="book-preview">
|
||||
{% include 'snippets/book.html' with book=book size="small" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="feed">
|
||||
{% include 'snippets/tabs.html' with tabs=feed_tabs active_tab=active_tab %}
|
||||
|
||||
{% for activity in activities %}
|
||||
{% include 'snippets/status.html' with status=activity depth=1 description=True %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% for shelf in shelves %}
|
||||
{% for book in shelf.books %}
|
||||
<div class="compose-suggestion" id="compose-book-{{ book.id }}">
|
||||
<span class="close icon icon-close" onclick="hide_element(this)">
|
||||
<span class="hidden-text">Close</span>
|
||||
</span>
|
||||
<div class="content-container">
|
||||
{% include 'snippets/create_status.html' with book=book user=request.user %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<div id="feed">
|
||||
<div class="content-container tabs">
|
||||
{% include 'snippets/tabs.html' with tabs=feed_tabs active_tab=active_tab %}
|
||||
</div>
|
||||
|
||||
{% for activity in activities %}
|
||||
<div class="content-container">
|
||||
{% include 'snippets/status.html' with status=activity %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script src="/static/js/feed.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
@ -2,15 +2,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>FediReads</title>
|
||||
<title>BookWyrm</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link type="text/css" rel="stylesheet" href="/static/format.css">
|
||||
<link type="text/css" rel="stylesheet" href="/static/icons.css">
|
||||
|
||||
<link rel="shortcut icon" type="image/x-icon" href="/static/images/favicon.ico">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="FediReads">
|
||||
<meta name="og:title" content="FediReads">
|
||||
<meta name="twitter:title" content="BookWyrm">
|
||||
<meta name="og:title" content="BookWyrm">
|
||||
<meta name="twitter:description" content="Federated Social Reading">
|
||||
<meta name="og:description" content="Federated Social Reading">
|
||||
<meta name="twitter:creator" content="@tripofmice">
|
||||
@ -22,40 +23,43 @@
|
||||
|
||||
<div id="top-bar">
|
||||
<header>
|
||||
<div>
|
||||
<div id="branding"><a href="/">📚FediReads</a></div>
|
||||
<div id="actions">
|
||||
<div id="account">
|
||||
{% if request.user.is_authenticated %}
|
||||
<form name="logout" action="/logout/" method="post">
|
||||
{% csrf_token %}
|
||||
Welcome, {% include 'snippets/username.html' with user=request.user %}
|
||||
<input type="submit" value="Log out"></input>
|
||||
</form>
|
||||
{% else %}
|
||||
<form name="login" action="/login/" method="post">
|
||||
{% csrf_token %}
|
||||
{% for field in login_form %}
|
||||
{{ field }}
|
||||
{% endfor %}
|
||||
<input type="submit" value="Log in"></input>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="search">
|
||||
<form action="/search/">
|
||||
<input type="text" name="q" placeholder="search"></input>
|
||||
<input type="submit" value="🔍"></input>
|
||||
</form>
|
||||
</div>
|
||||
{% if request.user.is_authenticated %}
|
||||
<div id="notification">
|
||||
<a href="/notifications">
|
||||
🔔 ({{ request.user | notification_count }})
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div id="branding"><a href="/"><img id="logo" src="/static/images/logo-small.png" alt="BookWyrm"></img></a></div>
|
||||
|
||||
<ul class="menu">
|
||||
<li><a href="/user/{{request.user.localname}}">Your shelves</a></li>
|
||||
<li><a href="/#feed">Updates</a></li>
|
||||
<li><a href="/books">Discover Books</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="actions">
|
||||
<div id="search">
|
||||
<form action="/search/">
|
||||
<input type="text" name="q" placeholder="Search for a book or user"></input>
|
||||
<button type="submit">
|
||||
<span class="icon icon-search">
|
||||
<span class="hidden-text">search</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% if request.user.is_authenticated %}
|
||||
<div id="notifications">
|
||||
<a href="/notifications">
|
||||
<span class="icon icon-bell">
|
||||
<span class="hidden-text">Notitications</span>
|
||||
</span>
|
||||
{% if request.user|notification_count %}<span class="count">{{ request.user | notification_count }}</span>{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="pulldown-container">
|
||||
{% include 'snippets/avatar.html' with user=request.user %}
|
||||
<ul class="pulldown">
|
||||
<li><a href="/user/{{ request.user }}">Your profile</a></li>
|
||||
<li><a href="/user-edit/">Settings</a></li>
|
||||
<li><a href="/logout/">Log out</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
@ -65,6 +69,10 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var csrf_token = {{ csrf_token }};
|
||||
</script>
|
||||
<script src="/static/js/shared.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,14 +1,34 @@
|
||||
{% extends 'layout.html' %}
|
||||
{% block content %}
|
||||
<div id="content">
|
||||
<div class="row">
|
||||
|
||||
<div class="content-container login">
|
||||
<h2>Create an Account</h2>
|
||||
<p><small>
|
||||
With a BookWyrm account, you can track and share your reading activity with
|
||||
friends here and on any other federated server, like Mastodon and PixelFed.
|
||||
</small></p>
|
||||
|
||||
<div>
|
||||
<form name="login" method="post">
|
||||
<form name="register" method="post" action="/register">
|
||||
{% csrf_token %}
|
||||
{{ register_form.as_p }}
|
||||
<button type="submit">Create account</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-container login">
|
||||
<h2>Log in</h2>
|
||||
<div>
|
||||
<form name="login" method="post" action="/user-login">
|
||||
{% csrf_token %}
|
||||
{{ login_form.as_p }}
|
||||
<button type="submit">Log in</button>
|
||||
</form>
|
||||
<a href="/register/">Create a new account</a>
|
||||
<p><small><a href="/reset-password">Forgot your password?</a></small></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
{% extends 'layout.html' %}
|
||||
{% block content %}
|
||||
<div id="content">
|
||||
<div>
|
||||
<form name="register" method="post">
|
||||
{% csrf_token %}
|
||||
{{ register_form.as_p }}
|
||||
<button type="submit">Create account</button>
|
||||
</form>
|
||||
|
||||
<a href="/login/">Log in with existing account</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -1,10 +0,0 @@
|
||||
{% load humanize %}
|
||||
<h2>
|
||||
{% include 'snippets/avatar.html' with user=activity.user %}
|
||||
{% include 'snippets/username.html' with user=activity.user %}
|
||||
{{ content | safe }}
|
||||
<span class="time-ago">
|
||||
<a href="{{ activity.absolute_id }}">{{ activity.published_date | naturaltime }}</a>
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
@ -15,4 +15,4 @@
|
||||
<blockquote>{{ book.description | description }}</blockquote>
|
||||
{% endif %}
|
||||
|
||||
{% include 'snippets/shelve-button.html' with book=book pulldown=shelf_pulldown %}
|
||||
{% include 'snippets/shelve_button.html' with book=book pulldown=shelf_pulldown %}
|
||||
|
||||
6
fedireads/templates/snippets/covers_shelf.html
Normal file
6
fedireads/templates/snippets/covers_shelf.html
Normal file
@ -0,0 +1,6 @@
|
||||
{% load fr_display %}
|
||||
{% for book in books %}
|
||||
<div class="book-preview">
|
||||
{% include 'snippets/book.html' with rating=rating %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
32
fedireads/templates/snippets/create_status.html
Normal file
32
fedireads/templates/snippets/create_status.html
Normal file
@ -0,0 +1,32 @@
|
||||
{% load humanize %}
|
||||
{% load fr_display %}
|
||||
|
||||
<h2>
|
||||
{% include 'snippets/avatar.html' with user=user %}
|
||||
Your thoughts on
|
||||
<a href="/book/{{ book.openlibrary_key }}">{{ book.title }}</a>
|
||||
by {% include 'snippets/authors.html' with book=book %}
|
||||
</h2>
|
||||
|
||||
<div class="tabs secondary">
|
||||
<div class="tab active">
|
||||
Review
|
||||
</div>
|
||||
<div class="tab">
|
||||
Comment
|
||||
</div>
|
||||
<div class="tab">
|
||||
Quote
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="book-preview">
|
||||
{% include 'snippets/book_cover.html' with book=book %}
|
||||
<form class="review-form" name="review" action="/review/" method="post">
|
||||
{% csrf_token %}
|
||||
{# TODO: this shouldn't use the openlibrary key #}
|
||||
<input type="hidden" name="book" value="{{ book.openlibrary_key }}"></input>
|
||||
{{ review_form.as_p }}
|
||||
<button type="submit">Post review</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -5,7 +5,7 @@
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="book" value="{{ book.id }}"></input>
|
||||
<input type="hidden" name="shelf" value="{% shelve_button_identifier book %}"></input>
|
||||
<button type="submit">{% shelve_button_text book %}</button>
|
||||
<button class="secondary" type="submit">{% shelve_button_text book %}</button>
|
||||
</form>
|
||||
|
||||
{% else %}
|
||||
@ -21,7 +21,7 @@
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit">Shelve</button>
|
||||
<button class="secondary" type="submit">Shelve</button>
|
||||
</form>
|
||||
|
||||
{% endif %}
|
||||
@ -1,21 +1,48 @@
|
||||
{% load humanize %}
|
||||
{% load fr_display %}
|
||||
<div class="post {{ status.status_type|lower }} depth-{{ depth }} {% if main %}main{% else %}reply{% endif %}">
|
||||
{% include 'snippets/activity_banner.html' with activity=status %}
|
||||
<h2>
|
||||
{% include 'snippets/avatar.html' with user=status.user %}
|
||||
{% include 'snippets/username.html' with user=status.user %}
|
||||
{% if status.status_type == 'Update' %}
|
||||
{{ status.content | safe }}
|
||||
{% elif status.status_type == 'Review' %}
|
||||
reviewed {{ status.book.title }}
|
||||
{% elif status.reply_parent %}
|
||||
{% with parent_status=status|parent %}
|
||||
replied to {% include 'snippets/username.html' with user=parent_status.user possessive=True %} <a href="{{parent_status.absolute_id }}">{{ parent_status.status_type|lower }}</a>
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
<span class="time-ago">
|
||||
<a href="{{ status.absolute_id }}">{{ status.published_date | naturaltime }}</a>
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
{% if not hide_book and status.mention_books.count %}
|
||||
<div class="book-preview">
|
||||
{% include 'snippets/book.html' with book=status.mention_books.first %}
|
||||
{% if status.status_type == 'Review' %}
|
||||
{% include 'snippets/book.html' with book=status.mention_books.first %}
|
||||
{% else %}
|
||||
{% include 'snippets/book.html' with book=status.mention_books.first description=True %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if not hide_book and status.book%}
|
||||
<div class="book-preview">
|
||||
{% include 'snippets/book.html' with book=status.book %}
|
||||
{% if status.status_type == 'Review' %}
|
||||
{% include 'snippets/book.html' with book=status.book %}
|
||||
{% else %}
|
||||
{% include 'snippets/book.html' with book=status.book description=True %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if status.status_type == 'Review' %}<h4>{{ status.name }}
|
||||
<small>{{ status.rating | stars }} stars, by {% include 'snippets/username.html' with user=status.user %}</small>
|
||||
</h4>{% endif %}
|
||||
{% if status.status_type != 'Update' %}
|
||||
<blockquote>{{ status.content | safe }}</blockquote>
|
||||
{% endif %}
|
||||
{% if not max_depth and status.reply_parent or status|replies %}<p><a href="{{ status.absolute_id }}">Thread</a>{% endif %}
|
||||
{% include 'snippets/interaction.html' with activity=status %}
|
||||
</div>
|
||||
{% include 'snippets/interaction.html' with activity=status %}
|
||||
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
<div class="tabs">
|
||||
{% for tab in tabs %}
|
||||
<div class="tab {% if tab == active_tab %}active{% endif %}">
|
||||
<a href="{{ path }}/{{ tab }}">{{ tab }}</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for tab in tabs %}
|
||||
<div class="tab {% if tab.id == active_tab %}active{% endif %}">
|
||||
<a href="{{ path }}/{{ tab.id }}">{{ tab.display }}</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
{% load fr_display %}
|
||||
<a href="/user/{{ user | username }}" class="user">{% if user.name %}{{ user.name }}{% else %}{{ user | username }}{% endif %}</a> {% if show_full and user.name or show_full and user.localname %} ({{ user.username }}){% endif %}
|
||||
<a href="/user/{{ user | username }}" class="user">{% if user.name %}{{ user.name }}{% else %}{{ user | username }}{% endif %}</a>{% if possessive %}'s{% endif %}{% if show_full and user.name or show_full and user.localname %} ({{ user.username }}){% endif %}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
{% if is_self %}
|
||||
<div class="interaction">
|
||||
<a href="/edit_profile_page/">Edit profile</a>
|
||||
<a href="/user-edit/">Edit profile</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user