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

View file

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

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"

View file

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

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

View file

@ -12,12 +12,15 @@
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>
<div>
<p><i class="fa fa-info-circle"></i>%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
<div class="form">
<label> <label>
<p>%i18n:mobile.tags.mk-profile-setting.name%</p> <p>%i18n:mobile.tags.mk-profile-setting.name%</p>
<input ref="name" type="text" value={ I.name }/> <input ref="name" type="text" value={ I.name }/>
@ -42,22 +45,73 @@
<p>%i18n:mobile.tags.mk-profile-setting.banner%</p> <p>%i18n:mobile.tags.mk-profile-setting.banner%</p>
<button onclick={ setBanner } disabled={ bannerSaving }>%i18n:mobile.tags.mk-profile-setting.set-banner%</button> <button onclick={ setBanner } disabled={ bannerSaving }>%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
</label> </label>
</div>
<button class="save" onclick={ save } disabled={ saving }><i class="fa fa-check"></i>%i18n:mobile.tags.mk-profile-setting.save%</button> <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
> div
margin 16px auto
max-width 500px
width calc(100% - 32px)
> p
display block
margin 0 0 8px 0
padding 16px
color #276f86
border solid 1px #a9d5de
border-radius 8px
background-color #f8ffff
> i
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 > label
display block display block
margin 0 margin 0
padding 16px 0 padding 16px
border-bottom solid 1px #eee
&:last-of-type
border none
> p:first-child > p:first-child
display block display block
margin 0 margin 0
padding 0 0 4px 8px padding 0 0 4px 0
font-weight bold font-weight bold
color #333 color #2f3c42
> input[type="text"] > input[type="text"]
> textarea > textarea
@ -65,21 +119,22 @@
width 100% width 100%
padding 12px padding 12px
font-size 16px font-size 16px
border none color #192427
border-radius 0 border solid 1px #ddd
border-radius 4px
> textarea > textarea
min-height 80px min-height 80px
> .save > .save
display block display block
margin 8px margin 8px 0 0 0
padding 16px padding 16px
width calc(100% - 16px) width 100%
font-size 16px font-size 16px
color $theme-color-foreground color $theme-color-foreground
background $theme-color background $theme-color
border-radius 4px border-radius 8px
&:disabled &:disabled
opacity 0.7 opacity 0.7