limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-25 19:37:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

v2493

Browse source
This commit is contained in:
syuilo 2017-08-29 19:27:06 +09:00
parent 1e34f43b92
commit 3e56091ff9
24 changed files with 555 additions and 392 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -2,6 +2,10 @@ ChangeLog (Release Notes)
========================= =========================
主に notable な changes を書いていきます 主に notable な changes を書いていきます
2493 (2017/08/29)
-----------------
* デザインの変更など
2491 (2017/08/29) 2491 (2017/08/29)
----------------- -----------------
* デザインの修正と調整 * デザインの修正と調整

4
locales/en.yml
View file

@ -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"

4
locales/ja.yml
View file

@ -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: "検索"

2
package.json
View file

@ -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",

1
src/web/app/common/tags/activity-table.tag
View file

@ -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

2
src/web/app/mobile/tags/home-timeline.tag
View file

@ -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>

1
src/web/app/mobile/tags/home.tag
View file

@ -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

87
src/web/app/mobile/tags/init-following.tag
View file

@ -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)' : '' }>
<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> <p class="username">@{ username }</p>
</div>
<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
&:after
content ""
display block
clear both
> .avatar-anchor
display block
float left
margin 0 12px 0 0
> .avatar
display block
width 42px
height 42px
margin 0
border-radius 8px border-radius 8px
vertical-align bottom background #fff
> .body &:not(:last-child)
float left margin-right 16px
width calc(100% - 54px)
> header
display block
height 80px
background-color #ddd
background-size cover
background-position center
border-radius 8px 8px 0 0
> a
> img
position absolute
top 20px
left calc(50% - 40px)
width 80px
height 80px
border solid 2px #fff
border-radius 8px
> .name > .name
margin 0 display block
margin 24px 0 2px 0
font-size 16px font-size 16px
line-height 24px
color #555 color #555
> .username > .username
margin 0 margin 0
font-size 15px font-size 15px
line-height 16px
color #ccc 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>

22
src/web/app/mobile/tags/notifications.tag
View file

@ -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,19 +13,27 @@
<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
border-bottom solid 1px rgba(0, 0, 0, 0.05)
&:last-child
border-bottom none
> mk-notification > mk-notification
margin 0 auto margin 0 auto
max-width 500px max-width 500px
border-bottom solid 1px rgba(0, 0, 0, 0.05)
&:last-child
border-bottom none
> .date > .date
display block display block

1
src/web/app/mobile/tags/page/home.tag
View file

@ -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();

1
src/web/app/mobile/tags/page/notifications.tag
View file

@ -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();

44
src/web/app/mobile/tags/page/post.tag
View file

@ -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();
}); });
}); });

1
src/web/app/mobile/tags/page/search.tag
View file

@ -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();

9
src/web/app/mobile/tags/page/settings/profile.tag
View file

@ -56,8 +56,12 @@
display block display block
> div > div
margin 16px auto margin 8px auto
max-width 500px max-width 500px
width calc(100% - 16px)
@media (min-width 500px)
margin 16px auto
width calc(100% - 32px) width calc(100% - 32px)
> p > p
@ -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

1
src/web/app/mobile/tags/page/user-followers.tag
View file

@ -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();

1
src/web/app/mobile/tags/page/user-following.tag
View file

@ -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();

1
src/web/app/mobile/tags/page/user.tag
View file

@ -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 => {

150
src/web/app/mobile/tags/post-detail.tag
View file

@ -1,19 +1,15 @@
<mk-post-detail> <mk-post-detail>
<div class="fetching" if={ fetching }>
<mk-ellipsis-icon/>
</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 }> <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-ellipsis-v" if={ !contextFetching }></i>
<i class="fa fa-spinner fa-pulse" if={ contextFetching }></i> <i class="fa fa-spinner fa-pulse" if={ contextFetching }></i>
</button> </button>
<div class="context"> <div class="context">
<virtual each={ post in context }> <virtual each={ post in context }>
<mk-post-preview post={ post }/> <mk-post-detail-sub post={ post }/>
</virtual> </virtual>
</div> </div>
<div class="reply-to" if={ p.reply_to }> <div class="reply-to" if={ p.reply_to }>
<mk-post-preview post={ p.reply_to }/> <mk-post-detail-sub post={ p.reply_to }/>
</div> </div>
<div class="repost" if={ isRepost }> <div class="repost" if={ isRepost }>
<p> <p>
@ -61,21 +57,29 @@
</article> </article>
<div class="replies"> <div class="replies">
<virtual each={ post in replies }> <virtual each={ post in replies }>
<mk-post-preview post={ post }/> <mk-post-detail-sub post={ post }/>
</virtual> </virtual>
</div> </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 > .read-more
display block display block
margin 0 margin 0
@ -265,29 +269,16 @@
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', {
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;
this.update({
fetching: false,
post: post,
isRepost: isRepost,
p: p,
summary: getPostSummary(p)
});
this.trigger('loaded');
if (this.p.text) { if (this.p.text) {
const tokens = this.p.ast; const tokens = this.p.ast;
@ -317,7 +308,6 @@
}); });
}); });
}); });
});
this.reply = () => { this.reply = () => {
openPostForm({ openPostForm({
@ -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>

25
src/web/app/mobile/tags/post-form.tag
View file

@ -1,12 +1,10 @@
<mk-post-form> <mk-post-form>
<header> <header>
<div>
<button class="cancel" onclick={ cancel }><i class="fa fa-times"></i></button> <button class="cancel" onclick={ cancel }><i class="fa fa-times"></i></button>
<div> <div>
<span if={ refs.text } class="text-count { over: refs.text.value.length > 1000 }">{ 1000 - refs.text.value.length }</span> <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> <button class="submit" onclick={ post }>%i18n:mobile.tags.mk-post-form.submit%</button>
</div> </div>
</div>
</header> </header>
<div class="form"> <div class="form">
<mk-post-preview if={ opts.reply } post={ opts.reply }/> <mk-post-preview if={ opts.reply } post={ opts.reply }/>
@ -30,20 +28,21 @@
<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)
> div
max-width 500px
margin 0 auto
> .cancel > .cancel
width 50px width 50px

8
src/web/app/mobile/tags/search-posts.tag
View file

@ -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');

6
src/web/app/mobile/tags/timeline.tag
View file

@ -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

2
src/web/app/mobile/tags/user-timeline.tag
View file

@ -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');

18
src/web/app/mobile/tags/user.tag
View file

@ -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>

20
src/web/app/mobile/tags/users-list.tag
View file

@ -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