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

<template>
<mk-ui>
	<span slot="header"><span style="margin-right:4px;">%fa:R bell%</span>%i18n:@notifications%</span>
	<template slot="func"><button @click="fn">%fa:check%</button></template>

	<main>
		<mk-notifications @fetched="onFetched"/>
	</main>
</mk-ui>
</template>

<script lang="ts">
import Vue from 'vue';
import Progress from '../../../common/scripts/loading';

export default Vue.extend({
	mounted() {
		document.title = '%i18n:@notifications%';

		Progress.start();
	},
	methods: {
		fn() {
			const ok = window.confirm('%i18n:@read-all%');
			if (!ok) return;

			(this as any).api('notifications/mark_all_as_read');
		},
		onFetched() {
			Progress.done();
		}
	}
});
</script>

<style lang="stylus" scoped>


main
	width 100%
	max-width 680px
	margin 0 auto
	padding 8px

	@media (min-width 500px)
		padding 16px

	@media (min-width 600px)
		padding 32px

</style>