Try to use tailwind
This commit is contained in:
parent
f7dfc7b455
commit
d825379a01
@ -24,30 +24,27 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-app>
|
||||
<v-app-bar app>
|
||||
<v-app-bar-nav-icon @click="toggleMenu" />
|
||||
<div class="flex-row">
|
||||
<div class="flex w-full">
|
||||
<span class="flex-1" @click="toggleMenu">Home</span>
|
||||
|
||||
<v-app-bar-title>{{$store.getters.CurrentBudget.Name}}</v-app-bar-title>
|
||||
<span class="flex-1">{{$store.getters.CurrentBudget.Name}}</span>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<div class="flex flex-1 flex-row">
|
||||
<router-link class="flex-1" v-if="loggedIn" to="/">Dashboard</router-link>
|
||||
<router-link class="flex-1" v-if="!loggedIn" to="/login">Login</router-link>
|
||||
<a class="flex-1" v-if="loggedIn" @click="logout">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-btn v-if="loggedIn"><router-link to="/">Dashboard</router-link></v-btn>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn v-if="!loggedIn"><router-link to="/login">Login</router-link></v-btn>
|
||||
<v-btn v-if="loggedIn"><a @click="logout">Logout</a></v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
<v-navigation-drawer app v-model="$store.state.ShowMenu">
|
||||
<div :class="$store.state.ShowMenu ? 'visible' : 'hidden'">
|
||||
<router-view name="sidebar"></router-view>
|
||||
</v-navigation-drawer>
|
||||
</div>
|
||||
|
||||
<v-main>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@ -55,8 +52,5 @@ export default defineComponent({
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,75 +1,40 @@
|
||||
<script>import { NEW_BUDGET } from "../store/action-types";
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { NEW_BUDGET } from "../store/action-types";
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dialog: false,
|
||||
budgetName: ""
|
||||
}
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
budgetName: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
saveBudget() {
|
||||
this.$store.dispatch(NEW_BUDGET, this.$data.budgetName);
|
||||
this.$data.dialog = false;
|
||||
},
|
||||
methods: {
|
||||
saveBudget () {
|
||||
this.$store.dispatch(NEW_BUDGET, this.$data.budgetName);
|
||||
this.$data.dialog = false;
|
||||
},
|
||||
newBudget () {
|
||||
this.$data.dialog = true;
|
||||
}
|
||||
newBudget() {
|
||||
this.$data.dialog = true;
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row justify="center">
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
v-bind="attrs"
|
||||
@click="newBudget"
|
||||
>
|
||||
New Budget
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="text-h5">New Budget</span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-model="budgetName"
|
||||
label="Budget name"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="blue darken-1"
|
||||
text
|
||||
@click="dialog = false"
|
||||
>
|
||||
Close
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="blue darken-1"
|
||||
text
|
||||
@click="saveBudget"
|
||||
>
|
||||
Save
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
<button color="primary" dark @click="newBudget">New Budget</button>
|
||||
<div v-if="dialog" justify="center">
|
||||
<div>
|
||||
<div>
|
||||
<span class="text-h5">New Budget</span>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" v-model="budgetName" label="Budget name" required />
|
||||
</div>
|
||||
<div>
|
||||
<button color="blue darken-1" text @click="dialog = false">Close</button>
|
||||
<button color="blue darken-1" text @click="saveBudget">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
3
web/src/index.css
Normal file
3
web/src/index.css
Normal file
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@ -1,17 +1,13 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './index.css'
|
||||
import router from './router/routes.js'
|
||||
import { store, key } from './store/index.js'
|
||||
import vuetify from './plugins/vuetify'
|
||||
import { loadFonts } from './plugins/webfontloader'
|
||||
import { SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET } from './store/action-types'
|
||||
|
||||
loadFonts()
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
app.use(store, key)
|
||||
app.use(vuetify)
|
||||
app.mount('#app')
|
||||
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
|
||||
@ -10,13 +10,13 @@ export default defineComponent({
|
||||
|
||||
<template>
|
||||
<h1>Budgets</h1>
|
||||
<v-container>
|
||||
<v-card v-for="budget in $store.getters.Budgets" class="budget-item">
|
||||
<v-card-title class="text-h5 grey lighten-2">
|
||||
<div>
|
||||
<div v-for="budget in $store.getters.Budgets" class="budget-item">
|
||||
<div class="text-h5 grey lighten-2">
|
||||
<router-link v-bind:to="'/budget/'+budget.ID">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</router-link>
|
||||
</v-card-title>
|
||||
</div>
|
||||
<v-card-text><span class="time"></span></v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
<NewBudget />
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
@ -7,12 +7,12 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container>
|
||||
<div class="container col-md-8 col-ld-8" id="content">
|
||||
Willkommen bei Budgeteer, der neuen App für's Budget!
|
||||
</div>
|
||||
<div class="container col-md-4" id="login">
|
||||
<a href="/login">Login</a> or <a href="/login">register</a>
|
||||
</div>
|
||||
</v-container>
|
||||
<div>
|
||||
<div class="font-bold" id="content">
|
||||
Willkommen bei Budgeteer, der neuen App für's Budget!
|
||||
</div>
|
||||
<div class="container col-md-4" id="login">
|
||||
<router-link to="/login">Login</router-link> or <router-link to="/login">register</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -6,7 +6,7 @@ import { defineComponent } from "vue";
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
error: [],
|
||||
error: "",
|
||||
login: {
|
||||
user: "",
|
||||
password: ""
|
||||
@ -18,14 +18,14 @@ export default defineComponent({
|
||||
this.$store.commit(TITLE, "Login");
|
||||
},
|
||||
methods: {
|
||||
formSubmit(e) {
|
||||
formSubmit(e : MouseEvent) {
|
||||
e.preventDefault();
|
||||
this.$store.dispatch(LOGIN, this.$data.login)
|
||||
.then(x => {
|
||||
this.$data.error = "";
|
||||
this.$router.replace("/dashboard");
|
||||
})
|
||||
.catch(x => this.$data.error = ["The entered credentials are invalid!"]);
|
||||
.catch(x => this.$data.error = "The entered credentials are invalid!");
|
||||
|
||||
// TODO display invalidCredentials
|
||||
// TODO redirect to dashboard on success
|
||||
@ -35,29 +35,14 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field v-model="login.user" type="text" label="Username" />
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
v-model="login.password"
|
||||
label="Password"
|
||||
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
@click:append="showPassword = showPassword"
|
||||
:error-message="error"
|
||||
error-count="2"
|
||||
error
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="form-group">{{ error }}</div>
|
||||
<v-btn type="submit" @click="formSubmit">Login</v-btn>
|
||||
<div>
|
||||
<input type="text" v-model="login.user" label="Username" />
|
||||
<input type="password" v-model="login.password" label="Password" />
|
||||
</div>
|
||||
<div>{{ error }}</div>
|
||||
<button type="submit" @click="formSubmit">Login</button>
|
||||
<p>
|
||||
New user?
|
||||
<router-link to="/register">Register</router-link>instead!
|
||||
</p>
|
||||
</v-container>
|
||||
</template>
|
||||
@ -1,5 +1,8 @@
|
||||
module.exports = {
|
||||
content: [],
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}"
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vuetify from '@vuetify/vite-plugin'
|
||||
|
||||
import path from 'path'
|
||||
|
||||
@ -9,9 +8,6 @@ export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
|
||||
vuetify({
|
||||
autoImport: true,
|
||||
}),
|
||||
],
|
||||
define: { 'process.env': {} },
|
||||
resolve: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user