バグ修正やデザイン調整など

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 5c83925a32..0693143f02 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 e949c063ab..b4b7d8f87f 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