forked from mirror/misskey
🎨
This commit is contained in:
parent
c2b1bbeec5
commit
545e83efb1
18
src/client/app/common/size.ts
Normal file
18
src/client/app/common/size.ts
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
@ -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>
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user