sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-30 19:46:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: polish some styles

Browse Source
This commit is contained in:
tdgao
2026-07-03 10:41:23 -07:00
parent 81913368aa
commit ce7de977c8
4 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependencies.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div v-if="dependencyRows.length > 0" class="flex flex-col gap-2"> <div v-if="dependencyRows.length > 0" class="flex flex-col gap-2">
<h3 v-if="showTitle" class="m-0 text-sm font-bold text-contrast"> <h3 v-if="showTitle" class="m-0 text-base font-semibold text-contrast">
{{ formatMessage(messages.dependenciesTitle) }} {{ formatMessage(messages.dependenciesTitle) }}
</h3> </h3>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue
+13 -7
View File
@@ -1,13 +1,19 @@
<template> <template>
<div class="flex min-w-0 flex-col gap-2"> <div class="flex min-w-0 flex-col gap-2">
<div <div
class="grid min-h-[3.75rem] grid-cols-[minmax(0,1fr)_min-content] items-center gap-3 rounded-2xl bg-button-bg px-4 py-3 text-primary" class="grid min-h-10 grid-cols-[minmax(0,1fr)_min-content] items-center gap-3 rounded-xl bg-button-bg py-0 pl-3.5 pr-2 text-primary"
> >
<span class="flex min-w-0 items-center gap-3"> <span class="flex min-w-0 items-center gap-3">
<Avatar v-if="dependency.icon" :src="dependency.icon" :alt="dependency.name" size="32px" /> <Avatar
v-if="dependency.icon"
:src="dependency.icon"
:alt="dependency.name"
size="24px"
class="!rounded-lg !shadow-none"
/>
<span <span
v-else v-else
class="flex size-8 flex-shrink-0 items-center justify-center rounded-xl border border-solid border-surface-5 text-secondary" class="flex size-4 flex-shrink-0 items-center justify-center rounded-lg border border-solid border-surface-5 text-secondary"
> >
<PackageIcon aria-hidden="true" class="size-5" /> <PackageIcon aria-hidden="true" class="size-5" />
</span> </span>
@@ -16,11 +22,11 @@
:href="dependency.projectHref" :href="dependency.projectHref"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="min-w-0 truncate text-lg font-bold text-contrast no-underline hover:underline" class="min-w-0 truncate text-base font-semibold text-contrast no-underline hover:underline"
> >
{{ dependency.name }} {{ dependency.name }}
</a> </a>
<span v-else class="min-w-0 truncate text-lg font-bold text-contrast"> <span v-else class="min-w-0 truncate text-base font-semibold text-contrast">
{{ dependency.name }} {{ dependency.name }}
</span> </span>
<TagItem class="shrink-0 border !border-solid border-surface-5 !px-3 !py-1 text-base"> <TagItem class="shrink-0 border !border-solid border-surface-5 !px-3 !py-1 text-base">
@@ -55,9 +61,9 @@
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="absolute -top-2 left-6 h-20 w-0.5 bg-surface-5 group-last/dependency:h-10" class="absolute -top-2 left-6 h-16 w-0.5 bg-surface-5 group-last/dependency:h-7"
/> />
<div aria-hidden="true" class="absolute left-6 top-[1.875rem] h-0.5 w-4 bg-surface-5" /> <div aria-hidden="true" class="absolute left-6 top-5 h-0.5 w-4 bg-surface-5" />
<DownloadDependency :dependency="childDependency" @download="emit('download')" /> <DownloadDependency :dependency="childDependency" @download="emit('download')" />
</div> </div>
</div> </div>
apps/frontend/src/components/ui/ProjectDownloadModal/DownloadProject.vue
+3 -2
View File
@@ -14,6 +14,7 @@
@update:model-value="selectGameVersion" @update:model-value="selectGameVersion"
@search-input="versionFilter = $event" @search-input="versionFilter = $event"
@close="versionFilter = ''" @close="versionFilter = ''"
select-search-text-on-focus
> >
<template #option="{ item, isSelected }"> <template #option="{ item, isSelected }">
<div <div
@@ -69,11 +70,11 @@
<div <div
v-if="selectedVersion" v-if="selectedVersion"
class="grid grid-cols-[minmax(0,1fr)_min-content] items-center gap-3 rounded-2xl bg-bg px-3 py-3" class="grid grid-cols-[minmax(0,1fr)_min-content] items-center gap-3 rounded-2xl bg-surface-2 px-3 py-3"
> >
<div class="flex min-w-0 flex-col gap-1"> <div class="flex min-w-0 flex-col gap-1">
<div class="flex min-w-0 items-center gap-2"> <div class="flex min-w-0 items-center gap-2">
<span class="truncate font-bold text-contrast"> <span class="truncate font-semibold text-contrast">
{{ selectedVersion.version_number }} {{ selectedVersion.version_number }}
</span> </span>
<VersionChannelTag :channel="selectedVersion.version_type" class="!py-0.5" /> <VersionChannelTag :channel="selectedVersion.version_type" class="!py-0.5" />
apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
+4 -1
View File
@@ -2,7 +2,10 @@
<NewModal ref="modal" :on-show="onShow" :on-hide="onHide" width="544px"> <NewModal ref="modal" :on-show="onShow" :on-hide="onHide" width="544px">
<template v-if="project" #title> <template v-if="project" #title>
<Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" /> <Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" />
<div class="truncate text-lg font-extrabold text-contrast"> <div
class="truncate text-lg font-extrabold text-contrast"
v-tooltip="formatMessage(messages.downloadTitle, { title: project.title })"
>
{{ formatMessage(messages.downloadTitle, { title: project.title }) }} {{ formatMessage(messages.downloadTitle, { title: project.title }) }}
</div> </div>
</template> </template>