mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-27 14:28:53 +09:00
Code

enhance(frontend): 미디어 그리드 레이아옷 조정

Browse Source 
- 여러 장의 이미지가 있을 때 표시되는 아이콘을 보다 명확하게 볼 수 있도록 개선됨
  - 배경과 같은 이미지를 구분하기 쉽도록 배경색 및 구분선 추가
This commit is contained in:
NoriDev 2024-11-14 16:19:55 +09:00
parent 849389ed10
commit b2337f554b
2 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG_CHERRYPICK.md
View File

@ -29,6 +29,9 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGELOG.md#2024xx) 문서를 참고하십시오. Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGELOG.md#2024xx) 문서를 참고하십시오.
### Client ### Client
- Enhance: 미디어 그리드 레이아옷 조정
- 여러 장의 이미지가 있을 때 표시되는 아이콘을 보다 명확하게 볼 수 있도록 개선됨
- 배경과 같은 이미지를 구분하기 쉽도록 배경색 및 구분선 추가
- Fix: 아바타 장식에서 가이드라인이 표시되지 않음 - Fix: 아바타 장식에서 가이드라인이 표시되지 않음
--- ---

21
packages/frontend/src/pages/user/index.timeline.files.files.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div v-if="files.files.length > 0" :class="$style.root"> <div v-if="files.files.length > 0" :class="[$style.root, $style.visible]">
<div v-if="files.files[0].isSensitive && !showingFiles.includes(files.files[0].id)" :key="files.id + files.files[0].id" :class="$style.img" @click="showingFiles.push(files.files[0].id)"> <div v-if="files.files[0].isSensitive && !showingFiles.includes(files.files[0].id)" :key="files.id + files.files[0].id" :class="$style.img" @click="showingFiles.push(files.files[0].id)">
<!-- TODO: 画像以外のファイルに対応 --> <!-- TODO: 画像以外のファイルに対応 -->
<ImgWithBlurhash :class="$style.sensitiveImg" :hash="files.files[0].blurhash" :src="thumbnail(files.files[0])" :title="files.files[0].name" :forceBlurhash="true"/> <ImgWithBlurhash :class="$style.sensitiveImg" :hash="files.files[0].blurhash" :src="thumbnail(files.files[0])" :title="files.files[0].name" :forceBlurhash="true"/>
@ -124,6 +124,24 @@ onUnmounted(() => {
cursor: pointer; cursor: pointer;
} }
.visible {
position: relative;
-webkit-tap-highlight-color: transparent;
//box-shadow: 0 0 0 1px var(--MI_THEME-divider) inset;
background: var(--MI_THEME-bg);
background-size: 16px 16px;
}
html[data-color-scheme=dark] .visible {
--c: rgb(255 255 255 / 2%);
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
}
html[data-color-scheme=light] .visible {
--c: rgb(0 0 0 / 2%);
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
}
.multipleImg { .multipleImg {
filter: brightness(0.9); filter: brightness(0.9);
} }
@ -135,6 +153,7 @@ onUnmounted(() => {
font-size: 1.45em; font-size: 1.45em;
color: #fff; color: #fff;
opacity: .9; opacity: .9;
filter: drop-shadow(0 0 1.5px #b3b3b3);
} }
@container (max-width: 785px) { @container (max-width: 785px) {