feat: use blurHash when loading list backgrounds (#1188)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: #1188

package.json

@@ -26,6 +26,7 @@
     "@vue/compat": "3.2.31",
     "@vueuse/core": "8.2.3",
     "@vueuse/router": "8.2.3",
+    "blurhash": "^1.1.4",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
     "codemirror": "5.65.2",

src/components/home/contentAuth.vue

@@ -1,17 +1,21 @@
 <template>
-	<div>
+	<div class="content-auth" :class="{'modal-active': modalActive}">
 		<BaseButton
 			v-if="menuActive"
 			@click="$store.commit('menuActive', false)"
-			class="menu-hide-button" 
+			class="menu-hide-button"
 		>
-			<icon icon="times" />
+			<icon icon="times"/>
 		</BaseButton>
 		<div
-			:class="{'has-background': background}"
+			:class="{'has-background': background || blurHash}"
-			:style="{'background-image': background && `url(${background})`}"
+			:style="{'background-image': blurHash && `url(${blurHash})`}"
 			class="app-container"
 		>
+			<div
+				:class="{'is-visible': background}"
+				class="app-container-background background-fade-in"
+				:style="{'background-image': background && `url(${background})`}"></div>
 			<navigation/>
 			<main
 				:class="[
@@ -31,18 +35,18 @@
 
 				<router-view :route="routeWithModal" v-slot="{ Component }">
 					<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
-						<component :is="Component" />
+						<component :is="Component"/>
 					</keep-alive>
 				</router-view>
 
 				<transition name="modal">
 					<modal
-						v-if="currentModal" 
+						v-if="currentModal"
 						@close="closeModal()"
 						variant="scrolling"
 						class="task-detail-view-modal"
 					>
-						<component :is="currentModal" />
+						<component :is="currentModal"/>
 					</modal>
 				</transition>
 
@@ -115,16 +119,17 @@ function useRouteWithModal() {
 		}
 	}
 
-	return { routeWithModal, currentModal, closeModal }
+	return {routeWithModal, currentModal, closeModal}
 }
 
-const { routeWithModal, currentModal, closeModal } = useRouteWithModal()
+const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
-
 
 const store = useStore()
 
 const background = computed(() => store.state.background)
+const blurHash = computed(() => store.state.blurHash)
 const menuActive = computed(() => store.state.menuActive)
