Merge pull request #2044 from pixelfed/staging

Staging

public/mix-manifest.json

@@ -4,9 +4,9 @@
     "/js/ace.js": "/js/ace.js?id=a575b37c2085b5003666",
     "/js/activity.js": "/js/activity.js?id=028cbbe598f925bb3414",
     "/js/app.js": "/js/app.js?id=360dc653e947aa970981",
-    "/css/app.css": "/css/app.css?id=c1791f808bb106edf485",
-    "/css/appdark.css": "/css/appdark.css?id=cfd9b99ec8d2df262f17",
-    "/css/landing.css": "/css/landing.css?id=5c054a156e55468a6141",
+    "/css/app.css": "/css/app.css?id=7c5f75a2d1869434a6e5",
+    "/css/appdark.css": "/css/appdark.css?id=851d7357ef5b915c16cc",
+    "/css/landing.css": "/css/landing.css?id=475522e0efe11f19ccf5",
     "/css/quill.css": "/css/quill.css?id=e3741782d15a3031f785",
     "/js/collectioncompose.js": "/js/collectioncompose.js?id=3fd79944492361ec7347",
     "/js/collections.js": "/js/collections.js?id=38be4150f3d2ebb15f50",
@@ -18,7 +18,7 @@
     "/js/hashtag.js": "/js/hashtag.js?id=e6b41cab117cb03c7d2a",
     "/js/loops.js": "/js/loops.js?id=ac610897b12207c829b9",
     "/js/mode-dot.js": "/js/mode-dot.js?id=1225a9aac7a93d5d232f",
-    "/js/profile.js": "/js/profile.js?id=0cf01799f06eecf0b0fa",
+    "/js/profile.js": "/js/profile.js?id=f4d4382d730c3368e078",
     "/js/profile-directory.js": "/js/profile-directory.js?id=7160b00d9beda164f1bc",
     "/js/quill.js": "/js/quill.js?id=9b15ab0ae830e7293390",
     "/js/search.js": "/js/search.js?id=22e8bccee621e57963d9",

resources/assets/js/components/Profile.vue

@@ -360,9 +360,10 @@
 		hide-footer
 		centered
 		title="Following"
-		body-class="list-group-flush p-0">
+		body-class="list-group-flush py-3 px-0"
+		dialog-class="follow-modal">
 		<div class="list-group">
-			<div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index">
+			<div class="list-group-item border-0 py-1" v-for="(user, index) in following" :key="'following_'+index">
 				<div class="media">
 					<a :href="user.url">
 						<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
@@ -378,7 +379,7 @@
 						</p>
 					</div>
 					<div v-if="owner">
-						<a class="btn btn-outline-secondary btn-sm" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Unfollow</a>
+						<a class="btn btn-outline-dark btn-sm font-weight-bold" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Following</a>
 					</div>
 				</div>
 			</div>
@@ -397,23 +398,26 @@
 		hide-footer
 		centered
 		title="Followers"
-		body-class="list-group-flush p-0">
+		body-class="list-group-flush py-3 px-0"
+		dialog-class="follow-modal"
+		>
 		<div class="list-group">
-			<div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
-				<div class="media">
+			<div class="list-group-item border-0 py-1" v-for="(user, index) in followers" :key="'follower_'+index">
+				<div class="media mb-0">
 					<a :href="user.url">
-						<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
+						<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" height="30px" loading="lazy">
 					</a>
-					<div class="media-body">
+					<div class="media-body mb-0">
 						<p class="mb-0" style="font-size: 14px">
 							<a :href="user.url" class="font-weight-bold text-dark">
 								{{user.username}}
 							</a>
 						</p>
-						<p class="text-muted mb-0" style="font-size: 14px">
+						<p class="text-secondary mb-0" style="font-size: 13px">
 							{{user.display_name}}
 						</p>
 					</div>
+					<!-- <button class="btn btn-primary font-weight-bold btn-sm py-1">FOLLOW</button> -->
 				</div>
 			</div>
 			<div v-if="followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">

resources/assets/sass/custom.scss

@@ -562,3 +562,7 @@ details summary::-webkit-details-marker {
 .status-content > p:first-child {
     display: inline;
 }
+
+.follow-modal {
+  max-width: 400px !important;
+}