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

style updates

Browse source
This commit is contained in:
Hayden 2022-09-03 01:17:57 -08:00
parent f4f7123073
commit 6bbe62823d
19 changed files with 337 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

88
frontend/components/App/Header.vue
View file

@ -64,48 +64,52 @@
<LabelCreateModal v-model="modals.label" />
<LocationCreateModal v-model="modals.location" />
<BaseContainer is="header" class="py-6">
<h2 class="mt-1 text-4xl font-bold tracking-tight text-base-content sm:text-5xl lg:text-6xl flex">
HomeB
<AppLogo class="w-12 -mb-4" style="padding-left: 3px; padding-right: 2px" />
x
</h2>
<div class="ml-1 mt-2 text-lg text-base-content/50 space-x-2">
<template v-for="link in links">
<NuxtLink
v-if="!link.action"
class="hover:text-base-content transition-color duration-200 italic"
:to="link.href"
>
{{ link.name }}
</NuxtLink>
<button
for="location-form-modal"
v-else
@click="link.action"
class="hover:text-base-content transition-color duration-200 italic"
>
{{ link.name }}
</button>
<span v-if="!link.last"> / </span>
</template>
</div>
<div class="flex mt-6">
<div class="dropdown">
<label tabindex="0" class="btn btn-sm">
<span>
<Icon name="mdi-plus" class="mr-1 -ml-1" />
</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 class="bg-neutral absolute shadow-xl top-0 h-[50vh] max-h-96 sm:h-[28vh] -z-10 w-full"></div>
<BaseContainer is="header" class="py-6 max-w-none">
<BaseContainer>
<h2 class="mt-1 text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl flex">
HomeB
<AppLogo class="w-12 -mb-4" style="padding-left: 3px; padding-right: 2px" />
x
</h2>
<div class="ml-1 mt-2 text-lg text-neutral-content/75 space-x-2">
<template v-for="link in links">
<NuxtLink
v-if="!link.action"
class="hover:text-base-content transition-color duration-200 italic"
:to="link.href"
>
{{ link.name }}
</NuxtLink>
<button
for="location-form-modal"
v-else
@click="link.action"
class="hover:text-base-content transition-color duration-200 italic"
>
{{ link.name }}
</button>
<span v-if="!link.last"> / </span>
</template>
</div>
</div>
<div class="flex mt-6">
<div class="dropdown">
<label tabindex="0" class="btn btn-primary btn-sm">
<span>
<Icon name="mdi-plus" class="mr-1 -ml-1" />
</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>
</BaseContainer>
</BaseContainer>
</template>