sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-28 02:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: style pass

Browse Source
This commit is contained in:
tdgao
2026-07-14 13:22:25 -07:00
parent 94f74b68c8
commit 1f66ea1f06
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/search/SearchDependsOnFilter.vue
+11 -6
View File
@@ -11,7 +11,7 @@
<div <div
v-for="projectId in dependencyProjectIds" v-for="projectId in dependencyProjectIds"
:key="projectId" :key="projectId"
class="group flex min-w-0 items-center gap-2 rounded-xl px-1 py-1 text-primary" class="group flex min-w-0 items-center gap-2 rounded-xl px-1.5 py-1 text-primary"
> >
<img <img
v-if="dependentProjectMap.get(projectId)?.icon_url" v-if="dependentProjectMap.get(projectId)?.icon_url"
@@ -25,11 +25,11 @@
</span> </span>
<button <button
type="button" type="button"
class="shrink-0 cursor-pointer border-0 bg-transparent p-0 text-sm transition-opacity" class="shrink-0 cursor-pointer border-0 bg-transparent p-0 text-sm transition-all"
:class=" :class="
excludedProjectIds.has(projectId) excludedProjectIds.has(projectId)
? 'text-secondary opacity-100' ? 'text-secondary opacity-100'
: 'text-secondary opacity-0 underline decoration-1 underline-offset-2 group-hover:opacity-100 group-focus-within:opacity-100 hover:text-contrast' : 'text-secondary opacity-0 decoration-1 underline-offset-2 group-hover:opacity-100 group-focus-within:opacity-100 hover:text-contrast'
" "
@click="toggleProjectExcluded(projectId)" @click="toggleProjectExcluded(projectId)"
> >
@@ -42,6 +42,7 @@
<button <button
type="button" type="button"
class="flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0 text-secondary hover:text-contrast" class="flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0 text-secondary hover:text-contrast"
v-tooltip="formatMessage(messages.removeIncludedProjectTooltip)"
:aria-label=" :aria-label="
formatMessage(messages.removeIncludedProject, { formatMessage(messages.removeIncludedProject, {
project: dependentProjectMap.get(projectId)?.title ?? projectId, project: dependentProjectMap.get(projectId)?.title ?? projectId,
@@ -73,12 +74,12 @@
{{ formatMessage(messages.clearFilter) }} {{ formatMessage(messages.clearFilter) }}
</button> </button>
</div> </div>
<div class="flex items-center gap-3 rounded-2xl bg-surface-1 p-3"> <div class="flex items-center gap-2 rounded-2xl bg-surface-1 p-2.5">
<img <img
v-if="selectedProject?.icon_url" v-if="selectedProject?.icon_url"
:src="selectedProject.icon_url" :src="selectedProject.icon_url"
:alt="selectedProject.title" :alt="selectedProject.title"
class="size-14 shrink-0 rounded-xl object-cover" class="size-12 shrink-0 rounded-xl object-cover"
/> />
<PackageIcon v-else class="size-14 shrink-0 text-secondary" /> <PackageIcon v-else class="size-14 shrink-0 text-secondary" />
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
@@ -97,7 +98,7 @@
@update:model-value="setDependencyTypes" @update:model-value="setDependencyTypes"
> >
<template #input-content="{ isOpen }"> <template #input-content="{ isOpen }">
<span class="flex items-center gap-1 text-sm text-secondary"> <span class="flex items-center gap-0.5 text-sm text-secondary">
{{ dependencyTypeLabel }} {{ dependencyTypeLabel }}
<DropdownIcon <DropdownIcon
class="size-4 transition-transform" class="size-4 transition-transform"
@@ -278,6 +279,10 @@ const messages = defineMessages({
id: 'search.filter.included_content.remove_project', id: 'search.filter.included_content.remove_project',
defaultMessage: 'Remove {project}', defaultMessage: 'Remove {project}',
}, },
removeIncludedProjectTooltip: {
id: 'search.filter.included_content.remove_project.tooltip',
defaultMessage: 'Remove project',
},
required: { required: {
id: 'search.filter.dependency_type.required', id: 'search.filter.dependency_type.required',
defaultMessage: 'Required', defaultMessage: 'Required',