v03.09.16: brand-aside columns, offline page redesign, variable click-to-copy
Some checks failed
Repo Health / Access control (push) Failing after 1s
Repo Health / Release configuration (push) Has been skipped
Repo Health / Scripts governance (push) Has been skipped
Repo Health / Repository health (push) Has been skipped
Auto-Update SHA Hash / Update SHA-256 Hash in updates.xml (release) Failing after 40s
Some checks failed
Repo Health / Access control (push) Failing after 1s
Repo Health / Release configuration (push) Has been skipped
Repo Health / Scripts governance (push) Has been skipped
Repo Health / Repository health (push) Has been skipped
Auto-Update SHA Hash / Update SHA-256 Hash in updates.xml (release) Failing after 40s
- Brand-aside position now uses flex columns like top-a (card style, equal-width) - Offline page: external offline.css with theme variables, 3-column centered card layout, Osaka font loading, full-screen on mobile - CSS variable click-to-copy: scans text for --var patterns, wraps in clickable chips with toast notification on copy - Search button border matches input border (--input-border-color) - mod_stats override: converted from dl to table layout - Patch bump 03.09.15 → 03.09.16 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
204
src/offline.php
204
src/offline.php
@@ -38,6 +38,10 @@ $base = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '
|
||||
$jsBase = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '/js/';
|
||||
|
||||
$doc->addStyleSheet($base . 'template' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-template']);
|
||||
$doc->addStyleSheet($base . 'offline' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-offline']);
|
||||
|
||||
/* Load Osaka font for site title */
|
||||
$doc->addStyleSheet($base . 'fonts/osaka.css', ['version' => 'auto'], ['id' => 'moko-font-osaka']);
|
||||
|
||||
/* Load theme palettes */
|
||||
$doc->addStyleSheet($base . 'theme/light.standard' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-light-standard']);
|
||||
@@ -168,15 +172,6 @@ if (class_exists('\Joomla\Component\Users\Site\Helper\RouteHelper')) {
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
|
||||
<style>
|
||||
.moko-offline-wrap { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
|
||||
.moko-offline-main { display: grid; place-items: center; padding: 2rem 1rem; }
|
||||
.moko-card { max-width: 720px; width: 100%; }
|
||||
.moko-brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
|
||||
.moko-brand .brand-tagline { display:block; opacity:.75; font-size:.875rem; line-height:1.2; }
|
||||
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
|
||||
.skip-link:focus { position:static; width:auto; height:auto; padding:.5rem 1rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="site moko-offline-wrap <?php echo htmlspecialchars($direction, ENT_QUOTES, 'UTF-8'); ?>">
|
||||
<?php if (!empty($params_googletagmanager) && !empty($params_googletagmanagerid)) :
|
||||
@@ -234,121 +229,120 @@ if (class_exists('\Joomla\Component\Users\Site\Helper\RouteHelper')) {
|
||||
|
||||
<a class="skip-link" href="#maincontent"><?php echo Text::_('JSKIP_TO_CONTENT') ?: 'Skip to content'; ?></a>
|
||||
|
||||
<header class="container-header header py-3">
|
||||
<div class="grid-child container-nav d-flex align-items-center gap-3">
|
||||
|
||||
<!-- Brand (mutually exclusive image/text) -->
|
||||
<a class="moko-brand me-auto" href="<?php echo htmlspecialchars(Uri::base(), ENT_QUOTES, 'UTF-8'); ?>" aria-label="<?php echo htmlspecialchars($sitename, ENT_COMPAT, 'UTF-8'); ?>">
|
||||
<?php echo $brandHtml; ?>
|
||||
<?php if ($showTagline && $brandTagline): ?>
|
||||
<small class="brand-tagline"><?php echo htmlspecialchars($brandTagline, ENT_COMPAT, 'UTF-8'); ?></small>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
|
||||
<!-- Header module position: offline-header -->
|
||||
<?php if ($this->countModules('offline-header')) : ?>
|
||||
<div class="ms-2">
|
||||
<jdoc:include type="modules" name="offline-header" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<?php if ($this->countModules('offline-header')) : ?>
|
||||
<header class="moko-offline-header">
|
||||
<div class="container">
|
||||
<jdoc:include type="modules" name="offline-header" style="none" />
|
||||
</div>
|
||||
</header>
|
||||
<?php endif; ?>
|
||||
|
||||
<main id="maincontent" class="moko-offline-main">
|
||||
<div class="container">
|
||||
<jdoc:include type="message" />
|
||||
<jdoc:include type="message" />
|
||||
|
||||
<div class="moko-card card shadow-sm rounded-3 p-4 p-md-5">
|
||||
<?php if ($displayOfflineMessage === 1 && $offlineMessage !== '') : ?>
|
||||
<div class="mb-4">
|
||||
<h1 class="h3 mb-2"><?php echo Text::_('JOFFLINE_MESSAGE') ?: 'Site Offline'; ?></h1>
|
||||
<p class="lead mb-0"><?php echo $offlineMessage; ?></p>
|
||||
</div>
|
||||
<?php elseif ($displayOfflineMessage === 2) : ?>
|
||||
<div class="mb-4">
|
||||
<h1 class="h3 mb-2"><?php echo Text::_('JOFFLINE_MESSAGE') ?: 'Site Offline'; ?></h1>
|
||||
<p class="lead mb-0">
|
||||
<?php echo Text::_('JOFFLINE_MESSAGE_DEFAULT') ?: 'This site is down for maintenance. Please check back soon.'; ?>
|
||||
</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="moko-offline-grid">
|
||||
<div class="moko-offline-grid__side"></div>
|
||||
<div class="moko-offline-grid__center">
|
||||
<div class="moko-offline-card">
|
||||
<!-- Centered logo -->
|
||||
<a class="moko-offline-brand" href="<?php echo htmlspecialchars(Uri::base(), ENT_QUOTES, 'UTF-8'); ?>" aria-label="<?php echo htmlspecialchars($sitename, ENT_COMPAT, 'UTF-8'); ?>">
|
||||
<?php echo $brandHtml; ?>
|
||||
<?php if ($showTagline && $brandTagline): ?>
|
||||
<small class="brand-tagline"><?php echo htmlspecialchars($brandTagline, ENT_COMPAT, 'UTF-8'); ?></small>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
|
||||
<!-- Main offline module position -->
|
||||
<?php if ($this->countModules('offline')) : ?>
|
||||
<section class="mb-4" aria-label="Offline modules">
|
||||
<jdoc:include type="modules" name="offline" style="none" />
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
<?php if ($displayOfflineMessage === 1 && $offlineMessage !== '') : ?>
|
||||
<div class="mb-4 text-center">
|
||||
<h1 class="h3 mb-2"><?php echo Text::_('JOFFLINE_MESSAGE') ?: 'Site Offline'; ?></h1>
|
||||
<p class="lead mb-0"><?php echo $offlineMessage; ?></p>
|
||||
</div>
|
||||
<?php elseif ($displayOfflineMessage === 2) : ?>
|
||||
<div class="mb-4 text-center">
|
||||
<h1 class="h3 mb-2"><?php echo Text::_('JOFFLINE_MESSAGE') ?: 'Site Offline'; ?></h1>
|
||||
<p class="lead mb-0">
|
||||
<?php echo Text::_('JOFFLINE_MESSAGE_DEFAULT') ?: 'This site is down for maintenance. Please check back soon.'; ?>
|
||||
</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Login UNDER an accordion (collapsed by default) -->
|
||||
<div class="accordion" id="offlineAccordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingLogin">
|
||||
<button class="accordion-button collapsed" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#collapseLogin"
|
||||
aria-expanded="false" aria-controls="collapseLogin">
|
||||
<?php echo Text::_('JLOGIN'); ?>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseLogin" class="accordion-collapse collapse" aria-labelledby="headingLogin" data-bs-parent="#offlineAccordion">
|
||||
<div class="accordion-body">
|
||||
<form action="<?php echo $action; ?>" method="post" class="form-validate">
|
||||
<fieldset>
|
||||
<legend class="visually-hidden"><?php echo Text::_('JLOGIN'); ?></legend>
|
||||
<!-- Main offline module position -->
|
||||
<?php if ($this->countModules('offline')) : ?>
|
||||
<section class="mb-4" aria-label="Offline modules">
|
||||
<jdoc:include type="modules" name="offline" style="none" />
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="username"><?php echo Text::_('JGLOBAL_USERNAME'); ?></label>
|
||||
<input class="form-control" type="text" name="username" id="username" autocomplete="username" required aria-required="true">
|
||||
</div>
|
||||
<!-- Login accordion (collapsed by default) -->
|
||||
<div class="accordion" id="offlineAccordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingLogin">
|
||||
<button class="accordion-button collapsed" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#collapseLogin"
|
||||
aria-expanded="false" aria-controls="collapseLogin">
|
||||
<?php echo Text::_('JLOGIN'); ?>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseLogin" class="accordion-collapse collapse" aria-labelledby="headingLogin" data-bs-parent="#offlineAccordion">
|
||||
<div class="accordion-body">
|
||||
<form action="<?php echo $action; ?>" method="post" class="form-validate">
|
||||
<fieldset>
|
||||
<legend class="visually-hidden"><?php echo Text::_('JLOGIN'); ?></legend>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="password"><?php echo Text::_('JGLOBAL_PASSWORD'); ?></label>
|
||||
<input class="form-control" type="password" name="password" id="password" autocomplete="current-password" required aria-required="true">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="username"><?php echo Text::_('JGLOBAL_USERNAME'); ?></label>
|
||||
<input class="form-control" type="text" name="username" id="username" autocomplete="username" required aria-required="true">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="secretkey"><?php echo Text::_('JGLOBAL_SECRETKEY'); ?></label>
|
||||
<input class="form-control" type="text" name="secretkey" id="secretkey" autocomplete="one-time-code" placeholder="<?php echo Text::_('JGLOBAL_SECRETKEY'); ?>">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="password"><?php echo Text::_('JGLOBAL_PASSWORD'); ?></label>
|
||||
<input class="form-control" type="password" name="password" id="password" autocomplete="current-password" required aria-required="true">
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-4">
|
||||
<input class="form-check-input" type="checkbox" name="remember" id="remember">
|
||||
<label class="form-check-label" for="remember"><?php echo Text::_('JGLOBAL_REMEMBER_ME'); ?></label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="secretkey"><?php echo Text::_('JGLOBAL_SECRETKEY'); ?></label>
|
||||
<input class="form-control" type="text" name="secretkey" id="secretkey" autocomplete="one-time-code" placeholder="<?php echo Text::_('JGLOBAL_SECRETKEY'); ?>">
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary"><?php echo Text::_('JLOGIN'); ?></button>
|
||||
</div>
|
||||
<div class="form-check mb-4">
|
||||
<input class="form-check-input" type="checkbox" name="remember" id="remember">
|
||||
<label class="form-check-label" for="remember"><?php echo Text::_('JGLOBAL_REMEMBER_ME'); ?></label>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="option" value="com_users">
|
||||
<input type="hidden" name="task" value="user.login">
|
||||
<input type="hidden" name="return" value="<?php echo $return; ?>">
|
||||
<?php echo HTMLHelper::_('form.token'); ?>
|
||||
</fieldset>
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary"><?php echo Text::_('JLOGIN'); ?></button>
|
||||
</div>
|
||||
|
||||
<nav class="mt-3 small" aria-label="<?php echo Text::_('COM_USERS'); ?>">
|
||||
<ul class="list-inline m-0">
|
||||
<li class="list-inline-item">
|
||||
<a href="<?php echo $resetUrl; ?>"><?php echo Text::_('COM_USERS_LOGIN_RESET'); ?></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="<?php echo $remindUrl; ?>"><?php echo Text::_('COM_USERS_LOGIN_REMIND'); ?></a>
|
||||
</li>
|
||||
<?php if ($allowRegistration) : ?>
|
||||
<input type="hidden" name="option" value="com_users">
|
||||
<input type="hidden" name="task" value="user.login">
|
||||
<input type="hidden" name="return" value="<?php echo $return; ?>">
|
||||
<?php echo HTMLHelper::_('form.token'); ?>
|
||||
</fieldset>
|
||||
|
||||
<nav class="mt-3 small" aria-label="<?php echo Text::_('COM_USERS'); ?>">
|
||||
<ul class="list-inline m-0">
|
||||
<li class="list-inline-item">
|
||||
<a href="<?php echo $registrationUrl; ?>"><?php echo Text::_('COM_USERS_REGISTER'); ?></a>
|
||||
<a href="<?php echo $resetUrl; ?>"><?php echo Text::_('COM_USERS_LOGIN_RESET'); ?></a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</nav>
|
||||
</form>
|
||||
<li class="list-inline-item">
|
||||
<a href="<?php echo $remindUrl; ?>"><?php echo Text::_('COM_USERS_LOGIN_REMIND'); ?></a>
|
||||
</li>
|
||||
<?php if ($allowRegistration) : ?>
|
||||
<li class="list-inline-item">
|
||||
<a href="<?php echo $registrationUrl; ?>"><?php echo Text::_('COM_USERS_REGISTER'); ?></a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</nav>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /accordion -->
|
||||
</div>
|
||||
<!-- /accordion -->
|
||||
</div>
|
||||
<div class="moko-offline-grid__side"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user