bastian/ashen-realms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout interactions

Browse Source
This commit is contained in:
Bastian Wagner
2026-08-22 22:42:55 +02:00
parent 93916457cb
commit fb7a96f032
3 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/web/src/app/features/world/location-interaction-panel/location-interaction-panel.component.html
View File

@@ -7,17 +7,21 @@
data-interaction-panel data-interaction-panel
> >
@if (result) { @if (result) {
@if (result.img) { <div class="interaction-panel__body">
<img @if (result.img) {
class="interaction-panel__portrait" <img
data-interaction-portrait class="interaction-panel__portrait"
[src]="result.img" data-interaction-portrait
[alt]="result.title" [src]="result.img"
(error)="($any($event.target).style.visibility = 'hidden')" [alt]="result.title"
/> (error)="($any($event.target).style.visibility = 'hidden')"
} />
<h2 class="interaction-panel__title">{{ result.title }}</h2> }
<p class="interaction-panel__text">{{ result.text }}</p> <div class="interaction-panel__copy">
<h2 class="interaction-panel__title">{{ result.title }}</h2>
<p class="interaction-panel__text">{{ result.text }}</p>
</div>
</div>
} @else { } @else {
<h2 class="interaction-panel__title">Nothing to discover</h2> <h2 class="interaction-panel__title">Nothing to discover</h2>
<p class="interaction-panel__text interaction-panel__text--error" role="alert"> <p class="interaction-panel__text interaction-panel__text--error" role="alert">

12
apps/web/src/app/features/world/location-interaction-panel/location-interaction-panel.component.scss
View File

@@ -22,7 +22,14 @@
pointer-events: auto; pointer-events: auto;
} }
.interaction-panel__body {
display: flex;
align-items: flex-start;
gap: var(--ar-space-4);
}
.interaction-panel__portrait { .interaction-panel__portrait {
flex: 0 0 auto;
inline-size: 5rem; inline-size: 5rem;
block-size: 5rem; block-size: 5rem;
object-fit: contain; object-fit: contain;
@@ -31,6 +38,11 @@
background: var(--ar-panel-muted); background: var(--ar-panel-muted);
} }
.interaction-panel__copy {
display: grid;
gap: var(--ar-space-3);
}
.interaction-panel__title { .interaction-panel__title {
margin: 0; margin: 0;
color: var(--ar-gold); color: var(--ar-gold);

2
apps/web/src/app/features/world/world-page.component.html
View File

@@ -10,7 +10,7 @@
preserveAspectRatio="none" preserveAspectRatio="none"
aria-hidden="true" aria-hidden="true"
> >
<path d="M 21 62 C 36 64, 51 50, 68 43" pathLength="1" /> <path d="M 21.71 37.61 C 26 39, 29 50, 32.70 51.55" pathLength="1" />
</svg> </svg>
<app-location-node <app-location-node