From 37a0ec0ba3cb9d0075107cf1b0d11255868b54a8 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Tue, 29 Sep 2020 13:39:44 -0700
Subject: [PATCH] User profile page styles

---
 bookwyrm/templates/book.html                  | 10 ++--
 bookwyrm/templates/followers.html             | 24 +++++----
 bookwyrm/templates/following.html             | 24 +++++----
 .../templates/snippets/follow_button.html     |  6 +--
 .../snippets/follow_request_buttons.html      |  4 +-
 bookwyrm/templates/user_header.html           | 54 +++++++++++--------
 6 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/bookwyrm/templates/book.html b/bookwyrm/templates/book.html
index dc0500de..e0f0b30d 100644
--- a/bookwyrm/templates/book.html
+++ b/bookwyrm/templates/book.html
@@ -10,11 +10,11 @@
 
     {% if request.user.is_authenticated %}
     <div class="level-right">
-    <a href="{{ book.id }}/edit">edit
-        <span class="icon icon-pencil">
-            <span class="hidden-text">Edit Book</span>
-        </span>
-    </a>
+        <a href="{{ book.id }}/edit">edit
+            <span class="icon icon-pencil">
+                <span class="hidden-text">Edit Book</span>
+            </span>
+        </a>
     </div>
     {% endif %}
     </div>
diff --git a/bookwyrm/templates/followers.html b/bookwyrm/templates/followers.html
index 7690af8a..09457408 100644
--- a/bookwyrm/templates/followers.html
+++ b/bookwyrm/templates/followers.html
@@ -3,18 +3,20 @@
 {% block content %}
 {% include 'user_header.html' with user=user %}
 
-<div class="content-container">
-    <h2>Followers</h2>
+<div class="block">
+    <h2 class="title">Followers</h2>
     {% for followers in followers %}
-    <div class="row shrink">
-        <div>
-            {% include 'snippets/avatar.html' with user=followers %}
-        </div>
-        <div>
-            {% include 'snippets/username.html' with user=followers show_full=True  %}
-        </div>
-        <div>
-            {% include 'snippets/follow_button.html' with user=followers %}
+    <div class="block">
+        <div class="field is-grouped">
+            <div class="control">
+                {% include 'snippets/avatar.html' with user=followers %}
+            </div>
+            <div class="control">
+                {% include 'snippets/username.html' with user=followers show_full=True  %}
+            </div>
+            <div class="control">
+                {% include 'snippets/follow_button.html' with user=followers %}
+            </div>
         </div>
     </div>
     {% endfor %}
diff --git a/bookwyrm/templates/following.html b/bookwyrm/templates/following.html
index 3bf62bf6..9131adea 100644
--- a/bookwyrm/templates/following.html
+++ b/bookwyrm/templates/following.html
@@ -3,18 +3,20 @@
 {% block content %}
 {% include 'user_header.html' %}
 
-<div class="content-container">
-    <h2>Following</h2>
+<div class="block">
+    <h2 class="title">Following</h2>
     {% for follower in user.following.all %}
-    <div class="row shrink">
-        <div>
-            {% include 'snippets/avatar.html' with user=follower %}
-        </div>
-        <div>
-            {% include 'snippets/username.html' with user=follower show_full=True  %}
-        </div>
-        <div>
-            {% include 'snippets/follow_button.html' with user=follower %}
+    <div class="block">
+        <div class="field is-grouped">
+            <div class="control">
+                {% include 'snippets/avatar.html' with user=follower %}
+            </div>
+            <div class="control">
+                {% include 'snippets/username.html' with user=follower show_full=True  %}
+            </div>
+            <div class="control">
+                {% include 'snippets/follow_button.html' with user=follower %}
+            </div>
         </div>
     </div>
     {% endfor %}
diff --git a/bookwyrm/templates/snippets/follow_button.html b/bookwyrm/templates/snippets/follow_button.html
index 65612e96..5eea5bbf 100644
--- a/bookwyrm/templates/snippets/follow_button.html
+++ b/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 %}
diff --git a/bookwyrm/templates/snippets/follow_request_buttons.html b/bookwyrm/templates/snippets/follow_request_buttons.html
index fb25a194..165887e0 100644
--- a/bookwyrm/templates/snippets/follow_request_buttons.html
+++ b/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 %}
diff --git a/bookwyrm/templates/user_header.html b/bookwyrm/templates/user_header.html
index 3d9505a3..2be1222a 100644
--- a/bookwyrm/templates/user_header.html
+++ b/bookwyrm/templates/user_header.html
@@ -1,33 +1,41 @@
 {% load humanize %}
 {% load fr_display %}
-<div class="content-container user-profile">
-    <h2>User Profile
-       {% if is_self %}
-        <a href="/user-edit/" class="edit-link">edit
-            <span class="icon icon-pencil">
-                <span class="hidden-text">Edit profile</span>
-            </span>
-        </a>
+<div class="block">
+    <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>
 
-    <div class="row">
-        <div class="pic-container">
-            {% include 'snippets/avatar.html' with user=user large=True %}
+    <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>
+                    <p>
+                        <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>
-            <p>{% if user.name %}{{ user.name }}{% else %}{{ user.localname }}{% endif %}</p>
-            <p>{{ user.username }}</p>
-            <p>Joined {{ user.created_date | naturaltime }}</p>
-            <p>
-                <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 class="column">
+            {% if user.summary %}
+            <blockquote><span class="icon icon-quote-open"></span>{{ user.summary | safe }}</blockquote>
+            {% endif %}
         </div>
-
-        {% if user.summary %}
-        <blockquote><span class="icon icon-quote-open"></span>{{ user.summary | safe }}</blockquote>
-        {% endif %}
     </div>
     {% if not is_self %}
     {% include 'snippets/follow_button.html' with user=user %}