mtd/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Admin & staff page enhancements (#3333)

Browse Source
This commit is contained in:
Prospector
2025-03-03 22:22:25 -08:00
committed by GitHub
parent c2d455f166
commit 36cfcc2093
8 changed files with 295 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/pages/news/changelog/[product]/[date].vue
+9 -37
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { getChangelog } from "@modrinth/utils";
import { ChangelogEntry } from "@modrinth/ui";
import { ChangelogEntry, Timeline } from "@modrinth/ui";
import { ChevronLeftIcon } from "@modrinth/assets";
const route = useRoute();
@@ -39,41 +39,13 @@ if (!changelogEntry.value) {
>
<ChevronLeftIcon /> View full changelog
</nuxt-link>
<div class="relative flex flex-col gap-4 pb-6">
<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-[1]" />
</div>
<Timeline fade-out-end :fade-out-start="!isFirst" :class="{ '-mt-8': !isFirst }">
<ChangelogEntry
:entry="changelogEntry"
:first="isFirst"
show-type
:class="{ 'mt-8': !isFirst }"
/>
</Timeline>
</div>
</template>
<style lang="scss" scoped>
.timeline-indicator {
background-image: linear-gradient(
to bottom,
var(--color-raised-bg) 66%,
rgba(255, 255, 255, 0) 0%
);
background-size: 100% 30px;
background-repeat: repeat-y;
height: calc(100% + 2rem);
width: 4px;
margin-top: -2rem;
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 8rem,
black calc(100% - 8rem),
transparent 100%
);
&.first {
margin-top: 1rem;
mask-image: linear-gradient(black calc(100% - 15rem), transparent 100%);
}
}
</style>
apps/frontend/src/pages/news/changelog/index.vue
+3 -24
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { type Product, getChangelog } from "@modrinth/utils";
import { ChangelogEntry } from "@modrinth/ui";
import Timeline from "@modrinth/ui/src/components/base/Timeline.vue";
import NavTabs from "~/components/ui/NavTabs.vue";
const route = useRoute();
@@ -51,10 +52,7 @@ const changelogEntries = computed(() =>
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>
<Timeline fade-out-end>
<ChangelogEntry
v-for="(entry, index) in changelogEntries"
:key="entry.date"
@@ -62,25 +60,6 @@ const changelogEntries = computed(() =>
:first="index === 0"
:show-type="filter === undefined"
has-link
class="relative z-[1]"
/>
</div>
</Timeline>
</template>
<style lang="scss" scoped>
.timeline-indicator {
background-image: linear-gradient(
to bottom,
var(--color-raised-bg) 66%,
rgba(255, 255, 255, 0) 0%
);
background-size: 100% 30px;
background-repeat: repeat-y;
margin-top: 1rem;
height: calc(100% - 1rem);
width: 4px;
mask-image: linear-gradient(to bottom, black calc(100% - 15rem), transparent 100%);
}
</style>