Skip to content

Commit

Permalink
feat: create tag collections and improve search menu style
Browse files Browse the repository at this point in the history
  • Loading branch information
AlejandroAkbal committed Jun 7, 2023
1 parent 44e55f2 commit 0d41668
Show file tree
Hide file tree
Showing 10 changed files with 171 additions and 17 deletions.
12 changes: 11 additions & 1 deletion assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,23 @@
.hover-bg-util {
@apply hover:bg-base-0/20;
}

/* https://github.com/reslear/tailwind-scrollbar-hide/blob/main/src/index.js */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}

.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
}

/**
* Custom Tippy.js theme
**/
.tippy-box[data-theme~=custom] {
@apply bg-base-1000 border border-base-0/20 rounded-lg shadow-2xl px-1.5 py-1.5 text-base-content-highlight text-sm;
@apply bg-base-1000 border border-base-0/20 rounded-lg px-1.5 py-1.5 text-base-content-highlight text-sm;
}

.tippy-box[data-theme~=custom][data-placement^=top] > .tippy-arrow:before {
Expand Down
4 changes: 2 additions & 2 deletions components/posts/navigation/DomainSelector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<div class="relative">
<!-- Select -->
<ListboxButton
class="hover:hover-text-util focus-visible:focus-util hover:hover-bg-util relative w-56 cursor-default rounded-md py-1.5 pl-3 pr-10 text-left shadow-sm ring-1 ring-inset ring-base-0/20 sm:text-sm sm:leading-6"
class="hover:hover-text-util focus-visible:focus-util hover:hover-bg-util relative w-56 cursor-default rounded-md py-1.5 pl-3 pr-10 text-left ring-1 ring-inset ring-base-0/20 sm:text-sm sm:leading-6"
>
<span class="flex items-center">
<img
Expand All @@ -54,7 +54,7 @@
leave-to-class="opacity-0"
>
<ListboxOptions
class="absolute z-10 mt-2 max-h-[23rem] w-full max-w-sm overflow-auto rounded-md bg-base-1000 py-1 shadow-lg ring-1 ring-base-0/20 focus:outline-none sm:text-sm"
class="absolute z-10 mt-2 max-h-[23rem] w-full max-w-sm overflow-auto rounded-md bg-base-1000 py-1 ring-1 ring-base-0/20 focus:outline-none sm:text-sm"
>
<!-- Header -->
<header class="relative border-b border-base-0/20 pb-1">
Expand Down
2 changes: 1 addition & 1 deletion components/posts/navigation/page/ScrollTopButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
>
<button
v-show="shouldShowScrollTopButton"
class="hover:hover-text-util hover:hover-bg-util fixed bottom-4 right-4 z-10 flex h-12 w-12 items-center justify-center rounded-full bg-base-1000/60 text-base-content-highlight shadow-lg ring-2 ring-base-0/20 backdrop-blur"
class="hover:hover-text-util hover:hover-bg-util fixed bottom-4 right-4 z-10 flex h-12 w-12 items-center justify-center rounded-full bg-base-1000/60 text-base-content-highlight ring-2 ring-base-0/20 backdrop-blur"
type="button"
@click="scrollToTop"
>
Expand Down
38 changes: 32 additions & 6 deletions components/posts/navigation/search/SearchMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@
ComboboxOption,
ComboboxOptions
} from '@headlessui/vue'
import { Bars3BottomRightIcon, EyeIcon, StarIcon } from '@heroicons/vue/24/outline'
import { Bars3BottomRightIcon, EyeIcon, StarIcon, TagIcon } from '@heroicons/vue/24/outline'
import { CheckIcon, ChevronUpDownIcon, MagnifyingGlassIcon, NoSymbolIcon, PlusIcon } from '@heroicons/vue/20/solid'
import { watchDebounced } from '@vueuse/core'
import { abbreviateNumber } from 'js-abbreviation-number'
const { value: isSearchMenuActive, toggle: toggleSearchMenu } = useSearchMenu()
const { isActive: isTagCollectionsActive, toggleIsActive: toggleTagCollections } = useTagCollections()
const props = defineProps({
initialSelectedTags: {
Expand Down Expand Up @@ -145,6 +145,17 @@
</script>

<template>
<TagCollectionsWrapper
:modelValue="isTagCollectionsActive"
@update:modelValue="toggleTagCollections"
>
<LazyTagCollections
:selected-tags="selectedTags"
@set-selected-tags="selectedTags = $event"
/>
</TagCollectionsWrapper>

<!-- Search & Actions -->
<section>
<!-- Search -->
<Combobox
Expand All @@ -165,7 +176,7 @@
<!-- Input -->
<ComboboxInput
:displayValue="(tag) => tag.name"
class="focus-visible:focus-util hover:hover-bg-util hover:hover-text-util w-full rounded-full border-0 bg-base-1000 px-9 py-2 text-base-content-highlight shadow-sm ring-1 ring-inset ring-base-0/20 sm:text-sm"
class="focus-visible:focus-util hover:hover-bg-util hover:hover-text-util w-full rounded-full border-0 bg-base-1000 px-9 py-2 text-base-content-highlight ring-1 ring-inset ring-base-0/20 sm:text-sm"
@change="searchQuery = $event.target.value"
/>

Expand All @@ -176,7 +187,7 @@

<!-- Options -->
<ComboboxOptions
class="absolute z-10 mt-2 max-h-72 w-full overflow-auto rounded-md bg-base-1000 py-1 text-base shadow-lg ring-1 ring-base-0/20 sm:text-sm"
class="absolute mt-2 max-h-72 w-full overflow-auto rounded-md bg-base-1000 py-1 text-base ring-1 ring-base-0/20 sm:text-sm"
>
<ComboboxOption
v-for="tag in tagResults"
Expand Down Expand Up @@ -239,8 +250,21 @@
</Combobox>

<!-- Filters -->
<section class="-mr-6 mt-6 flex gap-4 overflow-x-auto py-1 pl-2">
<!-- TODO: Tag Collections -->
<section class="scrollbar-hide -mx-5 mt-8 flex gap-4 overflow-x-auto py-1 pr-3 before:w-1 after:w-1">
<!-- -->

<!-- Tag Collections Toggler -->
<div>
<button
class="focus-visible:focus-util hover:hover-text-util hover:hover-bg-util inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 ring-1 ring-base-0/20"
type="button"
@click="toggleTagCollections(true)"
>
<TagIcon class="-ml-0.5 h-[1.15rem] w-[1.15rem]" />

<span class="whitespace-nowrap text-sm font-medium">Collections</span>
</button>
</div>

<!-- Sort Filter -->
<SearchSelect
Expand All @@ -262,6 +286,8 @@
:icon="StarIcon"
:options="scoreOptions"
/>

<!-- TODO: Clear all button -->
</section>
</section>

Expand Down
10 changes: 6 additions & 4 deletions components/posts/navigation/search/SearchSelect.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,15 @@
tailwindcss-origin-class
>
<!-- Button -->
<div class="inline-flex divide-x divide-base-0/20 rounded-md shadow-sm ring-1 ring-base-0/20">
<div class="inline-flex divide-x divide-base-0/20 rounded-md ring-1 ring-base-0/20">
<!-- Left side -->
<div class="inline-flex items-center gap-x-1.5 rounded-l-md px-2 py-1 text-base-content shadow-sm">
<div class="inline-flex items-center gap-x-1.5 rounded-l-md px-2 py-1 text-base-content">
<component
:is="icon"
class="-ml-0.5 h-5 w-5"
/>
<p class="whitespace-nowrap text-sm font-medium">{{ modelValue.title }}</p>

<span class="whitespace-nowrap text-sm font-medium">{{ modelValue.title }}</span>
</div>

<!-- Right side -->
Expand All @@ -57,12 +58,13 @@
class="focus-visible:focus-util hover:hover-text-util hover:hover-bg-util inline-flex items-center rounded-l-none rounded-r-md px-2 py-1"
>
<span class="sr-only">Change published status</span>

<ChevronDownIcon class="-ml-0.5 h-5 w-5" />
</ListboxButton>
</div>

<ListboxOptions
class="w-44 divide-y divide-base-0/20 overflow-hidden rounded-md bg-base-1000 shadow-lg ring-1 ring-inset ring-base-0/20 focus:outline-none"
class="w-44 divide-y divide-base-0/20 overflow-hidden rounded-md bg-base-1000 ring-1 ring-inset ring-base-0/20 focus:outline-none"
>
<ListboxOption
v-for="option in options"
Expand Down
55 changes: 55 additions & 0 deletions components/posts/navigation/search/TagCollectionsWrapper.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<script lang="ts" setup>
import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
const props = defineProps({
modelValue: Boolean
})
const emit = defineEmits(['update:modelValue'])
</script>

<template>
<TransitionRoot
:show="modelValue"
as="template"
>
<Dialog
as="div"
class="relative z-40"
@close="emit('update:modelValue', false)"
>
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div class="fixed inset-0 bg-base-1000/60 backdrop-blur transition-opacity" />
</TransitionChild>

<div class="fixed inset-0 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<DialogPanel
class="relative transform overflow-hidden rounded-lg bg-base-1000 px-4 pb-4 pt-5 text-left ring-1 ring-base-0/20 transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
>
<!-- TODO: Fix animation -->
<slot v-if="modelValue" />
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>
</TransitionRoot>
</template>
2 changes: 1 addition & 1 deletion components/posts/post/Post.vue
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
</script>
<template>
<figure class="overflow-hidden rounded-md border border-base-0/20 shadow-lg">
<figure class="overflow-hidden rounded-md border border-base-0/20">
<PostMedia
:mediaAlt="mediaFile.alt"
:mediaPosterSrc="mediaFile.posterFile"
Expand Down
2 changes: 1 addition & 1 deletion components/posts/post/PostSource.vue
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
</MenuButton>

<MenuItems
class="w-56 divide-y divide-base-0/20 rounded-md bg-base-1000 shadow-lg ring-1 ring-base-0/20 focus:outline-none"
class="w-56 divide-y divide-base-0/20 rounded-md bg-base-1000 ring-1 ring-base-0/20 focus:outline-none"
>
<div
v-if="postSources.length"
Expand Down
62 changes: 62 additions & 0 deletions composables/useTagCollections.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { useStorage, useToggle } from '@vueuse/core'

const defaultTagCollections = [
{
name: 'Gay Blocklist',
tags: [
'-gay',
'-gay_sex',
'-solo_male',
'-male_only',
'-male_focus',
'-male/male',
'-male_penetrated',
'-male_penetrating_male'
]
},
{
name: 'Furry Blocklist',
tags: [
'-furry',
'-furry_only',
'-fur',
'-canid',
'-canine',
'-dragon',
'-anthro',
'-anthrofied',
'-anthro_on_anthro',
'-scaly',
'-scales',
'-accipitrid',
'-accipitriform',
'-animal_genitalia',
'-ferrettre',
'-rodent',
'-equine'
]
},
{
name: 'Indecencies Blocklist',
tags: ['-scat', '-shitting', '-diaper', '-pee', '-peeing', '-peeing_self', '-fart', '-shitpost', '-gore', '-vore']
},
{
name: 'AI Blocklist',
tags: ['-ai_generated', '-ai-generated', '-stable_diffusion']
}
]

const tagCollections = useStorage('user-tagCollections', defaultTagCollections, localStorage, {
writeDefaults: false
})

export function useTagCollections() {
const [value, toggle] = useToggle(false)

return {
isActive: value,
toggleIsActive: toggle,

tagCollections
}
}
1 change: 0 additions & 1 deletion pages/posts.vue
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,6 @@
<template>
<!-- Search -->
<SafeTeleport to="#navbar-actions">
<!-- TODO: Add badge with tag/filter count -->
<button
class="focus-visible:focus-util hover:hover-bg-util relative rounded-lg px-2 py-1.5"
type="button"
Expand Down

0 comments on commit 0d41668

Please sign in to comment.