mirrors/homebox
1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2025-08-03 08:10:28 +00:00
Code Issues Projects Releases Packages Wiki Activity

(WIP) unify card styles

Browse source
This commit is contained in:
Hayden 2022-09-24 18:36:18 -08:00
parent 8bb13f6bf4
commit 17c29efdeb
2 changed files with 69 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/components/Base/Card.vue Normal file
View file

@ -0,0 +1,20 @@
<template>
<div class="card bg-base-100 shadow-xl sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg font-medium leading-6">
<slot name="title"></slot>
</h3>
<p v-if="$slots.subtitle" class="mt-1 max-w-2xl text-sm text-gray-500">
<slot name="subtitle"></slot>
</p>
<template v-if="$slots['title-actions']">
<slot name="title-actions"></slot>
</template>
</div>
<slot />
</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>

62
frontend/pages/home.vue
View file

@ -101,7 +101,7 @@
</script>
<template>
<BaseContainer class="space-y-16 pb-16">
<div>
<BaseModal v-model="importDialog">
<template #title> Import CSV File </template>
<p>
@ -112,6 +112,7 @@
<form @submit.prevent="submitCsvFile">
<div class="flex flex-col gap-2 py-6">
<input ref="importRef" type="file" class="hidden" accept=".csv" @change="setFile" />
<BaseButton type="button" @click="uploadCsv">
<Icon class="h-5 w-5 mr-2" name="mdi-upload" />
Upload
@ -126,30 +127,28 @@
</div>
</form>
</BaseModal>
<BaseContainer class="flex flex-col gap-16 pb-16">
<section>
<BaseCard>
<template #title> Welcome Back, {{ auth.self ? auth.self.name : "Username" }} </template>
<template #subtitle> {{ auth.self.isSuperuser ? "Admin" : "User" }} </template>
<template #title-actions>
<div class="flex justify-end gap-2">
<div class="tooltip" data-tip="Import CSV File">
<button class="btn btn-primary btn-sm" @click="openDialog">
<Icon name="mdi-database" class="mr-2"></Icon>
Import
</button>
</div>
<BaseButton type="button" size="sm">
<Icon class="h-5 w-5 mr-2" name="mdi-person" />
Profile
</BaseButton>
</div>
</template>
<section aria-labelledby="profile-overview-title" class="mt-8">
<div class="overflow-hidden rounded-lg bg-white shadow">
<h2 id="profile-overview-title" class="sr-only">Profile Overview</h2>
<div class="bg-white p-6">
<div class="sm:flex sm:items-center sm:justify-between">
<div class="sm:flex sm:space-x-5">
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
<p class="text-sm font-medium text-gray-600">Welcome back,</p>
<p class="text-xl font-bold text-gray-900 sm:text-2xl">{{ auth.self.name }}</p>
<p class="text-sm font-medium text-gray-600">{{ auth.self.isSuperuser ? "Admin" : "User" }}</p>
</div>
</div>
<div class="mt-5 flex justify-center sm:mt-0">
<a
href="#"
class="flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
>View profile</a
>
</div>
</div>
</div>
<div
class="grid grid-cols-1 divide-y divide-gray-200 border-t border-gray-200 bg-gray-50 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
class="grid grid-cols-1 divide-y divide-gray-300 border-t border-gray-300 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
>
<div v-for="stat in stats" :key="stat.label" class="px-6 py-5 text-center text-sm font-medium">
<span class="text-gray-900">{{ stat.value.value }}</span>
@ -157,7 +156,7 @@
<span class="text-gray-600">{{ stat.label }}</span>
</div>
</div>
</div>
</BaseCard>
</section>
<section>
@ -168,18 +167,8 @@
</section>
<section>
<BaseSectionHeader class="mb-5">
Items
<template #description>
<div class="tooltip" data-tip="Import CSV File">
<button class="btn btn-primary btn-sm" @click="openDialog">
<Icon name="mdi-database" class="mr-2"></Icon>
Import
</button>
</div>
</template>
</BaseSectionHeader>
<div class="grid sm:grid-cols-2 gap-4">
<BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<ItemCard v-for="item in items" :key="item.id" :item="item" />
</div>
</section>
@ -191,4 +180,5 @@
</div>
</section>
</BaseContainer>
</div>
</template>