fs
4890a280fb
Notices used to be styled only inside the toast stack — every inline .notice on the login page, auth pages and admin edit screens fell back to browser defaults and looked unstyled. The Stripe-style toast redesign (icon pill + neutral text + soft card surface) now lives on the base .notice rule, and .app-toast-stack adds the slide-in animation, soft shadow, dismiss button and progress bar on top. Inline notices auto-render the variant icon via a ::before pseudo using the Bootstrap Icons codepoints, so all 30+ existing call sites get the new look without markup changes. Toasts opt out of ::before via :has(> .notice-icon) and keep their explicit icon span. The previous app-flash.phtml partial is folded into app-toast-stack.phtml (both create the same .app-toast-stack container — having both mounted made two stacks fight for the same fixed corner). default/login/page templates now mount the unified partial; the architecture contract is updated to match. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
73 lines
2.4 KiB
PHTML
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'; ?>
|
|
|
|
<script type="application/json" id="page-config-login-components"><?php gridJsonForJs($loginComponentConfig); ?></script>
|
|
<?php require __DIR__ . '/partials/app-toast-stack.phtml'; ?>
|
|
<script type="module" src="<?php e(assetVersion('js/app-login-init.js')); ?>"></script>
|
|
</body>
|
|
|
|
</html>
|