モバイル版でもデッキを使えるように (#4366)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix bug

* wip

* Update notifications.vue

* Update user-menu.vue

* deck settings

* indicate
This commit is contained in:
syuilo
2019-02-25 19:45:00 +09:00
committed by GitHub
parent 3654f247c4
commit c0a60260c2
53 changed files with 711 additions and 666 deletions

View File

@ -1,23 +1,23 @@
<template>
<div
class="note"
:class="{ mini }"
:class="{ mini: narrow }"
v-show="(this.$store.state.settings.remainDeletedNote || appearNote.deletedAt == null) && !hideThisNote"
:tabindex="appearNote.deletedAt == null ? '-1' : null"
v-hotkey="keymap"
:title="title"
>
<div class="conversation" v-if="detail && conversation.length > 0">
<x-sub v-for="note in conversation" :key="note.id" :note="note" :mini="mini"/>
<x-sub v-for="note in conversation" :key="note.id" :note="note"/>
</div>
<div class="reply-to" v-if="appearNote.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
<x-sub :note="appearNote.reply" :mini="mini"/>
<x-sub :note="appearNote.reply"/>
</div>
<mk-renote class="renote" v-if="isRenote" :note="note"/>
<article>
<article class="article">
<mk-avatar class="avatar" :user="appearNote.user"/>
<div class="main">
<mk-note-header class="header" :note="appearNote" :mini="mini"/>
<mk-note-header class="header" :note="appearNote"/>
<div class="body" v-if="appearNote.deletedAt == null">
<p v-if="appearNote.cw != null" class="cw">
<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" />
@ -35,12 +35,12 @@
</div>
<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> 位置情報</a>
<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote" :mini="mini"/></div>
<mk-url-preview v-for="url in urls" :url="url" :key="url" :mini="mini" :compact="compact"/>
<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote"/></div>
<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="compact"/>
</div>
</div>
<footer v-if="appearNote.deletedAt == null">
<span class="app" v-if="appearNote.app && mini && $store.state.settings.showVia">via <b>{{ appearNote.app.name }}</b></span>
<span class="app" v-if="appearNote.app && narrow && $store.state.settings.showVia">via <b>{{ appearNote.app.name }}</b></span>
<mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
<button class="replyButton" @click="reply()" :title="$t('reply')">
<template v-if="appearNote.reply"><fa icon="reply-all"/></template>
@ -70,7 +70,7 @@
</div>
</article>
<div class="replies" v-if="detail && replies.length > 0">
<x-sub v-for="note in replies" :key="note.id" :note="note" :mini="mini"/>
<x-sub v-for="note in replies" :key="note.id" :note="note"/>
</div>
</div>
</template>
@ -110,9 +110,10 @@ export default Vue.extend({
required: false,
default: false
},
mini: {
type: Boolean,
required: false,
},
inject: {
narrow: {
default: false
}
},
@ -152,7 +153,7 @@ export default Vue.extend({
border-bottom solid var(--lineWidth) var(--faceDivider)
&.mini
font-size 14px
font-size 13px
> .renote
padding 8px 16px 0 16px
@ -161,7 +162,7 @@ export default Vue.extend({
width 20px
height 20px
> article
> .article
padding 16px 16px 4px
> .avatar
@ -189,7 +190,7 @@ export default Vue.extend({
> .renote + article
padding-top 8px
> article
> .article
display flex
padding 28px 32px 18px 32px