Seekra/frontend
3
2
Fork 0
generated from Seekra/repository-template
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Move the search bar in the search results view into the navigation bar #82

Merged
jakob.scheid merged 10 commits from chore/searchbar into main 2026-05-29 18:30:06 +02:00
Conversation 4 Commits 10 Files Changed 2
+2 -96
2 changed files with 2 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2fd010ddfa - Show all commits
src/features/nav/components/Navbar.vue
+1 -1
View File
@@ -20,7 +20,7 @@ import { useRoute } from 'vue-router';
import ColorSchemeButton from '@/features/colorScheme/components/ColorSchemeButton.vue';
import LanguageSwitchButton from '@/features/i18n/components/LanguageSwitchButton.vue';
import logo from '@/assets/images/logo.svg';
import Searchbar from '@/features/nav/components/Searchbar-SearchResults.vue';
import Searchbar from '@/features/search/components/Searchbar.vue';
jakob.scheid marked this conversation as resolved Outdated
jakob.scheid commented 2026-05-29 16:07:21 +02:00
Outdated
Review
Copy Link
Copy Source

Usually, pascal case (PascalCase) is used when naming Vue.js components.

Usually, pascal case (PascalCase) is used when naming Vue.js components.
const route = useRoute();
const searchQueryModel = ref(route.name === 'searchResults' ? route.query.q || '' : '');
src/features/nav/components/Searchbar-SearchResults.vue
-94
View File
@@ -1,94 +0,0 @@
<!--
Copyright 2026 Seekra
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<script setup>
const searchQuery = defineModel();
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const router = useRouter()
const props = defineProps(['autoSubmit'])
const submitSearch = function () {
if (props.autoSubmit !== undefined) {
router.push({
name: 'searchResults',
query: { q: searchQuery.value }
});
};
}
</script>
<template>
<div>
<form @submit.prevent="submitSearch">
<div class="search-wrapper">
<input
v-model="searchQuery"
type="search"
:placeholder="t('search.searchBar.placeholder')"
required
/>
<button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
</div>
</form>
</div>
</template>
<style scoped>
.search-wrapper {
--submit-button-padding-y: 8px;
--content-height: 32px;
--padding: 4px;
--padding-left: calc(var(--content-height) + var(--padding));
display: flex;
align-items: center;
border: 1.5px solid var(--border);
box-shadow: 0 0px 32px var(--blue-box-shadow);
border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
padding: var(--padding);
padding-left: var(--padding-left);
width: calc(100% - var(--padding-left));
}
.search-wrapper input {
border: none;
outline: none;
width: 100%;
font-size: 1rem;
background: transparent;
height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
}
.search-button {
font-size: 1rem;
height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y));
border: none;
padding: var(--submit-button-padding-y) 20px;
background: var(--primary-color);
color: var(--white);
cursor: pointer;
white-space: nowrap;
}
.search-button:hover {
background: var(--primary-color-l-1);
}
</style>