vbatts/homebox
1
0
Fork 0
forked from mirrors/homebox
Code Pull requests Activity

update styles

Browse source
This commit is contained in:
Hayden 2022-08-30 21:22:32 -08:00
parent 939d0a429d
commit 890eb55d27
5 changed files with 235 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/components.d.ts vendored
View file

@ -8,14 +8,12 @@ export {}
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
export interface GlobalComponents { export interface GlobalComponents {
AppHeader: typeof import('./src/components/AppHeader.vue')['default'] AppHeader: typeof import('./src/components/AppHeader.vue')['default']
Icon: typeof import('./src/components/Icon.vue')['default'] AppToast: typeof import('./src/components/App/Toast.vue')['default']
FormTextField: typeof import('./src/components/Form/TextField.vue')['default']
'Icon:bx:bxMoon': typeof import('~icons/bx/bx-moon')['default'] 'Icon:bx:bxMoon': typeof import('~icons/bx/bx-moon')['default']
'Icon:bx:bxsMoon': typeof import('~icons/bx/bxs-moon')['default'] 'Icon:bx:bxsMoon': typeof import('~icons/bx/bxs-moon')['default']
'IconAkarIcons:githubFill': typeof import('~icons/akar-icons/github-fill')['default'] 'IconAkarIcons:githubFill': typeof import('~icons/akar-icons/github-fill')['default']
Notifier: typeof import('./src/components/App/Notifier.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
TextField: typeof import('./src/components/Form/TextField.vue')['default']
Toast: typeof import('./src/components/App/Toast.vue')['default']
} }
} }

24
frontend/index.html
View file

@ -1,29 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="night"> <html lang="en" data-theme="garden">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> <title>Vitailse | Opinionated vite starter template with TailwindCSS</title>
Vitailse | Opinionated vite starter template with TailwindCSS
</title>
<meta <meta name="description" content="Opinionated vite starter template with TailwindCSS" />
name="description"
content="Opinionated vite starter template with TailwindCSS"
/>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.png" type="image/png" /> <link rel="icon" href="/favicon.png" type="image/png" />
<link <link rel="alternate icon" href="/favicon.ico" type="image/png" sizes="16x16" />
rel="alternate icon" <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
href="/favicon.ico"
type="image/png"
sizes="16x16"
/>
<link
rel="apple-touch-icon"
href="/apple-touch-icon.png"
sizes="180x180"
/>
<link rel="mask-icon" href="/favicon.png" color="#076AE0" /> <link rel="mask-icon" href="/favicon.png" color="#076AE0" />
<meta name="theme-color" content="#076AE0" /> <meta name="theme-color" content="#076AE0" />
</head> </head>

76
frontend/src/pages/home.vue
View file

