Merge branch 'main' into feature/blur-hash

# Conflicts:
#	package.json
#	src/components/home/contentAuth.vue

package.json

@@ -25,6 +25,7 @@
     "@vue/compat": "3.2.26",
     "@vueuse/core": "7.5.2",
     "@vueuse/router": "7.5.3",
+    "blurhash": "^1.1.4",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
     "codemirror": "5.65.0",

src/components/home/contentAuth.vue

@@ -1,13 +1,17 @@
 <template>
 	<div>
 		<a @click="$store.commit('menuActive', false)" class="menu-hide-button" v-if="menuActive">
-			<icon icon="times" />
+			<icon icon="times"/>
 		</a>
 		<div
-			:class="{'has-background': background}"
-			:style="{'background-image': background && `url(${background})`}"
+			:class="{'has-background': background || blurHash}"
+			: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/>
 			<div
 				:class="[
@@ -24,7 +28,7 @@
 
 				<router-view name="popup" v-slot="{ Component }">
 					<transition name="modal">
-						<component :is="Component" />
+						<component :is="Component"/>
 					</transition>
 				</router-view>
 
@@ -53,6 +57,7 @@ import QuickActions from '@/components/quick-actions/quick-actions.vue'
 const store = useStore()
 
 const background = computed(() => store.state.background)
+const blurHash = computed(() => store.state.blurHash)
 const menuActive = computed(() => store.state.menuActive)
 
 function showKeyboardShortcuts() {
@@ -80,7 +85,7 @@ watch(() => route.name as string, (routeName) => {
 				'migrate.start',
 				'migrate.wunderlist',
 				'namespaces.index',
-			].includes(routeName) || 
+			].includes(routeName) ||
 			routeName.startsWith('user.settings')
 		)
 	) {
@@ -92,7 +97,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)
 
