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

View File

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

View File

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