Files
breadcrumb-the-shire/templates/login.phtml
fs 1ba6829a1c fix: toast visibility — opaque backgrounds and flash scope matching with query strings
Two bugs in the toast redesign:

1. Variant backgrounds (success/warning/info/error) used rgba with 12-20%
   opacity, making toasts semi-transparent over page content. Fixed by
   layering the tint over a solid background via linear-gradient compositing.

2. Flash messages with scoped paths including query strings (e.g.
   edit pages with ?return=...) were not matched by Flash::peek(Request::path())
   since path() strips the query. Added fallback to pathWithQuery() matching.

Also moved flash partial before JS init scripts to ensure DOM is present
when the component runtime mounts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-19 19:58:15 +01:00

73 lines
2.4 KiB
PHTML

<?php
use MintyPHP\Buffer;
$defaultTitle = appTitle();
$primaryVars = appPrimaryCssVars();
$theme = appDefaultTheme();
$pageTitle = $defaultTitle;
ob_start();
Buffer::get('title');
$bufferTitle = trim((string) ob_get_clean());
if ($bufferTitle !== '') {
$pageTitle = $bufferTitle . ' - ' . $defaultTitle;
}
$loginComponentConfig = [
'components' => [
'flashAutoDismiss' => [
'selector' => '.notice[data-flash-timeout]',
],
'passwordHints' => [
'selector' => '[data-password-hints]',
],
'passwordToggle' => [
'selector' => 'input[type="password"]',
],
'loginErrorFocus' => [
'selector' => '.notice[data-variant="error"][role="alert"][tabindex="-1"]',
],
'loginSubmitLock' => [
'selector' => 'form[data-login-submit-lock="1"]',
],
],
];
?>
<!DOCTYPE html>
<html
data-theme="<?php e($theme); ?>"
data-asset-base="<?php e(asset('')); ?>"
data-password-toggle-show-label="<?php e(t('Show password')); ?>"
data-password-toggle-hide-label="<?php e(t('Hide password')); ?>"
<?php if ($primaryVars !== ''): ?>style="<?php e($primaryVars); ?>" <?php endif; ?>>
<head>
<script src="<?php e(assetVersion('js/app-boot.js')); ?>"></script>
<base href="<?php e(localeBase()); ?>">
<title><?php e($pageTitle); ?></title>
<meta property="og:site_name" content="<?php e($defaultTitle); ?>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="<?php e(appFaviconUrl('favicon-32x32.png')); ?>">
<link rel="icon" type="image/png" sizes="16x16" href="<?php e(appFaviconUrl('favicon-16x16.png')); ?>">
<link rel="apple-touch-icon" href="<?php e(appFaviconUrl('apple-touch-icon.png')); ?>">
<link rel="manifest" href="<?php e(asset('favicon/site.webmanifest')); ?>">
<?php renderTemplateStyles('login'); ?>
<?php renderPageStyles(); ?>
</head>
<body>
<main class="login-main">
<div class="container-small login-content-container">
<?php Buffer::get('html'); ?>
</div>
</main>
<?php require __DIR__ . '/partials/app-footer.phtml'; ?>
<div id="gradient"></div>
<script type="application/json" id="page-config-login-components"><?php gridJsonForJs($loginComponentConfig); ?></script>
<?php require __DIR__ . '/partials/app-flash.phtml'; ?>
<script type="module" src="<?php e(assetVersion('js/app-login-init.js')); ?>"></script>
</body>
</html>