From b2e4b732a4d5d0b6da99e99536913ff4273d9df6 Mon Sep 17 00:00:00 2001
From: kek7198 <grayboy99@protonmail.com>
Date: Wed, 1 Dec 2021 17:28:11 -0600
Subject: [PATCH] fix

---
 files/static/src/main.css         |  6 ++++
 files/templates/search_users.html |  2 +-
 files/templates/user_listing.html | 50 +++++++++++++++++++------------
 3 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/files/static/src/main.css b/files/static/src/main.css
index 0bae5dfa25..c7d07f4759 100644
--- a/files/static/src/main.css
+++ b/files/static/src/main.css
@@ -95,6 +95,12 @@
 .btn-red {
 	@apply bg-gradient-to-t from-red-700 to-red-600 hover:from-red-600 hover:to-red-700 border-red-900 text-gray-100 focus:text-gray-200;
 }
+.btn-green {
+	@apply bg-gradient-to-t from-green-700 to-green-600 hover:from-green-600 hover:to-green-700 border-green-900 text-gray-100 focus:text-gray-200;
+}
+.btn-gray {
+	@apply bg-gradient-to-t from-gray-200 to-gray-100 hover:from-gray-100 hover:to-gray-200 border-gray-300 text-gray-700 focus:text-gray-900;
+}
 
 /* ----------------------- BADGES ----------------------- */
 .badge {
diff --git a/files/templates/search_users.html b/files/templates/search_users.html
index 4c45eafd67..86a5992445 100644
--- a/files/templates/search_users.html
+++ b/files/templates/search_users.html
@@ -1,7 +1,7 @@
 {% extends "search.html" %}
 
 {% block listing_template %}
-<div class="row row-cols-1 row-cols-md-3 mt-3">
+<div class="flex flex-wrap -mx-2 overflow-hidden">
 {% include "user_listing.html" %}
 </div>
 {% endblock %}
diff --git a/files/templates/user_listing.html b/files/templates/user_listing.html
index cd53223acb..9794bf09cf 100644
--- a/files/templates/user_listing.html
+++ b/files/templates/user_listing.html
@@ -1,31 +1,43 @@
-
 {% for u in users %}
-
-<div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-4">
+<div class="my-2 px-2 w-1/2 overflow-hidden lg:w-1/3 xl:w-1/4">
 	<div id="user-{{u.id}}" class="card h-100">
-		<div style="position: relative;"><img loading="lazy" src="{{u.banner_url}}" class="card-img-top" alt="@{{u.username}} user banner" height=175 style="object-fit: cover">
+		<div class="relative">
+			<img loading="lazy" src="{{u.banner_url}}" class="object-cover" alt="@{{u.username}} user banner" height=175>
 
-			<img loading="lazy" src="{{u.profile_url}}" class="profile-pic-50 border-3 border-white" style="position: absolute; left: 15px; bottom: 15px; box-sizing: content-box;"></div>
-			<div class="card-body" style="word-wrap: break-word;">
-				<div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
+			<img loading="lazy" src="{{u.profile_url}}" class="profile-pic-50 border-3 border-white" style="position: absolute; left: 15px; bottom: 15px; box-sizing: content-box;">
+		</div>
 
-					<a class="card-title text-break stretched-link h5 mb-0" href="{{u.url}}">@{{u.username}}</a>
+		<div class="card-body" style="word-wrap: break-word;">
+			<div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
 
-					{% if v %}
-						{% if v.id!=u.id and not u.is_private and not u.is_nofollow %}
-						<div id="button-sub-{{u.id}}" style="z-index: 2" class="{% if u.has_follower(v) %}d-none{% endif %}"><a class="btn btn-primary " href="javascript:void(0)" onclick="post_toast2('/follow/{{u.username}}','button-sub-{{u.id}}','button-unsub-{{u.id}}')">Follow</a></div>
+				<a class="card-title text-break stretched-link h5 mb-0" href="{{u.url}}">@{{u.username}}</a>
 
-						{% if u.id != 995 %}<div id="button-unsub-{{u.id}}" style="z-index: 2" class="{% if not u.has_follower(v) %} d-none{% endif %}"><a class="btn btn-secondary " href="javascript:void(0)" onclick="post_toast2('/unfollow/{{u.username}}','button-sub-{{u.id}}','button-unsub-{{u.id}}')">Unfollow</a></div>{% endif %}
-						{% endif %}
-					{% else %}
-					<div id="button-sub-{{u.id}}" style="z-index: 2" "><a class="btn btn-primary " href="/signup?redirect={{request.path}}">Follow</a></div>
-					{% endif %}
+				{% if v %}
+				{% if v.id!=u.id and not u.is_private and not u.is_nofollow %}
+				<div id="button-sub-{{u.id}}" style="z-index: 2" class="{% if u.has_follower(v) %}d-none{% endif %}">
+					<button class="btn btn-green" onclick="post_toast2('/follow/{{u.username}}','button-sub-{{u.id}}','button-unsub-{{u.id}}')">Follow
+					</button>
 				</div>
 
-				{% if not hide_bios and u.bio_html %}
-					<div class="card-text">{{u.bio_html | safe}}</div>
+				{% if u.id != 995 %}
+				<div id="button-unsub-{{u.id}}" style="z-index: 2" class="{% if not u.has_follower(v) %} d-none{% endif %}">
+					<button class="btn btn-gray" onclick="post_toast2('/unfollow/{{u.username}}','button-sub-{{u.id}}','button-unsub-{{u.id}}')">Unfollow
+					</button
+				</div>
+				{% endif %}
+				{% endif %}
+				{% else %}
+				<div id="button-sub-{{u.id}}" style="z-index: 2">
+					<a class="btn btn-primary " href="/signup?redirect={{request.path}}">Follow
+					</a>
+				</div>
 				{% endif %}
 			</div>
+
+			{% if not hide_bios and u.bio_html %}
+			<div class="card-text">{{u.bio_html | safe}}</div>
+			{% endif %}
 		</div>
 	</div>
-	{% endfor %}
+</div>
+{% endfor %}