rudeshark.net/src/client/app/mobile/views/pages/home.vue

110 lines
2.2 KiB
Vue
Raw Normal View History

2018-02-15 09:50:19 +01:00
<template>
2018-02-23 18:46:09 +01:00
<mk-ui>
2018-04-26 07:01:41 +02:00
<span slot="header" @click="showNav = true">
<span>
<span v-if="src == 'home'">%fa:home%ホーム</span>
<span v-if="src == 'local'">%fa:R comments%ローカル</span>
<span v-if="src == 'global'">%fa:globe%グローバル</span>
<span v-if="src == 'list'">%fa:list%{{ list.title }}</span>
</span>
2018-02-23 18:46:09 +01:00
<span style="margin-left:8px">
2018-04-26 07:01:41 +02:00
<template v-if="!showNav">%fa:angle-down%</template>
2018-02-23 18:46:09 +01:00
<template v-else>%fa:angle-up%</template>
</span>
</span>
2018-04-26 07:01:41 +02:00
2018-02-23 18:46:09 +01:00
<template slot="func">
2018-04-26 07:01:41 +02:00
<button @click="fn">%fa:pencil-alt%</button>
2018-02-23 18:46:09 +01:00
</template>
2018-04-26 07:01:41 +02:00
2018-02-23 18:46:09 +01:00
<main>
2018-04-26 07:01:41 +02:00
<div class="nav" v-if="showNav">
<div class="bg" @click="showNav = false"></div>
<div class="body">
<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
<span :data-is-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
</div>
2018-02-23 18:46:09 +01:00
</div>
2018-04-26 07:01:41 +02:00
<div class="tl">
<x-tl v-if="src == 'home'" ref="tl" key="home" src="home" @loaded="onLoaded"/>
<x-tl v-if="src == 'local'" ref="tl" key="local" src="local"/>
<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
<mk-user-list-timeline v-if="src == 'list'" ref="tl" key="list" :list="list"/>
2018-02-23 18:46:09 +01:00
</div>
</main>
2018-02-15 09:50:19 +01:00
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import Progress from '../../../common/scripts/loading';
2018-04-26 07:01:41 +02:00
import XTl from './home.timeline.vue';
2018-02-15 09:50:19 +01:00
export default Vue.extend({
2018-02-23 18:46:09 +01:00
components: {
2018-04-26 07:01:41 +02:00
XTl
2018-02-23 18:46:09 +01:00
},
2018-04-26 07:01:41 +02:00
2018-02-15 09:50:19 +01:00
data() {
return {
2018-04-26 07:01:41 +02:00
src: 'home',
list: null,
showNav: false
2018-02-15 09:50:19 +01:00
};
},
2018-02-23 19:03:26 +01:00
2018-02-15 09:50:19 +01:00
mounted() {
document.title = 'Misskey';
document.documentElement.style.background = '#313a42';
Progress.start();
},
2018-04-26 07:01:41 +02:00
2018-02-15 09:50:19 +01:00
methods: {
fn() {
2018-02-21 19:11:24 +01:00
(this as any).apis.post();
2018-02-15 09:50:19 +01:00
},
2018-04-26 07:01:41 +02:00
2018-02-23 18:46:09 +01:00
onLoaded() {
2018-02-15 09:50:19 +01:00
Progress.done();
},
2018-02-23 18:46:09 +01:00
warp() {
2018-02-15 09:50:19 +01:00
}
}
});
</script>
2018-02-23 18:46:09 +01:00
<style lang="stylus" scoped>
main
2018-04-26 07:01:41 +02:00
> .nav
> .bg
position fixed
z-index 10000
top 0
left 0
width 100%
height 100%
background rgba(#000, 0.5)
> .body
position fixed
z-index 10001
top 48px
left 0
background #fff
border-radius 8px
2018-02-23 18:46:09 +01:00
> .tl
2018-04-26 07:01:41 +02:00
max-width 600px
2018-02-23 18:46:09 +01:00
margin 0 auto
2018-04-26 07:01:41 +02:00
padding 8px
2018-02-23 18:46:09 +01:00
2018-02-23 19:30:13 +01:00
@media (min-width 500px)
2018-04-26 07:01:41 +02:00
padding 16px
2018-02-23 18:46:09 +01:00
</style>