improve topic list

src/components/papers/FilterSidebar.vue

@@ -66,14 +66,15 @@ onUpdated(() => {
 </script>
 
 <template>
-  <form class="mr-4 mt-4">
-    <label for="typeSelect">Kategorie</label>
+  <form class="mr-4 mt-4 flex flex-row gap-4">
+    <label class="hidden" for="typeSelect">Kategorie</label>
     <div class="flex flex-row mb-4">
       <select
         id="typeSelect"
         class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
         v-model="filterType"
         >
+        <option value="" selected disabled>Kategorie</option>
         <option
           v-for="(type, i) of paperTypes"
           :key="i"
@@ -82,18 +83,19 @@ onUpdated(() => {
         </option>
       </select>
       <button 
-        class="pl-2"
+        class="pl-1"
         @click.prevent="resetFilterType()"
         title="zurücksetzen"
         >✖
       </button>
     </div>
-    <label for="originatorSelect">Einreicher</label>
+    <label class="hidden" for="originatorSelect">Einreicher</label>
     <div class="flex flex-row mb-4">
       <select 
         id="originatorSelect"
         class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
         v-model="filterOriginator">
+        <option value="" selected disabled>Einreicher</option>
         <option
           v-for="(originator, i) of paperOriginators"
           :key="i"
@@ -101,7 +103,7 @@ onUpdated(() => {
         </option>
       </select>
       <button 
-        class="pl-2"
+        class="pl-1"
         @click.prevent="resetFilterOriginator()"
         title="zurücksetzen"
         >✖

src/components/papers/TopicList.vue

@@ -51,46 +51,62 @@ const filteredData = computed(() => {
 })
 let filteredDataLength: number = 0
 
-function objectLength(data: any) {
-  return Object.keys(data).length
+async function objectLength(data: any) {
+  return await Object.keys(await data).length
 }
 function date(paperDate: string) {
   const date = new Date(paperDate)
-  return new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' }).format(date)
+  return new Intl.DateTimeFormat('de-DE', { dateStyle: 'long' }).format(date)
 }
 onMounted(() => {
-  filteredDataLength = objectLength(filteredData)
+  objectLength(filteredData).then((length) => {
+    filteredDataLength = length;
+  })
 })
 onUpdated(() => {
-  filteredDataLength = objectLength(filteredData)
+  objectLength(filteredData).then((length) => {
+    filteredDataLength = length;
+  })
 })
 </script>
 
 <template>
-  <ul
-    v-if="filteredDataLength > 0"
-    class="w-full grid grid-flow-row gap-2 my-2"
-  >
+  <div class="flex flex-col mt-2">
     <p>Wir konnten {{ filteredDataLength }} Einträge finden</p>
+    <ul
+      v-if="filteredDataLength >= 0"
+      class="w-full grid grid-flow-row gap-4 my-2 grid-cols-1 md:grid-cols-2 2xl:grid-cols-3"
+    >
       <li 
+        class="flex flex-col px-6 py-4 gap-2 rounded-lg bg-background-100 dark:bg-background-900 max-w-md"
         v-for="(topic, i) in filteredData"
         :key="i"
       >
-      <article
-        class="p-4 rounded-lg bg-background-100 dark:bg-background-900"
-      >
-        <RouterLink :to="'themen/' + topic.reference">
-          <p class="text-xl">{{ topic.papers[0].name }}</p>
-        </RouterLink>
-        <p>
-          {{ date(topic.papers[0].published_at) }}: 
+        <div class="flex gap-3 flex-wrap">
+          <span
+            class="inline-block px-3 py-2 rounded-lg bg-background-200 dark:bg-background-800 text-text-700 dark:text-text-300 whitespace-nowrap"
+          >{{ date(topic.papers[0].published_at) }}</span>
+          <span
+            class="inline-block px-3 py-2 rounded-lg bg-background-200 dark:bg-background-800 text-text-700 dark:text-text-300"
+          >{{ topic.papers[0].originator }}</span>
+        </div>
+        <div class="my-2">
+          <p class="font-bold">{{ topic.papers[0].paper_type}}</p>
+          <RouterLink
+            class="text-2xl"
+            :to="'themen/' + topic.reference"
+          >{{ topic.papers[0].name }}</RouterLink>
+        </div>
+        <div class="flex flex-row gap-3 mt-auto ml-auto">
+          <RouterLink
+            class="px-3 py-2 rounded-xl bg-primary-button-400 dark:bg-background-800 text-text-800 dark:text-text-200"
+            :to="'themen/' + topic.reference"
+          >Details</RouterLink>
           <a 
+            class="px-3 py-2 rounded-xl bg-secondary-button-200 dark:bg-secondary-button-800 text-text-800 dark:text-text-200"
             :href="topic.papers[0].url"
-            class="text-secondary-button-600 dark:text-secondary-button-400"
-            >{{ topic.papers[0].paper_type}} von {{ topic.papers[0].originator }}
-          </a>
-        </p>
-      </article>
+          >Extern öffnen</a>
+        </div>
       </li>
     </ul>
     <p
@@ -103,4 +119,5 @@ onUpdated(() => {
       v-else
       >Da scheint etwas schief gelaufen zu sein.
     </p>
+  </div>
 </template>

src/views/TheTopics.vue

@@ -7,9 +7,9 @@ import SearchBar from '@/components/SearchBar.vue'
 <template>
   <SearchBar />
   <div
-    class="flex flex-row place-content-center xl:w-3/4 place-self-center"
+    class="flex flex-col place-content-center xl:w-3/4 place-self-center"
     >
     <FilterSidebar />
-    <TopicList class="grow" />
+    <TopicList />
   </div>
 </template>