From 2937c592c14865f73b6a387f488564170fc13fbd Mon Sep 17 00:00:00 2001 From: Mouse Reeve <mousereeve@riseup.net> Date: Sun, 17 Jan 2021 17:09:43 -0800 Subject: [PATCH] Uses css norms for upload cover form --- bookwyrm/templates/book.html | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/bookwyrm/templates/book.html b/bookwyrm/templates/book.html index 69efb858..e12ba30d 100644 --- a/bookwyrm/templates/book.html +++ b/bookwyrm/templates/book.html @@ -39,14 +39,28 @@ {% if request.user.is_authenticated and not book.cover %} <div class="box p-2"> + <h3 class="title is-6 mb-1">Add cover</h3> <form name="add-cover" method="POST" action="/upload-cover/{{ book.id }}" enctype="multipart/form-data"> {% csrf_token %} - <div class="field"> - <label class="label" for="id_cover">Cover:</label> - <input type="file" name="cover" accept="image/*" class="" id="id_cover"> - </div> - <div class="field"> - <button class="button is-small" type="submit">Add cover</button> + <div class="field has-addons"> + <div class="control"> + <div class="file is-small mb-1"> + <label class="file-label"> + <input class="file-input" type="file" name="cover" accept="image/*" enctype="multipart/form-data" id="id_cover" required> + <span class="file-cta"> + <span class="file-icon"> + <i class="fas fa-upload"></i> + </span> + <span class="file-label"> + Choose file... + </span> + </span> + </label> + </div> + </div> + <div class="control"> + <button class="button is-small is-primary" type="submit">Add</button> + </div> </div> </form> </div>