From 481b46ac9e40d7cd6ebbb69ae93a17a6b3fe8cae Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 16 Apr 2021 12:06:54 +0900
Subject: [PATCH] Tweak UI

---
 src/client/components/drive-file-thumbnail.vue |  2 +-
 src/client/components/img-with-blurhash.vue    |  2 ++
 src/client/components/media-image.vue          |  2 +-
 src/client/pages/user/index.photos.vue         | 11 ++++++-----
 src/client/style.scss                          |  5 +----
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/client/components/drive-file-thumbnail.vue b/src/client/components/drive-file-thumbnail.vue
index 91f57d1f49..aadf22ed77 100644
--- a/src/client/components/drive-file-thumbnail.vue
+++ b/src/client/components/drive-file-thumbnail.vue
@@ -26,7 +26,7 @@ import {
 	faFileArchive,
 	faFilm
 	} from '@fortawesome/free-solid-svg-icons';
-import ImgWithBlurhash from './img-with-blurhash.vue';
+import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';
 import { ColdDeviceStorage } from '@client/store';
 
 export default defineComponent({
diff --git a/src/client/components/img-with-blurhash.vue b/src/client/components/img-with-blurhash.vue
index 7606708e9b..7e80b00208 100644
--- a/src/client/components/img-with-blurhash.vue
+++ b/src/client/components/img-with-blurhash.vue
@@ -71,6 +71,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .xubzgfgb {
+	position: relative;
 	width: 100%;
 	height: 100%;
 
@@ -82,6 +83,7 @@ export default defineComponent({
 	}
 
 	> canvas {
+		position: absolute;
 		object-fit: cover;
 	}
 
diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index 4de5daa84f..5760466138 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -27,7 +27,7 @@ import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-i
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 import { extractAvgColorFromBlurhash } from '@client/scripts/extract-avg-color-from-blurhash';
 import ImageViewer from './image-viewer.vue';
-import ImgWithBlurhash from './img-with-blurhash.vue';
+import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';
 import * as os from '@client/os';
 
 export default defineComponent({
diff --git a/src/client/pages/user/index.photos.vue b/src/client/pages/user/index.photos.vue
index b5493fd9f2..83cd3e93f5 100644
--- a/src/client/pages/user/index.photos.vue
+++ b/src/client/pages/user/index.photos.vue
@@ -6,10 +6,11 @@
 		<div class="stream" v-if="!fetching && images.length > 0">
 			<MkA v-for="image in images"
 				class="img"
-				:style="`background-image: url(${thumbnail(image.file)})`"
 				:to="notePage(image.note)"
 				:key="image.id"
-			></MkA>
+			>
+				<ImgWithBlurhash :hash="image.blurhash" :src="thumbnail(image.file)" :alt="image.name" :title="image.name"/>
+			</MkA>
 		</div>
 		<p class="empty" v-if="!fetching && images.length == 0">{{ $ts.nothing }}</p>
 	</div>
@@ -23,10 +24,12 @@ import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 import notePage from '../../filters/note';
 import * as os from '@client/os';
 import MkContainer from '@client/components/ui/container.vue';
+import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';
 
 export default defineComponent({
 	components: {
 		MkContainer,
+		ImgWithBlurhash,
 	},
 	props: {
 		user: {
@@ -88,10 +91,8 @@ export default defineComponent({
 
 		> .img {
 			height: 128px;
-			background-position: center center;
-			background-size: cover;
-			background-clip: content-box;
 			border-radius: 6px;
+			overflow: clip;
 		}
 	}
 
diff --git a/src/client/style.scss b/src/client/style.scss
index 63433109ff..b12299422c 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -26,6 +26,7 @@ html {
 	background-position: center;
 	color: var(--fg);
 	overflow: auto;
+	overflow-wrap: break-word;
 	font-family: "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
 	line-height: 1.35;
 	text-size-adjust: 100%;
@@ -88,10 +89,6 @@ html._themeChanging_ {
 	}
 }
 
-body {
-	overflow-wrap: break-word;
-}
-
 html, body {
 	margin: 0;
 	padding: 0;