Fixes star rating displays

bookwyrm/templates/snippets/avatar.html

@@ -1,2 +1,2 @@
-<img class="user-pic{% if large %} large{% endif %}" src="{% if user.avatar %}/images/{{ user.avatar }}{% else %}/static/images/default_avi.jpg{% endif %}">
+<img class="image {% if large %}is-96x96{% else %}is-32x32{% endif %}" src="{% if user.avatar %}/images/{{ user.avatar }}{% else %}/static/images/default_avi.jpg{% endif %}">
 

bookwyrm/templates/snippets/covers_shelf.html

@@ -26,8 +26,8 @@
 
 {% for shelf in shelves %}
     {% for book in shelf.books %}
-<div class="compose-popout">
-    <input name="book-popout" type="radio" id="book-{{ book.id }}-radio">
+<div class="compose-popout toggle-content hidden">
+    <input class="toggle-control" name="book-popout" type="radio" id="book-{{ book.id }}-radio">
     <div class="compose compose-suggestion" id="compose-book-{{ book.id }}">
         <label class="close icon icon-close" for="book-{{ book.id }}-radio-close" onclick="hide_element(this)">
             <span class="hidden-text">Close</span>

bookwyrm/templates/snippets/interaction.html

@@ -1,5 +1,5 @@
 {% load fr_display %}
-<div class="interaction">
+<div class="nav level">
     {% if request.user.is_authenticated %}
     <form name="reply" action="/reply" method="post" onsubmit="return reply(event)">
         {% csrf_token %}

bookwyrm/templates/snippets/rate_action.html

@@ -1,6 +1,6 @@
 {% load fr_display %}
 <span class="hidden-text">Leave a rating</span>
-<div class="stars rate-stars">
+<div class="field is-grouped stars rate-stars">
     {% for i in '12345'|make_list %}
     <form name="rate" action="/rate/" method="POST" onsubmit="return rate_stars(event)">
         {% csrf_token %}

bookwyrm/templates/snippets/rate_form.html

@@ -1,6 +1,6 @@
 {% load fr_display %}
 <span class="hidden-text">Rating</span>
-<div class="stars rate-stars">
+<div class="field is-grouped stars rate-stars">
     <input type="radio" name="rating" value="" checked>
     {% for i in '12345'|make_list %}
         <input id="book{{book.id}}-star-{{ forloop.counter }}" type="radio" name="rating" value="{{ forloop.counter }}">

bookwyrm/templates/snippets/shelve_button.html

@@ -1,31 +1,32 @@
 {% load fr_display %}
 {% if request.user.is_authenticated %}
 
-<div class="pulldown-button">
-<form name="shelve" action="/shelve/" method="post">
-    {% csrf_token %}
-    <input type="hidden" name="book" value="{{ book.id }}">
-    <input type="hidden" name="shelf" value="{% shelve_button_identifier book %}">
-    <button type="submit" style="">{% shelve_button_text book %}</button>
-</form>
-{% if not hide_pulldown %}
-<div class="pulldown-container">
-    <button class="pulldown-toggle">
+<div class="dropdown is-hoverable">
+    <form name="shelve" action="/shelve/" method="post">
+        {% csrf_token %}
+        <input type="hidden" name="book" value="{{ book.id }}">
+        <input type="hidden" name="shelf" value="{% shelve_button_identifier book %}">
+        <button class="button" type="submit" style="">{% shelve_button_text book %}</button>
+    </form>
+    <div class="button dropdown-trigger" >
         <span class="icon icon-arrow-down"><span class="hidden-text">More shelves</span></span>
