jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Fix Header overlapping content mobile

Browse Source
This commit is contained in:
Jan Bader 2022-04-19 20:59:18 +00:00
parent 65424a2587
commit 5c5429ab05
1 changed files with 19 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
web/src/pages/BudgetSidebar.vue
View File

@ -19,24 +19,23 @@ const OnBudgetAccounts = computed(() => accountStore.OnBudgetAccounts);
const OffBudgetAccounts = computed(() => accountStore.OffBudgetAccounts);
const OnBudgetAccountsBalance = computed(() => accountStore.OnBudgetAccountsBalance);
const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBalance);
function toggleMenu() {
useSettingsStore().toggleMenu();
}
</script>
<template>
<div
:class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
>
<div :class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black">
<div class="flex flex-col">
<span
class="m-2 p-1 px-3 h-10 overflow-hidden"
:class="[ExpandMenu ? 'text-2xl' : 'text-md']"
>
<router-link
to="/dashboard"
style="font-size: 150%"
>⌂</router-link>
{{ CurrentBudgetName }}
</span>
<div class="m-2 md:px-3 p-1">
<span class="font-bold-my-3 md:hidden font-bold text-5xl pr-3" @click="toggleMenu">≡</span>
<span class="h-10 overflow-hidden" :class="[ExpandMenu ? 'text-2xl' : 'text-md']">
<router-link to="/dashboard" class="text-5xl">⌂</router-link>
{{ CurrentBudgetName }}
</span>
</div>
<span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col">
<router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'">Budget</router-link>
<br>
@ -46,41 +45,21 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
<div class="flex flex-row justify-between font-bold">
<span>On-Budget Accounts</span>
<Currency
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
:value="OnBudgetAccountsBalance"
/>
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OnBudgetAccountsBalance" />
</div>
<div
v-for="account in OnBudgetAccounts"
:key="account.ID"
class="flex flex-row justify-between"
>
<div v-for="account in OnBudgetAccounts" :key="account.ID" class="flex flex-row justify-between">
<AccountWithReconciled :account="account" />
<Currency
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
:value="account.ClearedBalance"
/>
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
</div>
</li>
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
<div class="flex flex-row justify-between font-bold">
<span>Off-Budget Accounts</span>
<Currency
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
:value="OffBudgetAccountsBalance"
/>
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OffBudgetAccountsBalance" />
</div>
<div
v-for="account in OffBudgetAccounts"
:key="account.ID"
class="flex flex-row justify-between"
>
<div v-for="account in OffBudgetAccounts" :key="account.ID" class="flex flex-row justify-between">
<AccountWithReconciled :account="account" />
<Currency
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
:value="account.ClearedBalance"
/>
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
</div>
</li>
<!--