User profile page styles

bookwyrm/templates/followers.html

@@ -3,20 +3,22 @@
 {% block content %}
 {% include 'user_header.html' with user=user %}
 
-<div class="content-container">
+<div class="block">
-    <h2>Followers</h2>
+    <h2 class="title">Followers</h2>
     {% for followers in followers %}
-    <div class="row shrink">
+    <div class="block">
-        <div>
+        <div class="field is-grouped">
+            <div class="control">
                 {% include 'snippets/avatar.html' with user=followers %}
             </div>
-        <div>
+            <div class="control">
                 {% include 'snippets/username.html' with user=followers show_full=True  %}
             </div>
-        <div>
+            <div class="control">
                 {% include 'snippets/follow_button.html' with user=followers %}
             </div>
         </div>
+    </div>
     {% endfor %}
     {% if not followers.count %}
     <div>{{ user|username }} has no followers</div>

bookwyrm/templates/following.html

@@ -3,20 +3,22 @@
 {% block content %}
 {% include 'user_header.html' %}
 
-<div class="content-container">
+<div class="block">
-    <h2>Following</h2>
+    <h2 class="title">Following</h2>
     {% for follower in user.following.all %}
-    <div class="row shrink">
+    <div class="block">
-        <div>
+        <div class="field is-grouped">
+            <div class="control">
                 {% include 'snippets/avatar.html' with user=follower %}
             </div>
-        <div>
+            <div class="control">
                 {% include 'snippets/username.html' with user=follower show_full=True  %}
             </div>
-        <div>
+            <div class="control">
                 {% include 'snippets/follow_button.html' with user=follower %}
             </div>
         </div>
+    </div>
     {% endfor %}
     {% if not following.count %}
     <div>No one is following {{ user|username }}</div>

bookwyrm/templates/snippets/follow_button.html

@@ -11,14 +11,14 @@ Follow request already sent.
     {% csrf_token %}
     <input type="hidden" name="user" value="{{ user.username }}">
     {% if user.manually_approves_followers %}
-        <button type="submit">Send follow request</button>
+        <button class="button is-small" type="submit">Send follow request</button>
     {% else %}
-        <button type="submit">Follow</button>
+        <button class="button is-small" type="submit">Follow</button>
     {% endif %}
 </form>
 <form action="/unfollow/" method="POST" onsubmit="interact(event)" class="follow-{{ user.id }} {% if not request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
     {% csrf_token %}
     <input type="hidden" name="user" value="{{ user.username }}">
-    <button type="submit">Unfollow</button>
+    <button class="button is-small" type="submit">Unfollow</button>
 </form>
 {% endif %}

bookwyrm/templates/snippets/follow_request_buttons.html

@@ -3,11 +3,11 @@
 <form action="/accept_follow_request/" method="POST">
     {% csrf_token %}
     <input type="hidden" name="user" value="{{ user.username }}">
-    <button type="submit">Accept</button>
+    <button class="button is-small" type="submit">Accept</button>
 </form>
 <form action="/delete_follow_request/" method="POST">
     {% csrf_token %}
     <input type="hidden" name="user" value="{{ user.username }}">
-    <button type="submit" class="warning">Delete</button>
+    <button class="button is-small" type="submit" class="warning">Delete</button>
 </form>
 {% endif %}

bookwyrm/templates/user_header.html

@@ -1,22 +1,26 @@
 {% load humanize %}
 {% load fr_display %}
-<div class="content-container user-profile">
+<div class="block">
-    <h2>User Profile
+    <div class="level">
+        <h2 class="title">User Profile</h2>
         {% if is_self %}
+        <div class="level-right">
             <a href="/user-edit/" class="edit-link">edit
                 <span class="icon icon-pencil">
                     <span class="hidden-text">Edit profile</span>
                 </span>
             </a>
+        </div>
         {% endif %}
-    </h2>
-
-    <div class="row">
-        <div class="pic-container">
-            {% include 'snippets/avatar.html' with user=user large=True %}
     </div>
 
-        <div>
+    <div class="columns">
+        <div class="column is-narrow">
+            <div class="media">
+                <div class="media-left">
+                    {% include 'snippets/avatar.html' with user=user large=True %}
+                </div>
+                <div class="media-content">
                     <p>{% if user.name %}{{ user.name }}{% else %}{{ user.localname }}{% endif %}</p>
                     <p>{{ user.username }}</p>
                     <p>Joined {{ user.created_date | naturaltime }}</p>
@@ -24,11 +28,15 @@
                         <a href="/user/{{ user|username }}/followers">{{ user.followers.count }} follower{{ user.followers.count | pluralize }}</a>,
                         <a href="/user/{{ user|username }}/following">{{ user.following.count }} following</a></p>
                 </div>
+            </div>
+        </div>
 
+        <div class="column">
             {% if user.summary %}
             <blockquote><span class="icon icon-quote-open"></span>{{ user.summary | safe }}</blockquote>
             {% endif %}
         </div>
+    </div>
     {% if not is_self %}
     {% include 'snippets/follow_button.html' with user=user %}
     {% endif %}