@ -1,6 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { useUserApi } from '@/composables/use-api';
import { useAuthStore } from '@/store/auth'; import { useAuthStore } from '@/store/auth';
import { type Location } from '@/api/classes/locations';
import { Icon } from '@iconify/vue';
import { useUserApi } from '@/composables/use-api';
useHead({ useHead({
title: 'Homebox | Home', title: 'Homebox | Home',
}); });
@ -17,6 +19,17 @@
} }
}); });
const locations = ref<Location[]>([]);
onMounted(async () => {
const { data } = await api.locations.getAll();
if (data) {
console.log(data);
locations.value = data.items;
}
});
const authStore = useAuthStore(); const authStore = useAuthStore();
const router = useRouter(); const router = useRouter();
@ -42,13 +55,28 @@
last: true, last: true,
}, },
]; ];
const dropdown = [
{
name: 'Location',
action: () => {},
},
{
name: 'Item / Asset',
action: () => {},
},
{
name: 'Label',
action: () => {},
},
];
</script> </script>
<template> <template>
<section class="max-w-7xl mx-auto"> <section class="max-w-6xl mx-auto">
<header class="sm:px-6 py-2 lg:p-14 sm:py-6"> <header class="sm:px-6 py-2 lg:px-14 sm:py-6">
<h2 class="mt-1 text-4xl font-bold tracking-tight text-gray-200 sm:text-5xl lg:text-6xl">Homebox</h2> <h2 class="mt-1 text-4xl font-bold tracking-tight text-base-content sm:text-5xl lg:text-6xl">Homebox</h2>
<div class="ml-1 text-lg text-gray-400 space-x-2"> <div class="ml-1 mt-2 text-lg text-base-content/50 space-x-2">
<template v-for="link in links"> <template v-for="link in links">
<router-link <router-link
v-if="!link.action" v-if="!link.action"
@ -63,10 +91,44 @@
<span v-if="!link.last"> / </span> <span v-if="!link.last"> / </span>
</template> </template>
</div> </div>
<div class="flex mt-6">
<div class="dropdown">
<label tabindex="0" class="btn btn-sm">
<span>
<Icon icon="mdi-plus" class="w-5 h-5 mr-2" />
</span>
Create
</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
<li v-for="btn in dropdown">
<button @click="btn.action">
{{ btn.name }}
</button>
</li>
</ul>
</div>
</div>
</header> </header>
</section> </section>
<section class="max-w-7xl mx-auto sm:px-6 lg:px-14"> <section class="max-w-6xl mx-auto sm:px-6 lg:px-14">
{{ user }} <div class="border-b border-gray-600 pb-3 mb-3">
<h3 class="text-lg text-base-content font-medium leading-6">Storage Locations</h3>
</div>
<div class="grid grid-cols-3 gap-4">
<a
:href="`#${l.id}`"
class="card bg-primary text-primary-content hover:-translate-y-1 focus:-translate-y-1 transition duration-300"
v-for="l in locations"
>
<div class="card-body p-4">
<h2 class="flex items-center gap-2">
<Icon icon="mdi-light:home" class="h-5 w-5" height="25" />
{{ l.name }}
<span class="badge badge-accent badge-lg ml-auto text-accent-content text-lg">0</span>
</h2>
</div>
</a>
</div>
</section> </section>
</template> </template>

17
frontend/vite.config.ts
View file

@ -21,6 +21,8 @@ export default defineConfig({
}), }),
Components({ Components({
dts: true, dts: true,
dirs: ['src/components'],
directoryAsNamespace: true,
resolvers: [ resolvers: [
IconsResolver({ IconsResolver({
prefix: 'icon', prefix: 'icon',
@ -37,6 +39,7 @@ export default defineConfig({
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue\??/, // .vue /\.vue\??/, // .vue
], ],
dirs: ['./composables'],
// global imports to register // global imports to register
imports: [ imports: [
@ -55,13 +58,7 @@ export default defineConfig({
}), }),
Layouts(), Layouts(),
VitePWA({ VitePWA({
includeAssets: [ includeAssets: ['favicon-16x16.png', 'favicon-32x32.png', 'favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
'favicon-16x16.png',
'favicon-32x32.png',
'favicon.ico',
'robots.txt',
'apple-touch-icon.png',
],
manifest: { manifest: {
name: 'Vitailse', name: 'Vitailse',
short_name: 'Vitailse', short_name: 'Vitailse',
@ -123,11 +120,7 @@ export default defineConfig({
}, },
// https://github.com/vitest-dev/vitest // https://github.com/vitest-dev/vitest
test: { test: {
include: [ include: ['src/__test__/**/*.test.ts', 'src/**/*.test.ts', 'src/__test__/**/*.spec.ts'],
'src/__test__/**/*.test.ts',
'src/**/*.test.ts',
'src/__test__/**/*.spec.ts',
],
environment: 'jsdom', environment: 'jsdom',
deps: { deps: {
inline: ['@vue', '@vueuse', 'vue-demi'], inline: ['@vue', '@vueuse', 'vue-demi'],