Small project list improvements

Show category, show more info on smaller displays
This commit is contained in:
Nassim Jahnke 2022-06-29 23:10:24 +02:00
parent 97859cd354
commit 9e84c06db3
No known key found for this signature in database
GPG Key ID: 6BE3B555EBC5982B
5 changed files with 48 additions and 31 deletions

View File

@ -23,37 +23,45 @@ const props = defineProps({
<template>
<Pagination :items="projects?.result">
<template #default="{ item }">
<Card class="flex space-x-4">
<div>
<UserAvatar
:username="item.namespace.owner"
:to="'/' + item.namespace.owner + '/' + item.name"
:img-src="projectIconUrl(item.namespace.owner, item.name)"
size="md"
/>
<Card>
<div class="flex space-x-4">
<div>
<UserAvatar
:username="item.namespace.owner"
:to="'/' + item.namespace.owner + '/' + item.name"
:img-src="projectIconUrl(item.namespace.owner, item.name)"
size="md"
/>
</div>
<div class="overflow-clip overflow-hidden min-w-0">
<p>
<Link :to="'/' + item.namespace.owner + '/' + item.namespace.slug">{{ item.name }}</Link>
by
<Link :to="'/' + item.namespace.owner">{{ item.namespace.owner }}</Link>
</p>
<p class="mb-1">{{ item.description }}</p>
<span class="<sm:hidden text-gray-500 dark:text-gray-400"> {{ i18n.t("project.category." + item.category) }} </span>
</div>
<div class="flex-grow"></div>
<div class="<sm:hidden flex flex-col flex-shrink-0 min-w-40">
<span class="inline-flex items-center">
<IconMdiStar class="mx-1" /> {{ item.stats.stars }} {{ i18n.t("project.info.stars", item.stats.stars) }}
</span>
<span class="inline-flex items-center">
<IconMdiDownload class="mx-1" /> {{ item.stats.downloads }} {{ i18n.t("project.info.totalDownloads", item.stats.downloads) }}
</span>
<Tooltip>
<template #content>
{{ i18n.t("project.info.lastUpdatedTooltip", [i18n.d(item.lastUpdated, "datetime")]) }}
</template>
<span class="inline-flex items-center"><IconMdiCalendar class="mx-1" />{{ lastUpdated(item.lastUpdated) }}</span>
</Tooltip>
</div>
</div>
<div class="overflow-clip overflow-hidden min-w-0">
<p>
<Link :to="'/' + item.namespace.owner + '/' + item.namespace.slug">{{ item.name }}</Link>
by
<Link :to="'/' + item.namespace.owner">{{ item.namespace.owner }}</Link>
</p>
<p>{{ item.description }}</p>
</div>
<div class="flex-grow"></div>
<div class="<sm:hidden flex flex-col flex-shrink-0 min-w-40">
<span class="inline-flex items-center">
<IconMdiStar class="mx-1" /> {{ item.stats.stars }} {{ i18n.t("project.info.stars", item.stats.stars) }}
</span>
<span class="inline-flex items-center">
<IconMdiDownload class="mx-1" /> {{ item.stats.downloads }} {{ i18n.t("project.info.totalDownloads", item.stats.downloads) }}
</span>
<Tooltip>
<template #content>
{{ i18n.t("project.info.lastUpdatedTooltip", [i18n.d(item.lastUpdated, "datetime")]) }}
</template>
<span class="inline-flex items-center"><IconMdiCalendar class="mx-1" />{{ lastUpdated(item.lastUpdated) }}</span>
</Tooltip>
<div class="sm:hidden space-x-1 text-center mt-2">
<span class="inline-flex items-center"><IconMdiCalendar class="mx-1" />{{ lastUpdated(item.lastUpdated) }}</span>
<span class="inline-flex items-center"> <IconMdiStar class="mx-1" /> {{ item.stats.stars }} </span>
<span class="inline-flex items-center"> <IconMdiDownload class="mx-1" /> {{ item.stats.downloads }} </span>
</div>
</Card>
</template>

View File

@ -45,6 +45,7 @@
"tos": "Terms of Service"
},
"projectSearch": {
"clear": "(clear)",
"query": "Search in {0} projects...",
"sortBy": "Sort by",
"relevanceSort": "Sort by relevance",

View File

@ -157,7 +157,12 @@ useHead(meta);
<!-- Sidebar -->
<Card accent class="min-w-300px flex flex-col gap-4">
<div class="platforms">
<h3 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.platforms") }}</h3>
<h3 class="font-bold mb-1">
{{ i18n.t("hangar.projectSearch.platforms") }}
<span v-if="filters.platform" class="font-normal text-sm hover:(underline) text-gray-600 dark:text-gray-400" @click="filters.platform = null">{{
i18n.t("hangar.projectSearch.clear")
}}</span>
</h3>
<div class="flex flex-col gap-1">
<ul>
<li v-for="platform in backendData.visiblePlatforms" :key="platform.enumName" class="inline-flex w-full">

View File

@ -41,6 +41,7 @@ import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.ResponseStatus;
import org.springframework.web.multipart.MultipartFile;
import javax.validation.Valid;
import java.util.List;

View File

@ -26,6 +26,7 @@ import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
@ -89,6 +90,7 @@ public class VersionService extends HangarComponent {
}
public LastDependencies getLastVersionDependencies(String author, String slug, @Nullable String channel, String platformName) {
//TODO optimize with specific query
Platform platform = Platform.valueOf(platformName.toUpperCase());
RequestPagination pagination = new RequestPagination(1L, 0L);