pepepper/tissue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

画像を含まないメタデータの場合、サムネイルを非表示にする

Browse Source
This commit is contained in:
shibafu 2019-06-27 23:48:19 +09:00
parent d8cdf218b7
commit 0aed1d9ebe
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/assets/js/components/MetadataPreview.vue
View File

@ -3,10 +3,10 @@
<div class="form-group col-sm-12"> <div class="form-group col-sm-12">
<div class="card link-card-mini mb-2 px-0"> <div class="card link-card-mini mb-2 px-0">
<div class="row no-gutters"> <div class="row no-gutters">
<div class="col-4 justify-content-center align-items-center"> <div v-if="hasImage" class="col-4 justify-content-center align-items-center">
<img :src="metadata.image" alt="Thumbnail" class="card-img-top-to-left bg-secondary"> <img :src="metadata.image" alt="Thumbnail" class="card-img-top-to-left bg-secondary">
</div> </div>
<div class="col-8"> <div :class="descClasses">
<div class="card-body"> <div class="card-body">
<h6 class="card-title font-weight-bold" style="font-size: small;">{{ metadata.title }}</h6> <h6 class="card-title font-weight-bold" style="font-size: small;">{{ metadata.title }}</h6>
<template v-if="suggestions.length > 0"> <template v-if="suggestions.length > 0">
@ -31,9 +31,9 @@
type Metadata = { type Metadata = {
url: string, url: string,
title: string | null, title: string,
description: string | null, description: string,
image: string | null, image: string,
expires_at: string | null, expires_at: string | null,
tags: { tags: {
name: string name: string
@ -55,6 +55,17 @@
return this.metadata.tags.map(t => t.name); return this.metadata.tags.map(t => t.name);
} }
get hasImage() {
return this.metadata !== null && this.metadata.image !== ''
}
get descClasses() {
return {
"col-8": this.hasImage,
"col-12": !this.hasImage,
};
}
} }
</script> </script>