diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6980e4a481..dc50bb7b0a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@ ChangeLog (Release Notes)
=========================
主に notable な changes を書いていきます
+2493 (2017/08/29)
+-----------------
+* デザインの変更など
+
2491 (2017/08/29)
-----------------
* デザインの修正と調整
diff --git a/locales/en.yml b/locales/en.yml
index b0488a775c..5e11339db5 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -355,7 +355,9 @@ mobile:
notifications: "Notifications"
mk-post-page:
- submit: "Post"
+ title: "Post"
+ prev: "Previous post"
+ next: "Next post"
mk-search-page:
search: "Search"
diff --git a/locales/ja.yml b/locales/ja.yml
index 9a040f798d..62ac4cb81f 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -355,7 +355,9 @@ mobile:
notifications: "通知"
mk-post-page:
- submit: "投稿"
+ title: "投稿"
+ prev: "前の投稿"
+ next: "次の投稿"
mk-search-page:
search: "検索"
diff --git a/package.json b/package.json
index a6aca1a20f..5e33be56a2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "misskey",
"author": "syuilo <i@syuilo.com>",
- "version": "0.0.2491",
+ "version": "0.0.2493",
"license": "MIT",
"description": "A miniblog-based SNS",
"bugs": "https://github.com/syuilo/misskey/issues",
diff --git a/src/web/app/common/tags/activity-table.tag b/src/web/app/common/tags/activity-table.tag
index 6331e7c9c3..1d26d1788a 100644
--- a/src/web/app/common/tags/activity-table.tag
+++ b/src/web/app/common/tags/activity-table.tag
@@ -17,7 +17,6 @@
display block
max-width 600px
margin 0 auto
- background #fff
> svg
display block
diff --git a/src/web/app/mobile/tags/home-timeline.tag b/src/web/app/mobile/tags/home-timeline.tag
index 7357d13916..051158597d 100644
--- a/src/web/app/mobile/tags/home-timeline.tag
+++ b/src/web/app/mobile/tags/home-timeline.tag
@@ -6,7 +6,7 @@
display block
> mk-init-following
- border-bottom solid 1px #eee
+ margin-bottom 8px
</style>
<script>
diff --git a/src/web/app/mobile/tags/home.tag b/src/web/app/mobile/tags/home.tag
index 48b5a67c38..d92e3ae4e5 100644
--- a/src/web/app/mobile/tags/home.tag
+++ b/src/web/app/mobile/tags/home.tag
@@ -7,6 +7,7 @@
> mk-home-timeline
max-width 600px
margin 0 auto
+ padding 8px
@media (min-width 500px)
padding 16px
diff --git a/src/web/app/mobile/tags/init-following.tag b/src/web/app/mobile/tags/init-following.tag
index 0c54d3a6a1..2fb7499d26 100644
--- a/src/web/app/mobile/tags/init-following.tag
+++ b/src/web/app/mobile/tags/init-following.tag
@@ -1,10 +1,14 @@
<mk-init-following>
<p class="title">気になるユーザーをフォロー:</p>
<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="body"><a class="name" href={ '/' + username } target="_blank">{ name }</a>
- <p class="username">@{ username }</p>
- </div>
+ <div class="user" each={ users }>
+ <header style={ banner_url ? 'background-image: url(' + banner_url + '?thumbnail&size=1024)' : '' }>
+ <a href={ '/' + username }>
+ <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 }/>
</div>
</div>
@@ -15,63 +19,65 @@
<style>
:scope
display block
- padding 16px
+ background #fff
+ border-radius 8px
+ box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
> .title
- margin 0 0 12px 0
+ margin 0
+ padding 8px 16px
font-size 1em
font-weight bold
color #888
> .users
- &:after
- content ""
- display block
- clear both
+ overflow-x scroll
+ white-space nowrap
+ padding 16px
+ background #eee
> .user
- padding 16px
- width 238px
- float left
+ display inline-block
+ width 200px
+ text-align center
+ border-radius 8px
+ background #fff
- &:after
- content ""
+ &:not(:last-child)
+ margin-right 16px
+
+ > header
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
- float left
- margin 0 12px 0 0
+ margin 24px 0 2px 0
+ font-size 16px
+ color #555
- > .avatar
- display block
- width 42px
- height 42px
- 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
+ > .username
+ margin 0
+ font-size 15px
+ color #ccc
> mk-follow-button
- position absolute
- top 16px
- right 16px
+ display inline-block
+ margin 8px 0 16px 0
> .empty
margin 0
@@ -90,7 +96,8 @@
> .refresh
display block
- margin 0 8px 0 0
+ margin 0
+ padding 8px 16px
text-align right
font-size 0.9em
color #999
@@ -117,7 +124,7 @@
color #222
> i
- padding 14px
+ padding 10px
</style>
<script>
diff --git a/src/web/app/mobile/tags/notifications.tag b/src/web/app/mobile/tags/notifications.tag
index 21a941e630..2f314769db 100644
--- a/src/web/app/mobile/tags/notifications.tag
+++ b/src/web/app/mobile/tags/notifications.tag
@@ -1,9 +1,7 @@
<mk-notifications>
<div class="notifications" if={ notifications.length != 0 }>
<virtual each={ notification, i in notifications }>
- <div>
- <mk-notification notification={ notification }/>
- </div>
+ <mk-notification notification={ notification }/>
<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>
</div>
@@ -15,20 +13,28 @@
<style>
:scope
display block
+ margin 8px auto
+ padding 0
+ 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)
> .notifications
- > div
+ > mk-notification
+ margin 0 auto
+ max-width 500px
border-bottom solid 1px rgba(0, 0, 0, 0.05)
&:last-child
border-bottom none
- > mk-notification
- margin 0 auto
- max-width 500px
-
> .date
display block
margin 0
diff --git a/src/web/app/mobile/tags/page/home.tag b/src/web/app/mobile/tags/page/home.tag
index 32c80fd20e..efb5068a57 100644
--- a/src/web/app/mobile/tags/page/home.tag
+++ b/src/web/app/mobile/tags/page/home.tag
@@ -20,6 +20,7 @@
this.on('mount', () => {
document.title = 'Misskey'
ui.trigger('title', '<i class="fa fa-home"></i>%i18n:mobile.tags.mk-home.home%');
+ document.documentElement.style.background = '#313a42';
ui.trigger('func', () => {
openPostForm();
diff --git a/src/web/app/mobile/tags/page/notifications.tag b/src/web/app/mobile/tags/page/notifications.tag
index f90cd1628d..06a5be039f 100644
--- a/src/web/app/mobile/tags/page/notifications.tag
+++ b/src/web/app/mobile/tags/page/notifications.tag
@@ -13,6 +13,7 @@
this.on('mount', () => {
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%');
+ document.documentElement.style.background = '#313a42';
Progress.start();
diff --git a/src/web/app/mobile/tags/page/post.tag b/src/web/app/mobile/tags/page/post.tag
index 7ab4ea2714..198acf1798 100644
--- a/src/web/app/mobile/tags/page/post.tag
+++ b/src/web/app/mobile/tags/page/post.tag
@@ -1,7 +1,9 @@
<mk-post-page>
<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 }/>
+ <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>
</mk-ui>
<style>
@@ -9,31 +11,51 @@
display block
main
- background #fff
+ text-align center
- > mk-post-detail
- width 100%
- max-width 500px
- margin 0 auto
+ > a
+ display inline-block
+ &: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>
<script>
import ui from '../../scripts/ui-event';
import Progress from '../../../common/scripts/loading';
- this.post = this.opts.post;
+ this.mixin('api');
+
+ this.fetching = true;
+ this.post = null;
this.on('mount', () => {
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();
- this.refs.ui.refs.post.on('post-fetched', () => {
- Progress.set(0.5);
- });
+ this.api('posts/show', {
+ post_id: this.opts.post
+ }).then(post => {
+
+ this.update({
+ fetching: false,
+ post: post
+ });
- this.refs.ui.refs.post.on('loaded', () => {
Progress.done();
});
});
diff --git a/src/web/app/mobile/tags/page/search.tag b/src/web/app/mobile/tags/page/search.tag
index 869d5c8533..a66f07971a 100644
--- a/src/web/app/mobile/tags/page/search.tag
+++ b/src/web/app/mobile/tags/page/search.tag
@@ -14,6 +14,7 @@
document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.opts.query} | Misskey`
// TODO: クエリをHTMLエスケープ
ui.trigger('title', '<i class="fa fa-search"></i>' + this.opts.query);
+ document.documentElement.style.background = '#313a42';
Progress.start();
diff --git a/src/web/app/mobile/tags/page/settings/profile.tag b/src/web/app/mobile/tags/page/settings/profile.tag
index 66b3fbde2a..7e1bedbf47 100644
--- a/src/web/app/mobile/tags/page/settings/profile.tag
+++ b/src/web/app/mobile/tags/page/settings/profile.tag
@@ -56,9 +56,13 @@
display block
> div
- margin 16px auto
+ margin 8px auto
max-width 500px
- width calc(100% - 32px)
+ width calc(100% - 16px)
+
+ @media (min-width 500px)
+ margin 16px auto
+ width calc(100% - 32px)
> p
display block
@@ -66,9 +70,10 @@
padding 12px 16px
font-size 14px
color #79d4e6
+ border solid 1px #71afbb
//color #276f86
//background #f8ffff
- border solid 1px #a9d5de
+ //border solid 1px #a9d5de
border-radius 8px
> i
diff --git a/src/web/app/mobile/tags/page/user-followers.tag b/src/web/app/mobile/tags/page/user-followers.tag
index f6fcffebe2..cffb2b58c4 100644
--- a/src/web/app/mobile/tags/page/user-followers.tag
+++ b/src/web/app/mobile/tags/page/user-followers.tag
@@ -29,6 +29,7 @@
document.title = '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name) + ' | Misskey';
// TODO: ユーザー名をエスケープ
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', () => {
Progress.done();
diff --git a/src/web/app/mobile/tags/page/user-following.tag b/src/web/app/mobile/tags/page/user-following.tag
index 4b289b6aa3..369cb46422 100644
--- a/src/web/app/mobile/tags/page/user-following.tag
+++ b/src/web/app/mobile/tags/page/user-following.tag
@@ -29,6 +29,7 @@
document.title = '%i18n:mobile.tags.mk-user-following-page.following-of%'.replace('{}', user.name) + ' | Misskey';
// TODO: ユーザー名をエスケープ
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', () => {
Progress.done();
diff --git a/src/web/app/mobile/tags/page/user.tag b/src/web/app/mobile/tags/page/user.tag
index 05ccef3113..1abeab492a 100644
--- a/src/web/app/mobile/tags/page/user.tag
+++ b/src/web/app/mobile/tags/page/user.tag
@@ -13,6 +13,7 @@
this.user = this.opts.user;
this.on('mount', () => {
+ document.documentElement.style.background = '#313a42';
Progress.start();
this.refs.ui.refs.user.on('loaded', user => {
diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag
index 9d62a2b591..9215bafdbc 100644
--- a/src/web/app/mobile/tags/post-detail.tag
+++ b/src/web/app/mobile/tags/post-detail.tag
@@ -1,261 +1,265 @@
<mk-post-detail>
- <div class="fetching" if={ fetching }>
- <mk-ellipsis-icon/>
+ <button class="read-more" if={ p.reply_to && p.reply_to.reply_to_id && context == null } onclick={ loadContext } disabled={ loadingContext }>
+ <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 class="main" if={ !fetching }>
- <button class="read-more" if={ p.reply_to && p.reply_to.reply_to_id && context == null } onclick={ loadContext } disabled={ loadingContext }>
- <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-preview post={ post }/>
- </virtual>
- </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"/>
+ <div class="reply-to" if={ p.reply_to }>
+ <mk-post-detail-sub 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>
- <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-preview post={ post }/>
- </virtual>
+ が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>
+ <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>
<style>
:scope
display block
- margin 0
+ overflow hidden
+ margin 8px auto
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
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
- 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
+ &:hover
+ background #f6f6f6
- &:hover
- background #f6f6f6
+ &:active
+ background #f0f0f0
- &:active
- background #f0f0f0
+ &:disabled
+ color #ccc
- &:disabled
- 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
+ > .context
+ > *
border-bottom 1px solid #eef0f2
- > article
- padding 14px 16px 9px 16px
+ > .repost
+ color #9dbb00
+ background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
- @media (min-width 500px)
- padding 28px 32px 18px 32px
+ > p
+ margin 0
+ padding 16px 32px
- &:after
- content ""
+ .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
+
+ > 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
- clear both
+ padding 0 .5em 0 0
- &:hover
- > .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
+ > .avatar
display block
+ width 54px
+ height 54px
margin 0
- padding 0
- overflow-wrap break-word
- font-size 16px
- color #717171
+ border-radius 8px
+ vertical-align bottom
@media (min-width 500px)
- font-size 24px
+ width 60px
+ height 60px
- .link
- &:after
- content "\f14c"
- display inline-block
- padding-left 2px
- font-family FontAwesome
- font-size .9em
- font-weight 400
- font-style normal
+ > div
- > 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
+ > .name
+ display inline-block
+ margin .4em 0
+ color #777
+ font-size 16px
+ font-weight bold
+ text-align left
+ text-decoration none
&:hover
- color #666
+ text-decoration underline
- > .count
- display inline
- margin 0 0 0 8px
- color #999
+ > .username
+ display block
+ text-align left
+ margin 0
+ color #ccc
- &.reacted
- color $theme-color
+ > .body
+ padding 8px 0
- > .replies
- > *
- border-top 1px solid #eef0f2
+ > .text
+ cursor default
+ 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>
<script>
@@ -265,56 +269,42 @@
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.context = null;
- this.post = null;
this.on('mount', () => {
- this.api('posts/show', {
- post_id: this.opts.post
- }).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;
+ if (this.p.text) {
+ const tokens = this.p.ast;
- this.update({
- fetching: false,
- post: post,
- isRepost: isRepost,
- p: p,
- summary: getPostSummary(p)
+ this.refs.text.innerHTML = compile(tokens);
+
+ this.refs.text.children.forEach(e => {
+ if (e.tagName == 'MK-URL') riot.mount(e);
});
- this.trigger('loaded');
-
- if (this.p.text) {
- const tokens = this.p.ast;
-
- this.refs.text.innerHTML = compile(tokens);
-
- this.refs.text.children.forEach(e => {
- if (e.tagName == 'MK-URL') riot.mount(e);
+ // URLをプレビュー
+ tokens
+ .filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+ .map(t => {
+ riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), {
+ url: t.url
});
+ });
+ }
- // URLをプレビュー
- tokens
- .filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
- .map(t => {
- riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), {
- url: t.url
- });
- });
- }
-
- // Get replies
- this.api('posts/replies', {
- post_id: this.p.id,
- limit: 8
- }).then(replies => {
- 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>
</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>
diff --git a/src/web/app/mobile/tags/post-form.tag b/src/web/app/mobile/tags/post-form.tag
index 28c7796840..cf267de94a 100644
--- a/src/web/app/mobile/tags/post-form.tag
+++ b/src/web/app/mobile/tags/post-form.tag
@@ -1,11 +1,9 @@
<mk-post-form>
<header>
+ <button class="cancel" onclick={ cancel }><i class="fa fa-times"></i></button>
<div>
- <button class="cancel" onclick={ cancel }><i class="fa fa-times"></i></button>
- <div>
- <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>
+ <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>
</header>
<div class="form">
@@ -30,46 +28,47 @@
<style>
:scope
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
- position fixed
- z-index 1000
- top 0
- left 0
- width 100%
+ z-index 1
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
- max-width 500px
- margin 0 auto
+ position absolute
+ top 0
+ right 0
- > .cancel
- width 50px
+ > .text-count
line-height 50px
- font-size 24px
- color #555
+ color #657786
- > div
- position absolute
- top 0
- right 0
+ > .submit
+ margin 8px
+ padding 0 16px
+ line-height 34px
+ color $theme-color-foreground
+ background $theme-color
+ border-radius 4px
- > .text-count
- line-height 50px
- 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
+ &:disabled
+ opacity 0.7
> .form
max-width 500px
diff --git a/src/web/app/mobile/tags/search-posts.tag b/src/web/app/mobile/tags/search-posts.tag
index 3e6caa1df2..967764bc2c 100644
--- a/src/web/app/mobile/tags/search-posts.tag
+++ b/src/web/app/mobile/tags/search-posts.tag
@@ -3,8 +3,16 @@
<style>
:scope
display block
+ 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)
</style>
<script>
this.mixin('api');
diff --git a/src/web/app/mobile/tags/timeline.tag b/src/web/app/mobile/tags/timeline.tag
index 11f4e0740b..9e39cf80d7 100644
--- a/src/web/app/mobile/tags/timeline.tag
+++ b/src/web/app/mobile/tags/timeline.tag
@@ -22,6 +22,8 @@
:scope
display block
background #fff
+ border-radius 8px
+ box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
> .init
padding 64px 0
@@ -47,6 +49,9 @@
> mk-timeline-post
border-bottom solid 1px #eaeaea
+ &:first-child
+ border-radius 8px 8px 0 0
+
&:last-of-type
border-bottom none
@@ -77,6 +82,7 @@
padding 16px
width 100%
color $theme-color
+ border-radius 0 0 8px 8px
&:disabled
opacity 0.7
diff --git a/src/web/app/mobile/tags/user-timeline.tag b/src/web/app/mobile/tags/user-timeline.tag
index f7b2b36da0..4dbe719f5a 100644
--- a/src/web/app/mobile/tags/user-timeline.tag
+++ b/src/web/app/mobile/tags/user-timeline.tag
@@ -5,8 +5,6 @@
display block
max-width 600px
margin 0 auto
- background #fff
-
</style>
<script>
this.mixin('api');
diff --git a/src/web/app/mobile/tags/user.tag b/src/web/app/mobile/tags/user.tag
index 81eb6ba2e4..59c89ad1c8 100644
--- a/src/web/app/mobile/tags/user.tag
+++ b/src/web/app/mobile/tags/user.tag
@@ -57,7 +57,7 @@
> header
> .banner
padding-bottom 33.3%
- background-color #f5f5f5
+ background-color #1b1b1b
background-size cover
background-position center
@@ -84,13 +84,13 @@
left -2px
bottom -2px
width 100%
- border 2px solid #fff
+ border 2px solid #313a42
border-radius 6px
@media (min-width 500px)
left -4px
bottom -4px
- border 4px solid #fff
+ border 4px solid #313a42
border-radius 12px
> mk-follow-button
@@ -104,7 +104,7 @@
margin 0
line-height 22px
font-size 20px
- color #222
+ color #fff
> .username
display inline-block
@@ -131,7 +131,7 @@
> p
display inline
margin 0 16px 0 0
- color #555
+ color #a9b9c1
> i
margin-right 4px
@@ -146,7 +146,7 @@
> b
margin-right 4px
font-size 16px
- color #14171a
+ color #fff
> i
font-size 14px
@@ -159,7 +159,7 @@
justify-content center
margin 0 auto
max-width 600px
- border-bottom solid 1px #ddd
+ border-bottom solid 1px rgba(0, 0, 0, 0.2)
> a
display block
@@ -177,8 +177,10 @@
border-color $theme-color
> .body
+ padding 8px
+
@media (min-width 500px)
- padding 16px 0 0 0
+ padding 16px
</style>
<script>
diff --git a/src/web/app/mobile/tags/users-list.tag b/src/web/app/mobile/tags/users-list.tag
index fb70f184d5..295ae06694 100644
--- a/src/web/app/mobile/tags/users-list.tag
+++ b/src/web/app/mobile/tags/users-list.tag
@@ -14,14 +14,13 @@
<style>
:scope
display block
- background #fff
> nav
display flex
justify-content center
margin 0 auto
max-width 600px
- border-bottom solid 1px #ddd
+ border-bottom solid 1px rgba(0, 0, 0, 0.2)
> span
display block
@@ -43,14 +42,23 @@
padding 2px 5px
font-size 12px
line-height 1
- color #888
- background #eee
+ color #fff
+ background rgba(0, 0, 0, 0.3)
border-radius 20px
> .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)
> .no