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>

108
frontend/pages/home.vue
View file

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