整理した
This commit is contained in:
syuilo
parent
8a279a4656
commit
cf33e483f7
552 changed files with 360 additions and 1311 deletions
107
src/client/app/mobile/views/pages/drive.vue
Normal file
107
src/client/app/mobile/views/pages/drive.vue
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header">
|
||||
<template v-if="folder">%fa:R folder-open%{{ folder.name }}</template>
|
||||
<template v-if="file"><mk-file-type-icon data-icon :type="file.type"/>{{ file.name }}</template>
|
||||
<template v-if="!folder && !file">%fa:cloud%%i18n:mobile.tags.mk-drive-page.drive%</template>
|
||||
</span>
|
||||
<template slot="func"><button @click="fn">%fa:ellipsis-h%</button></template>
|
||||
<mk-drive
|
||||
ref="browser"
|
||||
:init-folder="initFolder"
|
||||
:init-file="initFile"
|
||||
:is-naked="true"
|
||||
:top="48"
|
||||
@begin-fetch="Progress.start()"
|
||||
@fetched-mid="Progress.set(0.5)"
|
||||
@fetched="Progress.done()"
|
||||
@move-root="onMoveRoot"
|
||||
@open-folder="onOpenFolder"
|
||||
@open-file="onOpenFile"
|
||||
/>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
Progress,
|
||||
folder: null,
|
||||
file: null,
|
||||
initFolder: null,
|
||||
initFile: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initFolder = this.$route.params.folder;
|
||||
this.initFile = this.$route.params.file;
|
||||
|
||||
window.addEventListener('popstate', this.onPopState);
|
||||
},
|
||||
mounted() {
|
||||
document.title = 'Misskey Drive';
|
||||
document.documentElement.style.background = '#fff';
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('popstate', this.onPopState);
|
||||
},
|
||||
methods: {
|
||||
onPopState() {
|
||||
if (this.$route.params.folder) {
|
||||
(this.$refs as any).browser.cd(this.$route.params.folder, true);
|
||||
} else if (this.$route.params.file) {
|
||||
(this.$refs as any).browser.cf(this.$route.params.file, true);
|
||||
} else {
|
||||
(this.$refs as any).browser.goRoot(true);
|
||||
}
|
||||
},
|
||||
fn() {
|
||||
(this.$refs as any).browser.openContextMenu();
|
||||
},
|
||||
onMoveRoot(silent) {
|
||||
const title = 'Misskey Drive';
|
||||
|
||||
if (!silent) {
|
||||
// Rewrite URL
|
||||
history.pushState(null, title, '/i/drive');
|
||||
}
|
||||
|
||||
document.title = title;
|
||||
|
||||
this.file = null;
|
||||
this.folder = null;
|
||||
},
|
||||
onOpenFolder(folder, silent) {
|
||||
const title = folder.name + ' | Misskey Drive';
|
||||
|
||||
if (!silent) {
|
||||
// Rewrite URL
|
||||
history.pushState(null, title, '/i/drive/folder/' + folder.id);
|
||||
}
|
||||
|
||||
document.title = title;
|
||||
|
||||
this.file = null;
|
||||
this.folder = folder;
|
||||
},
|
||||
onOpenFile(file, silent) {
|
||||
const title = file.name + ' | Misskey Drive';
|
||||
|
||||
if (!silent) {
|
||||
// Rewrite URL
|
||||
history.pushState(null, title, '/i/drive/file/' + file.id);
|
||||
}
|
||||
|
||||
document.title = title;
|
||||
|
||||
this.file = file;
|
||||
this.folder = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
65
src/client/app/mobile/views/pages/followers.vue
Normal file
65
src/client/app/mobile/views/pages/followers.vue
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<template slot="header" v-if="!fetching">
|
||||
<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt="">
|
||||
{{ '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name) }}
|
||||
</template>
|
||||
<mk-users-list
|
||||
v-if="!fetching"
|
||||
:fetch="fetchUsers"
|
||||
:count="user.followersCount"
|
||||
:you-know-count="user.followersYouKnowCount"
|
||||
@loaded="onLoaded"
|
||||
>
|
||||
%i18n:mobile.tags.mk-user-followers.no-users%
|
||||
</mk-users-list>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
import parseAcct from '../../../../../common/user/parse-acct';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
user: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: 'fetch'
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
mounted() {
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
Progress.start();
|
||||
this.fetching = true;
|
||||
|
||||
(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
|
||||
this.user = user;
|
||||
this.fetching = false;
|
||||
|
||||
document.title = '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name) + ' | Misskey';
|
||||
});
|
||||
},
|
||||
onLoaded() {
|
||||
Progress.done();
|
||||
},
|
||||
fetchUsers(iknow, limit, cursor, cb) {
|
||||
(this as any).api('users/followers', {
|
||||
userId: this.user.id,
|
||||
iknow: iknow,
|
||||
limit: limit,
|
||||
cursor: cursor ? cursor : undefined
|
||||
}).then(cb);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
65
src/client/app/mobile/views/pages/following.vue
Normal file
65
src/client/app/mobile/views/pages/following.vue
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<template slot="header" v-if="!fetching">
|
||||
<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt="">
|
||||
{{ '%i18n:mobile.tags.mk-user-following-page.following-of%'.replace('{}', user.name) }}
|
||||
</template>
|
||||
<mk-users-list
|
||||
v-if="!fetching"
|
||||
:fetch="fetchUsers"
|
||||
:count="user.followingCount"
|
||||
:you-know-count="user.followingYouKnowCount"
|
||||
@loaded="onLoaded"
|
||||
>
|
||||
%i18n:mobile.tags.mk-user-following.no-users%
|
||||
</mk-users-list>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
import parseAcct from '../../../../../common/user/parse-acct';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
user: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: 'fetch'
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
mounted() {
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
Progress.start();
|
||||
this.fetching = true;
|
||||
|
||||
(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
|
||||
this.user = user;
|
||||
this.fetching = false;
|
||||
|
||||
document.title = '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name) + ' | Misskey';
|
||||
});
|
||||
},
|
||||
onLoaded() {
|
||||
Progress.done();
|
||||
},
|
||||
fetchUsers(iknow, limit, cursor, cb) {
|
||||
(this as any).api('users/following', {
|
||||
userId: this.user.id,
|
||||
iknow: iknow,
|
||||
limit: limit,
|
||||
cursor: cursor ? cursor : undefined
|
||||
}).then(cb);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
259
src/client/app/mobile/views/pages/home.vue
Normal file
259
src/client/app/mobile/views/pages/home.vue
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header" @click="showTl = !showTl">
|
||||
<template v-if="showTl">%fa:home%タイムライン</template>
|
||||
<template v-else>%fa:home%ウィジェット</template>
|
||||
<span style="margin-left:8px">
|
||||
<template v-if="showTl">%fa:angle-down%</template>
|
||||
<template v-else>%fa:angle-up%</template>
|
||||
</span>
|
||||
</span>
|
||||
<template slot="func">
|
||||
<button @click="fn" v-if="showTl">%fa:pencil-alt%</button>
|
||||
<button @click="customizing = !customizing" v-else>%fa:cog%</button>
|
||||
</template>
|
||||
<main>
|
||||
<div class="tl">
|
||||
<mk-timeline @loaded="onLoaded" v-show="showTl"/>
|
||||
</div>
|
||||
<div class="widgets" v-show="!showTl">
|
||||
<template v-if="customizing">
|
||||
<header>
|
||||
<select v-model="widgetAdderSelected">
|
||||
<option value="profile">プロフィール</option>
|
||||
<option value="calendar">カレンダー</option>
|
||||
<option value="activity">アクティビティ</option>
|
||||
<option value="rss">RSSリーダー</option>
|
||||
<option value="photo-stream">フォトストリーム</option>
|
||||
<option value="slideshow">スライドショー</option>
|
||||
<option value="version">バージョン</option>
|
||||
<option value="access-log">アクセスログ</option>
|
||||
<option value="server">サーバー情報</option>
|
||||
<option value="donation">寄付のお願い</option>
|
||||
<option value="nav">ナビゲーション</option>
|
||||
<option value="tips">ヒント</option>
|
||||
</select>
|
||||
<button @click="addWidget">追加</button>
|
||||
<p><a @click="hint">カスタマイズのヒント</a></p>
|
||||
</header>
|
||||
<x-draggable
|
||||
:list="widgets"
|
||||
:options="{ handle: '.handle', animation: 150 }"
|
||||
@sort="onWidgetSort"
|
||||
>
|
||||
<div v-for="widget in widgets" class="customize-container" :key="widget.id">
|
||||
<header>
|
||||
<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
|
||||
</header>
|
||||
<div @click="widgetFunc(widget.id)">
|
||||
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :is-mobile="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</x-draggable>
|
||||
</template>
|
||||
<template v-else>
|
||||
<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :is-mobile="true" @chosen="warp"/>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import * as XDraggable from 'vuedraggable';
|
||||
import * as uuid from 'uuid';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
import getPostSummary from '../../../../../common/get-post-summary';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XDraggable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
connection: null,
|
||||
connectionId: null,
|
||||
unreadCount: 0,
|
||||
showTl: true,
|
||||
widgets: [],
|
||||
customizing: false,
|
||||
widgetAdderSelected: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if ((this as any).os.i.account.clientSettings.mobile_home == null) {
|
||||
Vue.set((this as any).os.i.account.clientSettings, 'mobile_home', [{
|
||||
name: 'calendar',
|
||||
id: 'a', data: {}
|
||||
}, {
|
||||
name: 'activity',
|
||||
id: 'b', data: {}
|
||||
}, {
|
||||
name: 'rss',
|
||||
id: 'c', data: {}
|
||||
}, {
|
||||
name: 'photo-stream',
|
||||
id: 'd', data: {}
|
||||
}, {
|
||||
name: 'donation',
|
||||
id: 'e', data: {}
|
||||
}, {
|
||||
name: 'nav',
|
||||
id: 'f', data: {}
|
||||
}, {
|
||||
name: 'version',
|
||||
id: 'g', data: {}
|
||||
}]);
|
||||
this.widgets = (this as any).os.i.account.clientSettings.mobile_home;
|
||||
this.saveHome();
|
||||
} else {
|
||||
this.widgets = (this as any).os.i.account.clientSettings.mobile_home;
|
||||
}
|
||||
|
||||
this.$watch('os.i.account.clientSettings', i => {
|
||||
this.widgets = (this as any).os.i.account.clientSettings.mobile_home;
|
||||
}, {
|
||||
deep: true
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
document.title = 'Misskey';
|
||||
document.documentElement.style.background = '#313a42';
|
||||
|
||||
this.connection = (this as any).os.stream.getConnection();
|
||||
this.connectionId = (this as any).os.stream.use();
|
||||
|
||||
this.connection.on('post', this.onStreamPost);
|
||||
this.connection.on('mobile_home_updated', this.onHomeUpdated);
|
||||
document.addEventListener('visibilitychange', this.onVisibilitychange, false);
|
||||
|
||||
Progress.start();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.connection.off('post', this.onStreamPost);
|
||||
this.connection.off('mobile_home_updated', this.onHomeUpdated);
|
||||
(this as any).os.stream.dispose(this.connectionId);
|
||||
document.removeEventListener('visibilitychange', this.onVisibilitychange);
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
(this as any).apis.post();
|
||||
},
|
||||
onLoaded() {
|
||||
Progress.done();
|
||||
},
|
||||
onStreamPost(post) {
|
||||
if (document.hidden && post.userId !== (this as any).os.i.id) {
|
||||
this.unreadCount++;
|
||||
document.title = `(${this.unreadCount}) ${getPostSummary(post)}`;
|
||||
}
|
||||
},
|
||||
onVisibilitychange() {
|
||||
if (!document.hidden) {
|
||||
this.unreadCount = 0;
|
||||
document.title = 'Misskey';
|
||||
}
|
||||
},
|
||||
onHomeUpdated(data) {
|
||||
if (data.home) {
|
||||
(this as any).os.i.account.clientSettings.mobile_home = data.home;
|
||||
this.widgets = data.home;
|
||||
} else {
|
||||
const w = (this as any).os.i.account.clientSettings.mobile_home.find(w => w.id == data.id);
|
||||
if (w != null) {
|
||||
w.data = data.data;
|
||||
this.$refs[w.id][0].preventSave = true;
|
||||
this.$refs[w.id][0].props = w.data;
|
||||
this.widgets = (this as any).os.i.account.clientSettings.mobile_home;
|
||||
}
|
||||
}
|
||||
},
|
||||
hint() {
|
||||
alert('ウィジェットを追加/削除したり並べ替えたりできます。ウィジェットを移動するには「三」をドラッグします。ウィジェットを削除するには「x」をタップします。いくつかのウィジェットはタップすることで表示を変更できます。');
|
||||
},
|
||||
widgetFunc(id) {
|
||||
const w = this.$refs[id][0];
|
||||
if (w.func) w.func();
|
||||
},
|
||||
onWidgetSort() {
|
||||
this.saveHome();
|
||||
},
|
||||
addWidget() {
|
||||
const widget = {
|
||||
name: this.widgetAdderSelected,
|
||||
id: uuid(),
|
||||
data: {}
|
||||
};
|
||||
|
||||
this.widgets.unshift(widget);
|
||||
this.saveHome();
|
||||
},
|
||||
removeWidget(widget) {
|
||||
this.widgets = this.widgets.filter(w => w.id != widget.id);
|
||||
this.saveHome();
|
||||
},
|
||||
saveHome() {
|
||||
(this as any).os.i.account.clientSettings.mobile_home = this.widgets;
|
||||
(this as any).api('i/update_mobile_home', {
|
||||
home: this.widgets
|
||||
});
|
||||
},
|
||||
warp() {
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
main
|
||||
|
||||
> .tl
|
||||
> .mk-timeline
|
||||
max-width 600px
|
||||
margin 0 auto
|
||||
padding 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 16px
|
||||
|
||||
> .widgets
|
||||
margin 0 auto
|
||||
max-width 500px
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 8px
|
||||
|
||||
> header
|
||||
padding 8px
|
||||
background #fff
|
||||
|
||||
.widget
|
||||
margin 8px
|
||||
|
||||
.customize-container
|
||||
margin 8px
|
||||
background #fff
|
||||
|
||||
> header
|
||||
line-height 32px
|
||||
background #eee
|
||||
|
||||
> .handle
|
||||
padding 0 8px
|
||||
|
||||
> .remove
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
padding 0 8px
|
||||
line-height 32px
|
||||
|
||||
> div
|
||||
padding 8px
|
||||
|
||||
> *
|
||||
pointer-events none
|
||||
|
||||
</style>
|
||||
16
src/client/app/mobile/views/pages/index.vue
Normal file
16
src/client/app/mobile/views/pages/index.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<component :is="os.isSignedIn ? 'home' : 'welcome'"></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Home from './home.vue';
|
||||
import Welcome from './welcome.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
Home,
|
||||
Welcome
|
||||
}
|
||||
});
|
||||
</script>
|
||||
42
src/client/app/mobile/views/pages/messaging-room.vue
Normal file
42
src/client/app/mobile/views/pages/messaging-room.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header">
|
||||
<template v-if="user">%fa:R comments%{{ user.name }}</template>
|
||||
<template v-else><mk-ellipsis/></template>
|
||||
</span>
|
||||
<mk-messaging-room v-if="!fetching" :user="user" :is-naked="true"/>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import parseAcct from '../../../../../common/user/parse-acct';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
user: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: 'fetch'
|
||||
},
|
||||
created() {
|
||||
document.documentElement.style.background = '#fff';
|
||||
this.fetch();
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
this.fetching = true;
|
||||
(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
|
||||
this.user = user;
|
||||
this.fetching = false;
|
||||
|
||||
document.title = `%i18n:mobile.tags.mk-messaging-room-page.message%: ${user.name} | Misskey`;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
23
src/client/app/mobile/views/pages/messaging.vue
Normal file
23
src/client/app/mobile/views/pages/messaging.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header">%fa:R comments%%i18n:mobile.tags.mk-messaging-page.message%</span>
|
||||
<mk-messaging @navigate="navigate" :header-top="48"/>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import getAcct from '../../../../../common/user/get-acct';
|
||||
|
||||
export default Vue.extend({
|
||||
mounted() {
|
||||
document.title = 'Misskey %i18n:mobile.tags.mk-messaging-page.message%';
|
||||
document.documentElement.style.background = '#fff';
|
||||
},
|
||||
methods: {
|
||||
navigate(user) {
|
||||
(this as any).$router.push(`/i/messaging/${getAcct(user)}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
32
src/client/app/mobile/views/pages/notifications.vue
Normal file
32
src/client/app/mobile/views/pages/notifications.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header">%fa:R bell%%i18n:mobile.tags.mk-notifications-page.notifications%</span>
|
||||
<template slot="func"><button @click="fn">%fa:check%</button></template>
|
||||
<mk-notifications @fetched="onFetched"/>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
|
||||
export default Vue.extend({
|
||||
mounted() {
|
||||
document.title = 'Misskey | %i18n:mobile.tags.mk-notifications-page.notifications%';
|
||||
document.documentElement.style.background = '#313a42';
|
||||
|
||||
Progress.start();
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
const ok = window.confirm('%i18n:mobile.tags.mk-notifications-page.read-all%');
|
||||
if (!ok) return;
|
||||
|
||||
(this as any).api('notifications/markAsRead_all');
|
||||
},
|
||||
onFetched() {
|
||||
Progress.done();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
50
src/client/app/mobile/views/pages/othello.vue
Normal file
50
src/client/app/mobile/views/pages/othello.vue
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header">%fa:gamepad%オセロ</span>
|
||||
<mk-othello v-if="!fetching" :init-game="game" @gamed="onGamed"/>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
fetching: false,
|
||||
game: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: 'fetch'
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
mounted() {
|
||||
document.title = 'Misskey オセロ';
|
||||
document.documentElement.style.background = '#fff';
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
if (this.$route.params.game == null) return;
|
||||
|
||||
Progress.start();
|
||||
this.fetching = true;
|
||||
|
||||
(this as any).api('othello/games/show', {
|
||||
gameId: this.$route.params.game
|
||||
}).then(game => {
|
||||
this.game = game;
|
||||
this.fetching = false;
|
||||
|
||||
Progress.done();
|
||||
});
|
||||
},
|
||||
onGamed(game) {
|
||||
history.pushState(null, null, '/othello/' + game.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
85
src/client/app/mobile/views/pages/post.vue
Normal file
85
src/client/app/mobile/views/pages/post.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header">%fa:R sticky-note%%i18n:mobile.tags.mk-post-page.title%</span>
|
||||
<main v-if="!fetching">
|
||||
<a v-if="post.next" :href="post.next">%fa:angle-up%%i18n:mobile.tags.mk-post-page.next%</a>
|
||||
<div>
|
||||
<mk-post-detail :post="post"/>
|
||||
</div>
|
||||
<a v-if="post.prev" :href="post.prev">%fa:angle-down%%i18n:mobile.tags.mk-post-page.prev%</a>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
post: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: 'fetch'
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
mounted() {
|
||||
document.title = 'Misskey';
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
Progress.start();
|
||||
this.fetching = true;
|
||||
|
||||
(this as any).api('posts/show', {
|
||||
postId: this.$route.params.post
|
||||
}).then(post => {
|
||||
this.post = post;
|
||||
this.fetching = false;
|
||||
|
||||
Progress.done();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
main
|
||||
text-align center
|
||||
|
||||
> div
|
||||
margin 8px auto
|
||||
padding 0
|
||||
max-width 500px
|
||||
width calc(100% - 16px)
|
||||
|
||||
@media (min-width 500px)
|
||||
margin 16px auto
|
||||
width calc(100% - 32px)
|
||||
|
||||
> a
|
||||
display inline-block
|
||||
|
||||
&:first-child
|
||||
margin-top 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
margin-top 16px
|
||||
|
||||
&:last-child
|
||||
margin-bottom 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
margin-bottom 16px
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
</style>
|
||||
226
src/client/app/mobile/views/pages/profile-setting.vue
Normal file
226
src/client/app/mobile/views/pages/profile-setting.vue
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header">%fa:user%%i18n:mobile.tags.mk-profile-setting-page.title%</span>
|
||||
<div :class="$style.content">
|
||||
<p>%fa:info-circle%%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
|
||||
<div :class="$style.form">
|
||||
<div :style="os.i.bannerUrl ? `background-image: url(${os.i.bannerUrl}?thumbnail&size=1024)` : ''" @click="setBanner">
|
||||
<img :src="`${os.i.avatarUrl}?thumbnail&size=200`" alt="avatar" @click="setAvatar"/>
|
||||
</div>
|
||||
<label>
|
||||
<p>%i18n:mobile.tags.mk-profile-setting.name%</p>
|
||||
<input v-model="name" type="text"/>
|
||||
</label>
|
||||
<label>
|
||||
<p>%i18n:mobile.tags.mk-profile-setting.location%</p>
|
||||
<input v-model="location" type="text"/>
|
||||
</label>
|
||||
<label>
|
||||
<p>%i18n:mobile.tags.mk-profile-setting.description%</p>
|
||||
<textarea v-model="description"></textarea>
|
||||
</label>
|
||||
<label>
|
||||
<p>%i18n:mobile.tags.mk-profile-setting.birthday%</p>
|
||||
<input v-model="birthday" type="date"/>
|
||||
</label>
|
||||
<label>
|
||||
<p>%i18n:mobile.tags.mk-profile-setting.avatar%</p>
|
||||
<button @click="setAvatar" :disabled="avatarSaving">%i18n:mobile.tags.mk-profile-setting.set-avatar%</button>
|
||||
</label>
|
||||
<label>
|
||||
<p>%i18n:mobile.tags.mk-profile-setting.banner%</p>
|
||||
<button @click="setBanner" :disabled="bannerSaving">%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
|
||||
</label>
|
||||
</div>
|
||||
<button :class="$style.save" @click="save" :disabled="saving">%fa:check%%i18n:mobile.tags.mk-profile-setting.save%</button>
|
||||
</div>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
name: null,
|
||||
location: null,
|
||||
description: null,
|
||||
birthday: null,
|
||||
avatarSaving: false,
|
||||
bannerSaving: false,
|
||||
saving: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.name = (this as any).os.i.name;
|
||||
this.location = (this as any).os.i.account.profile.location;
|
||||
this.description = (this as any).os.i.description;
|
||||
this.birthday = (this as any).os.i.account.profile.birthday;
|
||||
},
|
||||
mounted() {
|
||||
document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%';
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
methods: {
|
||||
setAvatar() {
|
||||
(this as any).apis.chooseDriveFile({
|
||||
multiple: false
|
||||
}).then(file => {
|
||||
this.avatarSaving = true;
|
||||
|
||||
(this as any).api('i/update', {
|
||||
avatarId: file.id
|
||||
}).then(() => {
|
||||
this.avatarSaving = false;
|
||||
alert('%i18n:mobile.tags.mk-profile-setting.avatar-saved%');
|
||||
});
|
||||
});
|
||||
},
|
||||
setBanner() {
|
||||
(this as any).apis.chooseDriveFile({
|
||||
multiple: false
|
||||
}).then(file => {
|
||||
this.bannerSaving = true;
|
||||
|
||||
(this as any).api('i/update', {
|
||||
bannerId: file.id
|
||||
}).then(() => {
|
||||
this.bannerSaving = false;
|
||||
alert('%i18n:mobile.tags.mk-profile-setting.banner-saved%');
|
||||
});
|
||||
});
|
||||
},
|
||||
save() {
|
||||
this.saving = true;
|
||||
|
||||
(this as any).api('i/update', {
|
||||
name: this.name,
|
||||
location: this.location || null,
|
||||
description: this.description || null,
|
||||
birthday: this.birthday || null
|
||||
}).then(() => {
|
||||
this.saving = false;
|
||||
alert('%i18n:mobile.tags.mk-profile-setting.saved%');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
.content
|
||||
margin 8px auto
|
||||
max-width 500px
|
||||
width calc(100% - 16px)
|
||||
|
||||
@media (min-width 500px)
|
||||
margin 16px auto
|
||||
width calc(100% - 32px)
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 0 0 8px 0
|
||||
padding 12px 16px
|
||||
font-size 14px
|
||||
color #79d4e6
|
||||
border solid 1px #71afbb
|
||||
//color #276f86
|
||||
//background #f8ffff
|
||||
//border solid 1px #a9d5de
|
||||
border-radius 8px
|
||||
|
||||
> [data-fa]
|
||||
margin-right 6px
|
||||
|
||||
.form
|
||||
position relative
|
||||
background #fff
|
||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||
border-radius 8px
|
||||
|
||||
&:before
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
bottom -20px
|
||||
left calc(50% - 10px)
|
||||
border-top solid 10px rgba(0, 0, 0, 0.2)
|
||||
border-right solid 10px transparent
|
||||
border-bottom solid 10px transparent
|
||||
border-left solid 10px transparent
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
bottom -16px
|
||||
left calc(50% - 8px)
|
||||
border-top solid 8px #fff
|
||||
border-right solid 8px transparent
|
||||
border-bottom solid 8px transparent
|
||||
border-left solid 8px transparent
|
||||
|
||||
> div
|
||||
height 128px
|
||||
background-color #e4e4e4
|
||||
background-size cover
|
||||
background-position center
|
||||
border-radius 8px 8px 0 0
|
||||
|
||||
> img
|
||||
position absolute
|
||||
top 25px
|
||||
left calc(50% - 40px)
|
||||
width 80px
|
||||
height 80px
|
||||
border solid 2px #fff
|
||||
border-radius 8px
|
||||
|
||||
> label
|
||||
display block
|
||||
margin 0
|
||||
padding 16px
|
||||
border-bottom solid 1px #eee
|
||||
|
||||
&:last-of-type
|
||||
border none
|
||||
|
||||
> p:first-child
|
||||
display block
|
||||
margin 0
|
||||
padding 0 0 4px 0
|
||||
font-weight bold
|
||||
color #2f3c42
|
||||
|
||||
> input[type="text"]
|
||||
> textarea
|
||||
display block
|
||||
width 100%
|
||||
padding 12px
|
||||
font-size 16px
|
||||
color #192427
|
||||
border solid 2px #ddd
|
||||
border-radius 4px
|
||||
|
||||
> textarea
|
||||
min-height 80px
|
||||
|
||||
.save
|
||||
display block
|
||||
margin 8px 0 0 0
|
||||
padding 16px
|
||||
width 100%
|
||||
font-size 16px
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
opacity 0.7
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
</style>
|
||||
93
src/client/app/mobile/views/pages/search.vue
Normal file
93
src/client/app/mobile/views/pages/search.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header">%fa:search% {{ q }}</span>
|
||||
<main v-if="!fetching">
|
||||
<mk-posts :class="$style.posts" :posts="posts">
|
||||
<span v-if="posts.length == 0">{{ '%i18n:mobile.tags.mk-search-posts.empty%'.replace('{}', q) }}</span>
|
||||
<button v-if="existMore" @click="more" :disabled="fetching" slot="tail">
|
||||
<span v-if="!fetching">%i18n:mobile.tags.mk-timeline.load-more%</span>
|
||||
<span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
|
||||
</button>
|
||||
</mk-posts>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
import parse from '../../../common/scripts/parse-search-query';
|
||||
|
||||
const limit = 20;
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
existMore: false,
|
||||
posts: [],
|
||||
offset: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: 'fetch'
|
||||
},
|
||||
computed: {
|
||||
q(): string {
|
||||
return this.$route.query.q;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.q} | Misskey`;
|
||||
document.documentElement.style.background = '#313a42';
|
||||
|
||||
this.fetch();
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
this.fetching = true;
|
||||
Progress.start();
|
||||
|
||||
(this as any).api('posts/search', Object.assign({
|
||||
limit: limit + 1
|
||||
}, parse(this.q))).then(posts => {
|
||||
if (posts.length == limit + 1) {
|
||||
posts.pop();
|
||||
this.existMore = true;
|
||||
}
|
||||
this.posts = posts;
|
||||
this.fetching = false;
|
||||
Progress.done();
|
||||
});
|
||||
},
|
||||
more() {
|
||||
this.offset += limit;
|
||||
(this as any).api('posts/search', Object.assign({
|
||||
limit: limit + 1,
|
||||
offset: this.offset
|
||||
}, parse(this.q))).then(posts => {
|
||||
if (posts.length == limit + 1) {
|
||||
posts.pop();
|
||||
} else {
|
||||
this.existMore = false;
|
||||
}
|
||||
this.posts = this.posts.concat(posts);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.posts
|
||||
margin 8px auto
|
||||
max-width 500px
|
||||
width calc(100% - 16px)
|
||||
background #fff
|
||||
border-radius 8px
|
||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||
|
||||
@media (min-width 500px)
|
||||
margin 16px auto
|
||||
width calc(100% - 32px)
|
||||
</style>
|
||||
96
src/client/app/mobile/views/pages/selectdrive.vue
Normal file
96
src/client/app/mobile/views/pages/selectdrive.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<div class="mk-selectdrive">
|
||||
<header>
|
||||
<h1>%i18n:mobile.tags.mk-selectdrive-page.select-file%<span class="count" v-if="files.length > 0">({{ files.length }})</span></h1>
|
||||
<button class="upload" @click="upload">%fa:upload%</button>
|
||||
<button v-if="multiple" class="ok" @click="ok">%fa:check%</button>
|
||||
</header>
|
||||
<mk-drive ref="browser" select-file :multiple="multiple" is-naked :top="42"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
files: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
multiple(): boolean {
|
||||
const q = (new URL(location.toString())).searchParams;
|
||||
return q.get('multiple') == 'true';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = '%i18n:desktop.tags.mk-selectdrive-page.title%';
|
||||
},
|
||||
methods: {
|
||||
onSelected(file) {
|
||||
this.files = [file];
|
||||
this.ok();
|
||||
},
|
||||
onChangeSelection(files) {
|
||||
this.files = files;
|
||||
},
|
||||
upload() {
|
||||
(this.$refs.browser as any).selectLocalFile();
|
||||
},
|
||||
close() {
|
||||
window.close();
|
||||
},
|
||||
ok() {
|
||||
window.opener.cb(this.multiple ? this.files : this.files[0]);
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-selectdrive
|
||||
width 100%
|
||||
height 100%
|
||||
background #fff
|
||||
|
||||
> header
|
||||
position fixed
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
z-index 1000
|
||||
background #fff
|
||||
box-shadow 0 1px rgba(0, 0, 0, 0.1)
|
||||
|
||||
> h1
|
||||
margin 0
|
||||
padding 0
|
||||
text-align center
|
||||
line-height 42px
|
||||
font-size 1em
|
||||
font-weight normal
|
||||
|
||||
> .count
|
||||
margin-left 4px
|
||||
opacity 0.5
|
||||
|
||||
> .upload
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
line-height 42px
|
||||
width 42px
|
||||
|
||||
> .ok
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
line-height 42px
|
||||
width 42px
|
||||
|
||||
> .mk-drive
|
||||
top 42px
|
||||
|
||||
</style>
|
||||
103
src/client/app/mobile/views/pages/settings.vue
Normal file
103
src/client/app/mobile/views/pages/settings.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header">%fa:cog%%i18n:mobile.tags.mk-settings-page.settings%</span>
|
||||
<div :class="$style.content">
|
||||
<p v-html="'%i18n:mobile.tags.mk-settings.signed-in-as%'.replace('{}', '<b>' + os.i.name + '</b>')"></p>
|
||||
<ul>
|
||||
<li><router-link to="./settings/profile">%fa:user%%i18n:mobile.tags.mk-settings-page.profile%%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="./settings/authorized-apps">%fa:puzzle-piece%%i18n:mobile.tags.mk-settings-page.applications%%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="./settings/twitter">%fa:B twitter%%i18n:mobile.tags.mk-settings-page.twitter-integration%%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="./settings/signin-history">%fa:sign-in-alt%%i18n:mobile.tags.mk-settings-page.signin-history%%fa:angle-right%</router-link></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a @click="signout">%fa:power-off%%i18n:mobile.tags.mk-settings-page.signout%</a></li>
|
||||
</ul>
|
||||
<p><small>ver {{ version }} ({{ codename }})</small></p>
|
||||
</div>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { version, codename } from '../../../config';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
version,
|
||||
codename
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%';
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
methods: {
|
||||
signout() {
|
||||
(this as any).os.signout();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.content
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 24px
|
||||
text-align center
|
||||
color #cad2da
|
||||
|
||||
> ul
|
||||
$radius = 8px
|
||||
|
||||
display block
|
||||
margin 16px auto
|
||||
padding 0
|
||||
max-width 500px
|
||||
width calc(100% - 32px)
|
||||
list-style none
|
||||
background #fff
|
||||
border solid 1px rgba(0, 0, 0, 0.2)
|
||||
border-radius $radius
|
||||
|
||||
> li
|
||||
display block
|
||||
border-bottom solid 1px #ddd
|
||||
|
||||
&:hover
|
||||
background rgba(0, 0, 0, 0.1)
|
||||
|
||||
&:first-child
|
||||
border-top-left-radius $radius
|
||||
border-top-right-radius $radius
|
||||
|
||||
&:last-child
|
||||
border-bottom-left-radius $radius
|
||||
border-bottom-right-radius $radius
|
||||
border-bottom none
|
||||
|
||||
> a
|
||||
$height = 48px
|
||||
|
||||
display block
|
||||
position relative
|
||||
padding 0 16px
|
||||
line-height $height
|
||||
color #4d635e
|
||||
|
||||
> [data-fa]:nth-of-type(1)
|
||||
margin-right 4px
|
||||
|
||||
> [data-fa]:nth-of-type(2)
|
||||
display block
|
||||
position absolute
|
||||
top 0
|
||||
right 8px
|
||||
z-index 1
|
||||
padding 0 20px
|
||||
font-size 1.2em
|
||||
line-height $height
|
||||
|
||||
</style>
|
||||
57
src/client/app/mobile/views/pages/signup.vue
Normal file
57
src/client/app/mobile/views/pages/signup.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div class="signup">
|
||||
<h1>Misskeyをはじめる</h1>
|
||||
<p>いつでも、どこからでもMisskeyを利用できます。もちろん、無料です。</p>
|
||||
<div class="form">
|
||||
<p>新規登録</p>
|
||||
<div>
|
||||
<mk-signup/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
mounted() {
|
||||
document.documentElement.style.background = '#293946';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.signup
|
||||
padding 16px
|
||||
margin 0 auto
|
||||
max-width 500px
|
||||
|
||||
h1
|
||||
margin 0
|
||||
padding 8px
|
||||
font-size 1.5em
|
||||
font-weight normal
|
||||
color #c3c6ca
|
||||
|
||||
& + p
|
||||
margin 0 0 16px 0
|
||||
padding 0 8px 0 8px
|
||||
color #949fa9
|
||||
|
||||
.form
|
||||
background #fff
|
||||
border solid 1px rgba(0, 0, 0, 0.2)
|
||||
border-radius 8px
|
||||
overflow hidden
|
||||
|
||||
> p
|
||||
margin 0
|
||||
padding 12px 20px
|
||||
color #555
|
||||
background #f5f5f5
|
||||
border-bottom solid 1px #ddd
|
||||
|
||||
> div
|
||||
padding 16px
|
||||
|
||||
</style>
|
||||
247
src/client/app/mobile/views/pages/user.vue
Normal file
247
src/client/app/mobile/views/pages/user.vue
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header" v-if="!fetching">%fa:user% {{ user.name }}</span>
|
||||
<main v-if="!fetching">
|
||||
<header>
|
||||
<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=1024)` : ''"></div>
|
||||
<div class="body">
|
||||
<div class="top">
|
||||
<a class="avatar">
|
||||
<img :src="`${user.avatarUrl}?thumbnail&size=200`" alt="avatar"/>
|
||||
</a>
|
||||
<mk-follow-button v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
|
||||
</div>
|
||||
<div class="title">
|
||||
<h1>{{ user.name }}</h1>
|
||||
<span class="username">@{{ acct }}</span>
|
||||
<span class="followed" v-if="user.isFollowed">%i18n:mobile.tags.mk-user.follows-you%</span>
|
||||
</div>
|
||||
<div class="description">{{ user.description }}</div>
|
||||
<div class="info">
|
||||
<p class="location" v-if="user.host === null && user.account.profile.location">
|
||||
%fa:map-marker%{{ user.account.profile.location }}
|
||||
</p>
|
||||
<p class="birthday" v-if="user.host === null && user.account.profile.birthday">
|
||||
%fa:birthday-cake%{{ user.account.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)
|
||||
</p>
|
||||
</div>
|
||||
<div class="status">
|
||||
<a>
|
||||
<b>{{ user.postsCount | number }}</b>
|
||||
<i>%i18n:mobile.tags.mk-user.posts%</i>
|
||||
</a>
|
||||
<a :href="`@${acct}/following`">
|
||||
<b>{{ user.followingCount | number }}</b>
|
||||
<i>%i18n:mobile.tags.mk-user.following%</i>
|
||||
</a>
|
||||
<a :href="`@${acct}/followers`">
|
||||
<b>{{ user.followersCount | number }}</b>
|
||||
<i>%i18n:mobile.tags.mk-user.followers%</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="nav-container">
|
||||
<a :data-is-active=" page == 'home' " @click="page = 'home'">%i18n:mobile.tags.mk-user.overview%</a>
|
||||
<a :data-is-active=" page == 'posts' " @click="page = 'posts'">%i18n:mobile.tags.mk-user.timeline%</a>
|
||||
<a :data-is-active=" page == 'media' " @click="page = 'media'">%i18n:mobile.tags.mk-user.media%</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="body">
|
||||
<x-home v-if="page == 'home'" :user="user"/>
|
||||
<mk-user-timeline v-if="page == 'posts'" :user="user"/>
|
||||
<mk-user-timeline v-if="page == 'media'" :user="user" with-media/>
|
||||
</div>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import * as age from 's-age';
|
||||
import getAcct from '../../../../../common/user/get-acct';
|
||||
import getAcct from '../../../../../common/user/parse-acct';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
import XHome from './user/home.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XHome
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
user: null,
|
||||
page: 'home'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
acct() {
|
||||
return this.getAcct(this.user);
|
||||
},
|
||||
age(): number {
|
||||
return age(this.user.account.profile.birthday);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: 'fetch'
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
mounted() {
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
Progress.start();
|
||||
|
||||
(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
|
||||
this.user = user;
|
||||
this.fetching = false;
|
||||
|
||||
Progress.done();
|
||||
document.title = user.name + ' | Misskey';
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
main
|
||||
> header
|
||||
|
||||
> .banner
|
||||
padding-bottom 33.3%
|
||||
background-color #1b1b1b
|
||||
background-size cover
|
||||
background-position center
|
||||
|
||||
> .body
|
||||
padding 12px
|
||||
margin 0 auto
|
||||
max-width 600px
|
||||
|
||||
> .top
|
||||
&:after
|
||||
content ''
|
||||
display block
|
||||
clear both
|
||||
|
||||
> .avatar
|
||||
display block
|
||||
float left
|
||||
width 25%
|
||||
height 40px
|
||||
|
||||
> img
|
||||
display block
|
||||
position absolute
|
||||
left -2px
|
||||
bottom -2px
|
||||
width 100%
|
||||
border 3px solid #313a42
|
||||
border-radius 6px
|
||||
|
||||
@media (min-width 500px)
|
||||
left -4px
|
||||
bottom -4px
|
||||
border 4px solid #313a42
|
||||
border-radius 12px
|
||||
|
||||
> .mk-follow-button
|
||||
float right
|
||||
height 40px
|
||||
|
||||
> .title
|
||||
margin 8px 0
|
||||
|
||||
> h1
|
||||
margin 0
|
||||
line-height 22px
|
||||
font-size 20px
|
||||
color #fff
|
||||
|
||||
> .username
|
||||
display inline-block
|
||||
line-height 20px
|
||||
font-size 16px
|
||||
font-weight bold
|
||||
color #657786
|
||||
|
||||
> .followed
|
||||
margin-left 8px
|
||||
padding 2px 4px
|
||||
font-size 12px
|
||||
color #657786
|
||||
background #f8f8f8
|
||||
border-radius 4px
|
||||
|
||||
> .description
|
||||
margin 8px 0
|
||||
color #fff
|
||||
|
||||
> .info
|
||||
margin 8px 0
|
||||
|
||||
> p
|
||||
display inline
|
||||
margin 0 16px 0 0
|
||||
color #a9b9c1
|
||||
|
||||
> i
|
||||
margin-right 4px
|
||||
|
||||
> .status
|
||||
> a
|
||||
color #657786
|
||||
|
||||
&:not(:last-child)
|
||||
margin-right 16px
|
||||
|
||||
> b
|
||||
margin-right 4px
|
||||
font-size 16px
|
||||
color #fff
|
||||
|
||||
> i
|
||||
font-size 14px
|
||||
|
||||
> nav
|
||||
position sticky
|
||||
top 48px
|
||||
box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
|
||||
background-color #313a42
|
||||
z-index 1
|
||||
> .nav-container
|
||||
display flex
|
||||
justify-content center
|
||||
margin 0 auto
|
||||
max-width 600px
|
||||
|
||||
> a
|
||||
display block
|
||||
flex 1 1
|
||||
text-align center
|
||||
line-height 52px
|
||||
font-size 14px
|
||||
text-decoration none
|
||||
color #657786
|
||||
border-bottom solid 2px transparent
|
||||
|
||||
&[data-is-active]
|
||||
font-weight bold
|
||||
color $theme-color
|
||||
border-color $theme-color
|
||||
|
||||
> .body
|
||||
padding 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 16px
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="root followers-you-know">
|
||||
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-followers-you-know.loading%<mk-ellipsis/></p>
|
||||
<div v-if="!fetching && users.length > 0">
|
||||
<a v-for="user in users" :key="user.id" :href="`/@${getAcct(user)}`">
|
||||
<img :src="`${user.avatarUrl}?thumbnail&size=64`" :alt="user.name"/>
|
||||
</a>
|
||||
</div>
|
||||
<p class="empty" v-if="!fetching && users.length == 0">%i18n:mobile.tags.mk-user-overview-followers-you-know.no-users%</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import getAcct from '../../../../../../common/user/get-acct';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['user'],
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
users: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getAcct
|
||||
},
|
||||
mounted() {
|
||||
(this as any).api('users/followers', {
|
||||
userId: this.user.id,
|
||||
iknow: true,
|
||||
limit: 30
|
||||
}).then(res => {
|
||||
this.fetching = false;
|
||||
this.users = res.users;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.root.followers-you-know
|
||||
|
||||
> div
|
||||
padding 4px
|
||||
|
||||
> a
|
||||
display inline-block
|
||||
margin 4px
|
||||
|
||||
> img
|
||||
width 48px
|
||||
height 48px
|
||||
vertical-align bottom
|
||||
border-radius 100%
|
||||
|
||||
> .initializing
|
||||
> .empty
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> i
|
||||
margin-right 4px
|
||||
|
||||
</style>
|
||||
54
src/client/app/mobile/views/pages/user/home.friends.vue
Normal file
54
src/client/app/mobile/views/pages/user/home.friends.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<div class="root friends">
|
||||
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-frequently-replied-users.loading%<mk-ellipsis/></p>
|
||||
<div v-if="!fetching && users.length > 0">
|
||||
<mk-user-card v-for="user in users" :key="user.id" :user="user"/>
|
||||
</div>
|
||||
<p class="empty" v-if="!fetching && users.length == 0">%i18n:mobile.tags.mk-user-overview-frequently-replied-users.no-users%</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
props: ['user'],
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
users: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
(this as any).api('users/get_frequently_replied_users', {
|
||||
userId: this.user.id
|
||||
}).then(res => {
|
||||
this.users = res.map(x => x.user);
|
||||
this.fetching = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.root.friends
|
||||
> div
|
||||
overflow-x scroll
|
||||
-webkit-overflow-scrolling touch
|
||||
white-space nowrap
|
||||
padding 8px
|
||||
|
||||
> .mk-user-card
|
||||
&:not(:last-child)
|
||||
margin-right 8px
|
||||
|
||||
> .fetching
|
||||
> .empty
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> i
|
||||
margin-right 4px
|
||||
|
||||
</style>
|
||||
83
src/client/app/mobile/views/pages/user/home.photos.vue
Normal file
83
src/client/app/mobile/views/pages/user/home.photos.vue
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div class="root photos">
|
||||
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-photos.loading%<mk-ellipsis/></p>
|
||||
<div class="stream" v-if="!fetching && images.length > 0">
|
||||
<a v-for="image in images"
|
||||
class="img"
|
||||
:style="`background-image: url(${image.media.url}?thumbnail&size=256)`"
|
||||
:href="`/@${getAcct(image.post.user)}/${image.post.id}`"
|
||||
></a>
|
||||
</div>
|
||||
<p class="empty" v-if="!fetching && images.length == 0">%i18n:mobile.tags.mk-user-overview-photos.no-photos%</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import getAcct from '../../../../../../common/user/get-acct';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['user'],
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
images: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getAcct
|
||||
},
|
||||
mounted() {
|
||||
(this as any).api('users/posts', {
|
||||
userId: this.user.id,
|
||||
withMedia: true,
|
||||
limit: 6
|
||||
}).then(posts => {
|
||||
posts.forEach(post => {
|
||||
post.media.forEach(media => {
|
||||
if (this.images.length < 9) this.images.push({
|
||||
post,
|
||||
media
|
||||
});
|
||||
});
|
||||
});
|
||||
this.fetching = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.root.photos
|
||||
|
||||
> .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
|
||||
border-radius 4px
|
||||
|
||||
> .initializing
|
||||
> .empty
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> i
|
||||
margin-right 4px
|
||||
|
||||
</style>
|
||||
|
||||
57
src/client/app/mobile/views/pages/user/home.posts.vue
Normal file
57
src/client/app/mobile/views/pages/user/home.posts.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div class="root posts">
|
||||
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-posts.loading%<mk-ellipsis/></p>
|
||||
<div v-if="!fetching && posts.length > 0">
|
||||
<mk-post-card v-for="post in posts" :key="post.id" :post="post"/>
|
||||
</div>
|
||||
<p class="empty" v-if="!fetching && posts.length == 0">%i18n:mobile.tags.mk-user-overview-posts.no-posts%</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
props: ['user'],
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
posts: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
(this as any).api('users/posts', {
|
||||
userId: this.user.id
|
||||
}).then(posts => {
|
||||
this.posts = posts;
|
||||
this.fetching = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.root.posts
|
||||
|
||||
> div
|
||||
overflow-x scroll
|
||||
-webkit-overflow-scrolling touch
|
||||
white-space nowrap
|
||||
padding 8px
|
||||
|
||||
> *
|
||||
vertical-align top
|
||||
|
||||
&:not(:last-child)
|
||||
margin-right 8px
|
||||
|
||||
> .fetching
|
||||
> .empty
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> i
|
||||
margin-right 4px
|
||||
|
||||
</style>
|
||||
94
src/client/app/mobile/views/pages/user/home.vue
Normal file
94
src/client/app/mobile/views/pages/user/home.vue
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div class="root home">
|
||||
<mk-post-detail v-if="user.pinnedPost" :post="user.pinnedPost" :compact="true"/>
|
||||
<section class="recent-posts">
|
||||
<h2>%fa:R comments%%i18n:mobile.tags.mk-user-overview.recent-posts%</h2>
|
||||
<div>
|
||||
<x-posts :user="user"/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="images">
|
||||
<h2>%fa:image%%i18n:mobile.tags.mk-user-overview.images%</h2>
|
||||
<div>
|
||||
<x-photos :user="user"/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="activity">
|
||||
<h2>%fa:chart-bar%%i18n:mobile.tags.mk-user-overview.activity%</h2>
|
||||
<div>
|
||||
<mk-activity :user="user"/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="frequently-replied-users">
|
||||
<h2>%fa:users%%i18n:mobile.tags.mk-user-overview.frequently-replied-users%</h2>
|
||||
<div>
|
||||
<x-friends :user="user"/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="followers-you-know" v-if="os.isSignedIn && os.i.id !== user.id">
|
||||
<h2>%fa:users%%i18n:mobile.tags.mk-user-overview.followers-you-know%</h2>
|
||||
<div>
|
||||
<x-followers-you-know :user="user"/>
|
||||
</div>
|
||||
</section>
|
||||
<p v-if="user.host === null">%i18n:mobile.tags.mk-user-overview.last-used-at%: <b><mk-time :time="user.account.lastUsedAt"/></b></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import XPosts from './home.posts.vue';
|
||||
import XPhotos from './home.photos.vue';
|
||||
import XFriends from './home.friends.vue';
|
||||
import XFollowersYouKnow from './home.followers-you-know.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XPosts,
|
||||
XPhotos,
|
||||
XFriends,
|
||||
XFollowersYouKnow
|
||||
},
|
||||
props: ['user']
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.root.home
|
||||
max-width 600px
|
||||
margin 0 auto
|
||||
|
||||
> .mk-post-detail
|
||||
margin 0 0 8px 0
|
||||
|
||||
> section
|
||||
background #eee
|
||||
border-radius 8px
|
||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||
|
||||
&:not(:last-child)
|
||||
margin-bottom 8px
|
||||
|
||||
> h2
|
||||
margin 0
|
||||
padding 8px 10px
|
||||
font-size 15px
|
||||
font-weight normal
|
||||
color #465258
|
||||
background #fff
|
||||
border-radius 8px 8px 0 0
|
||||
|
||||
> i
|
||||
margin-right 6px
|
||||
|
||||
> .activity
|
||||
> div
|
||||
padding 8px
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 16px
|
||||
text-align center
|
||||
color #cad2da
|
||||
|
||||
</style>
|
||||
206
src/client/app/mobile/views/pages/welcome.vue
Normal file
206
src/client/app/mobile/views/pages/welcome.vue
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
<template>
|
||||
<div class="welcome">
|
||||
<h1><b>Misskey</b>へようこそ</h1>
|
||||
<p>Twitter風ミニブログSNS、Misskeyへようこそ。共有したいことを投稿したり、タイムラインでみんなの投稿を読むこともできます。<br><a href="/signup">アカウントを作成する</a></p>
|
||||
<div class="form">
|
||||
<p>%fa:lock% ログイン</p>
|
||||
<div>
|
||||
<form @submit.prevent="onSubmit">
|
||||
<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange"/>
|
||||
<input v-model="password" type="password" placeholder="パスワード" required/>
|
||||
<input v-if="user && user.account.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/>
|
||||
<button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</button>
|
||||
</form>
|
||||
<div>
|
||||
<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tl">
|
||||
<p>%fa:comments R% タイムラインを見てみる</p>
|
||||
<mk-welcome-timeline/>
|
||||
</div>
|
||||
<div class="users">
|
||||
<router-link v-for="user in users" :key="user.id" class="avatar-anchor" :to="`/@${user.username}`">
|
||||
<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
|
||||
</router-link>
|
||||
</div>
|
||||
<footer>
|
||||
<small>{{ copyright }}</small>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { apiUrl, copyright } from '../../../config';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
signing: false,
|
||||
user: null,
|
||||
username: '',
|
||||
password: '',
|
||||
token: '',
|
||||
apiUrl,
|
||||
copyright,
|
||||
users: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
(this as any).api('users', {
|
||||
sort: '+follower',
|
||||
limit: 20
|
||||
}).then(users => {
|
||||
this.users = users;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onUsernameChange() {
|
||||
(this as any).api('users/show', {
|
||||
username: this.username
|
||||
}).then(user => {
|
||||
this.user = user;
|
||||
});
|
||||
},
|
||||
onSubmit() {
|
||||
this.signing = true;
|
||||
|
||||
(this as any).api('signin', {
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
token: this.user && this.user.account.twoFactorEnabled ? this.token : undefined
|
||||
}).then(() => {
|
||||
location.reload();
|
||||
}).catch(() => {
|
||||
alert('something happened');
|
||||
this.signing = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.welcome
|
||||
padding 16px
|
||||
margin 0 auto
|
||||
max-width 500px
|
||||
|
||||
h1
|
||||
margin 0
|
||||
padding 8px
|
||||
font-size 1.5em
|
||||
font-weight normal
|
||||
color #cacac3
|
||||
|
||||
& + p
|
||||
margin 0 0 16px 0
|
||||
padding 0 8px 0 8px
|
||||
color #949fa9
|
||||
|
||||
.form
|
||||
margin-bottom 16px
|
||||
background #fff
|
||||
border solid 1px rgba(0, 0, 0, 0.2)
|
||||
border-radius 8px
|
||||
overflow hidden
|
||||
|
||||
> p
|
||||
margin 0
|
||||
padding 12px 20px
|
||||
color #555
|
||||
background #f5f5f5
|
||||
border-bottom solid 1px #ddd
|
||||
|
||||
> div
|
||||
|
||||
> form
|
||||
padding 16px
|
||||
border-bottom solid 1px #ddd
|
||||
|
||||
input
|
||||
display block
|
||||
padding 12px
|
||||
margin 0 0 16px 0
|
||||
width 100%
|
||||
font-size 1em
|
||||
color rgba(0, 0, 0, 0.7)
|
||||
background #fff
|
||||
outline none
|
||||
border solid 1px #ddd
|
||||
border-radius 4px
|
||||
|
||||
button
|
||||
display block
|
||||
width 100%
|
||||
padding 10px
|
||||
margin 0
|
||||
color #333
|
||||
font-size 1em
|
||||
text-align center
|
||||
text-decoration none
|
||||
text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
|
||||
background-image linear-gradient(#fafafa, #eaeaea)
|
||||
border 1px solid #ddd
|
||||
border-bottom-color #cecece
|
||||
border-radius 4px
|
||||
|
||||
&:active
|
||||
background-color #767676
|
||||
background-image none
|
||||
border-color #444
|
||||
box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
|
||||
|
||||
> div
|
||||
padding 16px
|
||||
text-align center
|
||||
|
||||
> .tl
|
||||
background #fff
|
||||
border solid 1px rgba(0, 0, 0, 0.2)
|
||||
border-radius 8px
|
||||
overflow hidden
|
||||
|
||||
> p
|
||||
margin 0
|
||||
padding 12px 20px
|
||||
color #555
|
||||
background #f5f5f5
|
||||
border-bottom solid 1px #ddd
|
||||
|
||||
> .mk-welcome-timeline
|
||||
max-height 300px
|
||||
overflow auto
|
||||
|
||||
> .users
|
||||
margin 12px 0 0 0
|
||||
|
||||
> *
|
||||
display inline-block
|
||||
margin 4px
|
||||
|
||||
> *
|
||||
display inline-block
|
||||
width 38px
|
||||
height 38px
|
||||
vertical-align top
|
||||
border-radius 6px
|
||||
|
||||
> footer
|
||||
text-align center
|
||||
color #fff
|
||||
|
||||
> small
|
||||
display block
|
||||
margin 16px 0 0 0
|
||||
opacity 0.7
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus">
|
||||
html
|
||||
body
|
||||
background linear-gradient(to bottom, #1e1d65, #bd6659)
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue