From da69b82d8a446d5807a39e242f65d9fbd17b49e5 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sun, 29 Mar 2020 17:02:17 -0700
Subject: [PATCH] Clean up edit book page

---
 fedireads/static/format.css        | 31 +++++++++++++++++
 fedireads/templates/edit_book.html | 55 +++++++++++++++++++++++++-----
 2 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/fedireads/static/format.css b/fedireads/static/format.css
index 8278f255..f0b5e1a8 100644
--- a/fedireads/static/format.css
+++ b/fedireads/static/format.css
@@ -42,6 +42,16 @@ h2 {
     border-bottom: 3px solid #B2DBBF;
 }
 
+h3 {
+    font-size: 1rem;
+    margin: 1rem 0 0.5rem 0;
+    border-bottom: 3px solid #70C1B2;
+    font-weight: bold;
+}
+h3 small {
+    font-weight: normal;
+}
+
 #top-bar {
     overflow: visible;
     padding: 0.5rem;
@@ -222,9 +232,30 @@ ul.menu a {
     flex-grow: 1;
     display: inline-block;
 }
+
+
+.book-form textarea {
+    display: block;
+    width: 100%;
+    font-size: 0.9em;
+}
+.book-form label {
+    display: inline-block;
+    width: 8rem;
+    vertical-align: top;
+}
+.book-form .row label {
+    width: max-content;
+}
 form input {
     flex-grow: 1;
 }
+form div {
+    margin-bottom: 1em;
+}
+textarea {
+    padding: 0.5em;
+}
 .content-container button {
     border: none;
     background-color: #247BA0;
diff --git a/fedireads/templates/edit_book.html b/fedireads/templates/edit_book.html
index 529a2f0c..83ba15c6 100644
--- a/fedireads/templates/edit_book.html
+++ b/fedireads/templates/edit_book.html
@@ -1,15 +1,54 @@
 {% extends 'layout.html' %}
+{% load humanize %}
 {% block content %}
 <div class="content-container">
     <h2>Edit "{{ book.title }}"</h2>
-
-    <p class="book-cover">{% include 'snippets/book_cover.html' with book=book %}</p>
-
-    <form name="edit-book" action="/edit_book/{{ book.id }}" method="post" enctype="multipart/form-data">
-        {% csrf_token %}
-        {{ form.as_p }}
-        <button type="submit">Update book</button>
-    </form>
+    <div class="book-preview">
+        {% include 'snippets/book_cover.html' with book=book size="small" %}
+        <p>Added: {{ book.created_date | naturaltime }}</p>
+        <p>Updated: {{ book.updated_date | naturaltime }}</p>
+    </div>
 </div>
+
+<form class="book-form content-container" name="edit-book" action="/edit_book/{{ book.id }}" method="post" enctype="multipart/form-data">
+    {% csrf_token %}
+    <h3>Data sync
+    <small>If sync is enabled, any changes will be over-written</small>
+    </h3>
+    <div>
+        <div class="row">
+        <p><label for="id_sync">Sync:</label> <input type="checkbox" name="sync" id="id_sync"></p>
+        <p><label for="id_sync_cover">Sync cover:</label> <input type="checkbox" name="sync_cover" id="id_sync_cover"></p>
+        </div>
+    </div>
+
+    <h3>Cover</h3>
+    <div class="image-form">
+        <p>{{ form.cover }} </p>
+    </div>
+
+    <h3>Book Identifiers</h2>
+    <div>
+        <p><label for="id_fedireads_key">Fedireads key:</label> {{ form.fedireads_key }} </p>
+        <p><label for="id_openlibrary_key">Openlibrary key:</label> {{ form.openlibrary_key }} </p>
+        <p><label for="id_librarything_key">Librarything key:</label> {{ form.librarything_key }} </p>
+        <p><label for="id_goodreads_key">Goodreads key:</label> {{ form.goodreads_key }} </p>
+    </div>
+
+    <h3>Metadata</h3>
+    <div>
+        <p><label for="id_title">Title:</label> {{ form.title }} </p>
+        <p><label for="id_sort_title">Sort title:</label> {{ form.sort_title }} </p>
+        <p><label for="id_subtitle">Subtitle:</label> {{ form.subtitle }} </p>
+        <p><label for="id_description">Description:</label> {{ form.description }} </p>
+        <p><label for="id_language">Language:</label> {{ form.language }} </p>
+        <p><label for="id_series">Series:</label> {{ form.series }} </p>
+        <p><label for="id_series_number">Series number:</label> {{ form.series_number }} </p>
+        <p><label for="id_first_published_date">First published date:</label> {{ form.first_published_date }} </p>
+        <p><label for="id_published_date">Published date:</label> {{ form.published_date }} </p>
+    </div>
+    <button type="submit">Update book</button>
+</form>
+
 {% endblock %}