Compare commits

..

2 commits

Author SHA1 Message Date
636324deea
improve responsiveness 2023-07-06 18:47:00 +02:00
fab03fac0c
search as separate component 2023-07-06 18:46:38 +02:00
5 changed files with 55 additions and 45 deletions

View file

@ -1,7 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { state, fetchPapers, getTopics } from '@/stores' import { fetchPapers, getTopics } from '@/stores'
import MainMenu from '@/components/MainMenu.vue' import MainMenu from '@/components/MainMenu.vue'
import SearchBar from '@/components/SearchBar.vue'
/* import FooterMenu from '@/components/FooterMenu.vue' */ /* import FooterMenu from '@/components/FooterMenu.vue' */
import { onMounted } from 'vue' import { onMounted } from 'vue'
@ -25,10 +24,9 @@ onMounted (async () => {
</h1> </h1>
<MainMenu /> <MainMenu />
</div> </div>
<SearchBar />
</header> </header>
<main class="max-w-5xl m-auto"> <main class="flex flex-col">
<RouterView> <RouterView>
</RouterView> </RouterView>
</main> </main>

View file

@ -1,42 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { updateSearch } from '@/stores'; import TheSearch from '@/components/TheSearch.vue';
import { onUpdated, ref } from 'vue';
let searchValue = ref('')
let searchType = ref('')
function submit(type: string) { searchType = ref(type) }
onUpdated(() => updateSearch(searchValue, searchType))
</script> </script>
<template> <template>
<form class="sticky top-0 flex flex-row place-content-center"> <div class="w-screen bg-background-100 dark:bg-background-900 p-2">
<label class="hidden" for="searchBar">Suche</label> <TheSearch />
<div class="flex flex-row w-full max-w-5xl"> </div>
<input
id="searchBar"
class="p-6 grow bg-transparent placeholder:text-text-300 dark:placeholder:text-text-700 text-2xl text-center focus-visible:outline focus-visible:outline-current"
type="search"
placeholder="z. B. Thema, Name, VII-EF-08640, …"
v-model="searchValue"
@keyup.alt.enter.exact="submit('assist')"
@keyup.enter.exact="submit('filter')"
/>
<div class="flex flex-row p-4 place-content-center">
<button
class="py-2 px-4 bg-primary-button-500 hover:bg-primary-button-600 rounded-l-lg text-white"
@click.prevent="submit('filter')"
aria-keyshortcuts="Enter"
>Suchen
</button>
<button
class="py-2 px-4 bg-secondary-button-500 hover:bg-secondary-button-600 rounded-r-lg text-white"
@click.prevent="submit('assist')"
aria-keyshortcuts="Alt+Enter"
title="Tastenkürzel: Alt + Enter"
>Fragen
</button>
</div>
</div>
</form>
</template> </template>

View file

@ -0,0 +1,42 @@
<script setup lang="ts">
import { updateSearch } from '@/stores';
import { onUpdated, ref } from 'vue';
let searchValue = ref('');
let searchType = ref('');
function submit(type: string) { searchType = ref(type) };
onUpdated(() => updateSearch(searchValue, searchType));
</script>
<template>
<form class="sticky top-2 flex flex-row place-content-center">
<label class="hidden" for="searchBar">Suche</label>
<div class="flex flex-row w-full max-w-5xl gap-2">
<input
id="searchBar"
class="p-2 grow placeholder:text-text-300 dark:placeholder:text-text-700 text-xl text-center focus-visible:outline focus-visible:outline-current rounded-xl bg-background-100 dark:bg-background-900"
type="search"
placeholder="Suchen, z. B. Thema, Name, VII-EF-08640, …"
v-model="searchValue"
@keyup.alt.enter.exact="submit('assist')"
@keyup.enter.exact="submit('filter')"
/>
<div class="flex flex-row place-content-center">
<button
class="py-2 px-4 bg-primary-button-500 hover:bg-primary-button-600 rounded-l-lg text-white"
@click.prevent="submit('filter')"
aria-keyshortcuts="Enter"
>Suchen
</button>
<button
class="py-2 px-4 bg-secondary-button-500 hover:bg-secondary-button-600 rounded-r-lg text-white"
@click.prevent="submit('assist')"
aria-keyshortcuts="Alt+Enter"
title="Tastenkürzel: Alt + Enter"
>Fragen
</button>
</div>
</div>
</form>
</template>

View file

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import TheSearch from '@/components/TheSearch.vue'
</script> </script>
<template> <template>
Landing Page <TheSearch />
</template> </template>

View file

@ -1,13 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import FilterSidebar from '@/components/papers/FilterSidebar.vue' import FilterSidebar from '@/components/papers/FilterSidebar.vue'
import TopicList from '@/components/papers/TopicList.vue' import TopicList from '@/components/papers/TopicList.vue'
import SearchBar from '@/components/SearchBar.vue'
</script> </script>
<template> <template>
<SearchBar />
<div <div
class="flex flex-row" class="flex flex-row place-content-center xl:w-3/4 place-self-center"
> >
<FilterSidebar /> <FilterSidebar />
<TopicList /> <TopicList class="grow" />
</div> </div>
</template> </template>