zenn/tier-maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

릴리스: v1.3.76 왼쪽 레일 검색/축소 정리

Browse Source
This commit is contained in:
zenn
2026-04-02 16:10:36 +09:00
parent bd53cf96dc
commit 49d4946735
4 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/App.vue
View File

@@ -23,7 +23,7 @@ const { toasts, dismissToast } = useToast()
const leftRailCollapsed = ref(false)
const rightRailOpen = ref(true)
const searchQuery = ref('')
const searchPlaceholder = computed(() => (route.name === 'home' ? '게임 템플릿 검색' : '전체 티어표 검색'))
const leftRailSearchPlaceholder = '게임 템플릿 검색'
const isCollapsedSearchOpen = ref(false)
const isGuideModalOpen = ref(false)
const themeMode = ref('dark')
@@ -391,11 +391,7 @@ function handleLeftRailSearch() {
function submitGlobalSearch() {
const query = (searchQuery.value || '').trim()
isCollapsedSearchOpen.value = false
if (route.name === 'home') {
router.push(query ? `/?q=${encodeURIComponent(query)}` : '/')
return
}
router.push(query ? `/search?q=${encodeURIComponent(query)}` : '/search')
router.push(query ? `/?q=${encodeURIComponent(query)}` : '/')
}
@@ -444,7 +440,7 @@ function submitGlobalSearch() {
<SvgIcon :src="iconSearch" :size="24" />
</span>
</button>
<input v-model="searchQuery" class="searchStub__input" type="search" :placeholder="leftRailCollapsed ? '' : searchPlaceholder" />
<input v-model="searchQuery" class="searchStub__input" type="search" :placeholder="leftRailCollapsed ? '' : leftRailSearchPlaceholder" />
</form>
<nav class="leftNav">
@@ -513,12 +509,12 @@ function submitGlobalSearch() {
</section>
</main>
<div v-if="isCollapsedSearchOpen" class="collapsedSearchModal" role="dialog" aria-modal="true" :aria-label="searchPlaceholder" @click.self="closeCollapsedSearch">
<div v-if="isCollapsedSearchOpen" class="collapsedSearchModal" role="dialog" aria-modal="true" :aria-label="leftRailSearchPlaceholder" @click.self="closeCollapsedSearch">
<form class="collapsedSearchBar" @submit.prevent="submitGlobalSearch">
<span class="collapsedSearchBar__icon">
<SvgIcon :src="iconSearch" :size="24" />
</span>
<input v-model="searchQuery" class="collapsedSearchBar__input" type="search" :placeholder="searchPlaceholder" autofocus />
<input v-model="searchQuery" class="collapsedSearchBar__input" type="search" :placeholder="leftRailSearchPlaceholder" autofocus />
</form>
</div>
@@ -953,12 +949,14 @@ function submitGlobalSearch() {
}
.appShell--leftCollapsed .appUserCard {
min-height: auto;
margin-bottom: 10px;
min-height: 50px;
margin-bottom: 0;
}
.appShell--leftCollapsed .appUserCard__button,
.appShell--leftCollapsed .appUserCard__guest {
width: 100%;
height: 50px;
min-height: 44px;
padding: 0;
gap: 0;
@@ -977,6 +975,8 @@ function submitGlobalSearch() {
}
.appShell--leftCollapsed .searchStub {
height: 50px;
margin-bottom: 0;
padding: 11px 0;
gap: 0;
justify-content: center;
@@ -984,6 +984,7 @@ function submitGlobalSearch() {
.appShell--leftCollapsed .searchStub__iconButton {
width: 100%;
height: 100%;
}
.appShell--leftCollapsed .leftNav {
@@ -991,6 +992,9 @@ function submitGlobalSearch() {
}
.appShell--leftCollapsed .leftNav__item {
width: 100%;
min-height: 50px;
height: 50px;
padding: 11px 0;
gap: 0;
justify-content: center;
@@ -1009,7 +1013,7 @@ function submitGlobalSearch() {
display: grid;
align-content: start;
justify-items: stretch;
gap: 12px;
gap: 10px;
overflow: hidden;
}