fix: ui for tags

This commit is contained in:
Andras Bacsai 2024-03-26 11:52:45 +01:00
parent a8417aca16
commit 64a9a72457
2 changed files with 20 additions and 15 deletions

View File

@ -116,7 +116,12 @@ .alert-success {
.alert-error { .alert-error {
@apply flex items-center gap-2 text-error; @apply flex items-center gap-2 text-error;
} }
.tag {
@apply px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200
}
.add-tag {
@apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 group-hover:dark:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200;
}
.dropdown-item { .dropdown-item {
@apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center pr-4 pl-2 py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full; @apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center pr-4 pl-2 py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
} }

View File

@ -72,10 +72,10 @@ class="items-center justify-center box">+ Add New Resource</a>
</a> </a>
<div class="flex gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6"> <div class="flex gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
<template x-for="tag in item.tags"> <template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200" <div class="tag"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div> @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template> </template>
<div class="flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 group-hover:dark:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200" <div class="add-tag"
@click.prevent="goto(item)">Add tag</div> @click.prevent="goto(item)">Add tag</div>
</div> </div>
</span> </span>
@ -104,10 +104,10 @@ class="items-center justify-center box">+ Add New Resource</a>
</a> </a>
<div class="flex gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6"> <div class="flex gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
<template x-for="tag in item.tags"> <template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300" <div class="tag"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div> @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template> </template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300" <div class="add-tag"
@click.prevent="goto(item)">Add tag</div> @click.prevent="goto(item)">Add tag</div>
</div> </div>
</span> </span>
@ -136,10 +136,10 @@ class="items-center justify-center box">+ Add New Resource</a>
</a> </a>
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6"> <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
<template x-for="tag in item.tags"> <template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300" <div class="tag"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div> @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template> </template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300" <div class="add-tag"
@click.prevent="goto(item)">Add tag</div> @click.prevent="goto(item)">Add tag</div>
</div> </div>
</span> </span>
@ -168,10 +168,10 @@ class="items-center justify-center box">+ Add New Resource</a>
</a> </a>
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6"> <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
<template x-for="tag in item.tags"> <template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300" <div class="tag"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div> @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template> </template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300" <div class="add-tag"
@click.prevent="goto(item)">Add tag</div> @click.prevent="goto(item)">Add tag</div>
</div> </div>
</span> </span>
@ -200,10 +200,10 @@ class="items-center justify-center box">+ Add New Resource</a>
</a> </a>
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6"> <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
<template x-for="tag in item.tags"> <template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300" <div class="tag"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div> @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template> </template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300" <div class="add-tag"
@click.prevent="goto(item)">Add tag</div> @click.prevent="goto(item)">Add tag</div>
</div> </div>
</span> </span>
@ -232,10 +232,10 @@ class="items-center justify-center box">+ Add New Resource</a>
</a> </a>
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6"> <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
<template x-for="tag in item.tags"> <template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300" <div class="tag"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div> @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template> </template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300" <div class="add-tag"
@click.prevent="goto(item)">Add tag</div> @click.prevent="goto(item)">Add tag</div>
</div> </div>
</span> </span>
@ -264,10 +264,10 @@ class="items-center justify-center box">+ Add New Resource</a>
</a> </a>
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6"> <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
<template x-for="tag in item.tags"> <template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300" <div class="tag"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div> @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template> </template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300" <div class="add-tag"
@click.prevent="goto(item)">Add tag</div> @click.prevent="goto(item)">Add tag</div>
</div> </div>
</span> </span>