-    </button>
-    <ul class="pulldown">
-        <form name="shelve" action="/shelve/" method="post">
-            {% csrf_token %}
-            <input type="hidden" name="book" value="{{ book.id }}">
-            {% for shelf in request.user.shelf_set.all %}
-            <li>
-            <button name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>{{ shelf.name }} {% if shelf in book.shelf_set.all %} ✓ {% endif %}</button>
-            </li>
-            {% endfor %}
-        </form>
-    </ul>
-</div>
-{% endif %}
+    </div>
+
+    {% if not hide_pulldown %}
+    <div class="dropdown-menu">
+        <ul class="dropdown-content">
+            <form name="shelve" action="/shelve/" method="post">
+                {% csrf_token %}
+                <input type="hidden" name="book" value="{{ book.id }}">
+                {% for shelf in request.user.shelf_set.all %}
+                <li>
+                <button name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>{{ shelf.name }} {% if shelf in book.shelf_set.all %} ✓ {% endif %}</button>
+                </li>
+                {% endfor %}
+            </form>
+        </ul>
+    </div>
+    {% endif %}
 </div>
 
 {% endif %}

bookwyrm/templates/snippets/status.html

@@ -1,8 +1,7 @@
 {% load fr_display %}
 
-<div class="post {{ status.status_type | lower }} depth-{{ depth }} {% if main %}main{% else %}reply{% endif %}">
-
-    <h2>
+<div class="post{% if depth %}depth-{{ depth }} {% if main %}main{% else %}reply{% endif %}{% endif %}">
+    <h2 class="level">
     {% if status.boosted_status %}
         {% include 'snippets/status_header.html' with status=status.boosted_status %}
         <small class="subhead">{% include 'snippets/status_header.html' with status=status %}</small>

bookwyrm/templates/snippets/status_content.html

@@ -23,16 +23,16 @@
     </div>
 {% endif %}
 
-<div class="row">
+<div class="media">
     {% if not hide_book and status.book %}
-    <div class="cover-container">
+    <div class="media-left">
         {% include 'snippets/book_cover.html' with book=status.book %}
         {% include 'snippets/rate_action.html' with book=status.book user=request.user %}
         {% include 'snippets/shelve_button.html' with book=status.book %}
     </div>
     {% endif %}
 
-    <div>
+    <div class="media-content">
         {% if status.status_type == 'Review' %}
         <h3>
             {% if status.name %}{{ status.name }}<br>{% endif %}

bookwyrm/templates/snippets/status_header.html

@@ -1,25 +1,31 @@
 {% load humanize %}
 {% load fr_display %}
-{% include 'snippets/avatar.html' with user=status.user %}
-{% include 'snippets/username.html' with user=status.user %}
+<div class="level-left">
+    <div>
+        {% include 'snippets/avatar.html' with user=status.user %}
 
-{% if status.status_type == 'Update' %}
-    {{ status.content | safe }}
-{% elif status.status_type == 'Review' and not status.name and not status.content%}
-    rated <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
-{% elif status.status_type == 'Review' %}
-    reviewed <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
-{% elif status.status_type == 'Comment' %}
-    commented on <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
-{% elif status.status_type == 'Quotation' %}
-    quoted <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
-{% elif status.status_type == 'Boost' %}
-    boosted
-{% 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.remote_id }}">{{ parent_status.status_type | lower }}</a>
-    {% endwith %}
-{% endif %}
-<span class="time-ago">
-    <a href="{{ status.remote_id }}">{{ status.published_date | naturaltime }}</a>
-</span>
+        {% include 'snippets/username.html' with user=status.user %}
+        {% if status.status_type == 'Update' %}
+            {{ status.content | safe }}
+        {% elif status.status_type == 'Review' and not status.name and not status.content%}
+            rated <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
+        {% elif status.status_type == 'Review' %}
+            reviewed <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
+        {% elif status.status_type == 'Comment' %}
+            commented on <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
+        {% elif status.status_type == 'Quotation' %}
+            quoted <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
+        {% elif status.status_type == 'Boost' %}
+            boosted
+        {% 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.remote_id }}">{{ parent_status.status_type | lower }}</a>
+            {% endwith %}
+        {% endif %}
+    </div>
+</div>
+<div class="level-right">
+    <div>
+        <a href="{{ status.remote_id }}">{{ status.published_date | naturaltime }}</a>
+    </div>
+</div>