granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add artifact header with wide image and relief background

Browse source
This commit is contained in:
Justin Edmund 2025-12-03 20:59:44 -08:00
parent 2f0bb76531
commit 3f13f16998
1 changed files with 29 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/lib/components/collection/CollectionArtifactDetailPane.svelte
View file

@ -15,6 +15,7 @@
import { useDeleteCollectionArtifact } from '$lib/api/mutations/artifact.mutations' import { useDeleteCollectionArtifact } from '$lib/api/mutations/artifact.mutations'
import { usePaneStack, type PaneConfig, type ElementType } from '$lib/stores/paneStack.svelte' import { usePaneStack, type PaneConfig, type ElementType } from '$lib/stores/paneStack.svelte'
import { sidebar } from '$lib/stores/sidebar.svelte' import { sidebar } from '$lib/stores/sidebar.svelte'
import { getArtifactImage } from '$lib/utils/images'
import DetailsSection from '$lib/components/sidebar/details/DetailsSection.svelte' import DetailsSection from '$lib/components/sidebar/details/DetailsSection.svelte'
import DetailRow from '$lib/components/sidebar/details/DetailRow.svelte' import DetailRow from '$lib/components/sidebar/details/DetailRow.svelte'
import ElementLabel from '$lib/components/labels/ElementLabel.svelte' import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
@ -42,6 +43,8 @@
const paneStack = usePaneStack() const paneStack = usePaneStack()
const deleteMutation = useDeleteCollectionArtifact() const deleteMutation = useDeleteCollectionArtifact()
// Wide image for header
const wideImageUrl = $derived(getArtifactImage(artifact.artifact?.granblueId, 'wide'))
// Artifact properties // Artifact properties
const isQuirk = $derived(isQuirkArtifact(artifact.artifact)) const isQuirk = $derived(isQuirkArtifact(artifact.artifact))
@ -119,8 +122,12 @@
</script> </script>
<div class="artifact-detail-pane"> <div class="artifact-detail-pane">
<div class="artifact-header">
<img src={wideImageUrl} alt="" class="artifact-image" />
</div>
<div class="pane-content"> <div class="pane-content">
<DetailsSection title="Properties"> <DetailsSection title="General">
{#if artifact.nickname} {#if artifact.nickname}
<DetailRow label="Nickname" value={artifact.nickname} /> <DetailRow label="Nickname" value={artifact.nickname} />
{/if} {/if}
@ -162,19 +169,39 @@
<style lang="scss"> <style lang="scss">
@use '$src/themes/spacing' as *; @use '$src/themes/spacing' as *;
@use '$src/themes/layout' as *;
.artifact-detail-pane { .artifact-detail-pane {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit-2x;
height: 100%; height: 100%;
} }
.artifact-header {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
margin: 0 $unit-2x;
border-radius: $card-corner;
background: url('/images/relief.png'), linear-gradient(to right, #000, #484440, #000);
background-size: 420px 731px;
background-position: -20px -20px;
overflow: hidden;
.artifact-image {
width: 100%;
max-width: 120px;
}
}
.pane-content { .pane-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit-2x; gap: $unit-4x;
padding-bottom: $unit-2x; padding-bottom: $unit-2x;
} }