This commit is contained in:
syuilo
parent
8b273e215f
commit
520299c2b4
169 changed files with 14582 additions and 14865 deletions
|
|
@ -1,5 +1,11 @@
|
|||
mk-copyright
|
||||
span (c) syuilo 2014-2017
|
||||
<mk-copyright><span>(c) syuilo 2014-2017</span>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display block
|
||||
|
||||
style.
|
||||
display block
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</mk-copyright>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,64 @@
|
|||
mk-core-error
|
||||
//i: i.fa.fa-times-circle
|
||||
img(src='/_/resources/error.jpg', alt='')
|
||||
h1: mk-ripple-string サーバーに接続できません
|
||||
p.text
|
||||
| インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから
|
||||
a(onclick={ retry }) 再度お試し
|
||||
| ください。
|
||||
p.thanks いつもMisskeyをご利用いただきありがとうございます。
|
||||
<mk-core-error>
|
||||
<!--i: i.fa.fa-times-circle--><img src="/_/resources/error.jpg" alt=""/>
|
||||
<h1>
|
||||
<mk-ripple-string>サーバーに接続できません</mk-ripple-string>
|
||||
</h1>
|
||||
<p class="text">インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから<a onclick="{ retry }">再度お試し</a>ください。</p>
|
||||
<p class="thanks">いつもMisskeyをご利用いただきありがとうございます。</p>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
position fixed
|
||||
z-index 16385
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 100%
|
||||
text-align center
|
||||
background #f8f8f8
|
||||
|
||||
style.
|
||||
position fixed
|
||||
z-index 16385
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 100%
|
||||
text-align center
|
||||
background #f8f8f8
|
||||
> i
|
||||
display block
|
||||
margin-top 64px
|
||||
font-size 5em
|
||||
color #6998a0
|
||||
|
||||
> i
|
||||
display block
|
||||
margin-top 64px
|
||||
font-size 5em
|
||||
color #6998a0
|
||||
> img
|
||||
display block
|
||||
height 200px
|
||||
margin 64px auto 0 auto
|
||||
pointer-events none
|
||||
-ms-user-select none
|
||||
-moz-user-select none
|
||||
-webkit-user-select none
|
||||
user-select none
|
||||
|
||||
> img
|
||||
display block
|
||||
height 200px
|
||||
margin 64px auto 0 auto
|
||||
pointer-events none
|
||||
-ms-user-select none
|
||||
-moz-user-select none
|
||||
-webkit-user-select none
|
||||
user-select none
|
||||
> h1
|
||||
display block
|
||||
margin 32px auto 16px auto
|
||||
font-size 1.5em
|
||||
color #555
|
||||
|
||||
> h1
|
||||
display block
|
||||
margin 32px auto 16px auto
|
||||
font-size 1.5em
|
||||
color #555
|
||||
> .text
|
||||
display block
|
||||
margin 0 auto
|
||||
max-width 600px
|
||||
font-size 1em
|
||||
color #666
|
||||
|
||||
> .text
|
||||
display block
|
||||
margin 0 auto
|
||||
max-width 600px
|
||||
font-size 1em
|
||||
color #666
|
||||
> .thanks
|
||||
display block
|
||||
margin 32px auto 0 auto
|
||||
padding 32px 0 32px 0
|
||||
max-width 600px
|
||||
font-size 0.9em
|
||||
font-style oblique
|
||||
color #aaa
|
||||
border-top solid 1px #eee
|
||||
|
||||
> .thanks
|
||||
display block
|
||||
margin 32px auto 0 auto
|
||||
padding 32px 0 32px 0
|
||||
max-width 600px
|
||||
font-size 0.9em
|
||||
font-style oblique
|
||||
color #aaa
|
||||
border-top solid 1px #eee
|
||||
|
||||
script.
|
||||
@retry = ~>
|
||||
@unmount!
|
||||
@opts.retry!
|
||||
</style>
|
||||
<script>
|
||||
@retry = ~>
|
||||
@unmount!
|
||||
@opts.retry!
|
||||
</script>
|
||||
</mk-core-error>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,29 @@
|
|||
mk-ellipsis
|
||||
span .
|
||||
span .
|
||||
span .
|
||||
<mk-ellipsis><span>.</span><span>.</span><span>.</span>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display inline
|
||||
|
||||
style.
|
||||
display inline
|
||||
> span
|
||||
animation ellipsis 1.4s infinite ease-in-out both
|
||||
|
||||
> span
|
||||
animation ellipsis 1.4s infinite ease-in-out both
|
||||
&:nth-child(1)
|
||||
animation-delay 0s
|
||||
|
||||
&:nth-child(1)
|
||||
animation-delay 0s
|
||||
&:nth-child(2)
|
||||
animation-delay 0.16s
|
||||
|
||||
&:nth-child(2)
|
||||
animation-delay 0.16s
|
||||
&:nth-child(3)
|
||||
animation-delay 0.32s
|
||||
|
||||
&:nth-child(3)
|
||||
animation-delay 0.32s
|
||||
@keyframes ellipsis
|
||||
0%, 80%, 100%
|
||||
opacity 1
|
||||
40%
|
||||
opacity 0
|
||||
|
||||
@keyframes ellipsis
|
||||
0%, 80%, 100%
|
||||
opacity 1
|
||||
40%
|
||||
opacity 0
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</mk-ellipsis>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
mk-file-type-icon
|
||||
i.fa.fa-file-image-o(if={ kind == 'image' })
|
||||
<mk-file-type-icon><i class="fa fa-file-image-o" if="{ kind == 'image' }"></i>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display inline
|
||||
|
||||
style.
|
||||
display inline
|
||||
|
||||
script.
|
||||
@file = @opts.file
|
||||
@kind = @file.type.split \/ .0
|
||||
</style>
|
||||
<script>
|
||||
@file = @opts.file
|
||||
@kind = @file.type.split \/ .0
|
||||
</script>
|
||||
</mk-file-type-icon>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,44 @@
|
|||
mk-forkit
|
||||
a(href='https://github.com/syuilo/misskey', target='_blank', title='View source on Github', aria-label='View source on Github')
|
||||
svg(width='80', height='80', viewBox='0 0 250 250', aria-hidden)
|
||||
path(d='M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z')
|
||||
path.octo-arm(d='M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2', fill='currentColor')
|
||||
path(d='M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z', fill='currentColor')
|
||||
|
||||
style.
|
||||
display block
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
|
||||
> a
|
||||
display block
|
||||
|
||||
> svg
|
||||
<mk-forkit><a href="https://github.com/syuilo/misskey" target="_blank" title="View source on Github" aria-label="View source on Github">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="aria-hidden">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor"></path>
|
||||
</svg></a>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display block
|
||||
//fill #151513
|
||||
//color #fff
|
||||
fill $theme-color
|
||||
color $theme-color-foreground
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
|
||||
.octo-arm
|
||||
transform-origin 130px 106px
|
||||
> a
|
||||
display block
|
||||
|
||||
&:hover
|
||||
.octo-arm
|
||||
animation octocat-wave 560ms ease-in-out
|
||||
> svg
|
||||
display block
|
||||
//fill #151513
|
||||
//color #fff
|
||||
fill $theme-color
|
||||
color $theme-color-foreground
|
||||
|
||||
@keyframes octocat-wave
|
||||
0%, 100%
|
||||
transform rotate(0)
|
||||
20%, 60%
|
||||
transform rotate(-25deg)
|
||||
40%, 80%
|
||||
transform rotate(10deg)
|
||||
.octo-arm
|
||||
transform-origin 130px 106px
|
||||
|
||||
&:hover
|
||||
.octo-arm
|
||||
animation octocat-wave 560ms ease-in-out
|
||||
|
||||
@keyframes octocat-wave
|
||||
0%, 100%
|
||||
transform rotate(0)
|
||||
20%, 60%
|
||||
transform rotate(-25deg)
|
||||
40%, 80%
|
||||
transform rotate(10deg)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</mk-forkit>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,29 @@
|
|||
mk-introduction
|
||||
article
|
||||
h1 Misskeyとは？
|
||||
<p><ruby>Misskey<rt>みすきー</rt></ruby>は、<a href="http://syuilo.com" target="_blank">syuilo</a>が2014年くらいから<a href="https://github.com/syuilo/misskey" target="_blank">オープンソースで</a>開発・運営を行っている、ミニブログベースのSNSです。</p>
|
||||
<p>Twitter, Facebook, LINE, Google+ などを<del>パクって</del><i>参考にして</i>います。</p>
|
||||
<p>無料で誰でも利用でき、広告は一切掲載していません。</p>
|
||||
<p><a href={ CONFIG.urls.about } target="_blank">もっと知りたい方はこちら</a></p>
|
||||
<mk-introduction>
|
||||
<article>
|
||||
<h1>Misskeyとは？</h1><p><ruby>Misskey<rt>みすきー</rt></ruby>は、<a href="http://syuilo.com" target="_blank">syuilo</a>が2014年くらいから<a href="https://github.com/syuilo/misskey" target="_blank">オープンソースで</a>開発・運営を行っている、ミニブログベースのSNSです。</p>
|
||||
<p>Twitter, Facebook, LINE, Google+ などを<del>パクって</del><i>参考にして</i>います。</p>
|
||||
<p>無料で誰でも利用でき、広告は一切掲載していません。</p>
|
||||
<p><a href="{ CONFIG.urls.about }" target="_blank">もっと知りたい方はこちら</a></p>
|
||||
</article>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display block
|
||||
|
||||
style.
|
||||
display block
|
||||
h1
|
||||
margin 0
|
||||
text-align center
|
||||
font-size 1.2em
|
||||
|
||||
h1
|
||||
margin 0
|
||||
text-align center
|
||||
font-size 1.2em
|
||||
p
|
||||
margin 16px 0
|
||||
|
||||
p
|
||||
margin 16px 0
|
||||
&:last-child
|
||||
margin 0
|
||||
text-align center
|
||||
|
||||
&:last-child
|
||||
margin 0
|
||||
text-align center
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</mk-introduction>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
mk-number
|
||||
<mk-number>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display inline
|
||||
|
||||
style.
|
||||
display inline
|
||||
</style>
|
||||
<script>
|
||||
@on \mount ~>
|
||||
# バグ？ https://github.com/riot/riot/issues/2103
|
||||
#value = @opts.value
|
||||
value = @opts.riot-value
|
||||
max = @opts.max
|
||||
|
||||
script.
|
||||
@on \mount ~>
|
||||
# バグ？ https://github.com/riot/riot/issues/2103
|
||||
#value = @opts.value
|
||||
value = @opts.riot-value
|
||||
max = @opts.max
|
||||
if max? then if value > max then value = max
|
||||
|
||||
if max? then if value > max then value = max
|
||||
|
||||
@root.innerHTML = value.to-locale-string!
|
||||
@root.innerHTML = value.to-locale-string!
|
||||
</script>
|
||||
</mk-number>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
mk-raw
|
||||
<mk-raw>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display inline
|
||||
|
||||
style.
|
||||
display inline
|
||||
|
||||
script.
|
||||
@root.innerHTML = @opts.content
|
||||
</style>
|
||||
<script>@root.innerHTML = @opts.content</script>
|
||||
</mk-raw>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,26 @@
|
|||
mk-ripple-string
|
||||
<yield/>
|
||||
<mk-ripple-string><yield/>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display inline
|
||||
|
||||
style.
|
||||
display inline
|
||||
> span
|
||||
animation ripple-string 5s infinite ease-in-out both
|
||||
|
||||
> span
|
||||
animation ripple-string 5s infinite ease-in-out both
|
||||
@keyframes ripple-string
|
||||
0%, 50%, 100%
|
||||
opacity 1
|
||||
25%
|
||||
opacity 0.5
|
||||
|
||||
@keyframes ripple-string
|
||||
0%, 50%, 100%
|
||||
opacity 1
|
||||
25%
|
||||
opacity 0.5
|
||||
|
||||
script.
|
||||
@on \mount ~>
|
||||
text = @root.innerHTML
|
||||
@root.innerHTML = ''
|
||||
(text.split '').for-each (c, i) ~>
|
||||
ce = document.create-element \span
|
||||
ce.innerHTML = c
|
||||
ce.style.animation-delay = (i / 10) + 's'
|
||||
@root.append-child ce
|
||||
</style>
|
||||
<script>
|
||||
@on \mount ~>
|
||||
text = @root.innerHTML
|
||||
@root.innerHTML = ''
|
||||
(text.split '').for-each (c, i) ~>
|
||||
ce = document.create-element \span
|
||||
ce.innerHTML = c
|
||||
ce.style.animation-delay = (i / 10) + 's'
|
||||
@root.append-child ce
|
||||
</script>
|
||||
</mk-ripple-string>
|
||||
|
|
|
|||
|
|
@ -1,136 +1,131 @@
|
|||
mk-signin
|
||||
form(onsubmit={ onsubmit }, class={ signing: signing })
|
||||
label.user-name
|
||||
input@username(
|
||||
type='text'
|
||||
pattern='^[a-zA-Z0-9\-]+$'
|
||||
placeholder='ユーザー名'
|
||||
autofocus
|
||||
required
|
||||
oninput={ oninput })
|
||||
i.fa.fa-at
|
||||
label.password
|
||||
input@password(
|
||||
type='password'
|
||||
placeholder='パスワード'
|
||||
required)
|
||||
i.fa.fa-lock
|
||||
button(type='submit', disabled={ signing }) { signing ? 'やっています...' : 'サインイン' }
|
||||
|
||||
style.
|
||||
display block
|
||||
|
||||
> form
|
||||
display block
|
||||
z-index 2
|
||||
|
||||
&.signing
|
||||
&, *
|
||||
cursor wait !important
|
||||
|
||||
label
|
||||
<mk-signin>
|
||||
<form class="{ signing: signing }" onsubmit="{ onsubmit }">
|
||||
<label class="user-name">
|
||||
<input ref="username" type="text" pattern="^[a-zA-Z0-9-]+$" placeholder="ユーザー名" autofocus="autofocus" required="required" oninput="{ oninput }"/><i class="fa fa-at"></i>
|
||||
</label>
|
||||
<label class="password">
|
||||
<input ref="password" type="password" placeholder="パスワード" required="required"/><i class="fa fa-lock"></i>
|
||||
</label>
|
||||
<button type="submit" disabled="{ signing }">{ signing ? 'やっています...' : 'サインイン' }</button>
|
||||
</form>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display block
|
||||
margin 12px 0
|
||||
|
||||
i
|
||||
> form
|
||||
display block
|
||||
pointer-events none
|
||||
position absolute
|
||||
bottom 0
|
||||
top 0
|
||||
left 0
|
||||
z-index 1
|
||||
margin auto
|
||||
padding 0 16px
|
||||
height 1em
|
||||
color #898786
|
||||
z-index 2
|
||||
|
||||
input[type=text]
|
||||
input[type=password]
|
||||
user-select text
|
||||
display inline-block
|
||||
cursor auto
|
||||
padding 0 0 0 38px
|
||||
margin 0
|
||||
width 100%
|
||||
line-height 44px
|
||||
font-size 1em
|
||||
color rgba(0, 0, 0, 0.7)
|
||||
background #fff
|
||||
outline none
|
||||
border solid 1px #eee
|
||||
border-radius 4px
|
||||
&.signing
|
||||
&, *
|
||||
cursor wait !important
|
||||
|
||||
&:hover
|
||||
background rgba(255, 255, 255, 0.7)
|
||||
border-color #ddd
|
||||
label
|
||||
display block
|
||||
margin 12px 0
|
||||
|
||||
& + i
|
||||
color #797776
|
||||
i
|
||||
display block
|
||||
pointer-events none
|
||||
position absolute
|
||||
bottom 0
|
||||
top 0
|
||||
left 0
|
||||
z-index 1
|
||||
margin auto
|
||||
padding 0 16px
|
||||
height 1em
|
||||
color #898786
|
||||
|
||||
&:focus
|
||||
background #fff
|
||||
border-color #ccc
|
||||
input[type=text]
|
||||
input[type=password]
|
||||
user-select text
|
||||
display inline-block
|
||||
cursor auto
|
||||
padding 0 0 0 38px
|
||||
margin 0
|
||||
width 100%
|
||||
line-height 44px
|
||||
font-size 1em
|
||||
color rgba(0, 0, 0, 0.7)
|
||||
background #fff
|
||||
outline none
|
||||
border solid 1px #eee
|
||||
border-radius 4px
|
||||
|
||||
& + i
|
||||
color #797776
|
||||
&:hover
|
||||
background rgba(255, 255, 255, 0.7)
|
||||
border-color #ddd
|
||||
|
||||
[type=submit]
|
||||
cursor pointer
|
||||
padding 16px
|
||||
margin -6px 0 0 0
|
||||
width 100%
|
||||
font-size 1.2em
|
||||
color rgba(0, 0, 0, 0.5)
|
||||
outline none
|
||||
border none
|
||||
border-radius 0
|
||||
background transparent
|
||||
transition all .5s ease
|
||||
& + i
|
||||
color #797776
|
||||
|
||||
&:hover
|
||||
color $theme-color
|
||||
transition all .2s ease
|
||||
&:focus
|
||||
background #fff
|
||||
border-color #ccc
|
||||
|
||||
&:focus
|
||||
color $theme-color
|
||||
transition all .2s ease
|
||||
& + i
|
||||
color #797776
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 30%)
|
||||
transition all .2s ease
|
||||
[type=submit]
|
||||
cursor pointer
|
||||
padding 16px
|
||||
margin -6px 0 0 0
|
||||
width 100%
|
||||
font-size 1.2em
|
||||
color rgba(0, 0, 0, 0.5)
|
||||
outline none
|
||||
border none
|
||||
border-radius 0
|
||||
background transparent
|
||||
transition all .5s ease
|
||||
|
||||
&:disabled
|
||||
opacity 0.7
|
||||
&:hover
|
||||
color $theme-color
|
||||
transition all .2s ease
|
||||
|
||||
script.
|
||||
@mixin \api
|
||||
&:focus
|
||||
color $theme-color
|
||||
transition all .2s ease
|
||||
|
||||
@user = null
|
||||
@signing = false
|
||||
&:active
|
||||
color darken($theme-color, 30%)
|
||||
transition all .2s ease
|
||||
|
||||
@oninput = ~>
|
||||
@api \users/show do
|
||||
username: @refs.username.value
|
||||
.then (user) ~>
|
||||
@user = user
|
||||
@trigger \user user
|
||||
&:disabled
|
||||
opacity 0.7
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \api
|
||||
|
||||
@user = null
|
||||
@signing = false
|
||||
|
||||
@oninput = ~>
|
||||
@api \users/show do
|
||||
username: @refs.username.value
|
||||
.then (user) ~>
|
||||
@user = user
|
||||
@trigger \user user
|
||||
@update!
|
||||
|
||||
@onsubmit = (e) ~>
|
||||
e.prevent-default!
|
||||
|
||||
@signing = true
|
||||
@update!
|
||||
|
||||
@onsubmit = (e) ~>
|
||||
e.prevent-default!
|
||||
@api \signin do
|
||||
username: @refs.username.value
|
||||
password: @refs.password.value
|
||||
.then ~>
|
||||
location.reload!
|
||||
.catch ~>
|
||||
alert 'something happened'
|
||||
@signing = false
|
||||
@update!
|
||||
|
||||
@signing = true
|
||||
@update!
|
||||
|
||||
@api \signin do
|
||||
username: @refs.username.value
|
||||
password: @refs.password.value
|
||||
.then ~>
|
||||
location.reload!
|
||||
.catch ~>
|
||||
alert 'something happened'
|
||||
@signing = false
|
||||
@update!
|
||||
|
||||
false
|
||||
false
|
||||
</script>
|
||||
</mk-signin>
|
||||
|
|
|
|||
|
|
@ -1,352 +1,293 @@
|
|||
mk-signup
|
||||
form(onsubmit={ onsubmit }, autocomplete='off')
|
||||
label.username
|
||||
p.caption
|
||||
i.fa.fa-at
|
||||
| ユーザー名
|
||||
input@username(
|
||||
type='text'
|
||||
pattern='^[a-zA-Z0-9\-]{3,20}$'
|
||||
placeholder='a~z、A~Z、0~9、-'
|
||||
autocomplete='off'
|
||||
required
|
||||
onkeyup={ on-change-username })
|
||||
|
||||
p.profile-page-url-preview(if={ refs.username.value != '' && username-state != 'invalid-format' && username-state != 'min-range' && username-state != 'max-range' }) { CONFIG.url + '/' + refs.username.value }
|
||||
|
||||
p.info(if={ username-state == 'wait' }, style='color:#999')
|
||||
i.fa.fa-fw.fa-spinner.fa-pulse
|
||||
| 確認しています...
|
||||
p.info(if={ username-state == 'ok' }, style='color:#3CB7B5')
|
||||
i.fa.fa-fw.fa-check
|
||||
| 利用できます
|
||||
p.info(if={ username-state == 'unavailable' }, style='color:#FF1161')
|
||||
i.fa.fa-fw.fa-exclamation-triangle
|
||||
| 既に利用されています
|
||||
p.info(if={ username-state == 'error' }, style='color:#FF1161')
|
||||
i.fa.fa-fw.fa-exclamation-triangle
|
||||
| 通信エラー
|
||||
p.info(if={ username-state == 'invalid-format' }, style='color:#FF1161')
|
||||
i.fa.fa-fw.fa-exclamation-triangle
|
||||
| a~z、A~Z、0~9、-(ハイフン)が使えます
|
||||
p.info(if={ username-state == 'min-range' }, style='color:#FF1161')
|
||||
i.fa.fa-fw.fa-exclamation-triangle
|
||||
| 3文字以上でお願いします！
|
||||
p.info(if={ username-state == 'max-range' }, style='color:#FF1161')
|
||||
i.fa.fa-fw.fa-exclamation-triangle
|
||||
| 20文字以内でお願いします
|
||||
|
||||
label.password
|
||||
p.caption
|
||||
i.fa.fa-lock
|
||||
| パスワード
|
||||
input@password(
|
||||
type='password'
|
||||
placeholder='8文字以上を推奨します'
|
||||
autocomplete='off'
|
||||
required
|
||||
onkeyup={ on-change-password })
|
||||
|
||||
div.meter(if={ password-strength != '' }, data-strength={ password-strength })
|
||||
div.value@password-metar
|
||||
|
||||
p.info(if={ password-strength == 'low' }, style='color:#FF1161')
|
||||
i.fa.fa-fw.fa-exclamation-triangle
|
||||
| 弱いパスワード
|
||||
p.info(if={ password-strength == 'medium' }, style='color:#3CB7B5')
|
||||
i.fa.fa-fw.fa-check
|
||||
| まあまあのパスワード
|
||||
p.info(if={ password-strength == 'high' }, style='color:#3CB7B5')
|
||||
i.fa.fa-fw.fa-check
|
||||
| 強いパスワード
|
||||
|
||||
label.retype-password
|
||||
p.caption
|
||||
i.fa.fa-lock
|
||||
| パスワード(再入力)
|
||||
input@password-retype(
|
||||
type='password'
|
||||
placeholder='確認のため再入力してください'
|
||||
autocomplete='off'
|
||||
required
|
||||
onkeyup={ on-change-password-retype })
|
||||
|
||||
p.info(if={ password-retype-state == 'match' }, style='color:#3CB7B5')
|
||||
i.fa.fa-fw.fa-check
|
||||
| 確認されました
|
||||
p.info(if={ password-retype-state == 'not-match' }, style='color:#FF1161')
|
||||
i.fa.fa-fw.fa-exclamation-triangle
|
||||
| 一致していません
|
||||
|
||||
label.recaptcha
|
||||
p.caption
|
||||
i.fa.fa-toggle-on(if={ recaptchaed })
|
||||
i.fa.fa-toggle-off(if={ !recaptchaed })
|
||||
| 認証
|
||||
div.g-recaptcha(
|
||||
data-callback='onRecaptchaed'
|
||||
data-expired-callback='onRecaptchaExpired'
|
||||
data-sitekey={ CONFIG.recaptcha.site-key })
|
||||
|
||||
label.agree-tou
|
||||
input(
|
||||
name='agree-tou',
|
||||
type='checkbox',
|
||||
autocomplete='off',
|
||||
required)
|
||||
p
|
||||
a(href={ CONFIG.urls.about + '/tou' }, target='_blank') 利用規約
|
||||
| に同意する
|
||||
|
||||
button(onclick={ onsubmit })
|
||||
| アカウント作成
|
||||
|
||||
style.
|
||||
display block
|
||||
min-width 302px
|
||||
overflow hidden
|
||||
|
||||
> form
|
||||
|
||||
label
|
||||
<mk-signup>
|
||||
<form onsubmit="{ onsubmit }" autocomplete="off">
|
||||
<label class="username">
|
||||
<p class="caption"><i class="fa fa-at"></i>ユーザー名</p>
|
||||
<input ref="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required="required" onkeyup="{ onChangeUsername }"/>
|
||||
<p class="profile-page-url-preview" if="{ refs.username.value != '' && username-state != 'invalidFormat' && username-state != 'minRange' && username-state != 'maxRange' }">{ CONFIG.url + '/' + refs.username.value }</p>
|
||||
<p class="info" if="{ usernameState == 'wait' }" style="color:#999"><i class="fa fa-fw fa-spinner fa-pulse"></i>確認しています...</p>
|
||||
<p class="info" if="{ usernameState == 'ok' }" style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>利用できます</p>
|
||||
<p class="info" if="{ usernameState == 'unavailable' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>既に利用されています</p>
|
||||
<p class="info" if="{ usernameState == 'error' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>通信エラー</p>
|
||||
<p class="info" if="{ usernameState == 'invalid-format' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>a~z、A~Z、0~9、-(ハイフン)が使えます</p>
|
||||
<p class="info" if="{ usernameState == 'min-range' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>3文字以上でお願いします！</p>
|
||||
<p class="info" if="{ usernameState == 'max-range' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>20文字以内でお願いします</p>
|
||||
</label>
|
||||
<label class="password">
|
||||
<p class="caption"><i class="fa fa-lock"></i>パスワード</p>
|
||||
<input ref="password" type="password" placeholder="8文字以上を推奨します" autocomplete="off" required="required" onkeyup="{ onChangePassword }"/>
|
||||
<div class="meter" if="{ passwordStrength != '' }" data-strength="{ passwordStrength }">
|
||||
<div class="value" ref="passwordMetar"></div>
|
||||
</div>
|
||||
<p class="info" if="{ passwordStrength == 'low' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>弱いパスワード</p>
|
||||
<p class="info" if="{ passwordStrength == 'medium' }" style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>まあまあのパスワード</p>
|
||||
<p class="info" if="{ passwordStrength == 'high' }" style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>強いパスワード</p>
|
||||
</label>
|
||||
<label class="retype-password">
|
||||
<p class="caption"><i class="fa fa-lock"></i>パスワード(再入力)</p>
|
||||
<input ref="passwordRetype" type="password" placeholder="確認のため再入力してください" autocomplete="off" required="required" onkeyup="{ onChangePasswordRetype }"/>
|
||||
<p class="info" if="{ passwordRetypeState == 'match' }" style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>確認されました</p>
|
||||
<p class="info" if="{ passwordRetypeState == 'not-match' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>一致していません</p>
|
||||
</label>
|
||||
<label class="recaptcha">
|
||||
<p class="caption"><i class="fa fa-toggle-on" if="{ recaptchaed }"></i><i class="fa fa-toggle-off" if="{ !recaptchaed }"></i>認証</p>
|
||||
<div class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" data-sitekey="{ CONFIG.recaptcha.siteKey }"></div>
|
||||
</label>
|
||||
<label class="agree-tou">
|
||||
<input name="agree-tou" type="checkbox" autocomplete="off" required="required"/>
|
||||
<p><a href="{ CONFIG.urls.about + '/tou' }" target="_blank">利用規約</a>に同意する</p>
|
||||
</label>
|
||||
<button onclick="{ onsubmit }">アカウント作成</button>
|
||||
</form>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display block
|
||||
margin 16px 0
|
||||
min-width 302px
|
||||
overflow hidden
|
||||
|
||||
> .caption
|
||||
margin 0 0 4px 0
|
||||
color #828888
|
||||
font-size 0.95em
|
||||
> form
|
||||
|
||||
> i
|
||||
margin-right 0.25em
|
||||
color #96adac
|
||||
|
||||
> .info
|
||||
display block
|
||||
margin 4px 0
|
||||
font-size 0.8em
|
||||
|
||||
> i
|
||||
margin-right 0.3em
|
||||
|
||||
&.username
|
||||
.profile-page-url-preview
|
||||
label
|
||||
display block
|
||||
margin 4px 8px 0 4px
|
||||
font-size 0.8em
|
||||
color #888
|
||||
margin 16px 0
|
||||
|
||||
&:empty
|
||||
display none
|
||||
> .caption
|
||||
margin 0 0 4px 0
|
||||
color #828888
|
||||
font-size 0.95em
|
||||
|
||||
&:not(:empty) + .info
|
||||
margin-top 0
|
||||
> i
|
||||
margin-right 0.25em
|
||||
color #96adac
|
||||
|
||||
&.password
|
||||
.meter
|
||||
display block
|
||||
margin-top 8px
|
||||
width 100%
|
||||
height 8px
|
||||
|
||||
&[data-strength='']
|
||||
display none
|
||||
|
||||
&[data-strength='low']
|
||||
> .value
|
||||
background #d73612
|
||||
|
||||
&[data-strength='medium']
|
||||
> .value
|
||||
background #d7ca12
|
||||
|
||||
&[data-strength='high']
|
||||
> .value
|
||||
background #61bb22
|
||||
|
||||
> .value
|
||||
> .info
|
||||
display block
|
||||
width 0%
|
||||
height 100%
|
||||
background transparent
|
||||
border-radius 4px
|
||||
transition all 0.1s ease
|
||||
margin 4px 0
|
||||
font-size 0.8em
|
||||
|
||||
[type=text], [type=password]
|
||||
user-select text
|
||||
display inline-block
|
||||
cursor auto
|
||||
padding 0 12px
|
||||
margin 0
|
||||
width 100%
|
||||
line-height 44px
|
||||
font-size 1em
|
||||
color #333 !important
|
||||
background #fff !important
|
||||
outline none
|
||||
border solid 1px rgba(0, 0, 0, 0.1)
|
||||
border-radius 4px
|
||||
box-shadow 0 0 0 114514px #fff inset
|
||||
transition all .3s ease
|
||||
> i
|
||||
margin-right 0.3em
|
||||
|
||||
&:hover
|
||||
border-color rgba(0, 0, 0, 0.2)
|
||||
transition all .1s ease
|
||||
&.username
|
||||
.profile-page-url-preview
|
||||
display block
|
||||
margin 4px 8px 0 4px
|
||||
font-size 0.8em
|
||||
color #888
|
||||
|
||||
&:focus
|
||||
color $theme-color !important
|
||||
border-color $theme-color
|
||||
box-shadow 0 0 0 1024px #fff inset, 0 0 0 4px rgba($theme-color, 10%)
|
||||
transition all 0s ease
|
||||
&:empty
|
||||
display none
|
||||
|
||||
&:disabled
|
||||
opacity 0.5
|
||||
&:not(:empty) + .info
|
||||
margin-top 0
|
||||
|
||||
.agree-tou
|
||||
padding 4px
|
||||
border-radius 4px
|
||||
&.password
|
||||
.meter
|
||||
display block
|
||||
margin-top 8px
|
||||
width 100%
|
||||
height 8px
|
||||
|
||||
&:hover
|
||||
background #f4f4f4
|
||||
&[data-strength='']
|
||||
display none
|
||||
|
||||
&:active
|
||||
background #eee
|
||||
&[data-strength='low']
|
||||
> .value
|
||||
background #d73612
|
||||
|
||||
&, *
|
||||
cursor pointer
|
||||
&[data-strength='medium']
|
||||
> .value
|
||||
background #d7ca12
|
||||
|
||||
p
|
||||
display inline
|
||||
color #555
|
||||
&[data-strength='high']
|
||||
> .value
|
||||
background #61bb22
|
||||
|
||||
button
|
||||
margin 0 0 32px 0
|
||||
padding 16px
|
||||
width 100%
|
||||
font-size 1em
|
||||
color #fff
|
||||
background $theme-color
|
||||
border-radius 3px
|
||||
> .value
|
||||
display block
|
||||
width 0%
|
||||
height 100%
|
||||
background transparent
|
||||
border-radius 4px
|
||||
transition all 0.1s ease
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 5%)
|
||||
[type=text], [type=password]
|
||||
user-select text
|
||||
display inline-block
|
||||
cursor auto
|
||||
padding 0 12px
|
||||
margin 0
|
||||
width 100%
|
||||
line-height 44px
|
||||
font-size 1em
|
||||
color #333 !important
|
||||
background #fff !important
|
||||
outline none
|
||||
border solid 1px rgba(0, 0, 0, 0.1)
|
||||
border-radius 4px
|
||||
box-shadow 0 0 0 114514px #fff inset
|
||||
transition all .3s ease
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 5%)
|
||||
&:hover
|
||||
border-color rgba(0, 0, 0, 0.2)
|
||||
transition all .1s ease
|
||||
|
||||
script.
|
||||
@mixin \api
|
||||
@mixin \get-password-strength
|
||||
&:focus
|
||||
color $theme-color !important
|
||||
border-color $theme-color
|
||||
box-shadow 0 0 0 1024px #fff inset, 0 0 0 4px rgba($theme-color, 10%)
|
||||
transition all 0s ease
|
||||
|
||||
@username-state = null
|
||||
@password-strength = ''
|
||||
@password-retype-state = null
|
||||
@recaptchaed = false
|
||||
&:disabled
|
||||
opacity 0.5
|
||||
|
||||
window.on-recaptchaed = ~>
|
||||
@recaptchaed = true
|
||||
@update!
|
||||
.agree-tou
|
||||
padding 4px
|
||||
border-radius 4px
|
||||
|
||||
window.on-recaptcha-expired = ~>
|
||||
&:hover
|
||||
background #f4f4f4
|
||||
|
||||
&:active
|
||||
background #eee
|
||||
|
||||
&, *
|
||||
cursor pointer
|
||||
|
||||
p
|
||||
display inline
|
||||
color #555
|
||||
|
||||
button
|
||||
margin 0 0 32px 0
|
||||
padding 16px
|
||||
width 100%
|
||||
font-size 1em
|
||||
color #fff
|
||||
background $theme-color
|
||||
border-radius 3px
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 5%)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 5%)
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \api
|
||||
@mixin \get-password-strength
|
||||
|
||||
@username-state = null
|
||||
@password-strength = ''
|
||||
@password-retype-state = null
|
||||
@recaptchaed = false
|
||||
@update!
|
||||
|
||||
@on \mount ~>
|
||||
head = (document.get-elements-by-tag-name \head).0
|
||||
script = document.create-element \script
|
||||
..set-attribute \src \https://www.google.com/recaptcha/api.js
|
||||
head.append-child script
|
||||
|
||||
@on-change-username = ~>
|
||||
username = @refs.username.value
|
||||
|
||||
if username == ''
|
||||
@username-state = null
|
||||
@update!
|
||||
return
|
||||
|
||||
err = switch
|
||||
| not username.match /^[a-zA-Z0-9\-]+$/ => \invalid-format
|
||||
| username.length < 3chars => \min-range
|
||||
| username.length > 20chars => \max-range
|
||||
| _ => null
|
||||
|
||||
if err?
|
||||
@username-state = err
|
||||
@update!
|
||||
else
|
||||
@username-state = \wait
|
||||
window.on-recaptchaed = ~>
|
||||
@recaptchaed = true
|
||||
@update!
|
||||
|
||||
@api \username/available do
|
||||
username: username
|
||||
.then (result) ~>
|
||||
if result.available
|
||||
@username-state = \ok
|
||||
else
|
||||
@username-state = \unavailable
|
||||
window.on-recaptcha-expired = ~>
|
||||
@recaptchaed = false
|
||||
@update!
|
||||
|
||||
@on \mount ~>
|
||||
head = (document.get-elements-by-tag-name \head).0
|
||||
script = document.create-element \script
|
||||
..set-attribute \src \https://www.google.com/recaptcha/api.js
|
||||
head.append-child script
|
||||
|
||||
@on-change-username = ~>
|
||||
username = @refs.username.value
|
||||
|
||||
if username == ''
|
||||
@username-state = null
|
||||
@update!
|
||||
.catch (err) ~>
|
||||
@username-state = \error
|
||||
return
|
||||
|
||||
err = switch
|
||||
| not username.match /^[a-zA-Z0-9\-]+$/ => \invalid-format
|
||||
| username.length < 3chars => \min-range
|
||||
| username.length > 20chars => \max-range
|
||||
| _ => null
|
||||
|
||||
if err?
|
||||
@username-state = err
|
||||
@update!
|
||||
else
|
||||
@username-state = \wait
|
||||
@update!
|
||||
|
||||
@on-change-password = ~>
|
||||
password = @refs.password.value
|
||||
@api \username/available do
|
||||
username: username
|
||||
.then (result) ~>
|
||||
if result.available
|
||||
@username-state = \ok
|
||||
else
|
||||
@username-state = \unavailable
|
||||
@update!
|
||||
.catch (err) ~>
|
||||
@username-state = \error
|
||||
@update!
|
||||
|
||||
if password == ''
|
||||
@password-strength = ''
|
||||
return
|
||||
@on-change-password = ~>
|
||||
password = @refs.password.value
|
||||
|
||||
strength = @get-password-strength password
|
||||
if password == ''
|
||||
@password-strength = ''
|
||||
return
|
||||
|
||||
if strength > 0.3
|
||||
@password-strength = \medium
|
||||
if strength > 0.7
|
||||
@password-strength = \high
|
||||
else
|
||||
@password-strength = \low
|
||||
strength = @get-password-strength password
|
||||
|
||||
@update!
|
||||
if strength > 0.3
|
||||
@password-strength = \medium
|
||||
if strength > 0.7
|
||||
@password-strength = \high
|
||||
else
|
||||
@password-strength = \low
|
||||
|
||||
@refs.password-metar.style.width = (strength * 100) + \%
|
||||
@update!
|
||||
|
||||
@on-change-password-retype = ~>
|
||||
password = @refs.password.value
|
||||
retyped-password = @refs.password-retype.value
|
||||
@refs.password-metar.style.width = (strength * 100) + \%
|
||||
|
||||
if retyped-password == ''
|
||||
@password-retype-state = null
|
||||
return
|
||||
@on-change-password-retype = ~>
|
||||
password = @refs.password.value
|
||||
retyped-password = @refs.password-retype.value
|
||||
|
||||
if password == retyped-password
|
||||
@password-retype-state = \match
|
||||
else
|
||||
@password-retype-state = \not-match
|
||||
if retyped-password == ''
|
||||
@password-retype-state = null
|
||||
return
|
||||
|
||||
@onsubmit = (e) ~>
|
||||
e.prevent-default!
|
||||
if password == retyped-password
|
||||
@password-retype-state = \match
|
||||
else
|
||||
@password-retype-state = \not-match
|
||||
|
||||
username = @refs.username.value
|
||||
password = @refs.password.value
|
||||
@onsubmit = (e) ~>
|
||||
e.prevent-default!
|
||||
|
||||
locker = document.body.append-child document.create-element \mk-locker
|
||||
username = @refs.username.value
|
||||
password = @refs.password.value
|
||||
|
||||
@api \signup do
|
||||
username: username
|
||||
password: password
|
||||
'g-recaptcha-response': grecaptcha.get-response!
|
||||
.then ~>
|
||||
@api \signin do
|
||||
locker = document.body.append-child document.create-element \mk-locker
|
||||
|
||||
@api \signup do
|
||||
username: username
|
||||
password: password
|
||||
'g-recaptcha-response': grecaptcha.get-response!
|
||||
.then ~>
|
||||
location.href = CONFIG.url
|
||||
.catch ~>
|
||||
alert '何らかの原因によりアカウントの作成に失敗しました。再度お試しください。'
|
||||
@api \signin do
|
||||
username: username
|
||||
password: password
|
||||
.then ~>
|
||||
location.href = CONFIG.url
|
||||
.catch ~>
|
||||
alert '何らかの原因によりアカウントの作成に失敗しました。再度お試しください。'
|
||||
|
||||
grecaptcha.reset!
|
||||
@recaptchaed = false
|
||||
grecaptcha.reset!
|
||||
@recaptchaed = false
|
||||
|
||||
locker.parent-node.remove-child locker
|
||||
locker.parent-node.remove-child locker
|
||||
|
||||
false
|
||||
false
|
||||
</script>
|
||||
</mk-signup>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,27 @@
|
|||
mk-special-message
|
||||
p(if={ m == 1 && d == 1 }) Happy New Year!
|
||||
p(if={ m == 12 && d == 25 }) Merry Christmas!
|
||||
<mk-special-message>
|
||||
<p if="{ m == 1 && d == 1 }">Happy New Year! </p>
|
||||
<p if="{ m == 12 && d == 25 }">Merry Christmas!</p>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display block
|
||||
|
||||
style.
|
||||
display block
|
||||
&:empty
|
||||
display none
|
||||
|
||||
&:empty
|
||||
display none
|
||||
> p
|
||||
margin 0
|
||||
padding 4px
|
||||
text-align center
|
||||
font-size 14px
|
||||
font-weight bold
|
||||
text-transform uppercase
|
||||
color #fff
|
||||
background #ff1036
|
||||
|
||||
> p
|
||||
margin 0
|
||||
padding 4px
|
||||
text-align center
|
||||
font-size 14px
|
||||
font-weight bold
|
||||
text-transform uppercase
|
||||
color #fff
|
||||
background #ff1036
|
||||
|
||||
script.
|
||||
now = new Date!
|
||||
@d = now.get-date!
|
||||
@m = now.get-month! + 1
|
||||
</style>
|
||||
<script>
|
||||
now = new Date!
|
||||
@d = now.get-date!
|
||||
@m = now.get-month! + 1
|
||||
</script>
|
||||
</mk-special-message>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,41 @@
|
|||
mk-time
|
||||
time(datetime={ opts.time })
|
||||
span(if={ mode == 'relative' }) { relative }
|
||||
span(if={ mode == 'absolute' }) { absolute }
|
||||
span(if={ mode == 'detail' }) { absolute } ({ relative })
|
||||
<mk-time>
|
||||
<time datetime="{ opts.time }"><span if="{ mode == 'relative' }">{ relative }</span><span if="{ mode == 'absolute' }">{ absolute }</span><span if="{ mode == 'detail' }">{ absolute } ({ relative })</span></time>
|
||||
<script>
|
||||
@time = new Date @opts.time
|
||||
@mode = @opts.mode || \relative
|
||||
@tickid = null
|
||||
|
||||
script.
|
||||
@time = new Date @opts.time
|
||||
@mode = @opts.mode || \relative
|
||||
@tickid = null
|
||||
@absolute =
|
||||
@time.get-full-year! + \年 +
|
||||
@time.get-month! + 1 + \月 +
|
||||
@time.get-date! + \日 +
|
||||
' ' +
|
||||
@time.get-hours! + \時 +
|
||||
@time.get-minutes! + \分
|
||||
|
||||
@absolute =
|
||||
@time.get-full-year! + \年 +
|
||||
@time.get-month! + 1 + \月 +
|
||||
@time.get-date! + \日 +
|
||||
' ' +
|
||||
@time.get-hours! + \時 +
|
||||
@time.get-minutes! + \分
|
||||
@on \mount ~>
|
||||
if @mode == \relative or @mode == \detail
|
||||
@tick!
|
||||
@tickid = set-interval @tick, 1000ms
|
||||
|
||||
@on \mount ~>
|
||||
if @mode == \relative or @mode == \detail
|
||||
@tick!
|
||||
@tickid = set-interval @tick, 1000ms
|
||||
@on \unmount ~>
|
||||
if @mode == \relative or @mode == \detail
|
||||
clear-interval @tickid
|
||||
|
||||
@on \unmount ~>
|
||||
if @mode == \relative or @mode == \detail
|
||||
clear-interval @tickid
|
||||
|
||||
@tick = ~>
|
||||
now = new Date!
|
||||
ago = (now - @time) / 1000ms
|
||||
@relative = switch
|
||||
| ago >= 31536000s => ~~(ago / 31536000s) + '年前'
|
||||
| ago >= 2592000s => ~~(ago / 2592000s) + 'ヶ月前'
|
||||
| ago >= 604800s => ~~(ago / 604800s) + '週間前'
|
||||
| ago >= 86400s => ~~(ago / 86400s) + '日前'
|
||||
| ago >= 3600s => ~~(ago / 3600s) + '時間前'
|
||||
| ago >= 60s => ~~(ago / 60s) + '分前'
|
||||
| ago >= 10s => ~~(ago % 60s) + '秒前'
|
||||
| ago >= 0s => 'たった今'
|
||||
| ago < 0s => '未来'
|
||||
| _ => 'なぞのじかん'
|
||||
@update!
|
||||
@tick = ~>
|
||||
now = new Date!
|
||||
ago = (now - @time) / 1000ms
|
||||
@relative = switch
|
||||
| ago >= 31536000s => ~~(ago / 31536000s) + '年前'
|
||||
| ago >= 2592000s => ~~(ago / 2592000s) + 'ヶ月前'
|
||||
| ago >= 604800s => ~~(ago / 604800s) + '週間前'
|
||||
| ago >= 86400s => ~~(ago / 86400s) + '日前'
|
||||
| ago >= 3600s => ~~(ago / 3600s) + '時間前'
|
||||
| ago >= 60s => ~~(ago / 60s) + '分前'
|
||||
| ago >= 10s => ~~(ago % 60s) + '秒前'
|
||||
| ago >= 0s => 'たった今'
|
||||
| ago < 0s => '未来'
|
||||
| _ => 'なぞのじかん'
|
||||
@update!
|
||||
</script>
|
||||
</mk-time>
|
||||
|
|
|
|||
|
|
@ -1,201 +1,195 @@
|
|||
mk-uploader
|
||||
ol(if={ uploads.length > 0 })
|
||||
li(each={ uploads })
|
||||
div.img(style='background-image: url({ img })')
|
||||
p.name
|
||||
i.fa.fa-spinner.fa-pulse
|
||||
| { name }
|
||||
p.status
|
||||
span.initing(if={ progress == undefined })
|
||||
| 待機中
|
||||
mk-ellipsis
|
||||
span.kb(if={ progress != undefined })
|
||||
| { String(Math.floor(progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }
|
||||
i KB
|
||||
= ' / '
|
||||
| { String(Math.floor(progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }
|
||||
i KB
|
||||
span.percentage(if={ progress != undefined }) { Math.floor((progress.value / progress.max) * 100) }
|
||||
progress(if={ progress != undefined && progress.value != progress.max }, value={ progress.value }, max={ progress.max })
|
||||
div.progress.initing(if={ progress == undefined })
|
||||
div.progress.waiting(if={ progress != undefined && progress.value == progress.max })
|
||||
|
||||
style.
|
||||
display block
|
||||
overflow auto
|
||||
|
||||
&:empty
|
||||
display none
|
||||
|
||||
> ol
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
list-style none
|
||||
|
||||
> li
|
||||
<mk-uploader>
|
||||
<ol if="{ uploads.length > 0 }">
|
||||
<li each="{ uploads }">
|
||||
<div class="img" style="background-image: url({ img })"></div>
|
||||
<p class="name"><i class="fa fa-spinner fa-pulse"></i>{ name }</p>
|
||||
<p class="status"><span class="initing" if="{ progress == undefined }">待機中
|
||||
<mk-ellipsis></mk-ellipsis></span><span class="kb" if="{ progress != undefined }">{ String(Math.floor(progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i> / { String(Math.floor(progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i></span><span class="percentage" if="{ progress != undefined }">{ Math.floor((progress.value / progress.max) * 100) }</span></p>
|
||||
<progress if="{ progress != undefined && progress.value != progress.max }" value="{ progress.value }" max="{ progress.max }"></progress>
|
||||
<div class="progress initing" if="{ progress == undefined }"></div>
|
||||
<div class="progress waiting" if="{ progress != undefined && progress.value == progress.max }"></div>
|
||||
</li>
|
||||
</ol>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display block
|
||||
margin 8px 0 0 0
|
||||
padding 0
|
||||
height 36px
|
||||
box-shadow 0 -1px 0 rgba($theme-color, 0.1)
|
||||
border-top solid 8px transparent
|
||||
overflow auto
|
||||
|
||||
&:first-child
|
||||
margin 0
|
||||
box-shadow none
|
||||
border-top none
|
||||
&:empty
|
||||
display none
|
||||
|
||||
> .img
|
||||
> ol
|
||||
display block
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 36px
|
||||
height 36px
|
||||
background-size cover
|
||||
background-position center center
|
||||
|
||||
> .name
|
||||
display block
|
||||
position absolute
|
||||
top 0
|
||||
left 44px
|
||||
margin 0
|
||||
padding 0
|
||||
max-width 256px
|
||||
font-size 0.8em
|
||||
color rgba($theme-color, 0.7)
|
||||
white-space nowrap
|
||||
text-overflow ellipsis
|
||||
overflow hidden
|
||||
list-style none
|
||||
|
||||
> i
|
||||
margin-right 4px
|
||||
> li
|
||||
display block
|
||||
margin 8px 0 0 0
|
||||
padding 0
|
||||
height 36px
|
||||
box-shadow 0 -1px 0 rgba($theme-color, 0.1)
|
||||
border-top solid 8px transparent
|
||||
|
||||
> .status
|
||||
display block
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
margin 0
|
||||
padding 0
|
||||
font-size 0.8em
|
||||
&:first-child
|
||||
margin 0
|
||||
box-shadow none
|
||||
border-top none
|
||||
|
||||
> .initing
|
||||
color rgba($theme-color, 0.5)
|
||||
> .img
|
||||
display block
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 36px
|
||||
height 36px
|
||||
background-size cover
|
||||
background-position center center
|
||||
|
||||
> .kb
|
||||
color rgba($theme-color, 0.5)
|
||||
> .name
|
||||
display block
|
||||
position absolute
|
||||
top 0
|
||||
left 44px
|
||||
margin 0
|
||||
padding 0
|
||||
max-width 256px
|
||||
font-size 0.8em
|
||||
color rgba($theme-color, 0.7)
|
||||
white-space nowrap
|
||||
text-overflow ellipsis
|
||||
overflow hidden
|
||||
|
||||
> .percentage
|
||||
display inline-block
|
||||
width 48px
|
||||
text-align right
|
||||
> i
|
||||
margin-right 4px
|
||||
|
||||
color rgba($theme-color, 0.7)
|
||||
> .status
|
||||
display block
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
margin 0
|
||||
padding 0
|
||||
font-size 0.8em
|
||||
|
||||
&:after
|
||||
content '%'
|
||||
> .initing
|
||||
color rgba($theme-color, 0.5)
|
||||
|
||||
> progress
|
||||
display block
|
||||
position absolute
|
||||
bottom 0
|
||||
right 0
|
||||
margin 0
|
||||
width calc(100% - 44px)
|
||||
height 8px
|
||||
background transparent
|
||||
border none
|
||||
border-radius 4px
|
||||
overflow hidden
|
||||
> .kb
|
||||
color rgba($theme-color, 0.5)
|
||||
|
||||
&::-webkit-progress-value
|
||||
background $theme-color
|
||||
> .percentage
|
||||
display inline-block
|
||||
width 48px
|
||||
text-align right
|
||||
|
||||
&::-webkit-progress-bar
|
||||
background rgba($theme-color, 0.1)
|
||||
color rgba($theme-color, 0.7)
|
||||
|
||||
> .progress
|
||||
display block
|
||||
position absolute
|
||||
bottom 0
|
||||
right 0
|
||||
margin 0
|
||||
width calc(100% - 44px)
|
||||
height 8px
|
||||
border none
|
||||
border-radius 4px
|
||||
background linear-gradient(
|
||||
45deg,
|
||||
lighten($theme-color, 30%) 25%,
|
||||
$theme-color 25%,
|
||||
$theme-color 50%,
|
||||
lighten($theme-color, 30%) 50%,
|
||||
lighten($theme-color, 30%) 75%,
|
||||
$theme-color 75%,
|
||||
$theme-color
|
||||
)
|
||||
background-size 32px 32px
|
||||
animation bg 1.5s linear infinite
|
||||
&:after
|
||||
content '%'
|
||||
|
||||
&.initing
|
||||
opacity 0.3
|
||||
> progress
|
||||
display block
|
||||
position absolute
|
||||
bottom 0
|
||||
right 0
|
||||
margin 0
|
||||
width calc(100% - 44px)
|
||||
height 8px
|
||||
background transparent
|
||||
border none
|
||||
border-radius 4px
|
||||
overflow hidden
|
||||
|
||||
@keyframes bg
|
||||
from {background-position: 0 0;}
|
||||
to {background-position: -64px 32px;}
|
||||
&::-webkit-progress-value
|
||||
background $theme-color
|
||||
|
||||
script.
|
||||
@mixin \i
|
||||
&::-webkit-progress-bar
|
||||
background rgba($theme-color, 0.1)
|
||||
|
||||
@uploads = []
|
||||
> .progress
|
||||
display block
|
||||
position absolute
|
||||
bottom 0
|
||||
right 0
|
||||
margin 0
|
||||
width calc(100% - 44px)
|
||||
height 8px
|
||||
border none
|
||||
border-radius 4px
|
||||
background linear-gradient(
|
||||
45deg,
|
||||
lighten($theme-color, 30%) 25%,
|
||||
$theme-color 25%,
|
||||
$theme-color 50%,
|
||||
lighten($theme-color, 30%) 50%,
|
||||
lighten($theme-color, 30%) 75%,
|
||||
$theme-color 75%,
|
||||
$theme-color
|
||||
)
|
||||
background-size 32px 32px
|
||||
animation bg 1.5s linear infinite
|
||||
|
||||
&.initing
|
||||
opacity 0.3
|
||||
|
||||
@upload = (file, folder) ~>
|
||||
id = Math.random!
|
||||
@keyframes bg
|
||||
from {background-position: 0 0;}
|
||||
to {background-position: -64px 32px;}
|
||||
|
||||
ctx =
|
||||
id: id
|
||||
name: file.name || \untitled
|
||||
progress: undefined
|
||||
</style>
|
||||
<script>
|
||||
@mixin \i
|
||||
|
||||
@uploads.push ctx
|
||||
@trigger \change-uploads @uploads
|
||||
@update!
|
||||
@uploads = []
|
||||
|
||||
reader = new FileReader!
|
||||
reader.onload = (e) ~>
|
||||
ctx.img = e.target.result
|
||||
@update!
|
||||
reader.read-as-data-URL file
|
||||
|
||||
@upload = (file, folder) ~>
|
||||
id = Math.random!
|
||||
|
||||
data = new FormData!
|
||||
data.append \i @I.token
|
||||
data.append \file file
|
||||
ctx =
|
||||
id: id
|
||||
name: file.name || \untitled
|
||||
progress: undefined
|
||||
|
||||
if folder?
|
||||
data.append \folder_id folder
|
||||
|
||||
xhr = new XMLHttpRequest!
|
||||
xhr.open \POST CONFIG.api.url + '/drive/files/create' true
|
||||
xhr.onload = (e) ~>
|
||||
drive-file = JSON.parse e.target.response
|
||||
|
||||
@trigger \uploaded drive-file
|
||||
|
||||
@uploads = @uploads.filter (x) -> x.id != id
|
||||
@uploads.push ctx
|
||||
@trigger \change-uploads @uploads
|
||||
|
||||
@update!
|
||||
|
||||
xhr.upload.onprogress = (e) ~>
|
||||
if e.length-computable
|
||||
if ctx.progress == undefined
|
||||
ctx.progress = {}
|
||||
ctx.progress.max = e.total
|
||||
ctx.progress.value = e.loaded
|
||||
reader = new FileReader!
|
||||
reader.onload = (e) ~>
|
||||
ctx.img = e.target.result
|
||||
@update!
|
||||
reader.read-as-data-URL file
|
||||
|
||||
data = new FormData!
|
||||
data.append \i @I.token
|
||||
data.append \file file
|
||||
|
||||
if folder?
|
||||
data.append \folder_id folder
|
||||
|
||||
xhr = new XMLHttpRequest!
|
||||
xhr.open \POST CONFIG.api.url + '/drive/files/create' true
|
||||
xhr.onload = (e) ~>
|
||||
drive-file = JSON.parse e.target.response
|
||||
|
||||
@trigger \uploaded drive-file
|
||||
|
||||
@uploads = @uploads.filter (x) -> x.id != id
|
||||
@trigger \change-uploads @uploads
|
||||
|
||||
@update!
|
||||
|
||||
xhr.send data
|
||||
xhr.upload.onprogress = (e) ~>
|
||||
if e.length-computable
|
||||
if ctx.progress == undefined
|
||||
ctx.progress = {}
|
||||
ctx.progress.max = e.total
|
||||
ctx.progress.value = e.loaded
|
||||
@update!
|
||||
|
||||
xhr.send data
|
||||
</script>
|
||||
</mk-uploader>
|
||||
|
|
|
|||
|
|
@ -1,105 +1,110 @@
|
|||
mk-url-preview
|
||||
a(href={ url }, target='_blank', title={ url }, if={ !loading })
|
||||
div.thumbnail(if={ thumbnail }, style={ 'background-image: url(' + thumbnail + ')' })
|
||||
article
|
||||
header: h1 { title }
|
||||
p { description }
|
||||
footer
|
||||
img.icon(if={ icon }, src={ icon })
|
||||
p { sitename }
|
||||
<mk-url-preview><a href="{ url }" target="_blank" title="{ url }" if="{ !loading }">
|
||||
<div class="thumbnail" if="{ thumbnail }" style="{ 'background-image: url(' + thumbnail + ')' }"></div>
|
||||
<article>
|
||||
<header>
|
||||
<h1>{ title }</h1>
|
||||
</header>
|
||||
<p>{ description }</p>
|
||||
<footer><img class="icon" if="{ icon }" src="{ icon }"/>
|
||||
<p>{ sitename }</p>
|
||||
</footer>
|
||||
</article></a>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display block
|
||||
font-size 16px
|
||||
|
||||
style.
|
||||
display block
|
||||
font-size 16px
|
||||
> a
|
||||
display block
|
||||
border solid 1px #eee
|
||||
border-radius 4px
|
||||
overflow hidden
|
||||
|
||||
> a
|
||||
display block
|
||||
border solid 1px #eee
|
||||
border-radius 4px
|
||||
overflow hidden
|
||||
&:hover
|
||||
text-decoration none
|
||||
border-color #ddd
|
||||
|
||||
&:hover
|
||||
text-decoration none
|
||||
border-color #ddd
|
||||
> article > header > h1
|
||||
text-decoration underline
|
||||
|
||||
> article > header > h1
|
||||
text-decoration underline
|
||||
> .thumbnail
|
||||
position absolute
|
||||
width 100px
|
||||
height 100%
|
||||
background-position center
|
||||
background-size cover
|
||||
|
||||
> .thumbnail
|
||||
position absolute
|
||||
width 100px
|
||||
height 100%
|
||||
background-position center
|
||||
background-size cover
|
||||
& + article
|
||||
left 100px
|
||||
width calc(100% - 100px)
|
||||
|
||||
& + article
|
||||
left 100px
|
||||
width calc(100% - 100px)
|
||||
> article
|
||||
padding 16px
|
||||
|
||||
> article
|
||||
padding 16px
|
||||
> header
|
||||
margin-bottom 8px
|
||||
|
||||
> header
|
||||
margin-bottom 8px
|
||||
> h1
|
||||
margin 0
|
||||
font-size 1em
|
||||
color #555
|
||||
|
||||
> h1
|
||||
margin 0
|
||||
font-size 1em
|
||||
color #555
|
||||
> p
|
||||
margin 0
|
||||
color #777
|
||||
font-size 0.8em
|
||||
|
||||
> p
|
||||
margin 0
|
||||
color #777
|
||||
font-size 0.8em
|
||||
> footer
|
||||
margin-top 8px
|
||||
|
||||
> footer
|
||||
margin-top 8px
|
||||
> img
|
||||
display inline-block
|
||||
width 16px
|
||||
heigth 16px
|
||||
margin-right 4px
|
||||
vertical-align bottom
|
||||
|
||||
> img
|
||||
display inline-block
|
||||
width 16px
|
||||
heigth 16px
|
||||
margin-right 4px
|
||||
vertical-align bottom
|
||||
> p
|
||||
display inline-block
|
||||
margin 0
|
||||
color #666
|
||||
font-size 0.8em
|
||||
line-height 16px
|
||||
|
||||
> p
|
||||
display inline-block
|
||||
margin 0
|
||||
color #666
|
||||
font-size 0.8em
|
||||
line-height 16px
|
||||
@media (max-width 500px)
|
||||
font-size 8px
|
||||
|
||||
@media (max-width 500px)
|
||||
font-size 8px
|
||||
> a
|
||||
border none
|
||||
|
||||
> a
|
||||
border none
|
||||
> .thumbnail
|
||||
width 70px
|
||||
|
||||
> .thumbnail
|
||||
width 70px
|
||||
& + article
|
||||
left 70px
|
||||
width calc(100% - 70px)
|
||||
|
||||
& + article
|
||||
left 70px
|
||||
width calc(100% - 70px)
|
||||
> article
|
||||
padding 8px
|
||||
|
||||
> article
|
||||
padding 8px
|
||||
</style>
|
||||
<script>
|
||||
@mixin \api
|
||||
|
||||
script.
|
||||
@mixin \api
|
||||
@url = @opts.url
|
||||
@loading = true
|
||||
|
||||
@url = @opts.url
|
||||
@loading = true
|
||||
@on \mount ~>
|
||||
fetch CONFIG.url + '/api:url?url=' + @url
|
||||
.then (res) ~>
|
||||
info <~ res.json!.then
|
||||
@title = info.title
|
||||
@description = info.description
|
||||
@thumbnail = info.thumbnail
|
||||
@icon = info.icon
|
||||
@sitename = info.sitename
|
||||
|
||||
@on \mount ~>
|
||||
fetch CONFIG.url + '/api:url?url=' + @url
|
||||
.then (res) ~>
|
||||
info <~ res.json!.then
|
||||
@title = info.title
|
||||
@description = info.description
|
||||
@thumbnail = info.thumbnail
|
||||
@icon = info.icon
|
||||
@sitename = info.sitename
|
||||
|
||||
@loading = false
|
||||
@update!
|
||||
@loading = false
|
||||
@update!
|
||||
</script>
|
||||
</mk-url-preview>
|
||||
|
|
|
|||
|
|
@ -1,50 +1,46 @@
|
|||
mk-url
|
||||
a(href={ url }, target={ opts.target })
|
||||
span.schema { schema }//
|
||||
span.hostname { hostname }
|
||||
span.port(if={ port != '' }) :{ port }
|
||||
span.pathname(if={ pathname != '' }) { pathname }
|
||||
span.query { query }
|
||||
span.hash { hash }
|
||||
<mk-url><a href="{ url }" target="{ opts.target }"><span class="schema">{ schema }//</span><span class="hostname">{ hostname }</span><span class="port" if="{ port != '' }">:{ port }</span><span class="pathname" if="{ pathname != '' }">{ pathname }</span><span class="query">{ query }</span><span class="hash">{ hash }</span></a>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
> a
|
||||
&:after
|
||||
content "\f14c"
|
||||
display inline-block
|
||||
padding-left 2px
|
||||
font-family FontAwesome
|
||||
font-size .9em
|
||||
font-weight 400
|
||||
font-style normal
|
||||
|
||||
style.
|
||||
> a
|
||||
&:after
|
||||
content "\f14c"
|
||||
display inline-block
|
||||
padding-left 2px
|
||||
font-family FontAwesome
|
||||
font-size .9em
|
||||
font-weight 400
|
||||
font-style normal
|
||||
> .schema
|
||||
opacity 0.5
|
||||
|
||||
> .schema
|
||||
opacity 0.5
|
||||
> .hostname
|
||||
font-weight bold
|
||||
|
||||
> .hostname
|
||||
font-weight bold
|
||||
> .pathname
|
||||
opacity 0.8
|
||||
|
||||
> .pathname
|
||||
opacity 0.8
|
||||
> .query
|
||||
opacity 0.5
|
||||
|
||||
> .query
|
||||
opacity 0.5
|
||||
> .hash
|
||||
font-style italic
|
||||
|
||||
> .hash
|
||||
font-style italic
|
||||
</style>
|
||||
<script>
|
||||
@url = @opts.href
|
||||
|
||||
script.
|
||||
@url = @opts.href
|
||||
@on \before-mount ~>
|
||||
parser = document.create-element \a
|
||||
parser.href = @url
|
||||
|
||||
@on \before-mount ~>
|
||||
parser = document.create-element \a
|
||||
parser.href = @url
|
||||
@schema = parser.protocol
|
||||
@hostname = parser.hostname
|
||||
@port = parser.port
|
||||
@pathname = parser.pathname
|
||||
@query = parser.search
|
||||
@hash = parser.hash
|
||||
|
||||
@schema = parser.protocol
|
||||
@hostname = parser.hostname
|
||||
@port = parser.port
|
||||
@pathname = parser.pathname
|
||||
@query = parser.search
|
||||
@hash = parser.hash
|
||||
|
||||
@update!
|
||||
@update!
|
||||
</script>
|
||||
</mk-url>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue