From 1863e96d655d9712303de2ddd0d36193445959aa Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Tue, 1 Oct 2024 19:37:56 +0200
Subject: [PATCH] start a bit of style

---
 app/components/navigation/FilterItem.vue | 31 ++++++++++++++++++------
 app/pages/charts.vue                     | 19 ++++++++++-----
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/app/components/navigation/FilterItem.vue b/app/components/navigation/FilterItem.vue
index e78c9d6..628510f 100644
--- a/app/components/navigation/FilterItem.vue
+++ b/app/components/navigation/FilterItem.vue
@@ -2,21 +2,38 @@
 const model = defineModel();
 
 const { canClear = false } = defineProps<{
+	title: string;
 	options: string[];
 	canClear?: boolean;
 }>();
 </script>
 
 <template>
-  <select v-model="model">
-    <option v-if="canClear">
-    </option>
-    <option v-for="option in options" :value="option">
-      {{ option }}
-    </option>
-  </select>
+  <div id="main">
+    <div id="title">{{ title }}</div>
+    <select v-model="model">
+      <option v-if="canClear">
+      </option>
+      <option v-for="option in options" :value="option">
+        {{ option }}
+      </option>
+    </select>
+  </div>
 </template>
 
 <style scoped>
+#main{
+  background: var(--surface-200);
+  padding: 5px 10px;
+  border-radius: 5px;
 
+  #title {
+    font-size: small;
+  }
+
+  select{
+    font-size: medium;
+    width: 100%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/app/pages/charts.vue b/app/pages/charts.vue
index 8540177..412387a 100644
--- a/app/pages/charts.vue
+++ b/app/pages/charts.vue
@@ -35,12 +35,14 @@ const explanation = computed(() => {
 
 <template>
   <Teleport to="#navBody">
-    <FilterItem v-model="projectType" :options="['mod', 'plugin', 'datapack', 'shader', 'resourcepack', 'modpack']"/>
-    <FilterItem v-model="stat" :options="['count', 'downloads', 'versions']"/>
-    <FilterItem v-model="versionGroup" :options="['major', 'minor', 'all']"/>
-    <FilterItem v-model="versionFrom" :can-clear="true" :options="from"/>
-    <FilterItem v-model="versionTo" :can-clear="true" :options="to"/>
-    <FilterItem v-model="exclusive" :options="['yes', 'no']"/>
+    <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"/>
+    </div>
   </Teleport>
   <Charts :data="data" :type="projectType as string"/>
   <div id="tooltip">
@@ -51,6 +53,11 @@ const explanation = computed(() => {
 </template>
 
 <style scoped>
+#links{
+  display: flex;
+  gap: 20px;
+}
+
 #tooltip {
   position: absolute;
 
-- 
2.51.2