Merge pull request #144 from tamaina/SHSH

モバイルの投稿詳細画面を良くするプロジェクト
This commit is contained in:
syuilo⭐️ 2017-02-11 01:35:03 +09:00 committed by GitHub
commit 0ec8597c17
2 changed files with 49 additions and 48 deletions

View file

@ -15,8 +15,8 @@
<div class="repost" if={ isRepost }> <div class="repost" if={ isRepost }>
<p><a class="avatar-anchor" href={ CONFIG.url + '/' + 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={ CONFIG.url + '/' + post.user.username }>{ post.user.name }</a>がRepost</p> <p><a class="avatar-anchor" href={ CONFIG.url + '/' + 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={ CONFIG.url + '/' + post.user.username }>{ post.user.name }</a>がRepost</p>
</div> </div>
<article><a class="avatar-anchor" href={ CONFIG.url + '/' + p.user.username }><img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a> <article>
<header><a class="name" href={ CONFIG.url + '/' + p.user.username }>{ p.user.name }</a><span class="username">@{ p.user.username }</span></header> <header><a class="avatar-anchor" href={ CONFIG.url + '/' + p.user.username }><img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a><div><a class="name" href={ CONFIG.url + '/' + p.user.username }>{ p.user.name }</a><span class="username">@{ p.user.username }</span></div></header>
<div class="body"> <div class="body">
<div class="text" ref="text"></div> <div class="text" ref="text"></div>
<div class="media" if={ p.media }> <div class="media" if={ p.media }>
@ -148,49 +148,45 @@
> .main > footer > button > .main > footer > button
color #888 color #888
> .avatar-anchor
display block
> .avatar
display block
width 54px
height 54px
margin 0
border-radius 8px
vertical-align bottom
@media (min-width 500px)
width 60px
height 60px
> header > header
position absolute display flex
top 18px line-height 1.1
left 80px
width calc(100% - 80px)
@media (min-width 500px) > .avatar-anchor
top 28px
left 108px
width calc(100% - 108px)
> .name
display inline-block
margin 0
color #777
font-size 16px
font-weight bold
text-align left
text-decoration none
&:hover
text-decoration underline
> .username
display block display block
text-align left padding 0 .5em 0 0
margin 0
color #ccc > .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 > .body
padding 8px 0 padding 8px 0

View file

@ -17,6 +17,10 @@
background #fff background #fff
> article > article
padding 8px 16px 8px 16px
@media (min-width 500px)
padding 8px 32px 8px 32px
&:after &:after
content "" content ""
@ -45,31 +49,32 @@
width calc(100% - 60px) width calc(100% - 60px)
> header > header
display flex
margin-bottom 4px margin-bottom 4px
white-space nowrap white-space nowrap
> .name > .name
display inline display block
margin 0 margin 0 .5em 0 0
padding 0 padding 0
overflow hidden
color #607073 color #607073
font-size 1em font-size 1em
font-weight 700 font-weight 700
text-align left text-align left
text-decoration none text-decoration none
text-overflow ellipsis
&:hover &:hover
text-decoration underline text-decoration underline
> .username > .username
text-align left text-align left
margin 0 0 0 8px margin 0 .5em 0 0
color #d1d8da color #d1d8da
> .time > .time
position absolute margin-left auto
top 0
right 0
color #b2b8bb color #b2b8bb
> .body > .body