+const modalActive = computed(() => store.state.modalActive)
 
 function showKeyboardShortcuts() {
 	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
@@ -151,7 +156,7 @@ watch(() => route.name as string, (routeName) => {
 				'migrate.start',
 				'migrate.wunderlist',
 				'namespaces.index',
-			].includes(routeName) || 
+			].includes(routeName) ||
 			routeName.startsWith('user.settings')
 		)
 	) {
@@ -163,7 +168,7 @@ watch(() => route.name as string, (routeName) => {
 
 function useRenewTokenOnFocus() {
 	const router = useRouter()
-	
+
 	const userInfo = computed(() => store.state.auth.info)
 	const authenticated = computed(() => store.state.auth.authenticated)
 
@@ -227,39 +232,41 @@ store.dispatch('labels/loadAllLabels')
 }
 
 .app-container {
-  min-height: calc(100vh - 65px);
+	min-height: calc(100vh - 65px);
 
-  @media screen and (max-width: $tablet) {
+	@media screen and (max-width: $tablet) {
-    padding-top: $navbar-height;
+		padding-top: $navbar-height;
-  }
-
-  .app-content {
-    padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
-
-	// Used to make sure the spinner is always in the middle while loading
-	> .loader-container {
-      min-height: calc(100vh -  #{$navbar-height + 1.5rem + 1rem});
 	}
 
-    @media screen and (max-width: $tablet) {
+	.app-content {
-      margin-left: 0;
+		padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
-      padding-top: 1.5rem;
+		z-index: 10;
-      min-height: calc(100vh - 4rem);
+		position: relative;
-    }
 
-    &.is-menu-enabled {
+		// Used to make sure the spinner is always in the middle while loading
-      margin-left: $navbar-width;
+		> .loader-container {
+			min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
+		}
 
-      @media screen and (max-width: $tablet) {
+		@media screen and (max-width: $tablet) {
-        min-width: 100%;
+			margin-left: 0;
-        margin-left: 0;
+			padding-top: 1.5rem;
-      }
+			min-height: calc(100vh - 4rem);
-    }
+		}
 
-    .card {
+		&.is-menu-enabled {
-      background: var(--white);
+			margin-left: $navbar-width;
-    }
+
-  }
+			@media screen and (max-width: $tablet) {
+				min-width: 100%;
+				margin-left: 0;
+			}
+		}
+
+		.card {
+			background: var(--white);
+		}
+	}
 }
 
 .mobile-overlay {
@@ -290,11 +297,20 @@ store.dispatch('labels/loadAllLabels')
 
 	color: var(--grey-500);
 	transition: color $transition;
-	
+
 	@media screen and (max-width: $tablet) {
 		display: none;
 	}
 }
 
+.content-auth {
+	position: relative;
+	z-index: 1;
+
+	&.modal-active {
+		z-index: unset;
+	}
+}
+
 @include modal-transition();
 </style>

src/components/list/partials/list-card.vue

@@ -2,28 +2,34 @@
 	<router-link
 		:class="{
 			'has-light-text': !colorIsDark(list.hexColor),
-			'has-background': background !== null
+			'has-background': blurHashUrl !== ''
 		}"
 		:style="{
 			'background-color': list.hexColor,
-			'background-image': background !== null ? `url(${background})` : false,
+			'background-image': blurHashUrl !== null ? `url(${blurHashUrl})` : false,
 		}"
 		:to="{ name: 'list.index', params: { listId: list.id} }"
 		class="list-card"
 		v-if="list !== null && (showArchived ? true : !list.isArchived)"
 	>
-		<div class="is-archived-container">
+		<div
+			class="list-background background-fade-in"
+			:class="{'is-visible': background}"
+			:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
+		<div class="list-content">
+			<div class="is-archived-container">
 			<span class="is-archived" v-if="list.isArchived">
 				{{ $t('namespace.archived') }}
 			</span>
-			<span
+				<span
-				:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
+					:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
-				@click.stop="toggleFavoriteList(list)"
+					@click.stop="toggleFavoriteList(list)"
-				class="favorite">
+					class="favorite">
-				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']" />
+				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
 			</span>
+			</div>
+			<div class="title">{{ list.title }}</div>
 		</div>
-		<div class="title">{{ list.title }}</div>
 	</router-link>
 </template>
 
@@ -32,12 +38,14 @@ import {PropType, ref, watch} from 'vue'
 import {useStore} from 'vuex'
 
 import ListService from '@/services/list'
+import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import ListModel from '@/models/list'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
+const blurHashUrl = ref('')
 
 const props = defineProps({
 	list: {
@@ -50,13 +58,18 @@ const props = defineProps({
 	},
 })
 
-watch(props.list, loadBackground, { immediate: true })
+watch(props.list, loadBackground, {immediate: true})
 
 async function loadBackground() {
 	if (props.list === null || !props.list.backgroundInformation || backgroundLoading.value) {
 		return
 	}
 
+	const blurHash = await getBlobFromBlurHash(props.list.backgroundBlurHash)
+	if (blurHash) {
+		blurHashUrl.value = window.URL.createObjectURL(blurHash)
+	}
+
 	backgroundLoading.value = true
 
 	const listService = new ListService()
@@ -81,129 +94,145 @@ function toggleFavoriteList(list: ListModel) {
 
 <style lang="scss" scoped>
 .list-card {
-  cursor: pointer;
+	cursor: pointer;
-  width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+	width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-  height: $list-height;
+	height: $list-height;
-  background: var(--white);
+	background: var(--white);
-  margin: 0 $list-spacing $list-spacing 0;
+	margin: 0 $list-spacing $list-spacing 0;
-  padding: 1rem;
+	border-radius: $radius;
-  border-radius: $radius;
+	box-shadow: var(--shadow-sm);
-  box-shadow: var(--shadow-sm);
+	transition: box-shadow $transition;
-  transition: box-shadow $transition;
+	position: relative;
+	overflow: hidden;
 
-  display: flex;
+	&.has-light-text .title {
-  justify-content: space-between;
+		color: var(--light);
-  flex-wrap: wrap;
+	}
 
-  &:hover {
+	&.has-background, .list-background {
-    box-shadow: var(--shadow-md);
+		background-size: cover;
-  }
+		background-repeat: no-repeat;
+		background-position: center;
+	}
 
-  &:active,
+	&.has-background .list-content .title {
-  &:focus,
+		text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
-  &:focus:not(:active) {
+		color: var(--white);
-    box-shadow: var(--shadow-xs) !important;
+	}
-  }
 
-  @media screen and (min-width: $widescreen) {
+	.list-background {
-    &:nth-child(#{$lists-per-row}n) {
+		position: absolute;
-      margin-right: 0;
+		top: 0;
-    }
+		right: 0;
-  }
+		bottom: 0;
+		left: 0;
+	}
 
-  @media screen and (max-width: $widescreen) and (min-width: $tablet) {
+	&:hover {
-    $lists-per-row: 3;
+		box-shadow: var(--shadow-md);
-    & {
+	}
-      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-    }
 
-    &:nth-child(#{$lists-per-row}n) {
+	&:active,
-      margin-right: 0;
+	&:focus,
-    }
+	&:focus:not(:active) {
-  }
+		box-shadow: var(--shadow-xs) !important;
+	}
 
-  @media screen and (max-width: $tablet) {
+	@media screen and (min-width: $widescreen) {
-    $lists-per-row: 2;
+		&:nth-child(#{$lists-per-row}n) {
-    & {
+			margin-right: 0;
-      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+		}
-    }
+	}
 
-    &:nth-child(#{$lists-per-row}n) {
+	@media screen and (max-width: $widescreen) and (min-width: $tablet) {
-      margin-right: 0;
+		$lists-per-row: 3;
-    }
+		& {
-  }
+			width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+		}
 
-  @media screen and (max-width: $mobile) {
+		&:nth-child(#{$lists-per-row}n) {
-    $lists-per-row: 1;
+			margin-right: 0;
-    & {
+		}
-      width: 100%;
+	}
-      margin-right: 0;
-    }
-  }
 
-  .is-archived-container {
+	@media screen and (max-width: $tablet) {
-    width: 100%;
+		$lists-per-row: 2;
-    text-align: right;
+		& {
+			width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+		}
 
-    .is-archived {
+		&:nth-child(#{$lists-per-row}n) {
-      font-size: .75rem;
+			margin-right: 0;
-      float: left;
+		}
-    }
+	}
-  }
 
-  .title {
+	@media screen and (max-width: $mobile) {
-    align-self: flex-end;
+		$lists-per-row: 1;
-    font-family: $vikunja-font;
+		& {
-    font-weight: 400;
+			width: 100%;
-    font-size: 1.5rem;
+			margin-right: 0;
-    color: var(--text);
+		}
-    width: 100%;
+	}
-    margin-bottom: 0;
-    max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
-    overflow: hidden;
-    text-overflow: ellipsis;
 
-    display: -webkit-box;
+	.list-content {
-    -webkit-line-clamp: 3;
+		display: flex;
-    -webkit-box-orient: vertical;
+		justify-content: space-between;
-  }
+		flex-wrap: wrap;
+		padding: 1rem;
+		position: absolute;
+		height: 100%;
+		width: 100%;
 
-  &.has-light-text .title {
+		.is-archived-container {
-    color: var(--light);
+			width: 100%;
-  }
+			text-align: right;
 
-  &.has-background {
+			.is-archived {
-    background-size: cover;
+				font-size: .75rem;
-    background-repeat: no-repeat;
+				float: left;
-    background-position: center;
+			}
+		}
 
-    .title {
+		.title {
-      text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
+			align-self: flex-end;
-      color: var(--white);
+			font-family: $vikunja-font;
-    }
+			font-weight: 400;
-  }
+			font-size: 1.5rem;
+			color: var(--text);
+			width: 100%;
+			margin-bottom: 0;
+			max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
+			overflow: hidden;
+			text-overflow: ellipsis;
 
-  .favorite {
+			display: -webkit-box;
-    transition: opacity $transition, color $transition;
+			-webkit-line-clamp: 3;
-    opacity: 0;
+			-webkit-box-orient: vertical;
+		}
 
-    &:hover {
+		.favorite {
-      color: var(--warning);
+			transition: opacity $transition, color $transition;
-    }
+			opacity: 0;
 
-    &.is-archived {
+			&:hover {
-      display: none;
+				color: var(--warning);
-    }
+			}
 
-    &.is-favorite {
+			&.is-archived {
-      display: inline-block;
+				display: none;
-      opacity: 1;
+			}
-      color: var(--warning);
-    }
-  }
 
-  &:hover .favorite {
+			&.is-favorite {
-    opacity: 1;
+				display: inline-block;
-  }
+				opacity: 1;
+				color: var(--warning);
+			}
+		}
+
+		&:hover .favorite {
+			opacity: 1;
+		}
+
+	}
 }
 </style>

src/components/modal/modal.vue

@@ -64,6 +64,9 @@
 import BaseButton from '@/components/base/BaseButton.vue'
 import {ref, watch} from 'vue'
 import {useScrollLock} from '@vueuse/core'
+import {useStore} from 'vuex'
+
+const store = useStore()
 
 const props = withDefaults(defineProps<{
 	enabled?: boolean,
@@ -86,6 +89,7 @@ watch(
 	() => props.enabled,
 	enabled => {
 		scrollLock.value = enabled
+		store.commit('modalActive', enabled)
 	},
 	{
 		immediate: true,

src/helpers/getBlobFromBlurHash.ts

@@ -0,0 +1,31 @@
+import {decode} from 'blurhash'
+
+export async function getBlobFromBlurHash(blurHash: string): Promise<Blob | null> {
+	if (blurHash === '') {
+		return null
+	}
+
+	const pixels = decode(blurHash, 32, 32)
+	const canvas = document.createElement('canvas')
+	canvas.width = 32
+	canvas.height = 32
+	const ctx = canvas.getContext('2d')
+	if (ctx === null) {
+		return null
+	}
+	
+	const imageData = ctx.createImageData(32, 32)
+	imageData.data.set(pixels)
+	ctx.putImageData(imageData, 0, 0)
+
+	return new Promise<Blob>((resolve, reject) => {
+		canvas.toBlob(b => {
+			if (b === null) {
+				reject(b)
+				return
+			}
+
+			resolve(b)
+		})
+	})
+}

src/models/backgroundImage.js

@@ -7,6 +7,7 @@ export default class BackgroundImageModel extends AbstractModel {
 			url: '',
 			thumb: '',
 			info: {},
+			blurHash: '',
 		}
 	}
 }

src/models/list.js

@@ -20,7 +20,7 @@ export default class ListModel extends AbstractModel {
 
 		this.owner = new UserModel(this.owner)
 
-		if(typeof this.subscription !== 'undefined' && this.subscription !== null) {
+		if (typeof this.subscription !== 'undefined' && this.subscription !== null) {
 			this.subscription = new SubscriptionModel(this.subscription)
 		}
 
@@ -44,6 +44,7 @@ export default class ListModel extends AbstractModel {
 			isFavorite: false,
 			subscription: null,
 			position: 0,
+			backgroundBlurHash: '',
 
 			created: null,
 			updated: null,

src/store/index.js

@@ -1,6 +1,8 @@
 import {createStore} from 'vuex'
+import {getBlobFromBlurHash} from '../helpers/getBlobFromBlurHash'
 import {
 	BACKGROUND,
+	BLUR_HASH,
 	CURRENT_LIST,
 	HAS_TASKS,
 	KEYBOARD_SHORTCUTS_ACTIVE,
@@ -44,10 +46,12 @@ export const store = createStore({
 			isArchived: false,
 		}),
 		background: '',
+		blurHash: '',
 		hasTasks: false,
 		menuActive: true,
 		keyboardShortcutsActive: false,
 		quickActionsActive: false,
+		modalActive: false,
 	},
 	mutations: {
 		[LOADING](state, loading) {
@@ -83,6 +87,12 @@ export const store = createStore({
 		[BACKGROUND](state, background) {
 			state.background = background
 		},
+		[BLUR_HASH](state, blurHash) {
+			state.blurHash = blurHash
+		},
+		modalActive(state, active) {
+			state.modalActive = active
+		},
 	},
 	actions: {
 		async [CURRENT_LIST]({state, commit}, currentList) {
@@ -90,6 +100,7 @@ export const store = createStore({
 			if (currentList === null) {
 				commit(CURRENT_LIST, {})
 				commit(BACKGROUND, null)
+				commit(BLUR_HASH, null)
 				return
 			}
 
@@ -122,10 +133,15 @@ export const store = createStore({
 			) {
 				if (currentList.backgroundInformation) {
 					try {
+						const blurHash = await getBlobFromBlurHash(currentList.backgroundBlurHash)
+						if (blurHash) {
+							commit(BLUR_HASH, window.URL.createObjectURL(blurHash))
+						}
+
 						const listService = new ListService()
 						const background = await listService.background(currentList)
 						commit(BACKGROUND, background)
-					} catch(e) {
+					} catch (e) {
 						console.error('Error getting background image for list', currentList.id, e)
 					}
 				}
@@ -133,6 +149,7 @@ export const store = createStore({
 
 			if (typeof currentList.backgroundInformation === 'undefined' || currentList.backgroundInformation === null) {
 				commit(BACKGROUND, null)
+				commit(BLUR_HASH, null)
 			}
 
 			commit(CURRENT_LIST, currentList)

src/store/mutation-types.js

@@ -6,6 +6,6 @@ export const MENU_ACTIVE = 'menuActive'
 export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
 export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
 export const BACKGROUND = 'background'
+export const BLUR_HASH = 'blurHash'
 
 export const CONFIG = 'config'
-export const AUTH = 'auth'

src/styles/theme/background.scss

@@ -1,12 +1,16 @@
 .app-container.has-background,
 .link-share-container.has-background {
-  background-position: center;
+  position: relative;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  min-height: 100vh;
 
-	// FIXME: move to pagination component
+  &, .app-container-background {
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    min-height: 100vh;
+  }
+
+  // FIXME: move to pagination component
   .pagination-link:not(.is-current) {
     background: var(--grey-100);
   }
@@ -32,4 +36,21 @@
       border-radius: $radius !important;
     }
   }
-}
+}
+
+.app-container-background {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 0;
+}
+
+.background-fade-in {
+  opacity: 0;
+  transition: opacity $transition;
+  transition-delay: $transition-duration * 2; // To fake an appearing background
+
+  &.is-visible {
+    opacity: 1;
+  }
+}

src/views/list/ListWrapper.vue

@@ -55,7 +55,7 @@ import Message from '@/components/misc/message.vue'
 import ListModel from '@/models/list'
 import ListService from '@/services/list'
 
-import {BACKGROUND, CURRENT_LIST} from '@/store/mutation-types'
+import {BACKGROUND, BLUR_HASH, CURRENT_LIST} from '@/store/mutation-types'
 
 import {getListTitle} from '@/helpers/getListTitle'
 import {saveListToHistory} from '@/modules/listHistory'
@@ -145,6 +145,7 @@ async function loadList(listIdToLoad: number) {
 	const listFromStore = store.getters['lists/getListById'](listData.id)
 	if (listFromStore !== null) {
 		store.commit(BACKGROUND, null)
+		store.commit(BLUR_HASH, null)
 		store.commit(CURRENT_LIST, listFromStore)
 	}
 

src/views/list/settings/background.vue

@@ -35,16 +35,25 @@
 				v-model="backgroundSearchTerm"
 			/>
 			<p class="unsplash-link">
-				<a href="https://unsplash.com" rel="noreferrer noopener nofollow" target="_blank">{{ $t('list.background.poweredByUnsplash') }}</a>
+				<a href="https://unsplash.com" rel="noreferrer noopener nofollow" target="_blank">
+					{{ $t('list.background.poweredByUnsplash') }}
+				</a>
 			</p>
 			<div class="image-search-result">
 				<a
 					:key="im.id"
-					:style="{'background-image': `url(${backgroundThumbs[im.id]})`}"
+					:style="{'background-image': `url(${backgroundBlurHashes[im.id]})`}"
 					@click="() => setBackground(im.id)"
 					class="image"
 					v-for="im in backgroundSearchResult">
-					<a :href="`https://unsplash.com/@${im.info.author}`" rel="noreferrer noopener nofollow" target="_blank" class="info">
+					<transition name="fade">
+						<img :src="backgroundThumbs[im.id]" alt="" v-if="backgroundThumbs[im.id]"/>
+					</transition>
+					<a
+						:href="`https://unsplash.com/@${im.info.author}`"
+						rel="noreferrer noopener nofollow"
+						target="_blank"
+						class="info">
 						{{ im.info.authorName }}
 					</a>
 				</a>
@@ -65,6 +74,8 @@
 
 <script>
 import {mapState} from 'vuex'
+import {getBlobFromBlurHash} from '../../../helpers/getBlobFromBlurHash'
+
 import BackgroundUnsplashService from '../../../services/backgroundUnsplash'
 import BackgroundUploadService from '../../../services/backgroundUpload'
 import ListService from '@/services/list'
@@ -83,6 +94,7 @@ export default {
 			backgroundSearchTerm: '',
 			backgroundSearchResult: [],
 			backgroundThumbs: {},
+			backgroundBlurHashes: {},
 			currentPage: 1,
 
 			// We're using debounce to not search on every keypress but with a delay.
@@ -120,8 +132,16 @@ export default {
 			this.currentPage = page
 			const result = await this.backgroundService.getAll({}, {s: this.backgroundSearchTerm, p: page})
 			this.backgroundSearchResult = this.backgroundSearchResult.concat(result)
-			result.forEach(async background => {
+			result.forEach(background => {
-				this.backgroundThumbs[background.id] = await this.backgroundService.thumb(background)
+				getBlobFromBlurHash(background.blurHash)
+					.then(b => {
+						this.backgroundBlurHashes[background.id] = window.URL.createObjectURL(b)
+					})
+
+				this.backgroundService.thumb(background)
+					.then(b => {
+						this.backgroundThumbs[background.id] = b
+					})
 			})
 		},
 
@@ -165,82 +185,88 @@ export default {
 <style lang="scss" scoped>
 .list-background-setting {
 
-  .unsplash-link {
+	.unsplash-link {
-    text-align: right;
+		text-align: right;
-    font-size: .8rem;
+		font-size: .8rem;
 
-    a {
+		a {
-      color: var(--grey-800);
+			color: var(--grey-800);
-    }
+		}
-  }
+	}
 
-  .image-search-result {
+	.image-search-result {
-    margin-top: 1rem;
+		margin-top: 1rem;
-    display: flex;
+		display: flex;
-    flex-flow: row wrap;
+		flex-flow: row wrap;
 
-    .image {
+		.image {
-      width: calc(100% / 5 - 1rem);
+			width: calc(100% / 5 - 1rem);
-      height: 120px;
+			height: 120px;
-      margin: .5rem;
+			margin: .5rem;
-      background-size: cover;
+			background-size: cover;
-      background-position: center;
+			background-position: center;
-      display: flex;
+			display: flex;
+			position: relative;
 
-      @media screen and (min-width: $desktop) {
+			@media screen and (min-width: $desktop) {
-        &:nth-child(5n) {
+				&:nth-child(5n) {
-          break-after: always;
+					break-after: always;
-        }
+				}
-      }
+			}
 
-      @media screen and (max-width: $desktop) {
+			@media screen and (max-width: $desktop) {
-        width: calc(100% / 4 - 1rem);
+				width: calc(100% / 4 - 1rem);
 
-        &:nth-child(4n) {
+				&:nth-child(4n) {
-          break-after: always;
+					break-after: always;
-        }
+				}
-      }
+			}
 
-      @media screen and (max-width: $tablet) {
+			@media screen and (max-width: $tablet) {
-        width: calc(100% / 2 - 1rem);
+				width: calc(100% / 2 - 1rem);
 
-        &:nth-child(2n) {
+				&:nth-child(2n) {
-          break-after: always;
+					break-after: always;
-        }
+				}
-      }
+			}
 
-      @media screen and (max-width: ($mobile)) {
+			@media screen and (max-width: ($mobile)) {
-        width: calc(100% - 1rem);
+				width: calc(100% - 1rem);
 
-        &:nth-child(1n) {
+				&:nth-child(1n) {
-          break-after: always;
+					break-after: always;
-        }
+				}
-      }
+			}
 
-      .info {
+			.info {
-        align-self: flex-end;
+				align-self: flex-end;
-        display: block;
+				display: block;
-        opacity: 0;
+				opacity: 0;
-        width: 100%;
+				width: 100%;
-        padding: .25rem 0;
+				padding: .25rem 0;
-        text-align: center;
+				text-align: center;
-        background: rgba(0, 0, 0, 0.5);
+				background: rgba(0, 0, 0, 0.5);
-        font-size: .75rem;
+				font-size: .75rem;
-        font-weight: bold;
+				font-weight: bold;
-        color: var(--white);
+				color: var(--white);
-        transition: opacity $transition;
+				transition: opacity $transition;
-      }
+				position: absolute;
+			}
 
-      &:hover .info {
+			img {
-        opacity: 1;
+				object-fit: cover;
-      }
+			}
-    }
-  }
 
-  .is-load-more-button {
+			&:hover .info {
-    margin: 1rem auto 0 !important;
+				opacity: 1;
-    display: block;
+			}
-    width: 200px;
+		}
-  }
+	}
+
+	.is-load-more-button {
+		margin: 1rem auto 0 !important;
+		display: block;
+		width: 200px;
+	}
 }
 </style>

yarn.lock

@@ -4217,6 +4217,11 @@ blueimp-md5@^2.10.0:
   resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz#b53feea5498dcb53dc6ec4b823adb84b729c4af0"
   integrity sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==
 
+blurhash@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-1.1.4.tgz#a7010ceb3019cd2c9809b17c910ebf6175d29244"
+  integrity sha512-MXIPz6zwYUKayju+Uidf83KhH0vodZfeRl6Ich8Gu+KGl0JgKiFq9LsfqV7cVU5fKD/AotmduZqvOfrGKOfTaA==
+
 body-parser@1.19.0:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"