コンポーネント整理
This commit is contained in:
syuilo
@ -7,12 +7,10 @@ import mediaVideo from './media-video.vue';
|
||||
import notePreview from './note-preview.vue';
|
||||
import subNoteContent from './sub-note-content.vue';
|
||||
import noteCard from './note-card.vue';
|
||||
import userCard from './user-card.vue';
|
||||
import noteDetail from './note-detail.vue';
|
||||
import notification from './notification.vue';
|
||||
import notifications from './notifications.vue';
|
||||
import notificationPreview from './notification-preview.vue';
|
||||
import userPreview from './user-preview.vue';
|
||||
import userTimeline from './user-timeline.vue';
|
||||
import userListTimeline from './user-list-timeline.vue';
|
||||
import uiContainer from './ui-container.vue';
|
||||
@ -25,12 +23,10 @@ Vue.component('mk-media-video', mediaVideo);
|
||||
Vue.component('mk-note-preview', notePreview);
|
||||
Vue.component('mk-sub-note-content', subNoteContent);
|
||||
Vue.component('mk-note-card', noteCard);
|
||||
Vue.component('mk-user-card', userCard);
|
||||
Vue.component('mk-note-detail', noteDetail);
|
||||
Vue.component('mk-notification', notification);
|
||||
Vue.component('mk-notifications', notifications);
|
||||
Vue.component('mk-notification-preview', notificationPreview);
|
||||
Vue.component('mk-user-preview', userPreview);
|
||||
Vue.component('mk-user-timeline', userTimeline);
|
||||
Vue.component('mk-user-list-timeline', userListTimeline);
|
||||
Vue.component('ui-container', uiContainer);
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
<template>
|
||||
<div class="mk-user-card">
|
||||
<header :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
|
||||
<mk-avatar class="avatar" :user="user"/>
|
||||
</header>
|
||||
<a class="name" :href="user | userPage" target="_blank">
|
||||
<mk-user-name :user="user"/>
|
||||
</a>
|
||||
<p class="username"><mk-acct :user="user"/></p>
|
||||
<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" class="follow-button" :user="user"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['user']
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-user-card
|
||||
display inline-block
|
||||
width 200px
|
||||
text-align center
|
||||
border-radius 8px
|
||||
background #fff
|
||||
|
||||
> header
|
||||
display block
|
||||
height 80px
|
||||
background-color #ddd
|
||||
background-size cover
|
||||
background-position center
|
||||
border-radius 8px 8px 0 0
|
||||
|
||||
> .avatar
|
||||
position absolute
|
||||
top 20px
|
||||
left calc(50% - 40px)
|
||||
width 80px
|
||||
height 80px
|
||||
border solid 2px #fff
|
||||
border-radius 8px
|
||||
|
||||
> .name
|
||||
display block
|
||||
margin 24px 0 0 0
|
||||
font-size 16px
|
||||
color #555
|
||||
|
||||
> .username
|
||||
margin 0
|
||||
font-size 15px
|
||||
color #ccc
|
||||
|
||||
> .follow-button
|
||||
display inline-block
|
||||
margin 8px 0 16px 0
|
||||
|
||||
</style>
|
||||
@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<div class="mk-user-preview">
|
||||
<mk-avatar class="avatar" :user="user"/>
|
||||
<div class="main">
|
||||
<header>
|
||||
<router-link class="name" :to="user | userPage">
|
||||
<mk-user-name :user="user"/>
|
||||
</router-link>
|
||||
<span class="username"><mk-acct :user="user"/></span>
|
||||
</header>
|
||||
<div class="body">
|
||||
<div class="description">
|
||||
<mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['user']
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-user-preview
|
||||
margin 0
|
||||
padding 16px
|
||||
font-size 12px
|
||||
|
||||
@media (min-width 350px)
|
||||
font-size 14px
|
||||
|
||||
@media (min-width 500px)
|
||||
font-size 16px
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
clear both
|
||||
|
||||
> .avatar
|
||||
display block
|
||||
float left
|
||||
margin 0 10px 0 0
|
||||
width 48px
|
||||
height 48px
|
||||
border-radius 6px
|
||||
|
||||
@media (min-width 500px)
|
||||
margin-right 16px
|
||||
width 58px
|
||||
height 58px
|
||||
border-radius 8px
|
||||
|
||||
> .main
|
||||
float left
|
||||
width calc(100% - 58px)
|
||||
|
||||
@media (min-width 500px)
|
||||
width calc(100% - 74px)
|
||||
|
||||
> header
|
||||
@media (min-width 500px)
|
||||
margin-bottom 2px
|
||||
|
||||
> .name
|
||||
display inline
|
||||
margin 0
|
||||
padding 0
|
||||
color #777
|
||||
font-size 1em
|
||||
font-weight 700
|
||||
text-align left
|
||||
text-decoration none
|
||||
|
||||
&:hover
|
||||
text-decoration underline
|
||||
|
||||
> .username
|
||||
text-align left
|
||||
margin 0 0 0 8px
|
||||
color #ccc
|
||||
|
||||
> .body
|
||||
|
||||
> .description
|
||||
cursor default
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
font-size 1.1em
|
||||
color #717171
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user