From 545e83efb1da11fa435f3aaaa6f6ec0d168cedb8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 16 Feb 2019 08:51:35 +0900
Subject: [PATCH] :art:
---
src/client/app/common/size.ts | 18 ++++++
.../app/common/views/components/user-list.vue | 62 ++++++++++++-------
src/client/app/init.ts | 2 +
.../mobile/views/components/ui-container.vue | 3 +
4 files changed, 64 insertions(+), 21 deletions(-)
create mode 100644 src/client/app/common/size.ts
diff --git a/src/client/app/common/size.ts b/src/client/app/common/size.ts
new file mode 100644
index 0000000000..6abb305747
--- /dev/null
+++ b/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);
+ }
+ }
+ }
+ });
+ }
+};
diff --git a/src/client/app/common/views/components/user-list.vue b/src/client/app/common/views/components/user-list.vue
index 35569687ba..3147fbe371 100644
--- a/src/client/app/common/views/components/user-list.vue
+++ b/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>
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 710bef8b65..22285aa992 100644
--- a/src/client/app/init.ts
+++ b/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);
diff --git a/src/client/app/mobile/views/components/ui-container.vue b/src/client/app/mobile/views/components/ui-container.vue
index 2dcd83f586..63ca28cbca 100644
--- a/src/client/app/mobile/views/components/ui-container.vue
+++ b/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