From fd98e1eb3c18ccf1e2c7cf8687a3014316932b18 Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Wed, 2 Oct 2024 14:30:34 +0200
Subject: [PATCH] add explanations

---
 app/components/navigation/ButtonLinks.vue | 28 -----------------------
 app/components/navigation/FilterItem.vue  |  4 +++-
 app/pages/charts.vue                      | 12 +++++-----
 3 files changed, 9 insertions(+), 35 deletions(-)
 delete mode 100644 app/components/navigation/ButtonLinks.vue

diff --git a/app/components/navigation/ButtonLinks.vue b/app/components/navigation/ButtonLinks.vue
deleted file mode 100644
index 9fe6f61..0000000
--- a/app/components/navigation/ButtonLinks.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import Links from "~/components/navigation/Links.vue";
-import DropDownButton from "~/components/util/DropDownButton.vue";
-</script>
-
-<template>
-  <DropDownButton icon="ion:stats-chart">
-    <div id="links">
-      <Links/>
-    </div>
-  </DropDownButton>
-</template>
-
-<style scoped>
-#links {
-  display: flex;
-  flex-direction: column;
-
-  gap: 20px;
-}
-
-:deep(select) {
-  padding: 5px 10px;
-  background: var(--surface-300);
-
-  border-radius: 5px;
-}
-</style>
\ No newline at end of file
diff --git a/app/components/navigation/FilterItem.vue b/app/components/navigation/FilterItem.vue
index 628510f..7c5477e 100644
--- a/app/components/navigation/FilterItem.vue
+++ b/app/components/navigation/FilterItem.vue
@@ -3,6 +3,7 @@ const model = defineModel();
 
 const { canClear = false } = defineProps<{
 	title: string;
+  explanation: string
 	options: string[];
 	canClear?: boolean;
 }>();
@@ -10,7 +11,7 @@ const { canClear = false } = defineProps<{
 
 <template>
   <div id="main">
-    <div id="title">{{ title }}</div>
+    <abbr :title="explanation" id="title">{{ title }}</abbr>
     <select v-model="model">
       <option v-if="canClear">
       </option>
@@ -29,6 +30,7 @@ const { canClear = false } = defineProps<{
 
   #title {
     font-size: small;
+    text-decoration: none;
   }
 
   select{
diff --git a/app/pages/charts.vue b/app/pages/charts.vue
index 412387a..56cb28f 100644
--- a/app/pages/charts.vue
+++ b/app/pages/charts.vue
@@ -36,12 +36,12 @@ const explanation = computed(() => {
 <template>
   <Teleport to="#navBody">
     <div id="links">
-      <FilterItem v-model="projectType" :options="['mod', 'plugin', 'datapack', 'shader', 'resourcepack', 'modpack']" title="Type"/>
-      <FilterItem v-model="stat" :options="['count', 'downloads', 'versions']" title="Stat"/>
-      <FilterItem v-model="versionGroup" :options="['major', 'minor', 'all']" title="Version Group"/>
-      <FilterItem v-model="versionFrom" :can-clear="true" :options="from" title="Version From"/>
-      <FilterItem v-model="versionTo" :can-clear="true" :options="to" title="Version To"/>
-      <FilterItem v-model="exclusive" :options="['yes', 'no']" title="Exclusive"/>
+      <FilterItem v-model="projectType" :options="['mod', 'plugin', 'datapack', 'shader', 'resourcepack', 'modpack']" title="Type" explanation=""/>
+      <FilterItem v-model="stat" :options="['count', 'downloads', 'versions']" title="Stat" explanation=""/>
+      <FilterItem v-model="versionGroup" :options="['major', 'minor', 'all']" title="Version Group" explanation="What type of Minecraft versions should be displayed"/>
+      <FilterItem v-model="versionFrom" :can-clear="true" :options="from" title="Version From" explanation="Whats the first version that should be displayed"/>
+      <FilterItem v-model="versionTo" :can-clear="true" :options="to" title="Version To" explanation="Whats the last version that should be displayed"/>
+      <FilterItem v-model="exclusive" :options="['yes', 'no']" title="Exclusive" explanation="Only show Versions made for a single launcher"/>
     </div>
   </Teleport>
   <Charts :data="data" :type="projectType as string"/>
-- 
2.51.2