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

Fix app bar for small screens
All checks were successful
continuous-integration/drone/pr Build is passing
Details
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Jan Bader 2022-03-02 22:48:16 +00:00
parent 971c3d3be5
commit 38e21786a7
3 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body class="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-200"> <body class="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-200 box-border w-full">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

52
web/src/App.vue
View File

@ -27,35 +27,33 @@ export default defineComponent({
</script> </script>
<template> <template>
<div class="box-border w-full"> <div class="flex flex-col md:flex-row flex-1">
<div class="flex flex-col md:flex-row flex-1"> <div
<div :class="[Menu.Expand ? 'md:w-72' : 'md:w-36', Menu.Show ? '' : 'hidden']"
:class="[Menu.Expand ? 'md:w-72' : 'md:w-36', Menu.Show ? '' : '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" >
> <router-view name="sidebar"></router-view>
<router-view name="sidebar"></router-view> </div>
<div class="flex-1">
<div class="flex bg-gray-400 dark:bg-gray-600 p-4 fixed md:static top-0 left-0 w-full h-14">
<span
class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
@click="toggleMenuSize"
>≡</span>
<span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
<span class="flex-1">{{ CurrentBudgetName }}</span>
<div class="flex flex-1 flex-row justify-end -mx-4">
<router-link class="mx-4" v-if="LoggedIn" to="/dashboard">Dashboard</router-link>
<router-link class="mx-4" v-if="!LoggedIn" to="/login">Login</router-link>
<a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
</div>
</div> </div>
<div class="flex-1"> <div class="p-3 pl-6">
<div class="flex bg-gray-400 dark:bg-gray-600 p-4"> <router-view></router-view>
<span
class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
@click="toggleMenuSize"
>≡</span>
<span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
<span class="flex-1">{{ CurrentBudgetName }}</span>
<div class="flex flex-1 flex-row justify-end -mx-4">
<router-link class="mx-4" v-if="LoggedIn" to="/dashboard">Dashboard</router-link>
<router-link class="mx-4" v-if="!LoggedIn" to="/login">Login</router-link>
<a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
</div>
</div>
<div class="p-3 pl-6">
<router-view></router-view>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -30,7 +30,7 @@ function getAccountName(account : Account) {
</script> </script>
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col mt-14 md:mt-0">
<span class="m-2 p-1 px-3 h-10 overflow-hidden" :class="[ExpandMenu ? 'text-2xl' : 'text-md']"> <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> <router-link to="/dashboard" style="font-size:150%">⌂</router-link>
{{CurrentBudgetName}} {{CurrentBudgetName}}