wip

src/client/app/desktop/views/pages/deck/deck.column.vue

@@ -0,0 +1,59 @@
+<template>
+<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs">
+	<header>
+		<slot name="header">Timeline</slot>
+	</header>
+	<div ref="body">
+		<x-tl ref="tl"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XTl from './deck.tl.vue';
+
+export default Vue.extend({
+	components: {
+		XTl
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.$refs.tl.mount(this.$refs.body);
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark)
+	flex 1
+	max-width 330px
+	height 100%
+	margin-right 16px
+	background isDark ? #282C37 : #fff
+	border-radius 6px
+	box-shadow 0 2px 16px rgba(#000, 0.1)
+	overflow hidden
+
+	> header
+		z-index 1
+		line-height 48px
+		padding 0 16px
+		color isDark ? #e3e5e8 : #888
+		background isDark ? #313543 : #fff
+		box-shadow 0 1px rgba(#000, 0.15)
+
+	> div
+		height calc(100% - 48px)
+		overflow auto
+
+.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs[data-darkmode]
+	root(true)
+
+.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs:not([data-darkmode])
+	root(false)
+
+</style>