forked from FoundKeyGang/FoundKey
🎨
This commit is contained in:
syuilo
parent
76ebad11cd
commit
baa8492b2b
5 changed files with 138 additions and 63 deletions
|
|
@ -8,6 +8,7 @@ unreleased
|
|||
* New: ドナーを表示する (#738)
|
||||
* Fix: 投稿のリンクが機能していない問題を修正
|
||||
* l10n
|
||||
* デザインの調整
|
||||
|
||||
2470 (2017/08/29)
|
||||
-----------------
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -376,6 +376,7 @@ mobile:
|
|||
title: "プロフィール設定"
|
||||
|
||||
mk-profile-setting:
|
||||
will-be-published: "これらのプロフィールは公開されます。"
|
||||
name: "名前"
|
||||
location: "場所"
|
||||
description: "自己紹介"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue