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

Highlight currently selected sorter on homepage

Browse Source
This commit is contained in:
Nassim Jahnke 2022-12-26 17:10:39 +01:00
parent 1574f4a7e3
commit d60bbd6a4a
No known key found for this signature in database
GPG Key ID: 6BE3B555EBC5982B
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/layout/Header.vue
View File

@ -243,10 +243,10 @@ function isRecent(date: string): boolean {
<Popper placement="bottom-end" @click="updateNotifications">
<button class="flex items-center gap-2 rounded-md p-2 hover:(text-primary-400 bg-primary-0)" aria-label="Notifications">
<IconMdiBellOutline v-if="unreadNotifications === 0" class="text-[1.2em]" />
<IconMdiBellBadge v-if="unreadNotifications !== 0" class="text-[1.2em]" />
<IconMdiBellBadge v-else class="text-[1.2em]" />
</button>
<template #content="{ close }">
<div class="flex flex-col rounded border-t-2 border-primary-400 background-default filter drop-shadow-md overflow-auto max-w-150">
<div class="-mt-1 flex flex-col rounded border-t-2 border-primary-400 background-default filter drop-shadow-md overflow-auto max-w-150">
<div v-if="notifications.length === 0">
<span class="flex shadow-0 p-2 mt-2 ml-3 mr-2">{{ i18n.t("notifications.empty.recent") }}</span>
</div>
@ -299,7 +299,7 @@ function isRecent(date: string): boolean {
{{ authStore.user.name }}
</button>
<template #content="{ close }">
<div class="py-1 rounded border-t-2 border-primary-400 background-default filter drop-shadow-md flex flex-col" @click="close()">
<div class="-mt-2 py-1 rounded border-t-2 border-primary-400 background-default filter drop-shadow-md flex flex-col" @click="close()">
<DropdownItem :to="'/' + authStore.user.name">{{ t("nav.user.profile") }}</DropdownItem>
<DropdownItem to="/notifications">{{ t("nav.user.notifications") }}</DropdownItem>
<DropdownItem :to="'/' + authStore.user.name + '/settings/api-keys'">{{ t("nav.user.apiKeys") }}</DropdownItem>

12
frontend/src/pages/index.vue
View File

@ -27,10 +27,10 @@ const route = useRoute();
const router = useRouter();
const sorters = [
{ id: "-updated", label: i18n.t("project.sorting.recentlyUpdated") },
{ id: "-newest", label: i18n.t("project.sorting.newest") },
{ id: "-stars", label: i18n.t("project.sorting.mostStars") },
{ id: "-downloads", label: i18n.t("project.sorting.mostDownloads") },
{ id: "-newest", label: i18n.t("project.sorting.newest") },
{ id: "-updated", label: i18n.t("project.sorting.recentlyUpdated") },
{ id: "-recent_downloads", label: i18n.t("project.sorting.recentDownloads") },
];
@ -176,9 +176,13 @@ useHead(meta);
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<MenuItems class="absolute right-0 top-16 flex flex-col z-10 background-default filter drop-shadow-md rounded-md border-top-primary">
<MenuItems class="absolute right-0 top-15 flex flex-col z-10 background-default filter drop-shadow-md rounded border-top-primary border-t-2">
<MenuItem v-for="sorter in sorters" :key="sorter.id" v-slot="{ active }">
<button :class="{ 'bg-gradient-to-r from-[#004ee9] to-[#367aff] text-white': active }" class="p-2 text-left" @click="activeSorter = sorter.id">
<button
:class="{ 'bg-gray-100 dark:bg-gray-700': active, 'bg-gradient-to-r from-[#004ee9] to-[#367aff] text-white': activeSorter === sorter.id }"
class="px-4 py-2 text-left"
@click="activeSorter = sorter.id"
>
{{ sorter.label }}
</button>
</MenuItem>