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