@@ -156,40 +161,41 @@ store.dispatch('labels/loadAllLabels')
 }
 
 .app-container {
-  min-height: calc(100vh - 65px);
+	min-height: calc(100vh - 65px);
 
-  @media screen and (max-width: $tablet) {
-    padding-top: $navbar-height;
-  }
-
-  .app-content {
-    padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
-    z-index: 2;
-
-    @media screen and (max-width: $tablet) {
-      margin-left: 0;
-      padding-top: 1.5rem;
-      min-height: calc(100vh - 4rem);
-    }
-
-    &.is-menu-enabled {
-      margin-left: $navbar-width;
-
-      @media screen and (max-width: $tablet) {
-        min-width: 100%;
-        margin-left: 0;
-      }
-    }
-
-	&.task\.detail {
-		padding-left: 0;
-		padding-right: 0;
+	@media screen and (max-width: $tablet) {
+		padding-top: $navbar-height;
 	}
 
-    .card {
-      background: var(--white);
-    }
-  }
+	.app-content {
+		padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
+		z-index: 10;
+		position: relative;
+
+		@media screen and (max-width: $tablet) {
+			margin-left: 0;
+			padding-top: 1.5rem;
+			min-height: calc(100vh - 4rem);
+		}
+
+		&.is-menu-enabled {
+			margin-left: $navbar-width;
+
+			@media screen and (max-width: $tablet) {
+				min-width: 100%;
+				margin-left: 0;
+			}
+		}
+
+		&.task\.detail {
+			padding-left: 0;
+			padding-right: 0;
+		}
+
+		.card {
+			background: var(--white);
+		}
+	}
 }
 
 .mobile-overlay {
@@ -218,7 +224,7 @@ store.dispatch('labels/loadAllLabels')
 
 	color: var(--grey-500);
 	transition: color $transition;
-	
+
 	@media screen and (max-width: $tablet) {
 		display: none;
 	}

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
-				:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
-				@click.stop="toggleFavoriteList(list)"
-				class="favorite">
-				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']" />
+				<span
+					:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
+					@click.stop="toggleFavoriteList(list)"
+					class="favorite">
+				<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,11 +38,13 @@ import {ref, watch} from 'vue'
 import {useStore} from 'vuex'
 
 import ListService from '@/services/list'
+import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
+const blurHashUrl = ref('')
 
 const props = defineProps({
 	list: {
@@ -49,13 +57,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()
@@ -80,129 +93,145 @@ function toggleFavoriteList(list) {
 
 <style lang="scss" scoped>
 .list-card {
-  cursor: pointer;
-  width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-  height: $list-height;
-  background: var(--white);
-  margin: 0 $list-spacing $list-spacing 0;
-  padding: 1rem;
-  border-radius: $radius;
-  box-shadow: var(--shadow-sm);
-  transition: box-shadow $transition;
+	cursor: pointer;
+	width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+	height: $list-height;
+	background: var(--white);
+	margin: 0 $list-spacing $list-spacing 0;
+	border-radius: $radius;
+	box-shadow: var(--shadow-sm);
+	transition: box-shadow $transition;
+	position: relative;
+	overflow: hidden;
 
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
+	&.has-light-text .title {
+		color: var(--light);
+	}
 
-  &:hover {
-    box-shadow: var(--shadow-md);
-  }
+	&.has-background, .list-background {
+		background-size: cover;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
 
-  &:active,
-  &:focus,
-  &:focus:not(:active) {
-    box-shadow: var(--shadow-xs) !important;
-  }
+	&.has-background .list-content .title {
+		text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
+		color: var(--white);
+	}
 
-  @media screen and (min-width: $widescreen) {
-    &:nth-child(#{$lists-per-row}n) {
-      margin-right: 0;
-    }
-  }
+	.list-background {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
 
-  @media screen and (max-width: $widescreen) and (min-width: $tablet) {
-    $lists-per-row: 3;
-    & {
-      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-    }
+	&:hover {
+		box-shadow: var(--shadow-md);
+	}
 
-    &:nth-child(#{$lists-per-row}n) {
-      margin-right: 0;
-    }
-  }
+	&:active,
+	&:focus,
+	&:focus:not(:active) {
+		box-shadow: var(--shadow-xs) !important;
+	}
 
-  @media screen and (max-width: $tablet) {
-    $lists-per-row: 2;
-    & {
-      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-    }
+	@media screen and (min-width: $widescreen) {
+		&:nth-child(#{$lists-per-row}n) {
+			margin-right: 0;
+		}
+	}
 
-    &:nth-child(#{$lists-per-row}n) {
-      margin-right: 0;
-    }
-  }
+	@media screen and (max-width: $widescreen) and (min-width: $tablet) {
+		$lists-per-row: 3;
+		& {
+			width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+		}
 
-  @media screen and (max-width: $mobile) {
-    $lists-per-row: 1;
-    & {
-      width: 100%;
-      margin-right: 0;
-    }
-  }
+		&:nth-child(#{$lists-per-row}n) {
+			margin-right: 0;
+		}
+	}
 
-  .is-archived-container {
-    width: 100%;
-    text-align: right;
+	@media screen and (max-width: $tablet) {
+		$lists-per-row: 2;
+		& {
+			width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+		}
 
-    .is-archived {
-      font-size: .75rem;
-      float: left;
-    }
-  }
+		&:nth-child(#{$lists-per-row}n) {
+			margin-right: 0;
+		}
+	}
 
-  .title {
-    align-self: flex-end;
-    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;
+	@media screen and (max-width: $mobile) {
+		$lists-per-row: 1;
+		& {
+			width: 100%;
+			margin-right: 0;
+		}
+	}
 
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-  }
+	.list-content {
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		padding: 1rem;
+		position: absolute;
+		height: 100%;
+		width: 100%;
 
-  &.has-light-text .title {
-    color: var(--light);
-  }
+		.is-archived-container {
+			width: 100%;
+			text-align: right;
 
-  &.has-background {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
+			.is-archived {
+				font-size: .75rem;
+				float: left;
+			}
+		}
 
-    .title {
-      text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
-      color: var(--white);
-    }
-  }
+		.title {
+			align-self: flex-end;
+			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 {
-    transition: opacity $transition, color $transition;
-    opacity: 0;
+			display: -webkit-box;
+			-webkit-line-clamp: 3;
+			-webkit-box-orient: vertical;
+		}
 
-    &:hover {
-      color: var(--warning);
-    }
+		.favorite {
+			transition: opacity $transition, color $transition;
+			opacity: 0;
 
-    &.is-archived {
-      display: none;
-    }
+			&:hover {
+				color: var(--warning);
+			}
 
-    &.is-favorite {
-      display: inline-block;
-      opacity: 1;
-      color: var(--warning);
-    }
-  }
+			&.is-archived {
+				display: none;
+			}
 
-  &:hover .favorite {
-    opacity: 1;
-  }
+			&.is-favorite {
+				display: inline-block;
+				opacity: 1;
+				color: var(--warning);
+			}
+		}
+
+		&:hover .favorite {
+			opacity: 1;
+		}
+
+	}
 }
 </style>

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,
@@ -39,6 +41,7 @@ export const store = createStore({
 		// This is used to highlight the current list in menu for all list related views
 		currentList: {id: 0},
 		background: '',
+		blurHash: '',
 		hasTasks: false,
 		menuActive: true,
 		keyboardShortcutsActive: false,
@@ -79,6 +82,9 @@ export const store = createStore({
 		[BACKGROUND](state, background) {
 			state.background = background
 		},
+		[BLUR_HASH](state, blurHash) {
+			state.blurHash = blurHash
+		},
 		vikunjaReady(state, ready) {
 			state.vikunjaReady = ready
 		},
@@ -89,6 +95,7 @@ export const store = createStore({
 			if (currentList === null) {
 				commit(CURRENT_LIST, {})
 				commit(BACKGROUND, null)
+				commit(BLUR_HASH, null)
 				return
 			}
 
@@ -121,10 +128,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)
 					}
 				}
@@ -132,6 +144,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,7 @@ 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;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  min-height: 100vh;
+  position: relative;
 
-	// 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/ShowList.vue

@@ -71,7 +71,7 @@ export default {
 	computed: {
 		// Computed property to let "listId" always have a value
 		listId() {
-			return typeof this.$route.params.listId === 'undefined' ? 0 : this.$route.params.listId
+			return typeof this.$route.params.listId === 'undefined' ? 0 : parseInt(this.$route.params.listId)
 		},
 		background() {
 			return this.$store.state.background
@@ -99,9 +99,11 @@ export default {
 			const listData = {id: parseInt(this.$route.params.listId)}
 
 			saveListToHistory(listData)
-
 			this.setTitle(this.currentList.id ? this.getListTitle(this.currentList) : '')
 
+			const listFromStore = this.$store.getters['lists/getListById'](this.listId)
+			await this.$store.dispatch(CURRENT_LIST, listFromStore)
+
 			// This invalidates the loaded list at the kanban board which lets it reload its content when
 			// switched to it. This ensures updates done to tasks in the gantt or list views are consistently
 			// shown in all views while preventing reloads when closing a task popup.
@@ -161,51 +163,51 @@ export default {
 
 <style lang="scss" scoped>
 .switch-view-container {
-  @media screen and (max-width: $tablet) {
-    display: flex;
-    justify-content: center;
-  }
+	@media screen and (max-width: $tablet) {
+		display: flex;
+		justify-content: center;
+	}
 }
 
 .switch-view {
-  background: var(--white);
-  display: inline-flex;
-  border-radius: $radius;
-  font-size: .75rem;
-  box-shadow: var(--shadow-sm);
-  height: $switch-view-height;
-  margin-bottom: 1rem;
-  padding: .5rem;
+	background: var(--white);
+	display: inline-flex;
+	border-radius: $radius;
+	font-size: .75rem;
+	box-shadow: var(--shadow-sm);
+	height: $switch-view-height;
+	margin-bottom: 1rem;
+	padding: .5rem;
 
-  a {
-    padding: .25rem .5rem;
-    display: block;
-    border-radius: $radius;
+	a {
+		padding: .25rem .5rem;
+		display: block;
+		border-radius: $radius;
 
-    transition: all 100ms;
+		transition: all 100ms;
 
-    &:not(:last-child) {
-      margin-right: .5rem;
-    }
+		&:not(:last-child) {
+			margin-right: .5rem;
+		}
 
-    &.is-active,
-    &:hover {
-      color: var(--switch-view-color);
-    }
+		&.is-active,
+		&:hover {
+			color: var(--switch-view-color);
+		}
 
-    &.is-active {
-      background: var(--primary);
-      font-weight: bold;
-      box-shadow: var(--shadow-xs);
-    }
+		&.is-active {
+			background: var(--primary);
+			font-weight: bold;
+			box-shadow: var(--shadow-xs);
+		}
 
-    &:hover {
-      background: var(--primary);
-    }
-  }
+		&:hover {
+			background: var(--primary);
+		}
+	}
 }
 
 .is-archived .notification.is-warning {
-  margin-bottom: 1rem;
+	margin-bottom: 1rem;
 }
 </style>

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 => {
-				this.backgroundThumbs[background.id] = await this.backgroundService.thumb(background)
+			result.forEach(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
+					})
 			})
 		},
 
@@ -162,82 +182,88 @@ export default {
 <style lang="scss" scoped>
 .list-background-setting {
 
-  .unsplash-link {
-    text-align: right;
-    font-size: .8rem;
+	.unsplash-link {
+		text-align: right;
+		font-size: .8rem;
 
-    a {
-      color: var(--grey-800);
-    }
-  }
+		a {
+			color: var(--grey-800);
+		}
+	}
 
-  .image-search-result {
-    margin-top: 1rem;
-    display: flex;
-    flex-flow: row wrap;
+	.image-search-result {
+		margin-top: 1rem;
+		display: flex;
+		flex-flow: row wrap;
 
-    .image {
-      width: calc(100% / 5 - 1rem);
-      height: 120px;
-      margin: .5rem;
-      background-size: cover;
-      background-position: center;
-      display: flex;
+		.image {
+			width: calc(100% / 5 - 1rem);
+			height: 120px;
+			margin: .5rem;
+			background-size: cover;
+			background-position: center;
+			display: flex;
+			position: relative;
 
-      @media screen and (min-width: $desktop) {
-        &:nth-child(5n) {
-          break-after: always;
-        }
-      }
+			@media screen and (min-width: $desktop) {
+				&:nth-child(5n) {
+					break-after: always;
+				}
+			}
 
-      @media screen and (max-width: $desktop) {
-        width: calc(100% / 4 - 1rem);
+			@media screen and (max-width: $desktop) {
+				width: calc(100% / 4 - 1rem);
 
-        &:nth-child(4n) {
-          break-after: always;
-        }
-      }
+				&:nth-child(4n) {
+					break-after: always;
+				}
+			}
 
-      @media screen and (max-width: $tablet) {
-        width: calc(100% / 2 - 1rem);
+			@media screen and (max-width: $tablet) {
+				width: calc(100% / 2 - 1rem);
 
-        &:nth-child(2n) {
-          break-after: always;
-        }
-      }
+				&:nth-child(2n) {
+					break-after: always;
+				}
+			}
 
-      @media screen and (max-width: ($mobile)) {
-        width: calc(100% - 1rem);
+			@media screen and (max-width: ($mobile)) {
+				width: calc(100% - 1rem);
 
-        &:nth-child(1n) {
-          break-after: always;
-        }
-      }
+				&:nth-child(1n) {
+					break-after: always;
+				}
+			}
 
-      .info {
-        align-self: flex-end;
-        display: block;
-        opacity: 0;
-        width: 100%;
-        padding: .25rem 0;
-        text-align: center;
-        background: rgba(0, 0, 0, 0.5);
-        font-size: .75rem;
-        font-weight: bold;
-        color: var(--white);
-        transition: opacity $transition;
-      }
+			.info {
+				align-self: flex-end;
+				display: block;
+				opacity: 0;
+				width: 100%;
+				padding: .25rem 0;
+				text-align: center;
+				background: rgba(0, 0, 0, 0.5);
+				font-size: .75rem;
+				font-weight: bold;
+				color: var(--white);
+				transition: opacity $transition;
+				position: absolute;
+			}
 
-      &:hover .info {
-        opacity: 1;
-      }
-    }
-  }
+			img {
+				object-fit: cover;
+			}
 
-  .is-load-more-button {
-    margin: 1rem auto 0 !important;
-    display: block;
-    width: 200px;
-  }
+			&:hover .info {
+				opacity: 1;
+			}
+		}
+	}
+
+	.is-load-more-button {
+		margin: 1rem auto 0 !important;
+		display: block;
+		width: 200px;
+	}
 }
 </style>

yarn.lock

@@ -4128,6 +4128,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"