friend location layout adjustments

This commit is contained in:
pa
2025-10-31 20:17:48 +09:00
committed by Natsumi
parent 830f46b4dd
commit 53f253daea
2 changed files with 12 additions and 10 deletions
+4 -6
View File
@@ -12,8 +12,8 @@
v-model="cardScale" v-model="cardScale"
class="friend-view__slider" class="friend-view__slider"
:min="0.6" :min="0.6"
:max="1.2" :max="1.0"
:step="0.05" :step="0.01"
:show-tooltip="false" /> :show-tooltip="false" />
<el-input <el-input
v-model="searchTerm" v-model="searchTerm"
@@ -358,11 +358,9 @@
.friend-view__grid { .friend-view__grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--friend-card-min-width, 200px), 1fr)); grid-template-columns: repeat(auto-fit, minmax(var(--friend-card-min-width, 200px), max-content));
gap: var(--friend-card-gap, 18px); gap: var(--friend-card-gap, 18px);
padding: 6px; justify-content: start;
box-sizing: border-box;
width: 100%;
} }
.friend-view__instances { .friend-view__instances {
@@ -92,7 +92,7 @@
transition: transition:
box-shadow 0.2s ease, box-shadow 0.2s ease,
transform 0.2s ease; transform 0.2s ease;
width: var(--friend-card-width, auto); width: 220px;
max-width: 100%; max-width: 100%;
&:hover { &:hover {
@@ -183,7 +183,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: calc(36px * var(--card-scale)); height: calc(40px * var(--card-scale));
padding: calc(6px * var(--card-scale)) calc(10px * var(--card-scale)); padding: calc(6px * var(--card-scale)) calc(10px * var(--card-scale));
border-radius: calc(12px * var(--card-scale)); border-radius: calc(12px * var(--card-scale));
background: rgba(148, 163, 184, 0.18); background: rgba(148, 163, 184, 0.18);
@@ -191,11 +191,10 @@
font-size: calc(12px * var(--card-scale)); font-size: calc(12px * var(--card-scale));
line-height: 1.3; line-height: 1.3;
box-sizing: border-box; box-sizing: border-box;
max-width: 100%;
} }
.friend-card__location { .friend-card__location {
display: block; display: flex;
width: 100%; width: 100%;
max-height: calc(36px * var(--card-scale)); max-height: calc(36px * var(--card-scale));
overflow: hidden; overflow: hidden;
@@ -231,4 +230,9 @@
.friend-card__location :deep(.x-location__meta) { .friend-card__location :deep(.x-location__meta) {
display: none; display: none;
} }
.friend-card__location :deep(.flags) {
scale: calc(1 * var(--card-scale));
filter: brightness(1.05);
}
</style> </style>