wip

src/web/app/mobile/script.ts

@@ -26,6 +26,8 @@ import MkPost from './views/pages/post.vue';
 import MkSearch from './views/pages/search.vue';
 import MkFollowers from './views/pages/followers.vue';
 import MkFollowing from './views/pages/following.vue';
+import MkSettings from './views/pages/settings.vue';
+import MkProfileSetting from './views/pages/profile-setting.vue';
 
 /**
  * init
@@ -54,6 +56,8 @@ init((launch) => {
 	app.$router.addRoutes([
 		{ path: '/', name: 'index', component: MkIndex },
 		{ path: '/signup', name: 'signup', component: MkSignup },
+		{ path: '/i/settings', component: MkSettings },
+		{ path: '/i/settings/profile', component: MkProfileSetting },
 		{ path: '/i/notifications', component: MkNotifications },
 		{ path: '/i/messaging', component: MkMessaging },
 		{ path: '/i/messaging/:username', component: MkMessagingRoom },

src/web/app/mobile/views/pages/profile-setting.vue

 <template>
 <mk-ui>
 	<span slot="header">%fa:user%%i18n:mobile.tags.mk-profile-setting-page.title%</span>
-	<div class="$style.content">
+	<div :class="$style.content">
 		<p>%fa:info-circle%%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
-		<div class="$style.form">
+		<div :class="$style.form">
 			<div :style="os.i.banner_url ? `background-image: url(${os.i.banner_url}?thumbnail&size=1024)` : ''" @click="setBanner">
 				<img :src="`${os.i.avatar_url}?thumbnail&size=200`" alt="avatar" @click="setAvatar"/>
 			</div>
@@ -32,7 +32,7 @@
 				<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>
+		<button :class="$style.save" @click="save" :disabled="saving">%fa:check%%i18n:mobile.tags.mk-profile-setting.save%</button>
 	</div>
 </mk-ui>
 </template>
@@ -42,15 +42,21 @@ import Vue from 'vue';
 export default Vue.extend({
 	data() {
 		return {
-			name: (this as any).os.i.name,
-			location: (this as any).os.i.profile.location,
-			description: (this as any).os.i.description,
-			birthday: (this as any).os.i.profile.birthday,
+			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.profile.location;
+		this.description = (this as any).os.i.description;
+		this.birthday = (this as any).os.i.profile.birthday;
+	},
 	mounted() {
 		document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%';
 		document.documentElement.style.background = '#313a42';
@@ -101,7 +107,7 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="stylus" scoped>
+<style lang="stylus" module>
 .content
 	margin 8px auto
 	max-width 500px

src/web/app/mobile/views/pages/settings.vue

 <template>
 <mk-ui>
 	<span slot="header">%fa:cog%%i18n:mobile.tags.mk-settings-page.settings%</span>
-	<div class="$style.content">
+	<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%</a></li>
+			<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>
@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { version } from '../../../../config';
+import { version } from '../../../config';
 
 export default Vue.extend({
 	data() {