profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2017-08-29 13:26:14 +09:00
parent 76ebad11cd
commit baa8492b2b
5 changed files with 138 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -8,6 +8,7 @@ unreleased
* New: ドナーを表示する (#738) * New: ドナーを表示する (#738)
* Fix: 投稿のリンクが機能していない問題を修正 * Fix: 投稿のリンクが機能していない問題を修正
* l10n * l10n
* デザインの調整
2470 (2017/08/29) 2470 (2017/08/29)
----------------- -----------------

1
locales/en.yml
View file

@ -376,6 +376,7 @@ mobile:
title: "Profile Settings" title: "Profile Settings"
mk-profile-setting: mk-profile-setting:
will-be-published: "These profiles will be published."
name: "Name" name: "Name"
location: "Location" location: "Location"
description: "Description" description: "Description"

1
locales/ja.yml
View file

@ -376,6 +376,7 @@ mobile:
title: "プロフィール設定" title: "プロフィール設定"
mk-profile-setting: mk-profile-setting:
will-be-published: "これらのプロフィールは公開されます。"
name: "名前" name: "名前"
location: "場所" location: "場所"
description: "自己紹介" description: "自己紹介"

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

@ -12,7 +12,7 @@
this.on('mount', () => { this.on('mount', () => {
document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%'; document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%';
ui.trigger('title', '<i class="fa fa-cog"></i>%i18n:mobile.tags.mk-settings-page.settings%'); ui.trigger('title', '<i class="fa fa-cog"></i>%i18n:mobile.tags.mk-settings-page.settings%');
document.documentElement.style.background = '#eee'; document.documentElement.style.background = '#313a42';
}); });
</script> </script>
</mk-settings-page> </mk-settings-page>
@ -37,19 +37,36 @@
display block display block
margin 24px margin 24px
text-align center text-align center
color #555 color #cad2da
> ul > ul
$radius = 8px
display block display block
margin 16px 0 margin 16px auto
padding 0 padding 0
max-width 500px
width calc(100% - 32px)
list-style none list-style none
border-top solid 1px #aaa background #fff
border solid 1px rgba(0, 0, 0, 0.2)
border-radius $radius
> li > li
display block display block
background #fff border-bottom solid 1px #ddd
border-bottom solid 1px #aaa
&:hover
background rgba(0, 0, 0, 0.1)
&:first-child
border-top-left-radius $radius
border-top-right-radius $radius
&:last-child
border-bottom-left-radius $radius
border-bottom-right-radius $radius
border-bottom none
> a > a
$height = 48px $height = 48px

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

@ -12,80 +12,135 @@
this.on('mount', () => { this.on('mount', () => {
document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%'; document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%';
ui.trigger('title', '<i class="fa fa-user"></i>%i18n:mobile.tags.mk-profile-setting-page.title%'); ui.trigger('title', '<i class="fa fa-user"></i>%i18n:mobile.tags.mk-profile-setting-page.title%');
document.documentElement.style.background = '#eee'; document.documentElement.style.background = '#313a42';
}); });
</script> </script>
</mk-profile-setting-page> </mk-profile-setting-page>
<mk-profile-setting> <mk-profile-setting>
<label> <div>
<p>%i18n:mobile.tags.mk-profile-setting.name%</p> <p><i class="fa fa-info-circle"></i>%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
<input ref="name" type="text" value={ I.name }/> <div class="form">
</label> <label>
<label> <p>%i18n:mobile.tags.mk-profile-setting.name%</p>
<p>%i18n:mobile.tags.mk-profile-setting.location%</p> <input ref="name" type="text" value={ I.name }/>
<input ref="location" type="text" value={ I.profile.location }/> </label>
</label> <label>
<label> <p>%i18n:mobile.tags.mk-profile-setting.location%</p>
<p>%i18n:mobile.tags.mk-profile-setting.description%</p> <input ref="location" type="text" value={ I.profile.location }/>
<textarea ref="description">{ I.description }</textarea> </label>
</label> <label>
<label> <p>%i18n:mobile.tags.mk-profile-setting.description%</p>
<p>%i18n:mobile.tags.mk-profile-setting.birthday%</p> <textarea ref="description">{ I.description }</textarea>
<input ref="birthday" type="date" value={ I.profile.birthday }/> </label>
</label> <label>
<label> <p>%i18n:mobile.tags.mk-profile-setting.birthday%</p>
<p>%i18n:mobile.tags.mk-profile-setting.avatar%</p> <input ref="birthday" type="date" value={ I.profile.birthday }/>
<button onclick={ setAvatar } disabled={ avatarSaving }>%i18n:mobile.tags.mk-profile-setting.set-avatar%</button> </label>
</label> <label>
<label> <p>%i18n:mobile.tags.mk-profile-setting.avatar%</p>
<p>%i18n:mobile.tags.mk-profile-setting.banner%</p> <button onclick={ setAvatar } disabled={ avatarSaving }>%i18n:mobile.tags.mk-profile-setting.set-avatar%</button>
<button onclick={ setBanner } disabled={ bannerSaving }>%i18n:mobile.tags.mk-profile-setting.set-banner%</button> </label>
</label> <label>
<button class="save" onclick={ save } disabled={ saving }><i class="fa fa-check"></i>%i18n:mobile.tags.mk-profile-setting.save%</button> <p>%i18n:mobile.tags.mk-profile-setting.banner%</p>
<button onclick={ setBanner } disabled={ bannerSaving }>%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
</label>
</div>
<button class="save" onclick={ save } disabled={ saving }><i class="fa fa-check"></i>%i18n:mobile.tags.mk-profile-setting.save%</button>
</div>
<style> <style>
:scope :scope
display block display block
> label > div
display block margin 16px auto
margin 0 max-width 500px
padding 16px 0 width calc(100% - 32px)
> p:first-child > p
display block display block
margin 0 margin 0 0 8px 0
padding 0 0 4px 8px padding 16px
font-weight bold color #276f86
color #333 border solid 1px #a9d5de
border-radius 8px
background-color #f8ffff
> input[type="text"] > i
> textarea margin-right 6px
> .form
position relative
background #fff
border solid 1px rgba(0, 0, 0, 0.2)
border-radius 8px
&:before
content ""
display block
position absolute
bottom -20px
left calc(50% - 10px)
border-top solid 10px rgba(0, 0, 0, 0.2)
border-right solid 10px transparent
border-bottom solid 10px transparent
border-left solid 10px transparent
&:after
content ""
display block
position absolute
bottom -16px
left calc(50% - 8px)
border-top solid 8px #fff
border-right solid 8px transparent
border-bottom solid 8px transparent
border-left solid 8px transparent
> label
display block
margin 0
padding 16px
border-bottom solid 1px #eee
&:last-of-type
border none
> p:first-child
display block
margin 0
padding 0 0 4px 0
font-weight bold
color #2f3c42
> input[type="text"]
> textarea
display block
width 100%
padding 12px
font-size 16px
color #192427
border solid 1px #ddd
border-radius 4px
> textarea
min-height 80px
> .save
display block display block
margin 8px 0 0 0
padding 16px
width 100% width 100%
padding 12px
font-size 16px font-size 16px
border none color $theme-color-foreground
border-radius 0 background $theme-color
border-radius 8px
> textarea &:disabled
min-height 80px opacity 0.7
> .save > i
display block margin-right 4px
margin 8px
padding 16px
width calc(100% - 16px)
font-size 16px
color $theme-color-foreground
background $theme-color
border-radius 4px
&:disabled
opacity 0.7
> i
margin-right 4px
</style> </style>
<script> <script>