Fix some changelog issues, and broader mobile padding issues (#3246)
This commit is contained in:
Prospector
GitHub
parent
0ac49d846f
commit
7183b3d761
@ -1444,10 +1444,6 @@ function hideStagingBanner() {
|
||||
.mobile-navigation {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
|
||||
16
apps/frontend/src/pages/news/changelog.vue
Normal file
16
apps/frontend/src/pages/news/changelog.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="page experimental-styles-within">
|
||||
<h1 class="m-0 text-3xl font-extrabold">Changelog</h1>
|
||||
<p class="my-3">Keep up-to-date on what's new with Modrinth.</p>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
padding: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 56rem;
|
||||
}
|
||||
</style>
|
||||
@ -32,10 +32,10 @@ if (!changelogEntry.value) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="changelogEntry" class="page experimental-styles-within">
|
||||
<div v-if="changelogEntry">
|
||||
<nuxt-link
|
||||
:to="`/news/changelog?filter=${changelogEntry.product}`"
|
||||
class="mb-4 flex w-fit items-center gap-2 text-link"
|
||||
class="mb-4 mt-4 flex w-fit items-center gap-2 text-link"
|
||||
>
|
||||
<ChevronLeftIcon /> View full changelog
|
||||
</nuxt-link>
|
||||
@ -43,19 +43,12 @@ if (!changelogEntry.value) {
|
||||
<div class="absolute flex h-full w-4 justify-center">
|
||||
<div class="timeline-indicator" :class="{ first: isFirst }" />
|
||||
</div>
|
||||
<ChangelogEntry :entry="changelogEntry" :first="isFirst" show-type class="relative z-10" />
|
||||
<ChangelogEntry :entry="changelogEntry" :first="isFirst" show-type class="relative z-[1]" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
padding: 0.5rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.timeline-indicator {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
|
||||
@ -29,56 +29,45 @@ const changelogEntries = computed(() =>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page experimental-styles-within">
|
||||
<h1 class="m-0 text-3xl font-extrabold">Changelog</h1>
|
||||
<p class="my-3">Keep up-to-date on what's new with Modrinth.</p>
|
||||
<NavTabs
|
||||
:links="[
|
||||
{
|
||||
label: 'All',
|
||||
href: '',
|
||||
},
|
||||
{
|
||||
label: 'Website',
|
||||
href: 'web',
|
||||
},
|
||||
{
|
||||
label: 'Servers',
|
||||
href: 'servers',
|
||||
},
|
||||
{
|
||||
label: 'App',
|
||||
href: 'app',
|
||||
},
|
||||
]"
|
||||
query="filter"
|
||||
class="mb-4"
|
||||
/>
|
||||
<div class="relative flex flex-col gap-4 pb-6">
|
||||
<div class="absolute flex h-full w-4 justify-center">
|
||||
<div class="timeline-indicator" />
|
||||
</div>
|
||||
<ChangelogEntry
|
||||
v-for="(entry, index) in changelogEntries"
|
||||
:key="entry.date"
|
||||
:entry="entry"
|
||||
:first="index === 0"
|
||||
:show-type="filter === undefined"
|
||||
has-link
|
||||
class="relative z-10"
|
||||
/>
|
||||
<NavTabs
|
||||
:links="[
|
||||
{
|
||||
label: 'All',
|
||||
href: '',
|
||||
},
|
||||
{
|
||||
label: 'Website',
|
||||
href: 'web',
|
||||
},
|
||||
{
|
||||
label: 'Servers',
|
||||
href: 'servers',
|
||||
},
|
||||
{
|
||||
label: 'App',
|
||||
href: 'app',
|
||||
},
|
||||
]"
|
||||
query="filter"
|
||||
class="mb-4"
|
||||
/>
|
||||
<div class="relative flex flex-col gap-4 pb-6">
|
||||
<div class="absolute flex h-full w-4 justify-center">
|
||||
<div class="timeline-indicator" />
|
||||
</div>
|
||||
<ChangelogEntry
|
||||
v-for="(entry, index) in changelogEntries"
|
||||
:key="entry.date"
|
||||
:entry="entry"
|
||||
:first="index === 0"
|
||||
:show-type="filter === undefined"
|
||||
has-link
|
||||
class="relative z-[1]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
padding: 0.5rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.timeline-indicator {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
|
||||
@ -607,7 +607,7 @@ const messages = defineMessages({
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page {
|
||||
padding: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 56rem;
|
||||
|
||||
@ -5,26 +5,30 @@
|
||||
class="h-4 w-4 rounded-full border-2 border-solid border-button-border"
|
||||
:class="recent || first ? 'bg-brand' : 'bg-button-bg'"
|
||||
/>
|
||||
<AutoLink
|
||||
:to="
|
||||
hasLink ? `/news/changelog/${entry.product}/${entry.version ?? entry.date.unix()}` : ''
|
||||
"
|
||||
class="flex items-center gap-2"
|
||||
:class="{ 'hover:underline': hasLink }"
|
||||
>
|
||||
<h2 class="flex items-center gap-2 m-0 text-xl font-extrabold text-contrast">
|
||||
<template v-if="showType">
|
||||
{{ formatMessage(messages[entry.product]) }}
|
||||
<div class="w-2 h-2 rounded-full bg-secondary" />
|
||||
</template>
|
||||
<span :class="{ 'text-primary font-bold': showType }">
|
||||
{{ entry.version ?? formattedDate }}
|
||||
</span>
|
||||
</h2>
|
||||
<div v-if="entry.version" v-tooltip="dateTooltip" :class="{ 'cursor-help': dateTooltip }">
|
||||
{{ formattedDate }}
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<AutoLink
|
||||
:to="
|
||||
hasLink ? `/news/changelog/${entry.product}/${entry.version ?? entry.date.unix()}` : ''
|
||||
"
|
||||
:class="{ 'hover:underline': hasLink }"
|
||||
>
|
||||
<h2 class="flex items-center gap-2 m-0 text-xl font-extrabold text-contrast">
|
||||
<template v-if="showType">
|
||||
{{ formatMessage(messages[entry.product]) }}
|
||||
<div class="w-2 h-2 rounded-full bg-secondary" />
|
||||
</template>
|
||||
<span :class="{ 'text-primary font-bold': showType }">
|
||||
{{ entry.version ?? formattedDate }}
|
||||
</span>
|
||||
</h2>
|
||||
</AutoLink>
|
||||
<div v-if="recent" v-tooltip="dateTooltip" class="hidden sm:flex" :class="{ 'cursor-help': dateTooltip }">
|
||||
{{ relativeDate }}
|
||||
</div>
|
||||
</AutoLink>
|
||||
<div v-else-if="entry.version" :class="{ 'cursor-help': dateTooltip }">
|
||||
{{ longDate }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-8 mt-3 rounded-2xl bg-bg-raised px-4 py-3">
|
||||
<div class="changelog-body" v-html="renderHighlightedString(entry.body)" />
|
||||
@ -63,6 +67,10 @@ const formattedDate = computed(() =>
|
||||
props.entry.version ? props.entry.date.fromNow() : props.entry.date.format('MMMM D, YYYY'),
|
||||
)
|
||||
|
||||
const relativeDate = computed(() => props.entry.date.fromNow())
|
||||
const longDate = computed(() => props.entry.date.format('MMMM D, YYYY'))
|
||||
const versionName = computed(() => props.entry.version ?? longDate.value)
|
||||
|
||||
const messages = defineMessages({
|
||||
web: {
|
||||
id: 'changelog.product.web',
|
||||
@ -85,6 +93,7 @@ const messages = defineMessages({
|
||||
<style lang="scss" scoped>
|
||||
:deep(.changelog-body) {
|
||||
line-height: 1.4;
|
||||
word-break: break-word;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
|
||||
@ -10,6 +10,15 @@ export type VersionEntry = {
|
||||
}
|
||||
|
||||
const VERSIONS: VersionEntry[] = [
|
||||
{
|
||||
date: `2025-02-11T13:00:00-09:00`,
|
||||
product: 'web',
|
||||
body: `### Improvements
|
||||
- Added project issues link to report page if present.
|
||||
- Added relative times for all recent versions to changelog page.
|
||||
- Added header to changelog sub-pages.
|
||||
- Fixed various padding issues and changelog overlapping navbar on mobile.`,
|
||||
},
|
||||
{
|
||||
date: `2025-02-11T09:00:00-09:00`,
|
||||
product: 'web',
|
||||
@ -84,7 +93,7 @@ Contributed by [IMB11](https://github.com/modrinth/code/pull/1301).`,
|
||||
product: 'web',
|
||||
body: `### Improvements
|
||||
- Tags on project pages are now clickable to view other projects with that tag (Contributed by [Neddo](https://github.com/modrinth/code/pull/3126))
|
||||
- You can now send someone a link to the download interface with a specific version and loader selected, like so: https://modrinth.com/mod/sodium?version=1.21.2&loader=quilt#download (Contributed by [AwakenedRedstone](https://github.com/modrinth/code/pull/3138)`,
|
||||
- You can now send someone a link to the download interface with a specific version and loader selected, like so: https://modrinth.com/mod/sodium?version=1.21.2&loader=quilt#download (Contributed by [AwakenedRedstone](https://github.com/modrinth/code/pull/3138))`,
|
||||
},
|
||||
{
|
||||
date: `2024-12-25T14:00:00-09:00`,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user