🎨

src/client/app/common/size.ts

@@ -0,0 +1,18 @@
+export default {
+	install(Vue) {
+		Vue.directive('size', {
+			inserted(el, binding) {
+				const query = binding.value;
+				const width = el.clientWidth;
+				for (const q of query) {
+					if (q.lt && (width <= q.lt)) {
+						el.classList.add(q.class);
+					}
+					if (q.gt && (width >= q.gt)) {
+						el.classList.add(q.class);
+					}
+				}
+			}
+		});
+	}
+};

src/client/app/common/views/components/user-list.vue

@@ -1,12 +1,17 @@
 <template>
 <ui-container :body-togglable="true">
 	<template slot="header"><slot></slot></template>
-	<div class="efvhhmdq">
-		<div class="user" v-for="friend in users">
-			<mk-avatar class="avatar" :user="friend"/>
+	<div class="efvhhmdq" v-size="[{ lt: 500, class: 'narrow' }]">
+		<div class="user" v-for="user in users">
+			<mk-avatar class="avatar" :user="user"/>
 			<div class="body">
-				<router-link class="name" :to="friend | userPage" v-user-preview="friend.id"><mk-user-name :user="friend"/></router-link>
-				<p class="username">@{{ friend | acct }}</p>
+				<div class="name">
+					<router-link class="name" :to="user | userPage" v-user-preview="user.id"><mk-user-name :user="user"/></router-link>
+					<p class="username">@{{ user | acct }}</p>
+				</div>
+				<div class="description" v-if="user.description">
+					<mfm :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis" :should-break="false"/>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -32,42 +37,57 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .efvhhmdq
+	&.narrow
+		> .user > .body > .name
+			width 100%
+
+		> .user > .body > .description
+			display none
+
 	> .user
+		display flex
 		padding 16px
 		border-bottom solid 1px var(--faceDivider)
 
 		&:last-child
 			border-bottom none
 
-		&:after
-			content ""
-			display block
-			clear both
-
 		> .avatar
 			display block
-			float left
+			flex-shrink 0
 			margin 0 12px 0 0
 			width 42px
 			height 42px
 			border-radius 8px
 
 		> .body
-			float left
+			display flex
 			width calc(100% - 54px)
 
 			> .name
-				margin 0
-				font-size 16px
-				line-height 24px
-				color var(--text)
+				width 45%
 
-			> .username
-				display block
-				margin 0
-				font-size 15px
-				line-height 16px
+				> .name
+					margin 0
+					font-size 16px
+					line-height 24px
+					color var(--text)
+
+				> .username
+					display block
+					margin 0
+					font-size 15px
+					line-height 16px
+					color var(--text)
+					opacity 0.7
+
+			> .description
+				width 55%
 				color var(--text)
+				line-height 42px
+				white-space nowrap
+				overflow hidden
+				text-overflow ellipsis
 				opacity 0.7
 
 </style>

src/client/app/init.ts

@@ -11,6 +11,7 @@ import VueI18n from 'vue-i18n';
 import SequentialEntrance from 'vue-sequential-entrance';
 
 import VueHotkey from './common/hotkey';
+import VueSize from './common/size';
 import App from './app.vue';
 import checkForUpdate from './common/scripts/check-for-update';
 import MiOS from './mios';
@@ -291,6 +292,7 @@ Vue.use(VueRouter);
 Vue.use(VAnimateCss);
 Vue.use(VModal);
 Vue.use(VueHotkey);
+Vue.use(VueSize);
 Vue.use(VueI18n);
 Vue.use(SequentialEntrance);
 

src/client/app/mobile/views/components/ui-container.vue

@@ -46,6 +46,9 @@ export default Vue.extend({
 	box-shadow 0 4px 16px rgba(#000, 0.1)
 	overflow hidden
 
+	& + .ukygtjoj
+		margin-top 16px
+
 	&.naked
 		background transparent !important
 		box-shadow none !important