From 2a96429be81460036cea60cf57f88f2e9a77d8ba Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 04:21:48 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=90=E3=82=B0=E4=BF=AE=E6=AD=A3=E3=82=84?=
 =?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E8=AA=BF=E6=95=B4=E3=81=AA?=
 =?UTF-8?q?=E3=81=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/views/components/media-banner.vue  | 26 +++++++++----------
 .../common/views/components/media-list.vue    | 22 +++++++++++-----
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
index 5c83925a3..0693143f0 100644
--- a/src/client/app/common/views/components/media-banner.vue
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -1,11 +1,11 @@
 <template>
 <div class="mk-media-banner">
-	<div class="mk-media-banner-sensitive" v-if="media.isSensitive && hide" @click="hide = false">
-		<span class="mk-media-banner-icon">%fa:exclamation-triangle%</span>
+	<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
+		<span class="icon">%fa:exclamation-triangle%</span>
 		<b>%i18n:@sensitive%</b>
 		<span>%i18n:@click-to-show%</span>
 	</div>
-	<div class="mk-media-banner-audio" v-else-if="media.type.startsWith('audio')">
+	<div class="audio" v-else-if="media.type.startsWith('audio')">
 		<audio class="audio"
 			:src="media.url"
 			:title="media.name"
@@ -13,12 +13,12 @@
 			ref="audio"
 			preload="metadata" />
 	</div>
-	<a class="mk-media-banner-download" v-else
+	<a class="download" v-else
 		:href="media.url"
 		:title="media.name"
 		:download="media.name"
 	>
-		<span class="mk-media-banner-icon">%fa:download%</span>
+		<span class="icon">%fa:download%</span>
 		<b>{{ media.name }}</b>
 	</a>
 </div>
@@ -48,40 +48,38 @@ root(isDark)
 	margin-top 4px
 	overflow hidden
 
-	.mk-media-banner-download,
-	.mk-media-banner-sensitive
+	> .download,
+	> .sensitive
 		display flex
 		align-items center
 		font-size 12px
-		padding .2em .6em
+		padding 8px 12px
 		white-space nowrap
 
 		> *
 			display block
 
 		> b
-			flex-shrink 2147483647
 			overflow hidden
 			text-overflow ellipsis
 
 		> *:not(:last-child)
 			margin-right .2em
 
-		> .mk-media-banner-icon
+		> .icon
 			font-size 1.6em
 
-	.mk-media-banner-download
+	> .download
 		background isDark ? #21242d : #f7f7f7
 
-	.mk-media-banner-sensitive
+	> .sensitive
 		background #111
 		color #fff
 
-	.mk-media-banner-audio
+	> .audio
 		.audio
 			display block
 			width 100%
-			height 100%
 
 .mk-media-banner[data-darkmode]
 	root(true)
diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index e949c063a..b4b7d8f87 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -1,10 +1,10 @@
 <template>
 <div class="mk-media-list">
-	<template v-for="media in mediaList">
-		<mk-media-banner :media="media" :key="media.id" v-if="!media.type.startsWith('image') && !media.type.startsWith('video')"/>
+	<template v-for="media in mediaList.filter(media => !previewable(media))">
+		<mk-media-banner :media="media" :key="media.id"/>
 	</template>
-	<div class="mk-media-list-fixed" v-if="mediaList.filter(media => media.type.startsWith('image') || media.type.startsWith('video')).length > 0">
-		<div :data-count="mediaList.filter(media => media.type.startsWith('video') || media.type.startsWith('image')).length" ref="grid">
+	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
+		<div :data-count="mediaList.filter(media => previewable(media)).length" ref="grid">
 			<template v-for="media in mediaList">
 				<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
 				<mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
@@ -27,15 +27,23 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		// for Safari bug
-		this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` : '128px';
+		//#region for Safari bug
+		if (this.$refs.grid) {
+			this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` : '128px';
+		}
+		//#endregion
+	},
+	methods: {
+		previewable(file) {
+			return file.type.startsWith('video') || file.type.startsWith('image');
+		}
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
 .mk-media-list
-	> .mk-media-list-fixed
+	> .gird-container
 		width 100%
 		margin-top 4px