From ecbb85aeaa7eb08ccbc7c0ccea6dbb1094594495 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 1 Mar 2022 18:52:04 +0000
Subject: [PATCH] Decrease displayed information

---
 web/src/pages/Budgeting.vue | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index 1c5332c..0203b8a 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -71,30 +71,30 @@ function getGroupState(group: { Name: string, Expand: boolean }): boolean {
     <div>
         <router-link
             :to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
-        >Previous Month</router-link>-
+        >&lt;&lt;</router-link>&nbsp;
         <router-link
             :to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
-        >Current Month</router-link>-
+        >Current Month</router-link>&nbsp;
         <router-link
             :to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
-        >Next Month</router-link>
+        >&gt;&gt;</router-link>
     </div>
-    <div class="container col-lg-12 grid grid-cols-4 md:grid-cols-5" id="content">
-        <span>Category</span>
-        <span class="hidden md:block">Leftover</span>
-        <span>Assigned</span>
-        <span>Activity</span>
-        <span>Available</span>
+    <div class="container col-lg-12 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5" id="content">
+        <span class="hidden sm:block"></span>
+        <span class="hidden lg:block text-right">Leftover</span>
+        <span class="hidden sm:block text-right">Assigned</span>
+        <span class="hidden sm:block text-right">Activity</span>
+        <span class="hidden sm:block text-right">Available</span>
         <template v-for="group in GroupsForMonth">
             <a
-                class="text-lg font-bold col-span-4 md:col-span-5"
+                class="text-lg font-bold col-span-2 sm:col-span-4 lg:col-span-5"
                 @click="toggleGroup(group)"
             >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a>
             <template v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)">
-                <span>{{ category.Name }}</span>
-                <Currency :value="category.AvailableLastMonth" />
-                <Currency :value="category.Assigned" />
-                <Currency :value="category.Activity" />
+                <span class="whitespace-nowrap overflow-hidden">{{ category.Name }}</span>
+                <Currency :value="category.AvailableLastMonth" class="hidden lg:block" />
+                <Currency :value="category.Assigned" class="hidden sm:block" />
+                <Currency :value="category.Activity" class="hidden sm:block" />
                 <Currency :value="category.Available" />
             </template>
         </template>