andre/fitme3070.pt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(gyms): show gym logos in navbar buttons and brand; accept JPEG XL uploads

Browse Source
This commit is contained in:
andre committed 2026-10-26 09:35:46 +00:00
1 parent a85bec6851
commit d445ba64b9
7 files changed
+51 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

site/assets/css/style.css
+13 -7
View File
@@ -437,14 +437,20 @@ section[id] {
.gym-switch-btn { display: inline-flex; align-items: center; gap: .5rem; }
/* The logo is a mask filled with the text colour, so any single-colour logo
follows the button (brand colour, hover state, light or dark brand). */
/* With a logo the button shows the gym's wordmark in its own colours on a
light face, framed by the brand colour; the name is the image's alt. The
hover face stays light too, so dark parts of the logo never vanish. */
.gym-switch-btn--logo {
--btn-face: #fff;
background: #fff;
padding: 4px 12px;
}
.gym-switch-logo {
height: 1.4em;
aspect-ratio: 1;
background-color: currentColor;
-webkit-mask: var(--logo) center / contain no-repeat;
mask: var(--logo) center / contain no-repeat;
display: block;
height: 30px;
width: auto;
max-width: 130px;
object-fit: contain;
}
/* ── Button hover: the same spinning edge as the Mensalidades cards ───────────
site/includes/navbar.php
+9 -4
View File
@@ -4,7 +4,8 @@ if($current_uri_2 == 'crossfit'){
}
else
{
$logo_rel = 'site/assets/img/logos/logo_black.svg';
// Each gym shows its own logo (FitMe In on /mira/, FitMe 3070 on /3070/).
$logo_rel = gym_logo(current_gym()) ?: 'site/assets/img/logos/logo_black.svg';
}
$logo = base_url($logo_rel);
$logo_dims = svg_img_dims_attr(dirname(__DIR__, 2) . '/' . $logo_rel);
@@ -12,7 +13,7 @@ $logo_dims = svg_img_dims_attr(dirname(__DIR__, 2) . '/' . $logo_rel);
<header class="header-section lazy">
<nav class="navbar navbar-expand-lg navbar-light" style="padding-left:1rem; padding-top: 0; padding-bottom: 0;padding-right: 0; ">
<a class="navbar-brand" href="<?= htmlspecialchars(gym_url(current_gym())) ?>">
<img loading="eager" decoding="async" alt="Logo FitMe3070" src="<?= $logo ?>" <?= $logo_dims ?> style="width: 150px; height: auto;">
<img loading="eager" decoding="async" alt="Logo <?= htmlspecialchars(current_gym()['name'] ?? 'FitMe 3070') ?>" src="<?= htmlspecialchars($logo) ?>" <?= $logo_dims ?> style="width: 150px; height: auto;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -59,9 +60,13 @@ $logo_dims = svg_img_dims_attr(dirname(__DIR__, 2) . '/' . $logo_rel);
if ($other_gyms): ?>
<div class="gym-switch d-flex flex-wrap gap-2 ms-lg-auto py-2 py-lg-0 pe-lg-3">
<?php foreach ($other_gyms as $g): ?>
<a class="gym-switch-btn" href="<?= htmlspecialchars(gym_url($g)) ?>" style="<?= htmlspecialchars(gym_brand_vars($g)) ?>">
<?php if (($g['logo'] ?? '') !== ''): ?><span class="gym-switch-logo" aria-hidden="true" style="--logo:url('<?= htmlspecialchars(base_url($g['logo']), ENT_QUOTES) ?>')"></span><?php endif; ?>
<?php $g_logo = gym_logo($g); ?>
<a class="gym-switch-btn<?= $g_logo !== '' ? ' gym-switch-btn--logo' : '' ?>" href="<?= htmlspecialchars(gym_url($g)) ?>" style="<?= htmlspecialchars(gym_brand_vars($g)) ?>">
<?php if ($g_logo !== ''): ?>
<img class="gym-switch-logo" src="<?= htmlspecialchars(base_url($g_logo)) ?>" alt="<?= htmlspecialchars($g['name']) ?>" decoding="async">
<?php else: ?>
<span><?= htmlspecialchars($g['name']) ?></span>
<?php endif; ?>
</a>
<?php endforeach; ?>
</div>