From b9cb703f972ae055b0dde4c241a23ab941a7d8f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?=
<syuilotan@yahoo.co.jp>
Date: Thu, 15 Feb 2018 13:42:21 +0900
Subject: [PATCH] wip
---
src/web/app/mobile/tags/post-preview.tag | 94 ---------------------
src/web/app/mobile/views/post-preview.vue | 99 +++++++++++++++++++++++
2 files changed, 99 insertions(+), 94 deletions(-)
delete mode 100644 src/web/app/mobile/tags/post-preview.tag
create mode 100644 src/web/app/mobile/views/post-preview.vue
diff --git a/src/web/app/mobile/tags/post-preview.tag b/src/web/app/mobile/tags/post-preview.tag
deleted file mode 100644
index 3389bf1f05..0000000000
--- a/src/web/app/mobile/tags/post-preview.tag
+++ /dev/null
@@ -1,94 +0,0 @@
-<mk-post-preview>
- <article>
- <a class="avatar-anchor" href={ '/' + post.user.username }>
- <img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
- </a>
- <div class="main">
- <header>
- <a class="name" href={ '/' + post.user.username }>{ post.user.name }</a>
- <span class="username">@{ post.user.username }</span>
- <a class="time" href={ '/' + post.user.username + '/' + post.id }>
- <mk-time time={ post.created_at }/>
- </a>
- </header>
- <div class="body">
- <mk-sub-post-content class="text" post={ post }/>
- </div>
- </div>
- </article>
- <style lang="stylus" scoped>
- :scope
- display block
- margin 0
- padding 0
- font-size 0.9em
- background #fff
-
- > article
- &:after
- content ""
- display block
- clear both
-
- &:hover
- > .main > footer > button
- color #888
-
- > .avatar-anchor
- display block
- float left
- margin 0 12px 0 0
-
- > .avatar
- display block
- width 48px
- height 48px
- margin 0
- border-radius 8px
- vertical-align bottom
-
- > .main
- float left
- width calc(100% - 60px)
-
- > header
- display flex
- margin-bottom 4px
- white-space nowrap
-
- > .name
- display block
- margin 0 .5em 0 0
- padding 0
- overflow hidden
- color #607073
- font-size 1em
- font-weight 700
- text-align left
- text-decoration none
- text-overflow ellipsis
-
- &:hover
- text-decoration underline
-
- > .username
- text-align left
- margin 0 .5em 0 0
- color #d1d8da
-
- > .time
- margin-left auto
- color #b2b8bb
-
- > .body
-
- > .text
- cursor default
- margin 0
- padding 0
- font-size 1.1em
- color #717171
-
- </style>
- <script lang="typescript">this.post = this.opts.post</script>
-</mk-post-preview>
diff --git a/src/web/app/mobile/views/post-preview.vue b/src/web/app/mobile/views/post-preview.vue
new file mode 100644
index 0000000000..ccb8b5f336
--- /dev/null
+++ b/src/web/app/mobile/views/post-preview.vue
@@ -0,0 +1,99 @@
+<template>
+<div class="mk-post-preview">
+ <a class="avatar-anchor" :href="`/${post.user.username}`">
+ <img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
+ </a>
+ <div class="main">
+ <header>
+ <a class="name" :href="`/${post.user.username}`">{{ post.user.name }}</a>
+ <span class="username">@{{ post.user.username }}</span>
+ <a class="time" :href="`/${post.user.username}/${post.id}`">
+ <mk-time :time="post.created_at"/>
+ </a>
+ </header>
+ <div class="body">
+ <mk-sub-post-content class="text" :post="post"/>
+ </div>
+ </div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+ props: ['post']
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-post-preview
+ margin 0
+ padding 0
+ font-size 0.9em
+ background #fff
+
+ &:after
+ content ""
+ display block
+ clear both
+
+ &:hover
+ > .main > footer > button
+ color #888
+
+ > .avatar-anchor
+ display block
+ float left
+ margin 0 12px 0 0
+
+ > .avatar
+ display block
+ width 48px
+ height 48px
+ margin 0
+ border-radius 8px
+ vertical-align bottom
+
+ > .main
+ float left
+ width calc(100% - 60px)
+
+ > header
+ display flex
+ margin-bottom 4px
+ white-space nowrap
+
+ > .name
+ display block
+ margin 0 .5em 0 0
+ padding 0
+ overflow hidden
+ color #607073
+ font-size 1em
+ font-weight 700
+ text-align left
+ text-decoration none
+ text-overflow ellipsis
+
+ &:hover
+ text-decoration underline
+
+ > .username
+ text-align left
+ margin 0 .5em 0 0
+ color #d1d8da
+
+ > .time
+ margin-left auto
+ color #b2b8bb
+
+ > .body
+
+ > .text
+ cursor default
+ margin 0
+ padding 0
+ font-size 1.1em
+ color #717171
+
+</style>