simplify database list pages

This commit is contained in:
Justin Edmund 2025-09-17 13:42:22 -07:00
parent 281a595eb3
commit aa5d1d2c22
3 changed files with 21 additions and 45 deletions

View file

@ -61,40 +61,32 @@
</script> </script>
<div class="database-page"> <div class="database-page">
<div class="page-header"> <DatabaseGridWithProvider resource="characters" {columns} pageSize={20} />
<h1>Characters Database</h1>
<p class="subtitle">Browse and search all available characters</p>
</div>
<DatabaseGridWithProvider
resource="characters"
{columns}
pageSize={20}
/>
</div> </div>
<style lang="scss"> <style lang="scss">
@use '$src/themes/colors' as colors;
@use '$src/themes/spacing' as spacing; @use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography; @use '$src/themes/typography' as typography;
.database-page { .database-page {
padding: spacing.$unit * 2; padding: spacing.$unit-2x 0;
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
} }
.page-header { .page-header {
margin-bottom: spacing.$unit * 2; margin-bottom: spacing.$unit-2x;
h1 { h1 {
font-size: typography.$font-xxlarge; font-size: typography.$font-xxlarge;
font-weight: typography.$bold; font-weight: typography.$bold;
margin-bottom: spacing.$unit * 0.5; margin-bottom: spacing.$unit-half;
} }
.subtitle { .subtitle {
font-size: typography.$font-regular; font-size: typography.$font-regular;
color: #6c757d; color: colors.$grey-50;
} }
} }
</style> </style>

View file

@ -61,40 +61,32 @@
</script> </script>
<div class="database-page"> <div class="database-page">
<div class="page-header"> <DatabaseGridWithProvider resource="summons" {columns} pageSize={20} />
<h1>Summons Database</h1>
<p class="subtitle">Browse and search all available summons</p>
</div>
<DatabaseGridWithProvider
resource="summons"
{columns}
pageSize={20}
/>
</div> </div>
<style lang="scss"> <style lang="scss">
@use '$src/themes/colors' as colors;
@use '$src/themes/spacing' as spacing; @use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography; @use '$src/themes/typography' as typography;
.database-page { .database-page {
padding: spacing.$unit * 2; padding: spacing.$unit-2x 0;
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
} }
.page-header { .page-header {
margin-bottom: spacing.$unit * 2; margin-bottom: spacing.$unit-2x;
h1 { h1 {
font-size: typography.$font-xxlarge; font-size: typography.$font-xxlarge;
font-weight: typography.$bold; font-weight: typography.$bold;
margin-bottom: spacing.$unit * 0.5; margin-bottom: spacing.$unit-half;
} }
.subtitle { .subtitle {
font-size: typography.$font-regular; font-size: typography.$font-regular;
color: #6c757d; color: colors.$grey-50;
} }
} }
</style> </style>

View file

@ -69,40 +69,32 @@
</script> </script>
<div class="database-page"> <div class="database-page">
<div class="page-header"> <DatabaseGridWithProvider resource="weapons" {columns} pageSize={20} />
<h1>Weapons Database</h1>
<p class="subtitle">Browse and search all available weapons</p>
</div>
<DatabaseGridWithProvider
resource="weapons"
{columns}
pageSize={20}
/>
</div> </div>
<style lang="scss"> <style lang="scss">
@use '$src/themes/colors' as colors;
@use '$src/themes/spacing' as spacing; @use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography; @use '$src/themes/typography' as typography;
.database-page { .database-page {
padding: spacing.$unit * 2; padding: spacing.$unit-2x 0;
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
} }
.page-header { .page-header {
margin-bottom: spacing.$unit * 2; margin-bottom: spacing.$unit-2x;
h1 { h1 {
font-size: typography.$font-xxlarge; font-size: typography.$font-xxlarge;
font-weight: typography.$bold; font-weight: typography.$bold;
margin-bottom: spacing.$unit * 0.5; margin-bottom: spacing.$unit-half;
} }
.subtitle { .subtitle {
font-size: typography.$font-regular; font-size: typography.$font-regular;
color: #6c757d; color: colors.$grey-50;
} }
} }
</style> </style>