Tags and tables

bookwyrm/static/css/format.css

@@ -82,8 +82,11 @@ input.toggle-control:checked ~ .toggle-content {
 .cover-container {
     height: 250px;
 }
+.cover-container.is-small {
+    height: 100px;
+}
 .book-cover {
-    height: 100%
+    height: 100%;
     object-fit: scale-down;
 }
 .no-cover {
@@ -97,9 +100,9 @@ input.toggle-control:checked ~ .toggle-content {
     left: 0;
     text-align: center;
 }
-.no-cover .title {
-    text-transform: uppercase;
-    margin-bottom: 1em;
+.is-small .no-cover div {
+    font-size: 0.7em;
+    padding: 0.1em;
 }
 
 

bookwyrm/templates/book.html

@@ -71,9 +71,11 @@
             {% endif %}
 
             <div class="block">
+                <div class="field is-grouped is-grouped-multiline">
                 {% for tag in tags %}
                     {% include 'snippets/tag.html' with book=book tag=tag user_tags=user_tags %}
                 {% endfor %}
+                </div>
             </div>
 
         </div>

bookwyrm/templates/layout.html

@@ -59,10 +59,10 @@
         <div class="navbar-end">
 	    {% if request.user.is_authenticated %}
             <div class="navbar-item has-dropdown is-hoverable">
-                <div class="navbar-link">
+                <div class="navbar-link"><p>
                     {% include 'snippets/avatar.html' with user=user %}
                     {% include 'snippets/username.html' with user=request.user %}
-                </div>
+                </p></div>
                 <div class="navbar-dropdown">
                     <a href="/user/{{request.user.localname}}" class="navbar-item">
                         Profile

bookwyrm/templates/shelf.html

@@ -1,9 +1,9 @@
 {% extends 'layout.html' %}
 {% block content %}
 
-<div id="content">
+<div class="block">
     <div>
-        <h2>{% include 'snippets/username.html' with user=user %} > {{ shelf.name }}</h2>
+        <h2 class="title">{% include 'snippets/username.html' with user=user %} > {{ shelf.name }}</h2>
         {% include 'snippets/shelf.html' with shelf=shelf ratings=ratings %}
     </div>
 </div>

bookwyrm/templates/snippets/book_cover.html

@@ -1,16 +1,14 @@
 {% load fr_display %}
+<div class="cover-container is-{{ size }}">
 {% if book.cover %}
-<div class="cover-container">
-    <img class="book-cover {{ size }}" src="/images/{{ book.cover }}" alt="{% include 'snippets/cover_alt.html' with book=book %}">
-</div>
+    <img class="book-cover" src="/images/{{ book.cover }}" alt="{% include 'snippets/cover_alt.html' with book=book %}">
 {% else %}
-<div class="cover-container">
-    <div class="no-cover book-cover {{ size }}">
-        <img class="book-cover {{ size }}" src="/static/images/no_cover.jpg" alt="No cover">
+    <div class="no-cover book-cover">
+        <img class="book-cover" src="/static/images/no_cover.jpg" alt="No cover">
         <div>
             <p>{{ book.title }}</p>
             <p>({{ book|edition_info }})</p>
         </div>
     </div>
-</div>
 {% endif %}
+</div>

bookwyrm/templates/snippets/shelf.html

@@ -1,7 +1,8 @@
 {% load humanize %}
 {% load fr_display %}
 {% if shelf.books %}
-<table class="table">
+<table class="table is-striped is-fullwidth">
+
 <tr class="book-preview">
     <th>
         Cover

bookwyrm/templates/snippets/tag.html

@@ -1,20 +1,24 @@
-<div class="tag">
-    <a href="/tag/{{ tag.identifier|urlencode }}">{{ tag.name }}</a>
-    {% if tag.identifier in user_tags %}
-    <form class="tag-form" name="tag" action="/untag/" method="post">
-        {% csrf_token %}
-        <input type="hidden" name="book" value="{{ book.id }}">
-        <input type="hidden" name="name" value="{{ tag.name }}">
-        <button type="submit">x</button>
-    </form>
-    {% else %}
-    <form class="tag-form" name="tag" action="/tag/" method="post">
-        {% csrf_token %}
-        <input type="hidden" name="book" value="{{ book.id }}">
-        <input type="hidden" name="name" value="{{ tag.name }}">
-        <button type="submit">+</button>
-    </form>
-    {% endif %}
+<div class="control">
+    <div class="tags has-addons">
+        <a class="tag is-link" href="/tag/{{ tag.identifier|urlencode }}">
+            {{ tag.name }}
+        </a>
+        <div class="tag">
+            {% if tag.identifier in user_tags %}
+            <form name="tag" action="/untag/" method="post">
+                {% csrf_token %}
+                <input type="hidden" name="book" value="{{ book.id }}">
+                <input type="hidden" name="name" value="{{ tag.name }}">
+                <button type="submit">x<span class="hidden-text"> remove tag</span></button>
+            </form>
+            {% else %}
+            <form name="tag" action="/tag/" method="post">
+                {% csrf_token %}
+                <input type="hidden" name="book" value="{{ book.id }}">
+                <input type="hidden" name="name" value="{{ tag.name }}">
+                <button type="submit">+<span class="hidden-text"> add tag</span></button>
+            </form>
+            {% endif %}
+        </div>
+    </div>
 </div>
-
-

bookwyrm/templates/user_shelves.html

@@ -4,8 +4,8 @@
 {% include 'user_header.html' with user=user %}
 
 {% for shelf in shelves %}
-<div class="content-container">
-    <h2>{{ shelf.name }}</h2>
+<div class="block">
+    <h2 class="title">{{ shelf.name }}</h2>
     {% include 'snippets/shelf.html' with shelf=shelf ratings=ratings %}
 </div>
 {% endfor %}