mirror/Hangar
2
0
Fork 0
mirror of https://github.com/HangarMC/Hangar.git synced 2025-02-17 15:01:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Pretty sorting & shortcut for top border

Browse Source
This commit is contained in:
Alessio Gravili 2022-02-27 00:15:40 +01:00 committed by MiniDigger | Martin
parent be530d2d1e
commit 75e5673a81
3 changed files with 18 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend-new/src/components/Header.vue
View File

@ -64,7 +64,7 @@ const loggedIn = false; // TODO
leave-from-class="translate-y-0 opacity-100"
leave-to-class="translate-y-1 opacity-0"
>
<PopoverPanel class="fixed md:absolute z-10 w-9/10 md:w-max background-header top-1/14 md:top-10 left-1/20 shadow1 rounded-md md:rounded-none md:rounded-bl-md md:rounded-r-md border-solid border-t-4 border-t-primary-100 text-xs p-[20px]">
<PopoverPanel class="fixed md:absolute z-10 w-9/10 md:w-max background-header top-1/14 md:top-10 left-1/20 shadow1 rounded-md md:rounded-none md:rounded-bl-md md:rounded-r-md border-top-primary text-xs p-[20px]">
<p class="text-base font-semibold color-primary mb-4">Hangar</p>
<div class="grid grid-cols-2">
<router-link

38
frontend-new/src/pages/index.vue
View File

@ -3,7 +3,13 @@ import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
const { t } = useI18n();
const sorters = [
{id: 'stars', label: 'Most Stars'},
{id: 'downloads', label: 'Most Downloads'},
{id: 'views', label: 'Most Views'},
{id: 'newest', label: 'Newest'},
{id: 'updated', label: 'Recently Updated'},
];
</script>
<template>
@ -11,9 +17,9 @@ const { t } = useI18n();
<h2 class="text-3xl font-bold uppercase">Find your favorite plugins</h2>
<div class="flex flex-row mt-6 rounded-md big-box-shadow">
<input class="rounded-l-md p-3 w-[80vw] max-w-800px focus-visible:(border-white) text-black" type="text" placeholder="Search in 1 projects, proudly made by the community...">
<div class="rounded-r-md w-100px bg-gradient-to-r from-[#004ee9] to-[#367aff] text-white p-2">
<div class="rounded-r-md w-100px bg-gradient-to-r from-[#004ee9] to-[#367aff] p-2">
<Menu>
<MenuButton class="rounded-r-md h-1/1 text-left font-semibold flex flex-row items-center gap-2">
<MenuButton class="rounded-r-md h-1/1 text-left font-semibold flex flex-row items-center gap-2 text-white">
<span>Sort by</span>
<icon-mdi-sort-variant class="text-[1.2em] pointer-events-none overflow-hidden"/>
</MenuButton>
@ -25,25 +31,13 @@ const { t } = useI18n();
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<MenuItems class="absolute flex flex-col bg-white text-black">
<MenuItem v-slot="{ active }">
<a :class='{ "bg-blue-500": active }' href="/account-settings">
Popularity
</a>
</MenuItem>
<MenuItem v-slot="{ active }">
<a :class='{ "bg-blue-500": active }' href="/account-settings">
Stars
</a>
</MenuItem>
<MenuItem v-slot="{ active }">
<a :class='{ "bg-blue-500": active }' href="/account-settings">
Downloads
</a>
</MenuItem>
<MenuItem v-slot="{ active }">
<a :class='{ "bg-blue-500": active }' href="/account-settings">
Recently Updated
<MenuItems class="absolute flex flex-col background-header shadow1 rounded-md border-top-primary">
<MenuItem
v-for='sorter in sorters'
:key='sorter.id'
v-slot="{ active }">
<a :class='{ "bg-gradient-to-r from-[#004ee9] to-[#367aff] text-white": active }' class="p-2">
{{ sorter.label }}
</a>
</MenuItem>
</MenuItems>

1
frontend-new/windi.config.ts
View File

@ -49,5 +49,6 @@ export default defineConfig({
'background-header': 'bg-background-light-0 dark:bg-background-dark-90',
'background-body': 'bg-background-light-10 dark:bg-background-dark-80',
'color-primary': 'text-primary-100 dark:text-primary-70',
'border-top-primary': 'border-solid border-t-4 border-t-primary-100',
},
});