v2493
This commit is contained in:
syuilo
parent
22c5dc36a5
commit
d41f5dbe77
24 changed files with 555 additions and 392 deletions
|
|
@ -2,6 +2,10 @@ ChangeLog (Release Notes)
|
||||||
=========================
|
=========================
|
||||||
主に notable な changes を書いていきます
|
主に notable な changes を書いていきます
|
||||||
|
|
||||||
|
2493 (2017/08/29)
|
||||||
|
-----------------
|
||||||
|
* デザインの変更など
|
||||||
|
|
||||||
2491 (2017/08/29)
|
2491 (2017/08/29)
|
||||||
-----------------
|
-----------------
|
||||||
* デザインの修正と調整
|
* デザインの修正と調整
|
||||||
|
|
|
||||||
|
|
@ -355,7 +355,9 @@ mobile:
|
||||||
notifications: "Notifications"
|
notifications: "Notifications"
|
||||||
|
|
||||||
mk-post-page:
|
mk-post-page:
|
||||||
submit: "Post"
|
title: "Post"
|
||||||
|
prev: "Previous post"
|
||||||
|
next: "Next post"
|
||||||
|
|
||||||
mk-search-page:
|
mk-search-page:
|
||||||
search: "Search"
|
search: "Search"
|
||||||
|
|
|
||||||
|
|
@ -355,7 +355,9 @@ mobile:
|
||||||
notifications: "通知"
|
notifications: "通知"
|
||||||
|
|
||||||
mk-post-page:
|
mk-post-page:
|
||||||
submit: "投稿"
|
title: "投稿"
|
||||||
|
prev: "前の投稿"
|
||||||
|
next: "次の投稿"
|
||||||
|
|
||||||
mk-search-page:
|
mk-search-page:
|
||||||
search: "検索"
|
search: "検索"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "misskey",
|
"name": "misskey",
|
||||||
"author": "syuilo <i@syuilo.com>",
|
"author": "syuilo <i@syuilo.com>",
|
||||||
"version": "0.0.2491",
|
"version": "0.0.2493",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"description": "A miniblog-based SNS",
|
"description": "A miniblog-based SNS",
|
||||||
"bugs": "https://github.com/syuilo/misskey/issues",
|
"bugs": "https://github.com/syuilo/misskey/issues",
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,6 @@
|
||||||
display block
|
display block
|
||||||
max-width 600px
|
max-width 600px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
background #fff
|
|
||||||
|
|
||||||
> svg
|
> svg
|
||||||
display block
|
display block
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
display block
|
display block
|
||||||
|
|
||||||
> mk-init-following
|
> mk-init-following
|
||||||
border-bottom solid 1px #eee
|
margin-bottom 8px
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
> mk-home-timeline
|
> mk-home-timeline
|
||||||
max-width 600px
|
max-width 600px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
padding 8px
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
padding 16px
|
padding 16px
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,14 @@
|
||||||
<mk-init-following>
|
<mk-init-following>
|
||||||
<p class="title">気になるユーザーをフォロー:</p>
|
<p class="title">気になるユーザーをフォロー:</p>
|
||||||
<div class="users" if={ !fetching && users.length > 0 }>
|
<div class="users" if={ !fetching && users.length > 0 }>
|
||||||
<div class="user" each={ users }><a class="avatar-anchor" href={ '/' + username }><img class="avatar" src={ avatar_url + '?thumbnail&size=42' } alt=""/></a>
|
<div class="user" each={ users }>
|
||||||
<div class="body"><a class="name" href={ '/' + username } target="_blank">{ name }</a>
|
<header style={ banner_url ? 'background-image: url(' + banner_url + '?thumbnail&size=1024)' : '' }>
|
||||||
<p class="username">@{ username }</p>
|
<a href={ '/' + username }>
|
||||||
</div>
|
<img src={ avatar_url + '?thumbnail&size=200' } alt="avatar"/>
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
<a class="name" href={ '/' + username } target="_blank">{ name }</a>
|
||||||
|
<p class="username">@{ username }</p>
|
||||||
<mk-follow-button user={ this }/>
|
<mk-follow-button user={ this }/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -15,63 +19,65 @@
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
display block
|
display block
|
||||||
padding 16px
|
background #fff
|
||||||
|
border-radius 8px
|
||||||
|
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
> .title
|
> .title
|
||||||
margin 0 0 12px 0
|
margin 0
|
||||||
|
padding 8px 16px
|
||||||
font-size 1em
|
font-size 1em
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color #888
|
color #888
|
||||||
|
|
||||||
> .users
|
> .users
|
||||||
&:after
|
overflow-x scroll
|
||||||
content ""
|
white-space nowrap
|
||||||
display block
|
padding 16px
|
||||||
clear both
|
background #eee
|
||||||
|
|
||||||
> .user
|
> .user
|
||||||
padding 16px
|
display inline-block
|
||||||
width 238px
|
width 200px
|
||||||
float left
|
text-align center
|
||||||
|
border-radius 8px
|
||||||
|
background #fff
|
||||||
|
|
||||||
&:after
|
&:not(:last-child)
|
||||||
content ""
|
margin-right 16px
|
||||||
|
|
||||||
|
> header
|
||||||
display block
|
display block
|
||||||
clear both
|
height 80px
|
||||||
|
background-color #ddd
|
||||||
|
background-size cover
|
||||||
|
background-position center
|
||||||
|
border-radius 8px 8px 0 0
|
||||||
|
|
||||||
> .avatar-anchor
|
> a
|
||||||
|
> img
|
||||||
|
position absolute
|
||||||
|
top 20px
|
||||||
|
left calc(50% - 40px)
|
||||||
|
width 80px
|
||||||
|
height 80px
|
||||||
|
border solid 2px #fff
|
||||||
|
border-radius 8px
|
||||||
|
|
||||||
|
> .name
|
||||||
display block
|
display block
|
||||||
float left
|
margin 24px 0 2px 0
|
||||||
margin 0 12px 0 0
|
font-size 16px
|
||||||
|
color #555
|
||||||
|
|
||||||
> .avatar
|
> .username
|
||||||
display block
|
margin 0
|
||||||
width 42px
|
font-size 15px
|
||||||
height 42px
|
color #ccc
|
||||||
margin 0
|
|
||||||
border-radius 8px
|
|
||||||
vertical-align bottom
|
|
||||||
|
|
||||||
> .body
|
|
||||||
float left
|
|
||||||
width calc(100% - 54px)
|
|
||||||
|
|
||||||
> .name
|
|
||||||
margin 0
|
|
||||||
font-size 16px
|
|
||||||
line-height 24px
|
|
||||||
color #555
|
|
||||||
|
|
||||||
> .username
|
|
||||||
margin 0
|
|
||||||
font-size 15px
|
|
||||||
line-height 16px
|
|
||||||
color #ccc
|
|
||||||
|
|
||||||
> mk-follow-button
|
> mk-follow-button
|
||||||
position absolute
|
display inline-block
|
||||||
top 16px
|
margin 8px 0 16px 0
|
||||||
right 16px
|
|
||||||
|
|
||||||
> .empty
|
> .empty
|
||||||
margin 0
|
margin 0
|
||||||
|
|
@ -90,7 +96,8 @@
|
||||||
|
|
||||||
> .refresh
|
> .refresh
|
||||||
display block
|
display block
|
||||||
margin 0 8px 0 0
|
margin 0
|
||||||
|
padding 8px 16px
|
||||||
text-align right
|
text-align right
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
color #999
|
color #999
|
||||||
|
|
@ -117,7 +124,7 @@
|
||||||
color #222
|
color #222
|
||||||
|
|
||||||
> i
|
> i
|
||||||
padding 14px
|
padding 10px
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,7 @@
|
||||||
<mk-notifications>
|
<mk-notifications>
|
||||||
<div class="notifications" if={ notifications.length != 0 }>
|
<div class="notifications" if={ notifications.length != 0 }>
|
||||||
<virtual each={ notification, i in notifications }>
|
<virtual each={ notification, i in notifications }>
|
||||||
<div>
|
<mk-notification notification={ notification }/>
|
||||||
<mk-notification notification={ notification }/>
|
|
||||||
</div>
|
|
||||||
<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
|
<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
|
||||||
</virtual>
|
</virtual>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -15,20 +13,28 @@
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
display block
|
display block
|
||||||
|
margin 8px auto
|
||||||
|
padding 0
|
||||||
|
max-width 500px
|
||||||
|
width calc(100% - 16px)
|
||||||
background #fff
|
background #fff
|
||||||
|
border-radius 8px
|
||||||
|
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
margin 16px auto
|
||||||
|
width calc(100% - 32px)
|
||||||
|
|
||||||
> .notifications
|
> .notifications
|
||||||
|
|
||||||
> div
|
> mk-notification
|
||||||
|
margin 0 auto
|
||||||
|
max-width 500px
|
||||||
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
&:last-child
|
&:last-child
|
||||||
border-bottom none
|
border-bottom none
|
||||||
|
|
||||||
> mk-notification
|
|
||||||
margin 0 auto
|
|
||||||
max-width 500px
|
|
||||||
|
|
||||||
> .date
|
> .date
|
||||||
display block
|
display block
|
||||||
margin 0
|
margin 0
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@
|
||||||
this.on('mount', () => {
|
this.on('mount', () => {
|
||||||
document.title = 'Misskey'
|
document.title = 'Misskey'
|
||||||
ui.trigger('title', '<i class="fa fa-home"></i>%i18n:mobile.tags.mk-home.home%');
|
ui.trigger('title', '<i class="fa fa-home"></i>%i18n:mobile.tags.mk-home.home%');
|
||||||
|
document.documentElement.style.background = '#313a42';
|
||||||
|
|
||||||
ui.trigger('func', () => {
|
ui.trigger('func', () => {
|
||||||
openPostForm();
|
openPostForm();
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@
|
||||||
this.on('mount', () => {
|
this.on('mount', () => {
|
||||||
document.title = 'Misskey | %i18n:mobile.tags.mk-notifications-page.notifications%';
|
document.title = 'Misskey | %i18n:mobile.tags.mk-notifications-page.notifications%';
|
||||||
ui.trigger('title', '<i class="fa fa-bell-o"></i>%i18n:mobile.tags.mk-notifications-page.notifications%');
|
ui.trigger('title', '<i class="fa fa-bell-o"></i>%i18n:mobile.tags.mk-notifications-page.notifications%');
|
||||||
|
document.documentElement.style.background = '#313a42';
|
||||||
|
|
||||||
Progress.start();
|
Progress.start();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<mk-post-page>
|
<mk-post-page>
|
||||||
<mk-ui ref="ui">
|
<mk-ui ref="ui">
|
||||||
<main>
|
<main if={ !parent.fetching }>
|
||||||
|
<a if={ parent.post.next } href={ parent.post.next }><i class="fa fa-angle-up"></i>%i18n:mobile.tags.mk-post-page.next%</a>
|
||||||
<mk-post-detail ref="post" post={ parent.post }/>
|
<mk-post-detail ref="post" post={ parent.post }/>
|
||||||
|
<a if={ parent.post.prev } href={ parent.post.prev }><i class="fa fa-angle-down"></i>%i18n:mobile.tags.mk-post-page.prev%</a>
|
||||||
</main>
|
</main>
|
||||||
</mk-ui>
|
</mk-ui>
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -9,31 +11,51 @@
|
||||||
display block
|
display block
|
||||||
|
|
||||||
main
|
main
|
||||||
background #fff
|
text-align center
|
||||||
|
|
||||||
> mk-post-detail
|
> a
|
||||||
width 100%
|
display inline-block
|
||||||
max-width 500px
|
|
||||||
margin 0 auto
|
|
||||||
|
|
||||||
|
&:first-child
|
||||||
|
margin-top 8px
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
margin-top 16px
|
||||||
|
|
||||||
|
&:last-child
|
||||||
|
margin-bottom 8px
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
margin-bottom 16px
|
||||||
|
|
||||||
|
> i
|
||||||
|
margin-right 4px
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import ui from '../../scripts/ui-event';
|
import ui from '../../scripts/ui-event';
|
||||||
import Progress from '../../../common/scripts/loading';
|
import Progress from '../../../common/scripts/loading';
|
||||||
|
|
||||||
this.post = this.opts.post;
|
this.mixin('api');
|
||||||
|
|
||||||
|
this.fetching = true;
|
||||||
|
this.post = null;
|
||||||
|
|
||||||
this.on('mount', () => {
|
this.on('mount', () => {
|
||||||
document.title = 'Misskey';
|
document.title = 'Misskey';
|
||||||
ui.trigger('title', '<i class="fa fa-sticky-note-o"></i>%i18n:mobile.tags.mk-post-page.submit%');
|
ui.trigger('title', '<i class="fa fa-sticky-note-o"></i>%i18n:mobile.tags.mk-post-page.title%');
|
||||||
|
document.documentElement.style.background = '#313a42';
|
||||||
|
|
||||||
Progress.start();
|
Progress.start();
|
||||||
|
|
||||||
this.refs.ui.refs.post.on('post-fetched', () => {
|
this.api('posts/show', {
|
||||||
Progress.set(0.5);
|
post_id: this.opts.post
|
||||||
});
|
}).then(post => {
|
||||||
|
|
||||||
|
this.update({
|
||||||
|
fetching: false,
|
||||||
|
post: post
|
||||||
|
});
|
||||||
|
|
||||||
this.refs.ui.refs.post.on('loaded', () => {
|
|
||||||
Progress.done();
|
Progress.done();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@
|
||||||
document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.opts.query} | Misskey`
|
document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.opts.query} | Misskey`
|
||||||
// TODO: クエリをHTMLエスケープ
|
// TODO: クエリをHTMLエスケープ
|
||||||
ui.trigger('title', '<i class="fa fa-search"></i>' + this.opts.query);
|
ui.trigger('title', '<i class="fa fa-search"></i>' + this.opts.query);
|
||||||
|
document.documentElement.style.background = '#313a42';
|
||||||
|
|
||||||
Progress.start();
|
Progress.start();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -56,9 +56,13 @@
|
||||||
display block
|
display block
|
||||||
|
|
||||||
> div
|
> div
|
||||||
margin 16px auto
|
margin 8px auto
|
||||||
max-width 500px
|
max-width 500px
|
||||||
width calc(100% - 32px)
|
width calc(100% - 16px)
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
margin 16px auto
|
||||||
|
width calc(100% - 32px)
|
||||||
|
|
||||||
> p
|
> p
|
||||||
display block
|
display block
|
||||||
|
|
@ -66,9 +70,10 @@
|
||||||
padding 12px 16px
|
padding 12px 16px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
color #79d4e6
|
color #79d4e6
|
||||||
|
border solid 1px #71afbb
|
||||||
//color #276f86
|
//color #276f86
|
||||||
//background #f8ffff
|
//background #f8ffff
|
||||||
border solid 1px #a9d5de
|
//border solid 1px #a9d5de
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
> i
|
> i
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,7 @@
|
||||||
document.title = '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name) + ' | Misskey';
|
document.title = '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name) + ' | Misskey';
|
||||||
// TODO: ユーザー名をエスケープ
|
// TODO: ユーザー名をエスケープ
|
||||||
ui.trigger('title', '<img src="' + user.avatar_url + '?thumbnail&size=64">' + '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name));
|
ui.trigger('title', '<img src="' + user.avatar_url + '?thumbnail&size=64">' + '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name));
|
||||||
|
document.documentElement.style.background = '#313a42';
|
||||||
|
|
||||||
this.refs.ui.refs.list.on('loaded', () => {
|
this.refs.ui.refs.list.on('loaded', () => {
|
||||||
Progress.done();
|
Progress.done();
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,7 @@
|
||||||
document.title = '%i18n:mobile.tags.mk-user-following-page.following-of%'.replace('{}', user.name) + ' | Misskey';
|
document.title = '%i18n:mobile.tags.mk-user-following-page.following-of%'.replace('{}', user.name) + ' | Misskey';
|
||||||
// TODO: ユーザー名をエスケープ
|
// TODO: ユーザー名をエスケープ
|
||||||
ui.trigger('title', '<img src="' + user.avatar_url + '?thumbnail&size=64">' + '%i18n:mobile.tags.mk-user-following-page.following-of%'.replace('{}', user.name));
|
ui.trigger('title', '<img src="' + user.avatar_url + '?thumbnail&size=64">' + '%i18n:mobile.tags.mk-user-following-page.following-of%'.replace('{}', user.name));
|
||||||
|
document.documentElement.style.background = '#313a42';
|
||||||
|
|
||||||
this.refs.ui.refs.list.on('loaded', () => {
|
this.refs.ui.refs.list.on('loaded', () => {
|
||||||
Progress.done();
|
Progress.done();
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@
|
||||||
this.user = this.opts.user;
|
this.user = this.opts.user;
|
||||||
|
|
||||||
this.on('mount', () => {
|
this.on('mount', () => {
|
||||||
|
document.documentElement.style.background = '#313a42';
|
||||||
Progress.start();
|
Progress.start();
|
||||||
|
|
||||||
this.refs.ui.refs.user.on('loaded', user => {
|
this.refs.ui.refs.user.on('loaded', user => {
|
||||||
|
|
|
||||||
|
|
@ -1,261 +1,265 @@
|
||||||
<mk-post-detail>
|
<mk-post-detail>
|
||||||
<div class="fetching" if={ fetching }>
|
<button class="read-more" if={ p.reply_to && p.reply_to.reply_to_id && context == null } onclick={ loadContext } disabled={ loadingContext }>
|
||||||
<mk-ellipsis-icon/>
|
<i class="fa fa-ellipsis-v" if={ !contextFetching }></i>
|
||||||
|
<i class="fa fa-spinner fa-pulse" if={ contextFetching }></i>
|
||||||
|
</button>
|
||||||
|
<div class="context">
|
||||||
|
<virtual each={ post in context }>
|
||||||
|
<mk-post-detail-sub post={ post }/>
|
||||||
|
</virtual>
|
||||||
</div>
|
</div>
|
||||||
<div class="main" if={ !fetching }>
|
<div class="reply-to" if={ p.reply_to }>
|
||||||
<button class="read-more" if={ p.reply_to && p.reply_to.reply_to_id && context == null } onclick={ loadContext } disabled={ loadingContext }>
|
<mk-post-detail-sub post={ p.reply_to }/>
|
||||||
<i class="fa fa-ellipsis-v" if={ !contextFetching }></i>
|
</div>
|
||||||
<i class="fa fa-spinner fa-pulse" if={ contextFetching }></i>
|
<div class="repost" if={ isRepost }>
|
||||||
</button>
|
<p>
|
||||||
<div class="context">
|
<a class="avatar-anchor" href={ '/' + post.user.username }>
|
||||||
<virtual each={ post in context }>
|
<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/></a>
|
||||||
<mk-post-preview post={ post }/>
|
<i class="fa fa-retweet"></i><a class="name" href={ '/' + post.user.username }>
|
||||||
</virtual>
|
{ post.user.name }
|
||||||
</div>
|
|
||||||
<div class="reply-to" if={ p.reply_to }>
|
|
||||||
<mk-post-preview post={ p.reply_to }/>
|
|
||||||
</div>
|
|
||||||
<div class="repost" if={ isRepost }>
|
|
||||||
<p>
|
|
||||||
<a class="avatar-anchor" href={ '/' + post.user.username }>
|
|
||||||
<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/></a>
|
|
||||||
<i class="fa fa-retweet"></i><a class="name" href={ '/' + post.user.username }>
|
|
||||||
{ post.user.name }
|
|
||||||
</a>
|
|
||||||
がRepost
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<article>
|
|
||||||
<header>
|
|
||||||
<a class="avatar-anchor" href={ '/' + p.user.username }>
|
|
||||||
<img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
|
||||||
</a>
|
|
||||||
<div>
|
|
||||||
<a class="name" href={ '/' + p.user.username }>{ p.user.name }</a>
|
|
||||||
<span class="username">@{ p.user.username }</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="body">
|
|
||||||
<div class="text" ref="text"></div>
|
|
||||||
<div class="media" if={ p.media }>
|
|
||||||
<virtual each={ file in p.media }><img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/></virtual>
|
|
||||||
</div>
|
|
||||||
<mk-poll if={ p.poll } post={ p }/>
|
|
||||||
</div>
|
|
||||||
<a class="time" href={ url }>
|
|
||||||
<mk-time time={ p.created_at } mode="detail"/>
|
|
||||||
</a>
|
</a>
|
||||||
<footer>
|
がRepost
|
||||||
<mk-reactions-viewer post={ p }/>
|
</p>
|
||||||
<button onclick={ reply } title="%i18n:mobile.tags.mk-post-detail.reply%"><i class="fa fa-reply"></i>
|
</div>
|
||||||
<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
|
<article>
|
||||||
</button>
|
<header>
|
||||||
<button onclick={ repost } title="Repost"><i class="fa fa-retweet"></i>
|
<a class="avatar-anchor" href={ '/' + p.user.username }>
|
||||||
<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
|
<img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||||
</button>
|
</a>
|
||||||
<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="%i18n:mobile.tags.mk-post-detail.reaction%"><i class="fa fa-plus"></i>
|
<div>
|
||||||
<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
|
<a class="name" href={ '/' + p.user.username }>{ p.user.name }</a>
|
||||||
</button>
|
<span class="username">@{ p.user.username }</span>
|
||||||
<button><i class="fa fa-ellipsis-h"></i></button>
|
</div>
|
||||||
</footer>
|
</header>
|
||||||
</article>
|
<div class="body">
|
||||||
<div class="replies">
|
<div class="text" ref="text"></div>
|
||||||
<virtual each={ post in replies }>
|
<div class="media" if={ p.media }>
|
||||||
<mk-post-preview post={ post }/>
|
<virtual each={ file in p.media }><img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/></virtual>
|
||||||
</virtual>
|
</div>
|
||||||
|
<mk-poll if={ p.poll } post={ p }/>
|
||||||
</div>
|
</div>
|
||||||
|
<a class="time" href={ url }>
|
||||||
|
<mk-time time={ p.created_at } mode="detail"/>
|
||||||
|
</a>
|
||||||
|
<footer>
|
||||||
|
<mk-reactions-viewer post={ p }/>
|
||||||
|
<button onclick={ reply } title="%i18n:mobile.tags.mk-post-detail.reply%"><i class="fa fa-reply"></i>
|
||||||
|
<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
|
||||||
|
</button>
|
||||||
|
<button onclick={ repost } title="Repost"><i class="fa fa-retweet"></i>
|
||||||
|
<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
|
||||||
|
</button>
|
||||||
|
<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="%i18n:mobile.tags.mk-post-detail.reaction%"><i class="fa fa-plus"></i>
|
||||||
|
<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
|
||||||
|
</button>
|
||||||
|
<button><i class="fa fa-ellipsis-h"></i></button>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<div class="replies">
|
||||||
|
<virtual each={ post in replies }>
|
||||||
|
<mk-post-detail-sub post={ post }/>
|
||||||
|
</virtual>
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
display block
|
display block
|
||||||
margin 0
|
overflow hidden
|
||||||
|
margin 8px auto
|
||||||
padding 0
|
padding 0
|
||||||
|
max-width 500px
|
||||||
|
width calc(100% - 16px)
|
||||||
|
text-align left
|
||||||
|
background #fff
|
||||||
|
border-radius 8px
|
||||||
|
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
margin 16px auto
|
||||||
|
width calc(100% - 32px)
|
||||||
|
|
||||||
> .fetching
|
> .fetching
|
||||||
padding 64px 0
|
padding 64px 0
|
||||||
|
|
||||||
> .main
|
> .read-more
|
||||||
|
display block
|
||||||
|
margin 0
|
||||||
|
padding 10px 0
|
||||||
|
width 100%
|
||||||
|
font-size 1em
|
||||||
|
text-align center
|
||||||
|
color #999
|
||||||
|
cursor pointer
|
||||||
|
background #fafafa
|
||||||
|
outline none
|
||||||
|
border none
|
||||||
|
border-bottom solid 1px #eef0f2
|
||||||
|
border-radius 6px 6px 0 0
|
||||||
|
box-shadow none
|
||||||
|
|
||||||
> .read-more
|
&:hover
|
||||||
display block
|
background #f6f6f6
|
||||||
margin 0
|
|
||||||
padding 10px 0
|
|
||||||
width 100%
|
|
||||||
font-size 1em
|
|
||||||
text-align center
|
|
||||||
color #999
|
|
||||||
cursor pointer
|
|
||||||
background #fafafa
|
|
||||||
outline none
|
|
||||||
border none
|
|
||||||
border-bottom solid 1px #eef0f2
|
|
||||||
border-radius 6px 6px 0 0
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
&:hover
|
&:active
|
||||||
background #f6f6f6
|
background #f0f0f0
|
||||||
|
|
||||||
&:active
|
&:disabled
|
||||||
background #f0f0f0
|
color #ccc
|
||||||
|
|
||||||
&:disabled
|
> .context
|
||||||
color #ccc
|
> *
|
||||||
|
|
||||||
> .context
|
|
||||||
> *
|
|
||||||
border-bottom 1px solid #eef0f2
|
|
||||||
|
|
||||||
> .repost
|
|
||||||
color #9dbb00
|
|
||||||
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
|
||||||
|
|
||||||
> p
|
|
||||||
margin 0
|
|
||||||
padding 16px 32px
|
|
||||||
|
|
||||||
.avatar-anchor
|
|
||||||
display inline-block
|
|
||||||
|
|
||||||
.avatar
|
|
||||||
vertical-align bottom
|
|
||||||
min-width 28px
|
|
||||||
min-height 28px
|
|
||||||
max-width 28px
|
|
||||||
max-height 28px
|
|
||||||
margin 0 8px 0 0
|
|
||||||
border-radius 6px
|
|
||||||
|
|
||||||
i
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
.name
|
|
||||||
font-weight bold
|
|
||||||
|
|
||||||
& + article
|
|
||||||
padding-top 8px
|
|
||||||
|
|
||||||
> .reply-to
|
|
||||||
border-bottom 1px solid #eef0f2
|
border-bottom 1px solid #eef0f2
|
||||||
|
|
||||||
> article
|
> .repost
|
||||||
padding 14px 16px 9px 16px
|
color #9dbb00
|
||||||
|
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||||
|
|
||||||
@media (min-width 500px)
|
> p
|
||||||
padding 28px 32px 18px 32px
|
margin 0
|
||||||
|
padding 16px 32px
|
||||||
|
|
||||||
&:after
|
.avatar-anchor
|
||||||
content ""
|
display inline-block
|
||||||
|
|
||||||
|
.avatar
|
||||||
|
vertical-align bottom
|
||||||
|
min-width 28px
|
||||||
|
min-height 28px
|
||||||
|
max-width 28px
|
||||||
|
max-height 28px
|
||||||
|
margin 0 8px 0 0
|
||||||
|
border-radius 6px
|
||||||
|
|
||||||
|
i
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
.name
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
& + article
|
||||||
|
padding-top 8px
|
||||||
|
|
||||||
|
> .reply-to
|
||||||
|
border-bottom 1px solid #eef0f2
|
||||||
|
|
||||||
|
> article
|
||||||
|
padding 14px 16px 9px 16px
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
padding 28px 32px 18px 32px
|
||||||
|
|
||||||
|
&:after
|
||||||
|
content ""
|
||||||
|
display block
|
||||||
|
clear both
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
> .main > footer > button
|
||||||
|
color #888
|
||||||
|
|
||||||
|
> header
|
||||||
|
display flex
|
||||||
|
line-height 1.1
|
||||||
|
|
||||||
|
> .avatar-anchor
|
||||||
display block
|
display block
|
||||||
clear both
|
padding 0 .5em 0 0
|
||||||
|
|
||||||
&:hover
|
> .avatar
|
||||||
> .main > footer > button
|
|
||||||
color #888
|
|
||||||
|
|
||||||
> header
|
|
||||||
display flex
|
|
||||||
line-height 1.1
|
|
||||||
|
|
||||||
> .avatar-anchor
|
|
||||||
display block
|
|
||||||
padding 0 .5em 0 0
|
|
||||||
|
|
||||||
> .avatar
|
|
||||||
display block
|
|
||||||
width 54px
|
|
||||||
height 54px
|
|
||||||
margin 0
|
|
||||||
border-radius 8px
|
|
||||||
vertical-align bottom
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
width 60px
|
|
||||||
height 60px
|
|
||||||
|
|
||||||
> div
|
|
||||||
|
|
||||||
> .name
|
|
||||||
display inline-block
|
|
||||||
margin .4em 0
|
|
||||||
color #777
|
|
||||||
font-size 16px
|
|
||||||
font-weight bold
|
|
||||||
text-align left
|
|
||||||
text-decoration none
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
text-decoration underline
|
|
||||||
|
|
||||||
> .username
|
|
||||||
display block
|
|
||||||
text-align left
|
|
||||||
margin 0
|
|
||||||
color #ccc
|
|
||||||
|
|
||||||
> .body
|
|
||||||
padding 8px 0
|
|
||||||
|
|
||||||
> .text
|
|
||||||
cursor default
|
|
||||||
display block
|
display block
|
||||||
|
width 54px
|
||||||
|
height 54px
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
border-radius 8px
|
||||||
overflow-wrap break-word
|
vertical-align bottom
|
||||||
font-size 16px
|
|
||||||
color #717171
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
font-size 24px
|
width 60px
|
||||||
|
height 60px
|
||||||
|
|
||||||
.link
|
> div
|
||||||
&:after
|
|
||||||
content "\f14c"
|
|
||||||
display inline-block
|
|
||||||
padding-left 2px
|
|
||||||
font-family FontAwesome
|
|
||||||
font-size .9em
|
|
||||||
font-weight 400
|
|
||||||
font-style normal
|
|
||||||
|
|
||||||
> mk-url-preview
|
> .name
|
||||||
margin-top 8px
|
display inline-block
|
||||||
|
margin .4em 0
|
||||||
> .media
|
color #777
|
||||||
> img
|
font-size 16px
|
||||||
display block
|
font-weight bold
|
||||||
max-width 100%
|
text-align left
|
||||||
|
text-decoration none
|
||||||
> .time
|
|
||||||
font-size 16px
|
|
||||||
color #c0c0c0
|
|
||||||
|
|
||||||
> footer
|
|
||||||
font-size 1.2em
|
|
||||||
|
|
||||||
> button
|
|
||||||
margin 0 28px 0 0
|
|
||||||
padding 8px
|
|
||||||
background transparent
|
|
||||||
border none
|
|
||||||
box-shadow none
|
|
||||||
font-size 1em
|
|
||||||
color #ddd
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color #666
|
text-decoration underline
|
||||||
|
|
||||||
> .count
|
> .username
|
||||||
display inline
|
display block
|
||||||
margin 0 0 0 8px
|
text-align left
|
||||||
color #999
|
margin 0
|
||||||
|
color #ccc
|
||||||
|
|
||||||
&.reacted
|
> .body
|
||||||
color $theme-color
|
padding 8px 0
|
||||||
|
|
||||||
> .replies
|
> .text
|
||||||
> *
|
cursor default
|
||||||
border-top 1px solid #eef0f2
|
display block
|
||||||
|
margin 0
|
||||||
|
padding 0
|
||||||
|
overflow-wrap break-word
|
||||||
|
font-size 16px
|
||||||
|
color #717171
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
font-size 24px
|
||||||
|
|
||||||
|
.link
|
||||||
|
&:after
|
||||||
|
content "\f14c"
|
||||||
|
display inline-block
|
||||||
|
padding-left 2px
|
||||||
|
font-family FontAwesome
|
||||||
|
font-size .9em
|
||||||
|
font-weight 400
|
||||||
|
font-style normal
|
||||||
|
|
||||||
|
> mk-url-preview
|
||||||
|
margin-top 8px
|
||||||
|
|
||||||
|
> .media
|
||||||
|
> img
|
||||||
|
display block
|
||||||
|
max-width 100%
|
||||||
|
|
||||||
|
> .time
|
||||||
|
font-size 16px
|
||||||
|
color #c0c0c0
|
||||||
|
|
||||||
|
> footer
|
||||||
|
font-size 1.2em
|
||||||
|
|
||||||
|
> button
|
||||||
|
margin 0 28px 0 0
|
||||||
|
padding 8px
|
||||||
|
background transparent
|
||||||
|
border none
|
||||||
|
box-shadow none
|
||||||
|
font-size 1em
|
||||||
|
color #ddd
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color #666
|
||||||
|
|
||||||
|
> .count
|
||||||
|
display inline
|
||||||
|
margin 0 0 0 8px
|
||||||
|
color #999
|
||||||
|
|
||||||
|
&.reacted
|
||||||
|
color $theme-color
|
||||||
|
|
||||||
|
> .replies
|
||||||
|
> *
|
||||||
|
border-top 1px solid #eef0f2
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -265,56 +269,42 @@
|
||||||
|
|
||||||
this.mixin('api');
|
this.mixin('api');
|
||||||
|
|
||||||
this.fetching = true;
|
this.post = this.opts.post;
|
||||||
|
this.isRepost = this.post.repost != null;
|
||||||
|
this.p = this.isRepost ? this.post.repost : this.post;
|
||||||
|
this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
|
||||||
|
this.summary = getPostSummary(this.p);
|
||||||
|
|
||||||
this.loadingContext = false;
|
this.loadingContext = false;
|
||||||
this.context = null;
|
this.context = null;
|
||||||
this.post = null;
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
this.on('mount', () => {
|
||||||
this.api('posts/show', {
|
if (this.p.text) {
|
||||||
post_id: this.opts.post
|
const tokens = this.p.ast;
|
||||||
}).then(post => {
|
|
||||||
const isRepost = post.repost != null;
|
|
||||||
const p = isRepost ? post.repost : post;
|
|
||||||
p.reactions_count = p.reaction_counts ? Object.keys(p.reaction_counts).map(key => p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
|
|
||||||
|
|
||||||
this.update({
|
this.refs.text.innerHTML = compile(tokens);
|
||||||
fetching: false,
|
|
||||||
post: post,
|
this.refs.text.children.forEach(e => {
|
||||||
isRepost: isRepost,
|
if (e.tagName == 'MK-URL') riot.mount(e);
|
||||||
p: p,
|
|
||||||
summary: getPostSummary(p)
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this.trigger('loaded');
|
// URLをプレビュー
|
||||||
|
tokens
|
||||||
if (this.p.text) {
|
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
||||||
const tokens = this.p.ast;
|
.map(t => {
|
||||||
|
riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), {
|
||||||
this.refs.text.innerHTML = compile(tokens);
|
url: t.url
|
||||||
|
|
||||||
this.refs.text.children.forEach(e => {
|
|
||||||
if (e.tagName == 'MK-URL') riot.mount(e);
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// URLをプレビュー
|
// Get replies
|
||||||
tokens
|
this.api('posts/replies', {
|
||||||
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
post_id: this.p.id,
|
||||||
.map(t => {
|
limit: 8
|
||||||
riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), {
|
}).then(replies => {
|
||||||
url: t.url
|
this.update({
|
||||||
});
|
replies: replies
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get replies
|
|
||||||
this.api('posts/replies', {
|
|
||||||
post_id: this.p.id,
|
|
||||||
limit: 8
|
|
||||||
}).then(replies => {
|
|
||||||
this.update({
|
|
||||||
replies: replies
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -357,3 +347,101 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</mk-post-detail>
|
</mk-post-detail>
|
||||||
|
|
||||||
|
<mk-post-detail-sub>
|
||||||
|
<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>
|
||||||
|
:scope
|
||||||
|
display block
|
||||||
|
margin 0
|
||||||
|
padding 8px
|
||||||
|
font-size 0.9em
|
||||||
|
background #fdfdfd
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
padding 12px
|
||||||
|
|
||||||
|
> 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>this.post = this.opts.post</script>
|
||||||
|
</mk-post-detail-sub>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,9 @@
|
||||||
<mk-post-form>
|
<mk-post-form>
|
||||||
<header>
|
<header>
|
||||||
|
<button class="cancel" onclick={ cancel }><i class="fa fa-times"></i></button>
|
||||||
<div>
|
<div>
|
||||||
<button class="cancel" onclick={ cancel }><i class="fa fa-times"></i></button>
|
<span if={ refs.text } class="text-count { over: refs.text.value.length > 1000 }">{ 1000 - refs.text.value.length }</span>
|
||||||
<div>
|
<button class="submit" onclick={ post }>%i18n:mobile.tags.mk-post-form.submit%</button>
|
||||||
<span if={ refs.text } class="text-count { over: refs.text.value.length > 1000 }">{ 1000 - refs.text.value.length }</span>
|
|
||||||
<button class="submit" onclick={ post }>%i18n:mobile.tags.mk-post-form.submit%</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="form">
|
<div class="form">
|
||||||
|
|
@ -30,46 +28,47 @@
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
display block
|
display block
|
||||||
padding-top 50px
|
max-width 500px
|
||||||
|
width calc(100% - 16px)
|
||||||
|
margin 8px auto
|
||||||
|
background #fff
|
||||||
|
border-radius 8px
|
||||||
|
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
margin 16px auto
|
||||||
|
width calc(100% - 32px)
|
||||||
|
|
||||||
> header
|
> header
|
||||||
position fixed
|
z-index 1
|
||||||
z-index 1000
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
width 100%
|
|
||||||
height 50px
|
height 50px
|
||||||
background #fff
|
box-shadow 0 1px 0 0 rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
|
> .cancel
|
||||||
|
width 50px
|
||||||
|
line-height 50px
|
||||||
|
font-size 24px
|
||||||
|
color #555
|
||||||
|
|
||||||
> div
|
> div
|
||||||
max-width 500px
|
position absolute
|
||||||
margin 0 auto
|
top 0
|
||||||
|
right 0
|
||||||
|
|
||||||
> .cancel
|
> .text-count
|
||||||
width 50px
|
|
||||||
line-height 50px
|
line-height 50px
|
||||||
font-size 24px
|
color #657786
|
||||||
color #555
|
|
||||||
|
|
||||||
> div
|
> .submit
|
||||||
position absolute
|
margin 8px
|
||||||
top 0
|
padding 0 16px
|
||||||
right 0
|
line-height 34px
|
||||||
|
color $theme-color-foreground
|
||||||
|
background $theme-color
|
||||||
|
border-radius 4px
|
||||||
|
|
||||||
> .text-count
|
&:disabled
|
||||||
line-height 50px
|
opacity 0.7
|
||||||
color #657786
|
|
||||||
|
|
||||||
> .submit
|
|
||||||
margin 8px
|
|
||||||
padding 0 16px
|
|
||||||
line-height 34px
|
|
||||||
color $theme-color-foreground
|
|
||||||
background $theme-color
|
|
||||||
border-radius 4px
|
|
||||||
|
|
||||||
&:disabled
|
|
||||||
opacity 0.7
|
|
||||||
|
|
||||||
> .form
|
> .form
|
||||||
max-width 500px
|
max-width 500px
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,16 @@
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
display block
|
display block
|
||||||
|
margin 8px auto
|
||||||
|
max-width 500px
|
||||||
|
width calc(100% - 16px)
|
||||||
background #fff
|
background #fff
|
||||||
|
border-radius 8px
|
||||||
|
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
margin 16px auto
|
||||||
|
width calc(100% - 32px)
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
this.mixin('api');
|
this.mixin('api');
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,8 @@
|
||||||
:scope
|
:scope
|
||||||
display block
|
display block
|
||||||
background #fff
|
background #fff
|
||||||
|
border-radius 8px
|
||||||
|
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
> .init
|
> .init
|
||||||
padding 64px 0
|
padding 64px 0
|
||||||
|
|
@ -47,6 +49,9 @@
|
||||||
> mk-timeline-post
|
> mk-timeline-post
|
||||||
border-bottom solid 1px #eaeaea
|
border-bottom solid 1px #eaeaea
|
||||||
|
|
||||||
|
&:first-child
|
||||||
|
border-radius 8px 8px 0 0
|
||||||
|
|
||||||
&:last-of-type
|
&:last-of-type
|
||||||
border-bottom none
|
border-bottom none
|
||||||
|
|
||||||
|
|
@ -77,6 +82,7 @@
|
||||||
padding 16px
|
padding 16px
|
||||||
width 100%
|
width 100%
|
||||||
color $theme-color
|
color $theme-color
|
||||||
|
border-radius 0 0 8px 8px
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
opacity 0.7
|
opacity 0.7
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,6 @@
|
||||||
display block
|
display block
|
||||||
max-width 600px
|
max-width 600px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
background #fff
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
this.mixin('api');
|
this.mixin('api');
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@
|
||||||
> header
|
> header
|
||||||
> .banner
|
> .banner
|
||||||
padding-bottom 33.3%
|
padding-bottom 33.3%
|
||||||
background-color #f5f5f5
|
background-color #1b1b1b
|
||||||
background-size cover
|
background-size cover
|
||||||
background-position center
|
background-position center
|
||||||
|
|
||||||
|
|
@ -84,13 +84,13 @@
|
||||||
left -2px
|
left -2px
|
||||||
bottom -2px
|
bottom -2px
|
||||||
width 100%
|
width 100%
|
||||||
border 2px solid #fff
|
border 2px solid #313a42
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
left -4px
|
left -4px
|
||||||
bottom -4px
|
bottom -4px
|
||||||
border 4px solid #fff
|
border 4px solid #313a42
|
||||||
border-radius 12px
|
border-radius 12px
|
||||||
|
|
||||||
> mk-follow-button
|
> mk-follow-button
|
||||||
|
|
@ -104,7 +104,7 @@
|
||||||
margin 0
|
margin 0
|
||||||
line-height 22px
|
line-height 22px
|
||||||
font-size 20px
|
font-size 20px
|
||||||
color #222
|
color #fff
|
||||||
|
|
||||||
> .username
|
> .username
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|
@ -131,7 +131,7 @@
|
||||||
> p
|
> p
|
||||||
display inline
|
display inline
|
||||||
margin 0 16px 0 0
|
margin 0 16px 0 0
|
||||||
color #555
|
color #a9b9c1
|
||||||
|
|
||||||
> i
|
> i
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
@ -146,7 +146,7 @@
|
||||||
> b
|
> b
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
font-size 16px
|
font-size 16px
|
||||||
color #14171a
|
color #fff
|
||||||
|
|
||||||
> i
|
> i
|
||||||
font-size 14px
|
font-size 14px
|
||||||
|
|
@ -159,7 +159,7 @@
|
||||||
justify-content center
|
justify-content center
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
max-width 600px
|
max-width 600px
|
||||||
border-bottom solid 1px #ddd
|
border-bottom solid 1px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
> a
|
> a
|
||||||
display block
|
display block
|
||||||
|
|
@ -177,8 +177,10 @@
|
||||||
border-color $theme-color
|
border-color $theme-color
|
||||||
|
|
||||||
> .body
|
> .body
|
||||||
|
padding 8px
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
padding 16px 0 0 0
|
padding 16px
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -14,14 +14,13 @@
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
display block
|
display block
|
||||||
background #fff
|
|
||||||
|
|
||||||
> nav
|
> nav
|
||||||
display flex
|
display flex
|
||||||
justify-content center
|
justify-content center
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
max-width 600px
|
max-width 600px
|
||||||
border-bottom solid 1px #ddd
|
border-bottom solid 1px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
> span
|
> span
|
||||||
display block
|
display block
|
||||||
|
|
@ -43,14 +42,23 @@
|
||||||
padding 2px 5px
|
padding 2px 5px
|
||||||
font-size 12px
|
font-size 12px
|
||||||
line-height 1
|
line-height 1
|
||||||
color #888
|
color #fff
|
||||||
background #eee
|
background rgba(0, 0, 0, 0.3)
|
||||||
border-radius 20px
|
border-radius 20px
|
||||||
|
|
||||||
> .users
|
> .users
|
||||||
|
margin 8px auto
|
||||||
|
max-width 500px
|
||||||
|
width calc(100% - 16px)
|
||||||
|
background #fff
|
||||||
|
border-radius 8px
|
||||||
|
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
margin 16px auto
|
||||||
|
width calc(100% - 32px)
|
||||||
|
|
||||||
> *
|
> *
|
||||||
max-width 600px
|
|
||||||
margin 0 auto
|
|
||||||
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
> .no
|
> .no
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue