Compare commits

..

No commits in common. "636324deea42ff793efe472f06689a72d6573358" and "55b00030ac2aaa32792d06555c0a504c35c2730d" have entirely different histories.

5 changed files with 45 additions and 55 deletions

View file

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

View file

@ -1,9 +1,42 @@
<script setup lang="ts"> <script setup lang="ts">
import TheSearch from '@/components/TheSearch.vue'; 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> </script>
<template> <template>
<div class="w-screen bg-background-100 dark:bg-background-900 p-2"> <form class="sticky top-0 flex flex-row place-content-center">
<TheSearch /> <label class="hidden" for="searchBar">Suche</label>
<div class="flex flex-row w-full max-w-5xl">
<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>
</div>
</form>
</template> </template>

View file

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

View file

@ -1,15 +1,13 @@
<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 place-content-center xl:w-3/4 place-self-center" class="flex flex-row"
> >
<FilterSidebar /> <FilterSidebar />
<TopicList class="grow" /> <TopicList />
</div> </div>
</template> </template>