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

NormalPage component w/ Collections refactor (#4873)

Browse Source 
* Refactor search page, migrate to /discover/

* Add NormalPage component for common layouts, refactor Collections page as an example, misc ui pkg cleanup

* intl:extract

* lint

* lint

* remove old components

* Refactor search page, migrate to /discover/

* Add NormalPage component for common layouts, refactor Collections page as an example, misc ui pkg cleanup

* intl:extract

* lint

* lint

* remove old components
This commit is contained in:
Prospector
2025-12-09 14:44:10 -08:00
committed by GitHub
parent 1d64b2e22a
commit 0a8f489234
67 changed files with 1201 additions and 1771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
packages/ui/src/components/page/NormalPage.vue Normal file
View File

@@ -0,0 +1,78 @@
<script setup lang="ts">
import { injectPageContext } from '@modrinth/ui'
defineProps<{
sidebar?: 'right' | 'left'
}>()
const { hierarchicalSidebarAvailable } = injectPageContext()
</script>
<template>
<div
class="ui-normal-page"
:class="{
'ui-normal-page--sidebar-left': sidebar === 'left' && !hierarchicalSidebarAvailable,
'ui-normal-page--sidebar-right': sidebar === 'right' && !hierarchicalSidebarAvailable,
}"
>
<div class="ui-normal-page__header">
<slot name="header" />
</div>
<div class="ui-normal-page__content">
<slot />
</div>
<template v-if="sidebar">
<template v-if="hierarchicalSidebarAvailable">
<Teleport to="#sidebar-teleport-target">
<slot name="sidebar" />
</Teleport>
</template>
<template v-else>
<div class="ui-normal-page__sidebar">
<slot name="sidebar" />
</div>
</template>
</template>
</div>
</template>
<style scoped>
.ui-normal-page {
@apply grid gap-6 mx-auto py-4;
width: min(calc(100% - 2rem), calc(80rem - 3rem));
grid-template:
'header'
'content'
'sidebar'
/ 100%;
}
@media (width >= 64rem) {
.ui-normal-page--sidebar-left {
grid-template:
'header header'
'sidebar content'
'sidebar dummy'
/ 20rem 1fr;
}
.ui-normal-page--sidebar-right {
grid-template:
'header header'
'content sidebar'
'dummy sidebar'
/ 1fr 20rem;
}
}
.ui-normal-page__header {
grid-area: header;
}
.ui-normal-page__content {
grid-area: content;
}
.ui-normal-page__sidebar {
grid-area: sidebar;
}
</style>

20
packages/ui/src/components/page/SidebarCard.vue Normal file
View File

@@ -0,0 +1,20 @@
<script setup lang="ts">
import { injectPageContext } from '../../providers'
const { hierarchicalSidebarAvailable } = injectPageContext()
defineProps<{
title: string
}>()
</script>
<template>
<div
class="flex flex-col gap-3 p-4"
:class="{
'card-shadow mb-4 last:mb-0 rounded-2xl bg-bg-raised': !hierarchicalSidebarAvailable,
}"
>
<span class="font-semibold">{{ title }}</span>
<slot />
</div>
</template>

2
packages/ui/src/components/page/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as NormalPage } from './NormalPage.vue'
export { default as SidebarCard } from './SidebarCard.vue'