Adds review box to main page layout

This commit is contained in:
Mouse Reeve 2020-09-29 17:43:30 -07:00
parent b762d2c226
commit 50f2f4788e
6 changed files with 89 additions and 88 deletions

View file

@ -81,15 +81,27 @@ input.toggle-control:checked ~ .toggle-content {
.cover-container {
height: 250px;
}
.cover-container.is-medium {
height: 150px;
}
.cover-container.is-medium .no-cover div {
font-size: 0.9em;
padding: 0.3em;
}
.cover-container.is-small {
height: 100px;
}
.cover-container.is-small .no-cover div {
font-size: 0.7em;
padding: 0.1em;
}
.book-cover {
height: 100%;
object-fit: scale-down;
}
.no-cover {
position: relative;
white-space: normal;
}
.no-cover div {
position: absolute;
@ -99,10 +111,6 @@ input.toggle-control:checked ~ .toggle-content {
left: 0;
text-align: center;
}
.is-small .no-cover div {
font-size: 0.7em;
padding: 0.1em;
}
/* --- AVATAR --- */

View file

@ -32,7 +32,7 @@ function rate_stars(e) {
}
function tabChange(e) {
var target = e.target.parentElement.parentElement;
var target = e.target.closest('li')
var identifier = target.getAttribute('data-id');
var tabs = target.parentElement.children;

View file

@ -2,7 +2,30 @@
{% load fr_display %}
{% block content %}
<div class="columns">
<div class="column">
<h2 class="title is-3">Recent Books</h2>
<div class="tabs is-small is-toggle">
<ul>
{% for book in user_books|slice:3 %}
<li class="{% if forloop.first %}is-active{% endif %}" data-id="tab-book-{{ book.id }}">
<label for="book-{{ book.id }}" onclick="tabChange(event)"><a>{% include 'snippets/book_cover.html' with book=book size="medium" %}</a></label>
</li>
{% endfor %}
</ul>
</div>
{% for book in user_books|slice:3 %}
<div>
<input class="toggle-control" type="radio" name="recent-books" id="book-{{ book.id }}" {% if forloop.first %}checked{% endif %}>
<div class="toggle-content hidden">
{% include 'snippets/create_status.html' with book=book %}
</div>
</div>
{% endfor %}
</div>
<div class="column is-two-thirds">
<h2 class="title is-3">Updates</h2>
{% for activity in activities %}
<div class="block">
{% include 'snippets/status.html' with status=activity %}
@ -29,4 +52,5 @@
{% endif %}
</nav>
</div>
</div>
{% endblock %}

View file

@ -1,14 +1,15 @@
{% load fr_display %}
<div class="level is-mobile">
{% for shelf in shelves %}
{% if shelf.books %}
<div class="container">
<div>
<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>
<div class="level is-mobile">
{% for book in shelf.books %}
<div>
<label for="book-{{ book.id }}-radio">
@ -21,3 +22,4 @@
</div>
{% endif %}
{% endfor %}
</div>

View file

@ -1,6 +1,8 @@
{% load humanize %}
{% load fr_display %}
<div class="columns">
<div class="column">
<div class="tabs is-boxed">
<ul>
<li class="is-active" data-id="tab-review-{{ book.id }}" data-category="tab-option-{{ book.id }}">
@ -15,57 +17,49 @@
</ul>
</div>
<div class="columns">
{% if not hide_cover %}
<div class="column is-narrow">
{% include 'snippets/book_cover.html' with book=book %}
</div>
{% endif %}
<div class="column">
<div>
<input class="toggle-control" type="radio" name="status-tabs" id="review-{{ book.id }}" checked>
<input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="review-{{ book.id }}" checked>
<form class="toggle-content hidden tab-option-{{ book.id }}" name="review" action="/review/" method="post" id="tab-review-{{ book.id }}">
{% csrf_token %}
<input type="hidden" name="book" value="{{ book.id }}">
<input type="hidden" name="book-{{ book.id }}" value="{{ book.id }}">
<div class="control">
<label class="label" for="id_name">Title:</label>
{{ review_form.name }}
<input type="text" name="name" maxlength="255" class="input" required="" id="id_name" placeholder="My review of '{{ book.title }}'">
</div>
<div class="control">
<label class="label" for="id_content">Review:</label>
{% include 'snippets/rate_form.html' with book=book %}
{{ review_form.content }}
<textarea name="content" class="textarea" id="id_content"></textarea>
</div>
<button class="button is-primary" type="submit">post review</button>
</form>
</div>
<div>
<input class="toggle-control" type="radio" name="status-tabs" id="comment-{{ book.id }}">
<input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="comment-{{ book.id }}">
<form class="toggle-content hidden tab-option-{{ book.id }}" name="comment" action="/comment/" method="post" id="tab-comment-{{ book.id }}">
{% csrf_token %}
<input type="hidden" name="book" value="{{ book.id }}">
<input type="hidden" name="book-{{ book.id }}" value="{{ book.id }}">
<div class="control">
<label class="label" for="id_content">Comment:</label>
{{ comment_form.content }}
<textarea name="content" class="textarea" id="id_content" placeholder="Some thoughts on '{{ book.title }}'"></textarea>
</div>
<button class="button is-primary" type="submit">post comment</button>
</form>
</div>
<div>
<input class="toggle-control" type="radio" name="status-tabs" id="quote-{{ book.id }}">
<input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="quote-{{ book.id }}">
<form class="toggle-content hidden tab-option-{{ book.id }}" name="quotation" action="/quotate/" method="post" id="tab-quotation-{{ book.id }}">
{% csrf_token %}
<input type="hidden" name="book" value="{{ book.id }}">
<input type="hidden" name="book-{{ book.id }}" value="{{ book.id }}">
<div class="control">
<label class="label" for="id_quote">Quote:</label>
{{ quotation_form.quote }}
<textarea name="quote" class="textarea" required="" id="id_quote" placeholder="An except from '{{ book.title }}'"></textarea>
</div>
<div class="control">
<label class="label" for="id_content">Comment:</label>
{{ quotation_form.content }}
<textarea name="content" class="textarea is-small" id="id_content"></textarea>
</div>
<button class="button is-primary" type="submit">post quote</button>
</form>

View file

@ -56,26 +56,6 @@ def home_tab(request, tab):
except ValueError:
page = 1
shelves = []
shelves = get_user_shelf_preview(
request.user,
[('reading', 3), ('read', 1), ('to-read', 3)]
)
size = sum(len(s['books']) for s in shelves)
# books new to the instance, for discovery
if size < 6:
recent_books = models.Work.objects.order_by(
'-created_date'
)[:6 - size]
recent_books = [b.default_edition for b in recent_books]
shelves.append({
'name': 'Recently added',
'identifier': None,
'books': recent_books,
'count': 6 - size,
})
# allows us to check if a user has shelved a book
user_books = models.Edition.objects.filter(shelves__user=request.user).all()
@ -88,15 +68,8 @@ def home_tab(request, tab):
prev_page = '/?page=%d' % (page - 1)
data = {
'user': request.user,
'shelves': shelves,
'user_books': user_books,
'activities': activities,
'feed_tabs': [
{'id': 'home', 'display': 'Home'},
{'id': 'local', 'display': 'Local'},
{'id': 'federated', 'display': 'Federated'}
],
'active_tab': tab,
'review_form': forms.ReviewForm(),
'quotation_form': forms.QuotationForm(),
'comment_form': forms.CommentForm(),