heartles/egirlskey
1
0
Fork 0
Code Issues 1 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)
* Fix: 投稿のリンクが機能していない問題を修正
* l10n
* デザインの調整
2470 (2017/08/29)
-----------------

1
locales/en.yml
View file

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

1
locales/ja.yml
View file

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

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

@ -12,7 +12,7 @@
this.on('mount', () => {
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%');
document.documentElement.style.background = '#eee';
document.documentElement.style.background = '#313a42';
});
</script>
</mk-settings-page>
@ -37,19 +37,36 @@
display block
margin 24px
text-align center
color #555
color #cad2da
> ul
$radius = 8px
display block
margin 16px 0
margin 16px auto
padding 0
max-width 500px
width calc(100% - 32px)
list-style none
border-top solid 1px #aaa
background #fff
border solid 1px rgba(0, 0, 0, 0.2)
border-radius $radius
> li
display block
background #fff
border-bottom solid 1px #aaa
border-bottom solid 1px #ddd
&: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
$height = 48px

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

@ -12,80 +12,135 @@
this.on('mount', () => {
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%');
document.documentElement.style.background = '#eee';
document.documentElement.style.background = '#313a42';
});
</script>
</mk-profile-setting-page>
<mk-profile-setting>
<label>
<p>%i18n:mobile.tags.mk-profile-setting.name%</p>
<input ref="name" type="text" value={ I.name }/>
</label>
<label>
<p>%i18n:mobile.tags.mk-profile-setting.location%</p>
<input ref="location" type="text" value={ I.profile.location }/>
</label>
<label>
<p>%i18n:mobile.tags.mk-profile-setting.description%</p>
<textarea ref="description">{ I.description }</textarea>
</label>
<label>
<p>%i18n:mobile.tags.mk-profile-setting.birthday%</p>
<input ref="birthday" type="date" value={ I.profile.birthday }/>
</label>
<label>
<p>%i18n:mobile.tags.mk-profile-setting.avatar%</p>
<button onclick={ setAvatar } disabled={ avatarSaving }>%i18n:mobile.tags.mk-profile-setting.set-avatar%</button>
</label>
<label>
<p>%i18n:mobile.tags.mk-profile-setting.banner%</p>
<button onclick={ setBanner } disabled={ bannerSaving }>%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
</label>
<button class="save" onclick={ save } disabled={ saving }><i class="fa fa-check"></i>%i18n:mobile.tags.mk-profile-setting.save%</button>
<div>
<p><i class="fa fa-info-circle"></i>%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
<div class="form">
<label>
<p>%i18n:mobile.tags.mk-profile-setting.name%</p>
<input ref="name" type="text" value={ I.name }/>
</label>
<label>
<p>%i18n:mobile.tags.mk-profile-setting.location%</p>
<input ref="location" type="text" value={ I.profile.location }/>
</label>
<label>
<p>%i18n:mobile.tags.mk-profile-setting.description%</p>
<textarea ref="description">{ I.description }</textarea>
</label>
<label>
<p>%i18n:mobile.tags.mk-profile-setting.birthday%</p>
<input ref="birthday" type="date" value={ I.profile.birthday }/>
</label>
<label>
<p>%i18n:mobile.tags.mk-profile-setting.avatar%</p>
<button onclick={ setAvatar } disabled={ avatarSaving }>%i18n:mobile.tags.mk-profile-setting.set-avatar%</button>
</label>
<label>
<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>
:scope
display block
> label
display block
margin 0
padding 16px 0
> div
margin 16px auto
max-width 500px
width calc(100% - 32px)
> p:first-child
> p
display block
margin 0
padding 0 0 4px 8px
font-weight bold
color #333
margin 0 0 8px 0
padding 16px
color #276f86
border solid 1px #a9d5de
border-radius 8px
background-color #f8ffff
> input[type="text"]
> textarea
> 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
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
margin 8px 0 0 0
padding 16px
width 100%
padding 12px
font-size 16px
border none
border-radius 0
color $theme-color-foreground
background $theme-color
border-radius 8px
> textarea
min-height 80px
&:disabled
opacity 0.7
> .save
display block
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
> i
margin-right 4px
</style>
<script>