Improve following/followers view

Closes #2235

src/client/app/desktop/views/components/users-list.item.vue

@@ -1,94 +1,86 @@
 <template>
-<div class="root item">
+<div class="zvdbznxvfixtmujpsigoccczftvpiwqh">
-	<mk-avatar class="avatar" :user="user"/>
+	<div class="banner" :style="bannerStyle"></div>
-	<div class="main">
+	<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
-		<header>
-			<router-link class="name" :to="user | userPage" v-user-preview="user.id">{{ user | userName }}</router-link>
-			<span class="username">@{{ user | acct }}</span>
-		</header>
 	<div class="body">
+		<router-link :to="user | userPage" class="name">{{ user | userName }}</router-link>
+		<span class="username">@{{ user | acct }}</span>
+		<div class="description">
+			<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
+		</div>
 		<p class="followed" v-if="user.isFollowed">%i18n:@followed%</p>
-			<div class="description">{{ user.description }}</div>
+		<mk-follow-button :user="user" :size="'big'"/>
 	</div>
 </div>
-	<mk-follow-button :user="user"/>
-</div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['user']
+	props: ['user'],
+
+	computed: {
+		bannerStyle(): any {
+			if (this.user.bannerUrl == null) return {};
+			return {
+				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundImage: `url(${ this.user.bannerUrl })`
+			};
+		}
+	},
 });
 </script>
 
 <style lang="stylus" scoped>
-.root.item
+.zvdbznxvfixtmujpsigoccczftvpiwqh
-	padding 16px
+	$bg = #fff
-	font-size 16px
 
-	&:after
+	margin 16px auto
-		content ""
+	max-width calc(100% - 32px)
-		display block
+	font-size 16px
-		clear both
+	text-align center
+	background $bg
+	box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
+
+	> .banner
+		height 100px
+		background-color #f9f4f4
+		background-position center
+		background-size cover
 
 	> .avatar
 		display block
-		float left
+		margin -40px auto 0 auto
-		margin 0 16px 0 0
+		width 80px
-		width 58px
+		height 80px
-		height 58px
+		border-radius 100%
-		border-radius 8px
+		border solid 4px $bg
-
-	> .main
-		float left
-		width calc(100% - 74px)
-
-		> header
-			margin-bottom 2px
-
-			> .name
-				display inline
-				margin 0
-				padding 0
-				color #777
-				font-size 1em
-				font-weight 700
-				text-align left
-				text-decoration none
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				text-align left
-				margin 0 0 0 8px
-				color #ccc
 
 	> .body
+		padding 4px 32px 32px 32px
+
+		@media (max-width 400px)
+			padding 4px 16px 16px 16px
+
+		> .name
+			font-size 20px
+			font-weight bold
+
+		> .username
+			display block
+			opacity 0.7
+
+		> .description
+			margin 16px 0
+
 		> .followed
-				display inline-block
+			margin 0 0 16px 0
-				margin 0 0 4px 0
+			padding 0
-				padding 2px 8px
+			line-height 24px
-				vertical-align top
+			font-size 0.8em
-				font-size 10px
 			color #71afc7
 			background #eefaff
 			border-radius 4px
 
-			> .description
-				cursor default
-				display block
-				margin 0
-				padding 0
-				overflow-wrap break-word
-				font-size 1.1em
-				color #717171
-
-	> .mk-follow-button
-		position absolute
-		top 16px
-		right 16px
-
 </style>

src/client/app/desktop/views/components/users-list.vue

@@ -33,7 +33,7 @@ export default Vue.extend({
 	props: ['fetch', 'count', 'youKnowCount'],
 	data() {
 		return {
-			limit: 30,
+			limit: 20,
 			mode: 'all',
 			fetching: true,
 			moreFetching: false,
@@ -73,10 +73,14 @@ export default Vue.extend({
 
 .mk-users-list
 	height 100%
-	background #fff
+	overflow auto
+	background #eee
 
 	> nav
-		z-index 1
+		z-index 10
+		position sticky
+		top 0
+		background #fff
 		box-shadow 0 1px 0 rgba(#000, 0.1)
 
 		> div
@@ -114,16 +118,14 @@ export default Vue.extend({
 					background #eee
 					border-radius 20px
 
-	> .users
+	> button
-		height calc(100% - 54px)
+		display block
-		overflow auto
+		width calc(100% - 32px)
+		margin 16px
+		padding 16px
 
-		> *
+		&:hover
-			border-bottom solid 1px rgba(#000, 0.05)
+			background rgba(#000, 0.1)
-
-			> *
-				max-width 600px
-				margin 0 auto
 
 	> .no
 		margin 0