Myx
6b9a39fe4a
Respect Android system bar insets with safe-area shell padding, inset-aware modal and bottom-sheet layouts, transparent edge-to-edge themes, and a Capacitor SystemBars refresh on mobile startup. Co-authored-by: Cursor <cursoragent@cursor.com>
43 lines
1.5 KiB
HTML
43 lines
1.5 KiB
HTML
<!-- Dimmed backdrop. Tap to dismiss. -->
|
|
<app-modal-backdrop
|
|
[zIndex]="140"
|
|
[ariaLabel]="'shared.dialog.close' | translate"
|
|
(dismissed)="onBackdropClick()"
|
|
/>
|
|
|
|
<!--
|
|
Bottom sheet panel. Slides up from the bottom of the viewport. Drag the top handle downward
|
|
beyond 80px to dismiss. Inner content is projected by the parent component.
|
|
-->
|
|
<div
|
|
appThemeNode="bottomSheetSurface"
|
|
class="bottom-sheet-panel fixed metoyou-fixed-safe-bottom-sheet z-[141] flex flex-col rounded-t-2xl border-x border-t border-border bg-card text-foreground shadow-2xl"
|
|
[style.transform]="'translateY(' + translateY() + 'px)'"
|
|
[style.transition]="translateY() === 0 ? 'transform 200ms ease-out' : 'none'"
|
|
[attr.aria-label]="title() || ariaLabel()"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<!-- Drag handle + optional title -->
|
|
<div
|
|
class="flex shrink-0 cursor-grab touch-none flex-col items-center gap-2 px-4 pb-2 pt-3 active:cursor-grabbing"
|
|
(touchstart)="onHandleTouchStart($event)"
|
|
(touchmove)="onHandleTouchMove($event)"
|
|
(touchend)="onHandleTouchEnd()"
|
|
(touchcancel)="onHandleTouchEnd()"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class="h-1.5 w-10 rounded-full bg-muted-foreground/40"
|
|
></span>
|
|
@if (title()) {
|
|
<h3 class="text-sm font-semibold text-foreground">{{ title() }}</h3>
|
|
}
|
|
</div>
|
|
|
|
<!-- Scrollable content area -->
|
|
<div class="min-h-0 flex-1 overflow-y-auto px-1 pb-[max(var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)),1rem)]">
|
|
<ng-content />
|
|
</div>
|
|
</div>
|