mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-12-24 01:43:09 +02:00
なんか
This commit is contained in:
syuilo
parent
f44e039d9a
commit
107ecfb07f
11 changed files with 727 additions and 672 deletions
|
|
@ -46,9 +46,17 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
|
||||||
const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
|
const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
|
||||||
if (maxIdErr) return rej('invalid max_id param');
|
if (maxIdErr) return rej('invalid max_id param');
|
||||||
|
|
||||||
// Check if both of since_id and max_id is specified
|
// Get 'since_date' parameter
|
||||||
if (sinceId && maxId) {
|
const [sinceDate, sinceDateErr] = $(params.since_date).optional.number().$;
|
||||||
return rej('cannot set since_id and max_id');
|
if (sinceDateErr) throw 'invalid since_date param';
|
||||||
|
|
||||||
|
// Get 'max_date' parameter
|
||||||
|
const [maxDate, maxDateErr] = $(params.max_date).optional.number().$;
|
||||||
|
if (maxDateErr) throw 'invalid max_date param';
|
||||||
|
|
||||||
|
// Check if only one of since_id, max_id, since_date, max_date specified
|
||||||
|
if ([sinceId, maxId, sinceDate, maxDate].filter(x => x != null).length > 1) {
|
||||||
|
throw 'only one of since_id, max_id, since_date, max_date can be specified';
|
||||||
}
|
}
|
||||||
|
|
||||||
const q = userId !== undefined
|
const q = userId !== undefined
|
||||||
|
|
@ -66,13 +74,15 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
|
||||||
return rej('user not found');
|
return rej('user not found');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Construct query
|
//#region Construct query
|
||||||
const sort = {
|
const sort = {
|
||||||
_id: -1
|
_id: -1
|
||||||
};
|
};
|
||||||
|
|
||||||
const query = {
|
const query = {
|
||||||
user_id: user._id
|
user_id: user._id
|
||||||
} as any;
|
} as any;
|
||||||
|
|
||||||
if (sinceId) {
|
if (sinceId) {
|
||||||
sort._id = 1;
|
sort._id = 1;
|
||||||
query._id = {
|
query._id = {
|
||||||
|
|
@ -82,6 +92,15 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
|
||||||
query._id = {
|
query._id = {
|
||||||
$lt: maxId
|
$lt: maxId
|
||||||
};
|
};
|
||||||
|
} else if (sinceDate) {
|
||||||
|
sort._id = 1;
|
||||||
|
query.created_at = {
|
||||||
|
$gt: new Date(sinceDate)
|
||||||
|
};
|
||||||
|
} else if (maxDate) {
|
||||||
|
query.created_at = {
|
||||||
|
$lt: new Date(maxDate)
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!includeReplies) {
|
if (!includeReplies) {
|
||||||
|
|
@ -94,6 +113,7 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
|
||||||
$ne: null
|
$ne: null
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
//#endregion
|
||||||
|
|
||||||
// Issue query
|
// Issue query
|
||||||
const posts = await Post
|
const posts = await Post
|
||||||
|
|
|
||||||
241
src/web/app/desktop/tags/calendar.tag
Normal file
241
src/web/app/desktop/tags/calendar.tag
Normal file
|
|
@ -0,0 +1,241 @@
|
||||||
|
<mk-calendar data-melt={ opts.design == 4 || opts.design == 5 }>
|
||||||
|
<virtual if={ opts.design == 0 || opts.design == 1 }>
|
||||||
|
<button onclick={ prev } title="%i18n:desktop.tags.mk-calendar.prev%"><i class="fa fa-chevron-circle-left"></i></button>
|
||||||
|
<p class="title">{ '%i18n:desktop.tags.mk-calendar.title%'.replace('{1}', year).replace('{2}', month) }</p>
|
||||||
|
<button onclick={ next } title="%i18n:desktop.tags.mk-calendar.next%"><i class="fa fa-chevron-circle-right"></i></button>
|
||||||
|
</virtual>
|
||||||
|
|
||||||
|
<div class="calendar">
|
||||||
|
<div class="weekday" if={ opts.design == 0 || opts.design == 2 || opts.design == 4} each={ day, i in Array(7).fill(0) }
|
||||||
|
data-today={ year == today.getFullYear() && month == today.getMonth() + 1 && today.getDay() == i }
|
||||||
|
data-is-donichi={ i == 0 || i == 6 }>{ weekdayText[i] }</div>
|
||||||
|
<div each={ day, i in Array(paddingDays).fill(0) }></div>
|
||||||
|
<div class="day" each={ day, i in Array(days).fill(0) }
|
||||||
|
data-today={ isToday(i + 1) }
|
||||||
|
data-selected={ isSelected(i + 1) }
|
||||||
|
data-is-out-of-range={ isOutOfRange(i + 1) }
|
||||||
|
data-is-donichi={ isDonichi(i + 1) }
|
||||||
|
onclick={ go.bind(null, i + 1) }
|
||||||
|
title={ isOutOfRange(i + 1) ? null : '%i18n:desktop.tags.mk-calendar.go%' }><div>{ i + 1 }</div></div>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
:scope
|
||||||
|
display block
|
||||||
|
color #777
|
||||||
|
background #fff
|
||||||
|
border solid 1px rgba(0, 0, 0, 0.075)
|
||||||
|
border-radius 6px
|
||||||
|
|
||||||
|
&[data-melt]
|
||||||
|
background transparent !important
|
||||||
|
border none !important
|
||||||
|
|
||||||
|
> .title
|
||||||
|
z-index 1
|
||||||
|
margin 0
|
||||||
|
padding 0 16px
|
||||||
|
text-align center
|
||||||
|
line-height 42px
|
||||||
|
font-size 0.9em
|
||||||
|
font-weight bold
|
||||||
|
color #888
|
||||||
|
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
||||||
|
|
||||||
|
> i
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
> button
|
||||||
|
position absolute
|
||||||
|
z-index 2
|
||||||
|
top 0
|
||||||
|
padding 0
|
||||||
|
width 42px
|
||||||
|
font-size 0.9em
|
||||||
|
line-height 42px
|
||||||
|
color #ccc
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color #aaa
|
||||||
|
|
||||||
|
&:active
|
||||||
|
color #999
|
||||||
|
|
||||||
|
&:first-of-type
|
||||||
|
left 0
|
||||||
|
|
||||||
|
&:last-of-type
|
||||||
|
right 0
|
||||||
|
|
||||||
|
> .calendar
|
||||||
|
display flex
|
||||||
|
flex-wrap wrap
|
||||||
|
padding 16px
|
||||||
|
|
||||||
|
*
|
||||||
|
user-select none
|
||||||
|
|
||||||
|
> div
|
||||||
|
width calc(100% * (1/7))
|
||||||
|
text-align center
|
||||||
|
line-height 32px
|
||||||
|
font-size 14px
|
||||||
|
|
||||||
|
&.weekday
|
||||||
|
color #19a2a9
|
||||||
|
|
||||||
|
&[data-is-donichi]
|
||||||
|
color #ef95a0
|
||||||
|
|
||||||
|
&[data-today]
|
||||||
|
box-shadow 0 0 0 1px #19a2a9 inset
|
||||||
|
border-radius 6px
|
||||||
|
|
||||||
|
&[data-is-donichi]
|
||||||
|
box-shadow 0 0 0 1px #ef95a0 inset
|
||||||
|
|
||||||
|
&.day
|
||||||
|
cursor pointer
|
||||||
|
color #777
|
||||||
|
|
||||||
|
> div
|
||||||
|
border-radius 6px
|
||||||
|
|
||||||
|
&:hover > div
|
||||||
|
background rgba(0, 0, 0, 0.025)
|
||||||
|
|
||||||
|
&:active > div
|
||||||
|
background rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
|
&[data-is-donichi]
|
||||||
|
color #ef95a0
|
||||||
|
|
||||||
|
&[data-is-out-of-range]
|
||||||
|
cursor default
|
||||||
|
color rgba(#777, 0.5)
|
||||||
|
|
||||||
|
&[data-is-donichi]
|
||||||
|
color rgba(#ef95a0, 0.5)
|
||||||
|
|
||||||
|
&[data-selected]
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
> div
|
||||||
|
background rgba(0, 0, 0, 0.025)
|
||||||
|
|
||||||
|
&:active > div
|
||||||
|
background rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
|
&[data-today]
|
||||||
|
> div
|
||||||
|
color $theme-color-foreground
|
||||||
|
background $theme-color
|
||||||
|
|
||||||
|
&:hover > div
|
||||||
|
background lighten($theme-color, 10%)
|
||||||
|
|
||||||
|
&:active > div
|
||||||
|
background darken($theme-color, 10%)
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
if (this.opts.design == null) this.opts.design = 0;
|
||||||
|
|
||||||
|
const eachMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
||||||
|
|
||||||
|
function isLeapYear(year) {
|
||||||
|
return (year % 400 == 0) ? true :
|
||||||
|
(year % 100 == 0) ? false :
|
||||||
|
(year % 4 == 0) ? true :
|
||||||
|
false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.today = new Date();
|
||||||
|
this.year = this.today.getFullYear();
|
||||||
|
this.month = this.today.getMonth() + 1;
|
||||||
|
this.selected = this.today;
|
||||||
|
this.weekdayText = [
|
||||||
|
'%i18n:common.weekday-short.sunday%',
|
||||||
|
'%i18n:common.weekday-short.monday%',
|
||||||
|
'%i18n:common.weekday-short.tuesday%',
|
||||||
|
'%i18n:common.weekday-short.wednesday%',
|
||||||
|
'%i18n:common.weekday-short.thursday%',
|
||||||
|
'%i18n:common.weekday-short.friday%',
|
||||||
|
'%i18n:common.weekday-short.satruday%'
|
||||||
|
];
|
||||||
|
|
||||||
|
this.on('mount', () => {
|
||||||
|
this.calc();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.isToday = day => {
|
||||||
|
return this.year == this.today.getFullYear() && this.month == this.today.getMonth() + 1 && day == this.today.getDate();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.isSelected = day => {
|
||||||
|
return this.year == this.selected.getFullYear() && this.month == this.selected.getMonth() + 1 && day == this.selected.getDate();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.isOutOfRange = day => {
|
||||||
|
const test = (new Date(this.year, this.month - 1, day)).getTime();
|
||||||
|
return test > this.today.getTime() ||
|
||||||
|
(this.opts.start ? test < this.opts.start.getTime() : false);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.isDonichi = day => {
|
||||||
|
const weekday = (new Date(this.year, this.month - 1, day)).getDay();
|
||||||
|
return weekday == 0 || weekday == 6;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.calc = () => {
|
||||||
|
let days = eachMonthDays[this.month - 1];
|
||||||
|
|
||||||
|
// うるう年なら+1日
|
||||||
|
if (this.month == 2 && isLeapYear(this.year)) days++;
|
||||||
|
|
||||||
|
const date = new Date(this.year, this.month - 1, 1);
|
||||||
|
const weekday = date.getDay();
|
||||||
|
|
||||||
|
this.update({
|
||||||
|
paddingDays: weekday,
|
||||||
|
days: days
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
this.prev = () => {
|
||||||
|
if (this.month == 1) {
|
||||||
|
this.update({
|
||||||
|
year: this.year - 1,
|
||||||
|
month: 12
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.update({
|
||||||
|
month: this.month - 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.calc();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.next = () => {
|
||||||
|
if (this.month == 12) {
|
||||||
|
this.update({
|
||||||
|
year: this.year + 1,
|
||||||
|
month: 1
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.update({
|
||||||
|
month: this.month + 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.calc();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.go = day => {
|
||||||
|
if (this.isOutOfRange(day)) return;
|
||||||
|
const date = new Date(this.year, this.month - 1, day, 23, 59, 59, 999);
|
||||||
|
this.update({
|
||||||
|
selected: date
|
||||||
|
});
|
||||||
|
this.opts.warp(date);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</mk-calendar>
|
||||||
|
|
@ -1,139 +1,10 @@
|
||||||
<mk-timemachine-home-widget data-melt={ data.design == 4 || data.design == 5 }>
|
<mk-timemachine-home-widget>
|
||||||
<virtual if={ data.design == 0 || data.design == 1 }>
|
<mk-calendar design={ data.design } warp={ warp }/>
|
||||||
<button onclick={ prev } title="%i18n:desktop.tags.mk-timemachine-home-widget.prev%"><i class="fa fa-chevron-circle-left"></i></button>
|
|
||||||
<p class="title">{ '%i18n:desktop.tags.mk-timemachine-home-widget.title%'.replace('{1}', year).replace('{2}', month) }</p>
|
|
||||||
<button onclick={ next } title="%i18n:desktop.tags.mk-timemachine-home-widget.next%"><i class="fa fa-chevron-circle-right"></i></button>
|
|
||||||
</virtual>
|
|
||||||
|
|
||||||
<div class="calendar">
|
|
||||||
<div class="weekday" if={ data.design == 0 || data.design == 2 || data.design == 4} each={ day, i in Array(7).fill(0) }
|
|
||||||
data-today={ year == today.getFullYear() && month == today.getMonth() + 1 && today.getDay() == i }
|
|
||||||
data-is-donichi={ i == 0 || i == 6 }>{ weekdayText[i] }</div>
|
|
||||||
<div each={ day, i in Array(paddingDays).fill(0) }></div>
|
|
||||||
<div class="day" each={ day, i in Array(days).fill(0) }
|
|
||||||
data-today={ isToday(i + 1) }
|
|
||||||
data-selected={ isSelected(i + 1) }
|
|
||||||
data-is-future={ isFuture(i + 1) }
|
|
||||||
data-is-donichi={ isDonichi(i + 1) }
|
|
||||||
onclick={ go.bind(null, i + 1) }
|
|
||||||
title={ isFuture(i + 1) ? null : '%i18n:desktop.tags.mk-timemachine-home-widget.go%' }><div>{ i + 1 }</div></div>
|
|
||||||
</div>
|
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
display block
|
display block
|
||||||
color #777
|
background transparent !important
|
||||||
background #fff
|
border none !important
|
||||||
|
|
||||||
&[data-melt]
|
|
||||||
background transparent !important
|
|
||||||
border none !important
|
|
||||||
|
|
||||||
> .title
|
|
||||||
z-index 1
|
|
||||||
margin 0
|
|
||||||
padding 0 16px
|
|
||||||
text-align center
|
|
||||||
line-height 42px
|
|
||||||
font-size 0.9em
|
|
||||||
font-weight bold
|
|
||||||
color #888
|
|
||||||
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
|
||||||
|
|
||||||
> i
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
> button
|
|
||||||
position absolute
|
|
||||||
z-index 2
|
|
||||||
top 0
|
|
||||||
padding 0
|
|
||||||
width 42px
|
|
||||||
font-size 0.9em
|
|
||||||
line-height 42px
|
|
||||||
color #ccc
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color #aaa
|
|
||||||
|
|
||||||
&:active
|
|
||||||
color #999
|
|
||||||
|
|
||||||
&:first-of-type
|
|
||||||
left 0
|
|
||||||
|
|
||||||
&:last-of-type
|
|
||||||
right 0
|
|
||||||
|
|
||||||
> .calendar
|
|
||||||
display flex
|
|
||||||
flex-wrap wrap
|
|
||||||
padding 16px
|
|
||||||
|
|
||||||
*
|
|
||||||
user-select none
|
|
||||||
|
|
||||||
> div
|
|
||||||
width calc(100% * (1/7))
|
|
||||||
text-align center
|
|
||||||
line-height 32px
|
|
||||||
font-size 14px
|
|
||||||
|
|
||||||
&.weekday
|
|
||||||
color #19a2a9
|
|
||||||
|
|
||||||
&[data-is-donichi]
|
|
||||||
color #ef95a0
|
|
||||||
|
|
||||||
&[data-today]
|
|
||||||
box-shadow 0 0 0 1px #19a2a9 inset
|
|
||||||
border-radius 6px
|
|
||||||
|
|
||||||
&[data-is-donichi]
|
|
||||||
box-shadow 0 0 0 1px #ef95a0 inset
|
|
||||||
|
|
||||||
&.day
|
|
||||||
cursor pointer
|
|
||||||
color #777
|
|
||||||
|
|
||||||
> div
|
|
||||||
border-radius 6px
|
|
||||||
|
|
||||||
&:hover > div
|
|
||||||
background rgba(0, 0, 0, 0.025)
|
|
||||||
|
|
||||||
&:active > div
|
|
||||||
background rgba(0, 0, 0, 0.05)
|
|
||||||
|
|
||||||
&[data-is-donichi]
|
|
||||||
color #ef95a0
|
|
||||||
|
|
||||||
&[data-is-future]
|
|
||||||
cursor default
|
|
||||||
color rgba(#777, 0.5)
|
|
||||||
|
|
||||||
&[data-is-donichi]
|
|
||||||
color rgba(#ef95a0, 0.5)
|
|
||||||
|
|
||||||
&[data-selected]
|
|
||||||
font-weight bold
|
|
||||||
|
|
||||||
> div
|
|
||||||
background rgba(0, 0, 0, 0.025)
|
|
||||||
|
|
||||||
&:active > div
|
|
||||||
background rgba(0, 0, 0, 0.05)
|
|
||||||
|
|
||||||
&[data-today]
|
|
||||||
> div
|
|
||||||
color $theme-color-foreground
|
|
||||||
background $theme-color
|
|
||||||
|
|
||||||
&:hover > div
|
|
||||||
background lighten($theme-color, 10%)
|
|
||||||
|
|
||||||
&:active > div
|
|
||||||
background darken($theme-color, 10%)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
this.data = {
|
this.data = {
|
||||||
|
|
@ -142,99 +13,7 @@
|
||||||
|
|
||||||
this.mixin('widget');
|
this.mixin('widget');
|
||||||
|
|
||||||
const eachMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
this.warp = date => {
|
||||||
|
|
||||||
function isLeapYear(year) {
|
|
||||||
return (year % 400 == 0) ? true :
|
|
||||||
(year % 100 == 0) ? false :
|
|
||||||
(year % 4 == 0) ? true :
|
|
||||||
false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.today = new Date();
|
|
||||||
this.year = this.today.getFullYear();
|
|
||||||
this.month = this.today.getMonth() + 1;
|
|
||||||
this.selected = this.today;
|
|
||||||
this.weekdayText = [
|
|
||||||
'%i18n:common.weekday-short.sunday%',
|
|
||||||
'%i18n:common.weekday-short.monday%',
|
|
||||||
'%i18n:common.weekday-short.tuesday%',
|
|
||||||
'%i18n:common.weekday-short.wednesday%',
|
|
||||||
'%i18n:common.weekday-short.thursday%',
|
|
||||||
'%i18n:common.weekday-short.friday%',
|
|
||||||
'%i18n:common.weekday-short.satruday%'
|
|
||||||
];
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.calc();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.isToday = day => {
|
|
||||||
return this.year == this.today.getFullYear() && this.month == this.today.getMonth() + 1 && day == this.today.getDate();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.isSelected = day => {
|
|
||||||
return this.year == this.selected.getFullYear() && this.month == this.selected.getMonth() + 1 && day == this.selected.getDate();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.isFuture = day => {
|
|
||||||
return (new Date(this.year, this.month - 1, day)).getTime() > this.today.getTime();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.isDonichi = day => {
|
|
||||||
const weekday = (new Date(this.year, this.month - 1, day)).getDay();
|
|
||||||
return weekday == 0 || weekday == 6;
|
|
||||||
};
|
|
||||||
|
|
||||||
this.calc = () => {
|
|
||||||
let days = eachMonthDays[this.month - 1];
|
|
||||||
|
|
||||||
// うるう年なら+1日
|
|
||||||
if (this.month == 2 && isLeapYear(this.year)) days++;
|
|
||||||
|
|
||||||
const date = new Date(this.year, this.month - 1, 1);
|
|
||||||
const weekday = date.getDay();
|
|
||||||
|
|
||||||
this.update({
|
|
||||||
paddingDays: weekday,
|
|
||||||
days: days
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.prev = () => {
|
|
||||||
if (this.month == 1) {
|
|
||||||
this.update({
|
|
||||||
year: this.year - 1,
|
|
||||||
month: 12
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.update({
|
|
||||||
month: this.month - 1
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.calc();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.next = () => {
|
|
||||||
if (this.month == 12) {
|
|
||||||
this.update({
|
|
||||||
year: this.year + 1,
|
|
||||||
month: 1
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.update({
|
|
||||||
month: this.month + 1
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.calc();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.go = day => {
|
|
||||||
if (this.isFuture(day)) return;
|
|
||||||
const date = new Date(this.year, this.month - 1, day, 23, 59, 59, 999);
|
|
||||||
this.update({
|
|
||||||
selected: date
|
|
||||||
});
|
|
||||||
this.opts.tl.warp(date);
|
this.opts.tl.warp(date);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -52,13 +52,8 @@ require('./following-setuper.tag');
|
||||||
require('./ellipsis-icon.tag');
|
require('./ellipsis-icon.tag');
|
||||||
require('./ui.tag');
|
require('./ui.tag');
|
||||||
require('./home.tag');
|
require('./home.tag');
|
||||||
require('./user-header.tag');
|
|
||||||
require('./user-profile.tag');
|
|
||||||
require('./user-timeline.tag');
|
require('./user-timeline.tag');
|
||||||
require('./user.tag');
|
require('./user.tag');
|
||||||
require('./user-home.tag');
|
|
||||||
require('./user-graphs.tag');
|
|
||||||
require('./user-photos.tag');
|
|
||||||
require('./big-follow-button.tag');
|
require('./big-follow-button.tag');
|
||||||
require('./pages/entrance.tag');
|
require('./pages/entrance.tag');
|
||||||
require('./pages/entrance/signin.tag');
|
require('./pages/entrance/signin.tag');
|
||||||
|
|
@ -93,3 +88,4 @@ require('./user-following-window.tag');
|
||||||
require('./user-followers-window.tag');
|
require('./user-followers-window.tag');
|
||||||
require('./list-user.tag');
|
require('./list-user.tag');
|
||||||
require('./detailed-post-window.tag');
|
require('./detailed-post-window.tag');
|
||||||
|
require('./calendar.tag');
|
||||||
|
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<mk-user-graphs>
|
|
||||||
<section>
|
|
||||||
<h1>投稿</h1>
|
|
||||||
<mk-user-posts-graph user={ opts.user }/>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h1>フォロー/フォロワー</h1>
|
|
||||||
<mk-user-friends-graph user={ opts.user }/>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h1>いいね</h1>
|
|
||||||
<mk-user-likes-graph user={ opts.user }/>
|
|
||||||
</section>
|
|
||||||
<style>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
|
|
||||||
> section
|
|
||||||
margin 16px 0
|
|
||||||
background #fff
|
|
||||||
border solid 1px rgba(0, 0, 0, 0.1)
|
|
||||||
border-radius 4px
|
|
||||||
|
|
||||||
> h1
|
|
||||||
margin 0 0 8px 0
|
|
||||||
padding 0 16px
|
|
||||||
line-height 40px
|
|
||||||
font-size 1em
|
|
||||||
color #666
|
|
||||||
border-bottom solid 1px #eee
|
|
||||||
|
|
||||||
> *:not(h1)
|
|
||||||
margin 0 auto 16px auto
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.trigger('loaded');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</mk-user-graphs>
|
|
||||||
|
|
@ -1,147 +0,0 @@
|
||||||
<mk-user-header data-is-dark-background={ user.banner_url != null }>
|
|
||||||
<div class="banner" ref="banner" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=1024)' : '' } onclick={ onUpdateBanner }></div><img class="avatar" src={ user.avatar_url + '?thumbnail&size=150' } alt="avatar"/>
|
|
||||||
<div class="title">
|
|
||||||
<p class="name" href={ '/' + user.username }>{ user.name }</p>
|
|
||||||
<p class="username">@{ user.username }</p>
|
|
||||||
<p class="location" if={ user.profile.location }><i class="fa fa-map-marker"></i>{ user.profile.location }</p>
|
|
||||||
</div>
|
|
||||||
<footer>
|
|
||||||
<a href={ '/' + user.username }>投稿</a>
|
|
||||||
<a href={ '/' + user.username + '/media' }>メディア</a>
|
|
||||||
<a href={ '/' + user.username + '/graphs' }>グラフ</a>
|
|
||||||
</footer>
|
|
||||||
<style>
|
|
||||||
:scope
|
|
||||||
$footer-height = 58px
|
|
||||||
|
|
||||||
display block
|
|
||||||
background #fff
|
|
||||||
|
|
||||||
&[data-is-dark-background]
|
|
||||||
> .banner
|
|
||||||
background-color #383838
|
|
||||||
|
|
||||||
> .title
|
|
||||||
color #fff
|
|
||||||
background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
|
|
||||||
|
|
||||||
> .name
|
|
||||||
text-shadow 0 0 8px #000
|
|
||||||
|
|
||||||
> .banner
|
|
||||||
height 280px
|
|
||||||
background-color #f5f5f5
|
|
||||||
background-size cover
|
|
||||||
background-position center
|
|
||||||
|
|
||||||
> .avatar
|
|
||||||
display block
|
|
||||||
position absolute
|
|
||||||
bottom 16px
|
|
||||||
left 16px
|
|
||||||
z-index 2
|
|
||||||
width 150px
|
|
||||||
height 150px
|
|
||||||
margin 0
|
|
||||||
border solid 3px #fff
|
|
||||||
border-radius 8px
|
|
||||||
box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2)
|
|
||||||
|
|
||||||
> .title
|
|
||||||
position absolute
|
|
||||||
bottom $footer-height
|
|
||||||
left 0
|
|
||||||
width 100%
|
|
||||||
padding 0 0 8px 195px
|
|
||||||
color #656565
|
|
||||||
font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
|
|
||||||
|
|
||||||
> .name
|
|
||||||
display block
|
|
||||||
margin 0
|
|
||||||
line-height 40px
|
|
||||||
font-weight bold
|
|
||||||
font-size 2em
|
|
||||||
|
|
||||||
> .username
|
|
||||||
> .location
|
|
||||||
display inline-block
|
|
||||||
margin 0 16px 0 0
|
|
||||||
line-height 20px
|
|
||||||
opacity 0.8
|
|
||||||
|
|
||||||
> i
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
> footer
|
|
||||||
z-index 1
|
|
||||||
height $footer-height
|
|
||||||
padding-left 195px
|
|
||||||
background #fff
|
|
||||||
|
|
||||||
> a
|
|
||||||
display inline-block
|
|
||||||
margin 0
|
|
||||||
width 100px
|
|
||||||
line-height $footer-height
|
|
||||||
color #555
|
|
||||||
|
|
||||||
> button
|
|
||||||
display block
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
right 0
|
|
||||||
margin 8px
|
|
||||||
padding 0
|
|
||||||
width $footer-height - 16px
|
|
||||||
line-height $footer-height - 16px - 2px
|
|
||||||
font-size 1.2em
|
|
||||||
color #777
|
|
||||||
border solid 1px #eee
|
|
||||||
border-radius 4px
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color #555
|
|
||||||
border solid 1px #ddd
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
import updateBanner from '../scripts/update-banner';
|
|
||||||
|
|
||||||
this.mixin('i');
|
|
||||||
|
|
||||||
this.user = this.opts.user;
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
window.addEventListener('load', this.scroll);
|
|
||||||
window.addEventListener('scroll', this.scroll);
|
|
||||||
window.addEventListener('resize', this.scroll);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.on('unmount', () => {
|
|
||||||
window.removeEventListener('load', this.scroll);
|
|
||||||
window.removeEventListener('scroll', this.scroll);
|
|
||||||
window.removeEventListener('resize', this.scroll);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.scroll = () => {
|
|
||||||
const top = window.scrollY;
|
|
||||||
const height = 280/*px*/;
|
|
||||||
|
|
||||||
const pos = 50 - ((top / height) * 50);
|
|
||||||
this.refs.banner.style.backgroundPosition = `center ${pos}%`;
|
|
||||||
|
|
||||||
const blur = top / 32
|
|
||||||
if (blur <= 10) this.refs.banner.style.filter = `blur(${blur}px)`;
|
|
||||||
};
|
|
||||||
|
|
||||||
this.onUpdateBanner = () => {
|
|
||||||
if (!this.SIGNIN || this.I.id != this.user.id) return;
|
|
||||||
|
|
||||||
updateBanner(this.I, i => {
|
|
||||||
this.user.banner_url = i.banner_url;
|
|
||||||
this.update();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-user-header>
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
<mk-user-home>
|
|
||||||
<div class="side">
|
|
||||||
<mk-user-profile user={ user }/>
|
|
||||||
<mk-user-photos user={ user }/>
|
|
||||||
</div>
|
|
||||||
<main>
|
|
||||||
<mk-user-timeline ref="tl" user={ user }/>
|
|
||||||
</main>
|
|
||||||
<style>
|
|
||||||
:scope
|
|
||||||
display flex
|
|
||||||
justify-content center
|
|
||||||
|
|
||||||
> *
|
|
||||||
> *
|
|
||||||
display block
|
|
||||||
//border solid 1px #eaeaea
|
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
|
||||||
border-radius 6px
|
|
||||||
|
|
||||||
&:not(:last-child)
|
|
||||||
margin-bottom 16px
|
|
||||||
|
|
||||||
> main
|
|
||||||
flex 1 1 560px
|
|
||||||
max-width 560px
|
|
||||||
margin 0
|
|
||||||
padding 16px 0 16px 16px
|
|
||||||
|
|
||||||
> .side
|
|
||||||
flex 1 1 270px
|
|
||||||
max-width 270px
|
|
||||||
margin 0
|
|
||||||
padding 16px 0 16px 0
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
this.user = this.opts.user;
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.refs.tl.on('loaded', () => {
|
|
||||||
this.trigger('loaded');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</mk-user-home>
|
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
<mk-user-photos>
|
|
||||||
<p class="title"><i class="fa fa-camera"></i>フォト</p>
|
|
||||||
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます<mk-ellipsis/></p>
|
|
||||||
<div class="stream" if={ !initializing && images.length > 0 }>
|
|
||||||
<virtual each={ image in images }>
|
|
||||||
<div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div>
|
|
||||||
</virtual>
|
|
||||||
</div>
|
|
||||||
<p class="empty" if={ !initializing && images.length == 0 }>写真はありません</p>
|
|
||||||
<style>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
background #fff
|
|
||||||
|
|
||||||
> .title
|
|
||||||
z-index 1
|
|
||||||
margin 0
|
|
||||||
padding 0 16px
|
|
||||||
line-height 42px
|
|
||||||
font-size 0.9em
|
|
||||||
font-weight bold
|
|
||||||
color #888
|
|
||||||
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
|
||||||
|
|
||||||
> i
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
> .stream
|
|
||||||
display -webkit-flex
|
|
||||||
display -moz-flex
|
|
||||||
display -ms-flex
|
|
||||||
display flex
|
|
||||||
justify-content center
|
|
||||||
flex-wrap wrap
|
|
||||||
padding 8px
|
|
||||||
|
|
||||||
> .img
|
|
||||||
flex 1 1 33%
|
|
||||||
width 33%
|
|
||||||
height 80px
|
|
||||||
background-position center center
|
|
||||||
background-size cover
|
|
||||||
background-clip content-box
|
|
||||||
border solid 2px transparent
|
|
||||||
|
|
||||||
> .initializing
|
|
||||||
> .empty
|
|
||||||
margin 0
|
|
||||||
padding 16px
|
|
||||||
text-align center
|
|
||||||
color #aaa
|
|
||||||
|
|
||||||
> i
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
import isPromise from '../../common/scripts/is-promise';
|
|
||||||
|
|
||||||
this.mixin('api');
|
|
||||||
|
|
||||||
this.images = [];
|
|
||||||
this.initializing = true;
|
|
||||||
this.user = null;
|
|
||||||
this.userPromise = isPromise(this.opts.user)
|
|
||||||
? this.opts.user
|
|
||||||
: Promise.resolve(this.opts.user);
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.userPromise.then(user => {
|
|
||||||
this.update({
|
|
||||||
user: user
|
|
||||||
});
|
|
||||||
|
|
||||||
this.api('users/posts', {
|
|
||||||
user_id: this.user.id,
|
|
||||||
with_media: true,
|
|
||||||
limit: 9
|
|
||||||
}).then(posts => {
|
|
||||||
this.initializing = false;
|
|
||||||
posts.forEach(post => {
|
|
||||||
post.media.forEach(media => {
|
|
||||||
if (this.images.length < 9) this.images.push(media);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.update();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</mk-user-photos>
|
|
||||||
|
|
@ -1,102 +0,0 @@
|
||||||
<mk-user-profile>
|
|
||||||
<div class="friend-form" if={ SIGNIN && I.id != user.id }>
|
|
||||||
<mk-big-follow-button user={ user }/>
|
|
||||||
<p class="followed" if={ user.is_followed }>フォローされています</p>
|
|
||||||
</div>
|
|
||||||
<div class="description" if={ user.description }>{ user.description }</div>
|
|
||||||
<div class="birthday" if={ user.profile.birthday }>
|
|
||||||
<p><i class="fa fa-birthday-cake"></i>{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)</p>
|
|
||||||
</div>
|
|
||||||
<div class="twitter" if={ user.twitter }>
|
|
||||||
<p><i class="fa fa-twitter"></i><a href={ 'https://twitter.com/' + user.twitter.screen_name } target="_blank">@{ user.twitter.screen_name }</a></p>
|
|
||||||
</div>
|
|
||||||
<div class="status">
|
|
||||||
<p class="posts-count"><i class="fa fa-angle-right"></i><a>{ user.posts_count }</a><b>ポスト</b></p>
|
|
||||||
<p class="following"><i class="fa fa-angle-right"></i><a onclick={ showFollowing }>{ user.following_count }</a>人を<b>フォロー</b></p>
|
|
||||||
<p class="followers"><i class="fa fa-angle-right"></i><a onclick={ showFollowers }>{ user.followers_count }</a>人の<b>フォロワー</b></p>
|
|
||||||
</div>
|
|
||||||
<style>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
background #fff
|
|
||||||
|
|
||||||
> *:first-child
|
|
||||||
border-top none !important
|
|
||||||
|
|
||||||
> .friend-form
|
|
||||||
padding 16px
|
|
||||||
border-top solid 1px #eee
|
|
||||||
|
|
||||||
> mk-big-follow-button
|
|
||||||
width 100%
|
|
||||||
|
|
||||||
> .followed
|
|
||||||
margin 12px 0 0 0
|
|
||||||
padding 0
|
|
||||||
text-align center
|
|
||||||
line-height 24px
|
|
||||||
font-size 0.8em
|
|
||||||
color #71afc7
|
|
||||||
background #eefaff
|
|
||||||
border-radius 4px
|
|
||||||
|
|
||||||
> .description
|
|
||||||
padding 16px
|
|
||||||
color #555
|
|
||||||
border-top solid 1px #eee
|
|
||||||
|
|
||||||
> .birthday
|
|
||||||
padding 16px
|
|
||||||
color #555
|
|
||||||
border-top solid 1px #eee
|
|
||||||
|
|
||||||
> p
|
|
||||||
margin 0
|
|
||||||
|
|
||||||
> i
|
|
||||||
margin-right 8px
|
|
||||||
|
|
||||||
> .twitter
|
|
||||||
padding 16px
|
|
||||||
color #555
|
|
||||||
border-top solid 1px #eee
|
|
||||||
|
|
||||||
> p
|
|
||||||
margin 0
|
|
||||||
|
|
||||||
> i
|
|
||||||
margin-right 8px
|
|
||||||
|
|
||||||
> .status
|
|
||||||
padding 16px
|
|
||||||
color #555
|
|
||||||
border-top solid 1px #eee
|
|
||||||
|
|
||||||
> p
|
|
||||||
margin 8px 0
|
|
||||||
|
|
||||||
> i
|
|
||||||
margin-left 8px
|
|
||||||
margin-right 8px
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
this.age = require('s-age');
|
|
||||||
|
|
||||||
this.mixin('i');
|
|
||||||
|
|
||||||
this.user = this.opts.user;
|
|
||||||
|
|
||||||
this.showFollowing = () => {
|
|
||||||
riot.mount(document.body.appendChild(document.createElement('mk-user-following-window')), {
|
|
||||||
user: this.user
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.showFollowers = () => {
|
|
||||||
riot.mount(document.body.appendChild(document.createElement('mk-user-followers-window')), {
|
|
||||||
user: this.user
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-user-profile>
|
|
||||||
|
|
@ -91,6 +91,7 @@
|
||||||
this.fetch = cb => {
|
this.fetch = cb => {
|
||||||
this.api('users/posts', {
|
this.api('users/posts', {
|
||||||
user_id: this.user.id,
|
user_id: this.user.id,
|
||||||
|
max_date: this.date ? this.date.getTime() : undefined,
|
||||||
with_replies: this.mode == 'with-replies'
|
with_replies: this.mode == 'with-replies'
|
||||||
}).then(posts => {
|
}).then(posts => {
|
||||||
this.update({
|
this.update({
|
||||||
|
|
@ -132,5 +133,13 @@
|
||||||
});
|
});
|
||||||
this.fetch();
|
this.fetch();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.warp = date => {
|
||||||
|
this.update({
|
||||||
|
date: date
|
||||||
|
});
|
||||||
|
|
||||||
|
this.fetch();
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
</mk-user-timeline>
|
</mk-user-timeline>
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,8 @@
|
||||||
<header>
|
<header>
|
||||||
<mk-user-header user={ user }/>
|
<mk-user-header user={ user }/>
|
||||||
</header>
|
</header>
|
||||||
<div class="body">
|
<mk-user-home if={ page == 'home' } user={ user }/>
|
||||||
<mk-user-home if={ page == 'home' } user={ user }/>
|
<mk-user-graphs if={ page == 'graphs' } user={ user }/>
|
||||||
<mk-user-graphs if={ page == 'graphs' } user={ user }/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
|
|
@ -14,7 +12,7 @@
|
||||||
|
|
||||||
> .user
|
> .user
|
||||||
> header
|
> header
|
||||||
max-width 560px + 270px
|
max-width 1200px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
padding 0 16px
|
padding 0 16px
|
||||||
|
|
||||||
|
|
@ -24,11 +22,6 @@
|
||||||
border-radius 0 0 6px 6px
|
border-radius 0 0 6px 6px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
> .body
|
|
||||||
max-width 560px + 270px
|
|
||||||
margin 0 auto
|
|
||||||
padding 0 16px
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
this.mixin('api');
|
this.mixin('api');
|
||||||
|
|
@ -51,3 +44,447 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</mk-user>
|
</mk-user>
|
||||||
|
|
||||||
|
<mk-user-header data-is-dark-background={ user.banner_url != null }>
|
||||||
|
<div class="banner" ref="banner" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=1024)' : '' } onclick={ onUpdateBanner }></div>
|
||||||
|
<img class="avatar" src={ user.avatar_url + '?thumbnail&size=150' } alt="avatar"/>
|
||||||
|
<div class="title">
|
||||||
|
<p class="name" href={ '/' + user.username }>{ user.name }</p>
|
||||||
|
<p class="username">@{ user.username }</p>
|
||||||
|
<p class="location" if={ user.profile.location }><i class="fa fa-map-marker"></i>{ user.profile.location }</p>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<a href={ '/' + user.username }>投稿</a>
|
||||||
|
<a href={ '/' + user.username + '/media' }>メディア</a>
|
||||||
|
<a href={ '/' + user.username + '/graphs' }>グラフ</a>
|
||||||
|
</footer>
|
||||||
|
<style>
|
||||||
|
:scope
|
||||||
|
$footer-height = 58px
|
||||||
|
|
||||||
|
display block
|
||||||
|
background #fff
|
||||||
|
|
||||||
|
&[data-is-dark-background]
|
||||||
|
> .banner
|
||||||
|
background-color #383838
|
||||||
|
|
||||||
|
> .title
|
||||||
|
color #fff
|
||||||
|
background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
|
||||||
|
|
||||||
|
> .name
|
||||||
|
text-shadow 0 0 8px #000
|
||||||
|
|
||||||
|
> .banner
|
||||||
|
height 280px
|
||||||
|
background-color #f5f5f5
|
||||||
|
background-size cover
|
||||||
|
background-position center
|
||||||
|
|
||||||
|
> .avatar
|
||||||
|
display block
|
||||||
|
position absolute
|
||||||
|
bottom 16px
|
||||||
|
left 16px
|
||||||
|
z-index 2
|
||||||
|
width 150px
|
||||||
|
height 150px
|
||||||
|
margin 0
|
||||||
|
border solid 3px #fff
|
||||||
|
border-radius 8px
|
||||||
|
box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
|
> .title
|
||||||
|
position absolute
|
||||||
|
bottom $footer-height
|
||||||
|
left 0
|
||||||
|
width 100%
|
||||||
|
padding 0 0 8px 195px
|
||||||
|
color #656565
|
||||||
|
font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
|
||||||
|
|
||||||
|
> .name
|
||||||
|
display block
|
||||||
|
margin 0
|
||||||
|
line-height 40px
|
||||||
|
font-weight bold
|
||||||
|
font-size 2em
|
||||||
|
|
||||||
|
> .username
|
||||||
|
> .location
|
||||||
|
display inline-block
|
||||||
|
margin 0 16px 0 0
|
||||||
|
line-height 20px
|
||||||
|
opacity 0.8
|
||||||
|
|
||||||
|
> i
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
> footer
|
||||||
|
z-index 1
|
||||||
|
height $footer-height
|
||||||
|
padding-left 195px
|
||||||
|
background #fff
|
||||||
|
|
||||||
|
> a
|
||||||
|
display inline-block
|
||||||
|
margin 0
|
||||||
|
width 100px
|
||||||
|
line-height $footer-height
|
||||||
|
color #555
|
||||||
|
|
||||||
|
> button
|
||||||
|
display block
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
right 0
|
||||||
|
margin 8px
|
||||||
|
padding 0
|
||||||
|
width $footer-height - 16px
|
||||||
|
line-height $footer-height - 16px - 2px
|
||||||
|
font-size 1.2em
|
||||||
|
color #777
|
||||||
|
border solid 1px #eee
|
||||||
|
border-radius 4px
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color #555
|
||||||
|
border solid 1px #ddd
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
import updateBanner from '../scripts/update-banner';
|
||||||
|
|
||||||
|
this.mixin('i');
|
||||||
|
|
||||||
|
this.user = this.opts.user;
|
||||||
|
|
||||||
|
this.on('mount', () => {
|
||||||
|
window.addEventListener('load', this.scroll);
|
||||||
|
window.addEventListener('scroll', this.scroll);
|
||||||
|
window.addEventListener('resize', this.scroll);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.on('unmount', () => {
|
||||||
|
window.removeEventListener('load', this.scroll);
|
||||||
|
window.removeEventListener('scroll', this.scroll);
|
||||||
|
window.removeEventListener('resize', this.scroll);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.scroll = () => {
|
||||||
|
const top = window.scrollY;
|
||||||
|
const height = 280/*px*/;
|
||||||
|
|
||||||
|
const pos = 50 - ((top / height) * 50);
|
||||||
|
this.refs.banner.style.backgroundPosition = `center ${pos}%`;
|
||||||
|
|
||||||
|
const blur = top / 32
|
||||||
|
if (blur <= 10) this.refs.banner.style.filter = `blur(${blur}px)`;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.onUpdateBanner = () => {
|
||||||
|
if (!this.SIGNIN || this.I.id != this.user.id) return;
|
||||||
|
|
||||||
|
updateBanner(this.I, i => {
|
||||||
|
this.user.banner_url = i.banner_url;
|
||||||
|
this.update();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</mk-user-header>
|
||||||
|
|
||||||
|
<mk-user-profile>
|
||||||
|
<div class="friend-form" if={ SIGNIN && I.id != user.id }>
|
||||||
|
<mk-big-follow-button user={ user }/>
|
||||||
|
<p class="followed" if={ user.is_followed }>フォローされています</p>
|
||||||
|
</div>
|
||||||
|
<div class="description" if={ user.description }>{ user.description }</div>
|
||||||
|
<div class="birthday" if={ user.profile.birthday }>
|
||||||
|
<p><i class="fa fa-birthday-cake"></i>{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)</p>
|
||||||
|
</div>
|
||||||
|
<div class="twitter" if={ user.twitter }>
|
||||||
|
<p><i class="fa fa-twitter"></i><a href={ 'https://twitter.com/' + user.twitter.screen_name } target="_blank">@{ user.twitter.screen_name }</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="status">
|
||||||
|
<p class="posts-count"><i class="fa fa-angle-right"></i><a>{ user.posts_count }</a><b>ポスト</b></p>
|
||||||
|
<p class="following"><i class="fa fa-angle-right"></i><a onclick={ showFollowing }>{ user.following_count }</a>人を<b>フォロー</b></p>
|
||||||
|
<p class="followers"><i class="fa fa-angle-right"></i><a onclick={ showFollowers }>{ user.followers_count }</a>人の<b>フォロワー</b></p>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
:scope
|
||||||
|
display block
|
||||||
|
background #fff
|
||||||
|
|
||||||
|
> *:first-child
|
||||||
|
border-top none !important
|
||||||
|
|
||||||
|
> .friend-form
|
||||||
|
padding 16px
|
||||||
|
border-top solid 1px #eee
|
||||||
|
|
||||||
|
> mk-big-follow-button
|
||||||
|
width 100%
|
||||||
|
|
||||||
|
> .followed
|
||||||
|
margin 12px 0 0 0
|
||||||
|
padding 0
|
||||||
|
text-align center
|
||||||
|
line-height 24px
|
||||||
|
font-size 0.8em
|
||||||
|
color #71afc7
|
||||||
|
background #eefaff
|
||||||
|
border-radius 4px
|
||||||
|
|
||||||
|
> .description
|
||||||
|
padding 16px
|
||||||
|
color #555
|
||||||
|
border-top solid 1px #eee
|
||||||
|
|
||||||
|
> .birthday
|
||||||
|
padding 16px
|
||||||
|
color #555
|
||||||
|
border-top solid 1px #eee
|
||||||
|
|
||||||
|
> p
|
||||||
|
margin 0
|
||||||
|
|
||||||
|
> i
|
||||||
|
margin-right 8px
|
||||||
|
|
||||||
|
> .twitter
|
||||||
|
padding 16px
|
||||||
|
color #555
|
||||||
|
border-top solid 1px #eee
|
||||||
|
|
||||||
|
> p
|
||||||
|
margin 0
|
||||||
|
|
||||||
|
> i
|
||||||
|
margin-right 8px
|
||||||
|
|
||||||
|
> .status
|
||||||
|
padding 16px
|
||||||
|
color #555
|
||||||
|
border-top solid 1px #eee
|
||||||
|
|
||||||
|
> p
|
||||||
|
margin 8px 0
|
||||||
|
|
||||||
|
> i
|
||||||
|
margin-left 8px
|
||||||
|
margin-right 8px
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
this.age = require('s-age');
|
||||||
|
|
||||||
|
this.mixin('i');
|
||||||
|
|
||||||
|
this.user = this.opts.user;
|
||||||
|
|
||||||
|
this.showFollowing = () => {
|
||||||
|
riot.mount(document.body.appendChild(document.createElement('mk-user-following-window')), {
|
||||||
|
user: this.user
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
this.showFollowers = () => {
|
||||||
|
riot.mount(document.body.appendChild(document.createElement('mk-user-followers-window')), {
|
||||||
|
user: this.user
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</mk-user-profile>
|
||||||
|
|
||||||
|
<mk-user-photos>
|
||||||
|
<p class="title"><i class="fa fa-camera"></i>フォト</p>
|
||||||
|
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます<mk-ellipsis/></p>
|
||||||
|
<div class="stream" if={ !initializing && images.length > 0 }>
|
||||||
|
<virtual each={ image in images }>
|
||||||
|
<div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div>
|
||||||
|
</virtual>
|
||||||
|
</div>
|
||||||
|
<p class="empty" if={ !initializing && images.length == 0 }>写真はありません</p>
|
||||||
|
<style>
|
||||||
|
:scope
|
||||||
|
display block
|
||||||
|
background #fff
|
||||||
|
|
||||||
|
> .title
|
||||||
|
z-index 1
|
||||||
|
margin 0
|
||||||
|
padding 0 16px
|
||||||
|
line-height 42px
|
||||||
|
font-size 0.9em
|
||||||
|
font-weight bold
|
||||||
|
color #888
|
||||||
|
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
||||||
|
|
||||||
|
> i
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
> .stream
|
||||||
|
display -webkit-flex
|
||||||
|
display -moz-flex
|
||||||
|
display -ms-flex
|
||||||
|
display flex
|
||||||
|
justify-content center
|
||||||
|
flex-wrap wrap
|
||||||
|
padding 8px
|
||||||
|
|
||||||
|
> .img
|
||||||
|
flex 1 1 33%
|
||||||
|
width 33%
|
||||||
|
height 80px
|
||||||
|
background-position center center
|
||||||
|
background-size cover
|
||||||
|
background-clip content-box
|
||||||
|
border solid 2px transparent
|
||||||
|
|
||||||
|
> .initializing
|
||||||
|
> .empty
|
||||||
|
margin 0
|
||||||
|
padding 16px
|
||||||
|
text-align center
|
||||||
|
color #aaa
|
||||||
|
|
||||||
|
> i
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
import isPromise from '../../common/scripts/is-promise';
|
||||||
|
|
||||||
|
this.mixin('api');
|
||||||
|
|
||||||
|
this.images = [];
|
||||||
|
this.initializing = true;
|
||||||
|
this.user = null;
|
||||||
|
this.userPromise = isPromise(this.opts.user)
|
||||||
|
? this.opts.user
|
||||||
|
: Promise.resolve(this.opts.user);
|
||||||
|
|
||||||
|
this.on('mount', () => {
|
||||||
|
this.userPromise.then(user => {
|
||||||
|
this.update({
|
||||||
|
user: user
|
||||||
|
});
|
||||||
|
|
||||||
|
this.api('users/posts', {
|
||||||
|
user_id: this.user.id,
|
||||||
|
with_media: true,
|
||||||
|
limit: 9
|
||||||
|
}).then(posts => {
|
||||||
|
this.initializing = false;
|
||||||
|
posts.forEach(post => {
|
||||||
|
post.media.forEach(media => {
|
||||||
|
if (this.images.length < 9) this.images.push(media);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.update();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</mk-user-photos>
|
||||||
|
|
||||||
|
<mk-user-home>
|
||||||
|
<div>
|
||||||
|
<mk-user-profile user={ user }/>
|
||||||
|
<mk-user-photos user={ user }/>
|
||||||
|
</div>
|
||||||
|
<main>
|
||||||
|
<mk-user-timeline ref="tl" user={ user }/>
|
||||||
|
</main>
|
||||||
|
<div>
|
||||||
|
<mk-calendar warp={ warp } start={ new Date(user.created_at) }/>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
:scope
|
||||||
|
display flex
|
||||||
|
justify-content center
|
||||||
|
margin 0 auto
|
||||||
|
max-width 1200px
|
||||||
|
|
||||||
|
> *
|
||||||
|
> *
|
||||||
|
display block
|
||||||
|
//border solid 1px #eaeaea
|
||||||
|
border solid 1px rgba(0, 0, 0, 0.075)
|
||||||
|
border-radius 6px
|
||||||
|
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-bottom 16px
|
||||||
|
|
||||||
|
> main
|
||||||
|
padding 16px
|
||||||
|
width calc(100% - 275px * 2)
|
||||||
|
|
||||||
|
> div
|
||||||
|
width 275px
|
||||||
|
margin 0
|
||||||
|
|
||||||
|
&:first-child
|
||||||
|
padding 16px 0 16px 16px
|
||||||
|
|
||||||
|
&:last-child
|
||||||
|
padding 16px 16px 16px 0
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
this.user = this.opts.user;
|
||||||
|
|
||||||
|
this.on('mount', () => {
|
||||||
|
this.refs.tl.on('loaded', () => {
|
||||||
|
this.trigger('loaded');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.warp = date => {
|
||||||
|
this.refs.tl.warp(date);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</mk-user-home>
|
||||||
|
|
||||||
|
<mk-user-graphs>
|
||||||
|
<section>
|
||||||
|
<h1>投稿</h1>
|
||||||
|
<mk-user-posts-graph user={ opts.user }/>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h1>フォロー/フォロワー</h1>
|
||||||
|
<mk-user-friends-graph user={ opts.user }/>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h1>いいね</h1>
|
||||||
|
<mk-user-likes-graph user={ opts.user }/>
|
||||||
|
</section>
|
||||||
|
<style>
|
||||||
|
:scope
|
||||||
|
display block
|
||||||
|
|
||||||
|
> section
|
||||||
|
margin 16px 0
|
||||||
|
background #fff
|
||||||
|
border solid 1px rgba(0, 0, 0, 0.1)
|
||||||
|
border-radius 4px
|
||||||
|
|
||||||
|
> h1
|
||||||
|
margin 0 0 8px 0
|
||||||
|
padding 0 16px
|
||||||
|
line-height 40px
|
||||||
|
font-size 1em
|
||||||
|
color #666
|
||||||
|
border-bottom solid 1px #eee
|
||||||
|
|
||||||
|
> *:not(h1)
|
||||||
|
margin 0 auto 16px auto
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
this.on('mount', () => {
|
||||||
|
this.trigger('loaded');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</mk-user-graphs>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue