wip

1 files changed, 98 insertions, 101 deletions

diff --git a/src/web/app/common/views/components/url-preview.vue b/src/web/app/common/views/components/url-preview.vue
index 88158db845..b846346179 100644
--- a/src/web/app/common/views/components/url-preview.vue
+++ b/src/web/app/common/views/components/url-preview.vue
@@ -1,126 +1,123 @@
 <template>
-	<a :href="url" target="_blank" :title="url" v-if="!fetching">
-		<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
-		<article>
-			<header>
-				<h1>{{ title }}</h1>
-			</header>
-			<p>{{ description }}</p>
-			<footer>
-				<img class="icon" v-if="icon" :src="icon"/>
-				<p>{{ sitename }}</p>
-			</footer>
-		</article>
-	</a>
+<a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching">
+	<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
+	<article>
+		<header>
+			<h1>{{ title }}</h1>
+		</header>
+		<p>{{ description }}</p>
+		<footer>
+			<img class="icon" v-if="icon" :src="icon"/>
+			<p>{{ sitename }}</p>
+		</footer>
+	</article>
+</a>
 </template>
 
-<script lang="typescript">
-	export default {
-		props: ['url'],
-		data() {
-			return {
-				fetching: true,
-				title: null,
-				description: null,
-				thumbnail: null,
-				icon: null,
-				sitename: null
-			};
-		},
-		created() {
-			fetch('/api:url?url=' + this.url).then(res => {
-				res.json().then(info => {
-					this.title = info.title;
-					this.description = info.description;
-					this.thumbnail = info.thumbnail;
-					this.icon = info.icon;
-					this.sitename = info.sitename;
+<script lang="ts">
+import Vue from 'vue';
 
-					this.fetching = false;
-				});
+export default Vue.extend({
+	props: ['url'],
+	data() {
+		return {
+			fetching: true,
+			title: null,
+			description: null,
+			thumbnail: null,
+			icon: null,
+			sitename: null
+		};
+	},
+	created() {
+		fetch('/api:url?url=' + this.url).then(res => {
+			res.json().then(info => {
+				this.title = info.title;
+				this.description = info.description;
+				this.thumbnail = info.thumbnail;
+				this.icon = info.icon;
+				this.sitename = info.sitename;
+
+				this.fetching = false;
 			});
-		}
-	};
+		});
+	}
+});
 </script>
 
 <style lang="stylus" scoped>
-	:scope
-		display block
-		font-size 16px
-
-		> a
-			display block
-			border solid 1px #eee
-			border-radius 4px
-			overflow hidden
-
-			&:hover
-				text-decoration none
-				border-color #ddd
+.mk-url-preview
+	display block
+	font-size 16px
+	border solid 1px #eee
+	border-radius 4px
+	overflow hidden
 
-				> article > header > h1
-					text-decoration underline
+	&:hover
+		text-decoration none
+		border-color #ddd
 
-			> .thumbnail
-				position absolute
-				width 100px
-				height 100%
-				background-position center
-				background-size cover
+		> article > header > h1
+			text-decoration underline
 
-				& + article
-					left 100px
-					width calc(100% - 100px)
+	> .thumbnail
+		position absolute
+		width 100px
+		height 100%
+		background-position center
+		background-size cover
 
-			> article
-				padding 16px
+		& + article
+			left 100px
+			width calc(100% - 100px)
 
-				> header
-					margin-bottom 8px
+	> article
+		padding 16px
 
-					> h1
-						margin 0
-						font-size 1em
-						color #555
+		> header
+			margin-bottom 8px
 
-				> p
-					margin 0
-					color #777
-					font-size 0.8em
+			> h1
+				margin 0
+				font-size 1em
+				color #555
 
-				> footer
-					margin-top 8px
-					height 16px
+		> p
+			margin 0
+			color #777
+			font-size 0.8em
 
-					> img
-						display inline-block
-						width 16px
-						height 16px
-						margin-right 4px
-						vertical-align top
+		> footer
+			margin-top 8px
+			height 16px
 
-					> p
-						display inline-block
-						margin 0
-						color #666
-						font-size 0.8em
-						line-height 16px
-						vertical-align top
+			> img
+				display inline-block
+				width 16px
+				height 16px
+				margin-right 4px
+				vertical-align top
 
-		@media (max-width 500px)
-			font-size 8px
+			> p
+				display inline-block
+				margin 0
+				color #666
+				font-size 0.8em
+				line-height 16px
+				vertical-align top
 
-			> a
-				border none
+	@media (max-width 500px)
+		font-size 8px
+		border none
 
-				> .thumbnail
-					width 70px
+		> .thumbnail
+			width 70px
 
-					& + article
-						left 70px
-						width calc(100% - 70px)
+			& + article
+				left 70px
+				width calc(100% - 70px)
 
-				> article
-					padding 8px
+		> article
+			padding 8px
 
 </style>