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

Search bar below navbar #98

Closed
johannes.vos wants to merge 1 commits from bugfix/search-bar-below-navbar into main
pull from: bugfix/search-bar-below-navbar
merge into: Seekra:main
Conversation 2 Commits 1 Files Changed 2
+47 -7
2 changed files with 47 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/nav/components/Navbar.vue
+7
View File
@@ -89,7 +89,14 @@ watch(() => route.query.q, q => {
height: 24px;
width: auto;
}
.search-bar {
width: 70%;
}
@media (max-width: 1000px) {
jakob.scheid commented 2026-06-01 17:34:31 +02:00
Review
Copy Link
Copy Source

That is not a major device width break.

That is not a major device width break.
johannes.vos commented 2026-06-01 18:17:13 +02:00
Review
Copy Link
Copy Source

It‘s the critical width where it look bad

It‘s the critical width where it look bad
jakob.scheid commented 2026-06-01 18:30:35 +02:00
Review
Copy Link
Copy Source

Please use 67.5rem (the width where tablets begin)

Please use `67.5rem` (the width where tablets begin)
.search-bar {
display: none;
}
}
</style>
src/features/search/views/SearchResultsView.vue
+40 -7
View File
@@ -16,26 +16,59 @@ limitations under the License.
<script setup>
import { useI18n } from 'vue-i18n';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import Searchbar from '../components/Searchbar.vue';
const { t } = useI18n();
const route = useRoute();
const searchQuery = ref(route.query.q || '');
watch(() => route.query.q, (newQuery) => {
searchQuery.value = newQuery || '';
});
</script>
<template>
<div class="main-content-padding">
<div class="search-results-error-message-container">
<div class="search-results-error-message">
<p>{{ t('search.error.searchNotAvailable') }}</p>
<p>{{ t('error.tryAgainToAnotherTime') }}</p>
</div>
<div class="search-results-view">
<div class="search-bar-container main-content-padding">
<Searchbar v-model="searchQuery" class="search-bar" auto-submit />
</div>
<div class="search-results-container">
<div class="main-content-padding">
<div class="search-results-error-message-container">
<div class="search-results-error-message">
<p>{{ t('search.error.searchNotAvailable') }}</p>
<p>{{ t('error.tryAgainToAnotherTime') }}</p>
</div>
</div>
<div class="search-results-container">
</div>
</div>
</div>
</template>
<style scoped>
.search-results-view {
width: 100%;
}
.search-bar-container {
display: none;
justify-content: center;
padding-top: 30px;
padding-bottom: 30px;
border-bottom: 1px solid var(--border);
}
@media (max-width: 1000px) {
jakob.scheid commented 2026-06-01 18:31:43 +02:00
Review
Copy Link
Copy Source

Please use 67.5rem (the width where tablets begin)

Please use `67.5rem` (the width where tablets begin)
.search-bar-container {
display: flex;
}
}
.search-bar {
width: 50%;
max-width: 624px;
}
@media (max-width: 67.5rem) {