sori.studio/tmaker.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

목록 보기 전환 정리

Browse Source
This commit is contained in:
zenn
2026-04-07 14:33:13 +09:00
parent de304c98a7
commit d2273fa723
11 changed files with 172 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/views/TemplatesView.vue
View File

@@ -16,6 +16,7 @@ const templateRecords = ref([])
const error = ref('')
const loadingFavoriteId = ref('')
const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim().toLowerCase() : ''))
const isListView = computed(() => route.query.view === 'list')
const templates = computed(() => {
const filtered = templateRecords.value
.filter((item) => item.id !== 'freeform')
@@ -88,8 +89,8 @@ function templateThumbUrl(template) {
</section>
<div v-if="error" class="error">{{ error }}</div>
<TransitionGroup v-if="templates.length" name="libraryCard" tag="section" class="libraryGrid">
<article v-for="template in templates" :key="template.id" class="libraryCard">
<TransitionGroup v-if="templates.length" name="libraryCard" tag="section" class="libraryGrid" :class="{ 'libraryGrid--list': isListView }">
<article v-for="template in templates" :key="template.id" class="libraryCard" :class="{ 'libraryCard--list': isListView }">
<button
class="libraryCard__favorite"
type="button"
@@ -99,7 +100,7 @@ function templateThumbUrl(template) {
>
<SvgIcon class="libraryCard__favoriteIcon" :src="kidStarIcon" :size="18" />
</button>
<button class="libraryCard__main" type="button" @click="openTopic(template)">
<button class="libraryCard__main" :class="{ 'libraryCard__main--list': isListView }" type="button" @click="openTopic(template)">
<div class="libraryCard__thumbWrap">
<img v-if="templateThumbUrl(template)" class="libraryCard__thumb" :src="templateThumbUrl(template)" :alt="template.name" draggable="false" />
<div v-else class="libraryCard__thumbFallback">대표 썸네일</div>
@@ -120,6 +121,9 @@ function templateThumbUrl(template) {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.libraryGrid--list {
grid-template-columns: 1fr;
}
.error {
margin: 0 0 16px;
padding: 10px 12px;
@@ -161,6 +165,17 @@ function templateThumbUrl(template) {
text-align: left;
cursor: pointer;
}
.libraryCard__main--list {
grid-template-columns: 200px minmax(0, 1fr);
align-items: center;
}
.libraryCard__main--list .libraryCard__thumbWrap {
height: 100%;
}
.libraryCard--list .libraryCard__favorite {
top: 14px;
bottom: auto;
}
.libraryCard__favorite {
position: absolute;
bottom: 24px;
@@ -259,5 +274,9 @@ function templateThumbUrl(template) {
.libraryGrid {
grid-template-columns: minmax(0, 1fr);
}
.libraryCard__main--list {
grid-template-columns: 1fr;
}
}
</style>