This commit is contained in:
syuilo 2019-02-16 08:51:35 +09:00
parent c2b1bbeec5
commit 545e83efb1
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
4 changed files with 64 additions and 21 deletions

View file

@ -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);
}
}
}
});
}
};

View file

@ -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,30 +37,36 @@ 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
width 45%
> .name
margin 0
font-size 16px
@ -70,4 +81,13 @@ export default Vue.extend({
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>

View file

@ -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);

View file

@ -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