Tonne of updates to things like social systems, calendars, and the documentation system (making it mobile friendly and fixing up navigation)
This commit is contained in:
@@ -188,19 +188,57 @@
|
||||
</div>
|
||||
<div class="cm-header-nav__links">
|
||||
<div class="cm-header-nav__links-inner">
|
||||
<a href="#" data-path="/" class="cm-header-nav__link" data-nav-id="home" target="_blank" rel="noopener noreferrer"><span class="material-icons-outlined">home</span><span class="cm-header-nav__label">Home</span></a>
|
||||
<a href="#" data-path="/home" class="cm-header-nav__link" data-nav-id="home"><span class="material-icons-outlined">home</span><span class="cm-header-nav__label">Home</span></a>
|
||||
<a href="#" data-path="/campaigns" class="cm-header-nav__link" data-nav-id="campaigns"><span class="material-icons-outlined">send</span><span class="cm-header-nav__label">Campaigns</span></a>
|
||||
<a href="#" data-path="/shifts" class="cm-header-nav__link" data-nav-id="shifts"><span class="material-icons-outlined">schedule</span><span class="cm-header-nav__label">Shifts</span></a>
|
||||
<a href="#" data-path="/events" class="cm-header-nav__link" data-nav-id="events" target="_blank" rel="noopener noreferrer"><span class="material-icons-outlined">event</span><span class="cm-header-nav__label">Events</span></a>
|
||||
<a href="#" data-path="/map" class="cm-header-nav__link" data-nav-id="map"><span class="material-icons-outlined">place</span><span class="cm-header-nav__label">Map</span></a>
|
||||
<div class="cm-header-nav__dropdown">
|
||||
<span class="cm-header-nav__link cm-header-nav__dropdown-trigger">
|
||||
<span class="material-icons-outlined">apps</span>
|
||||
<span class="cm-header-nav__label">Scheduling</span>
|
||||
<span class="material-icons-outlined cm-header-nav__chevron">expand_more</span>
|
||||
</span>
|
||||
<div class="cm-header-nav__dropdown-menu">
|
||||
<a href="#" data-path="/shifts" class="cm-header-nav__dropdown-item" data-nav-id="shifts"><span class="material-icons-outlined">schedule</span><span>Shifts</span></a>
|
||||
<a href="#" data-path="/events" class="cm-header-nav__dropdown-item" data-nav-id="events"><span class="material-icons-outlined">event</span><span>Calendar</span></a>
|
||||
<a href="#" data-path="/polls" class="cm-header-nav__dropdown-item" data-nav-id="polls"><span class="material-icons-outlined">bar_chart</span><span>Polls</span></a>
|
||||
<a href="#" data-path="/events/tickets" class="cm-header-nav__dropdown-item" data-nav-id="tickets"><span class="material-icons-outlined">sell</span><span>Tickets</span></a>
|
||||
<a href="#" data-path="/meet" class="cm-header-nav__dropdown-item" data-nav-id="meet"><span class="material-icons-outlined">videocam</span><span>Meet</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" data-path="/gallery" class="cm-header-nav__link" data-nav-id="gallery"><span class="material-icons-outlined">play_circle</span><span class="cm-header-nav__label">Gallery</span></a>
|
||||
<a href="#" data-path="/shop" class="cm-header-nav__link" data-nav-id="shop"><span class="material-icons-outlined">shopping_bag</span><span class="cm-header-nav__label">Shop</span></a>
|
||||
<a href="#" data-path="/donate" class="cm-header-nav__link" data-nav-id="donate"><span class="material-icons-outlined">favorite_border</span><span class="cm-header-nav__label">Donate</span></a>
|
||||
<div class="cm-header-nav__dropdown">
|
||||
<span class="cm-header-nav__link cm-header-nav__dropdown-trigger">
|
||||
<span class="material-icons-outlined">account_balance_wallet</span>
|
||||
<span class="cm-header-nav__label">Commerce</span>
|
||||
<span class="material-icons-outlined cm-header-nav__chevron">expand_more</span>
|
||||
</span>
|
||||
<div class="cm-header-nav__dropdown-menu">
|
||||
<a href="#" data-path="/pricing" class="cm-header-nav__dropdown-item" data-nav-id="pricing"><span class="material-icons-outlined">attach_money</span><span>Pricing</span></a>
|
||||
<a href="#" data-path="/shop" class="cm-header-nav__dropdown-item" data-nav-id="shop"><span class="material-icons-outlined">shopping_bag</span><span>Shop</span></a>
|
||||
<a href="#" data-path="/donate" class="cm-header-nav__dropdown-item" data-nav-id="donate"><span class="material-icons-outlined">favorite_border</span><span>Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" data-path="/wall-of-fame" class="cm-header-nav__link" data-nav-id="wall-of-fame"><span class="material-icons-outlined">emoji_events</span><span class="cm-header-nav__label">Wall of Fame</span></a>
|
||||
<a href="#" data-path="/pages" class="cm-header-nav__link" data-nav-id="pages"><span class="material-icons-outlined">description</span><span class="cm-header-nav__label">Pages</span></a>
|
||||
<a href="/" class="cm-header-nav__link" data-nav-id="landing"><span class="material-icons-outlined">language</span><span class="cm-header-nav__label">Website</span></a>
|
||||
<a href="/docs/" class="cm-header-nav__link" data-nav-id="docs"><span class="material-icons-outlined">menu_book</span><span class="cm-header-nav__label">Docs</span></a>
|
||||
<a href="#" data-path="/app" class="cm-header-nav__link">
|
||||
<span class="material-icons-outlined">dashboard</span>
|
||||
<span class="cm-header-nav__label">Admin</span>
|
||||
<a href="#" data-path="/login" class="cm-header-nav__link" id="cm-signin-link">
|
||||
<span class="material-icons-outlined">login</span>
|
||||
<span class="cm-header-nav__label">Sign In</span>
|
||||
</a>
|
||||
<div class="cm-header-nav__dropdown" id="cm-admin-dropdown" style="display:none">
|
||||
<span class="cm-header-nav__link cm-header-nav__dropdown-trigger">
|
||||
<span class="material-icons-outlined">person</span>
|
||||
<span class="cm-header-nav__label">Admin</span>
|
||||
<span class="material-icons-outlined cm-header-nav__chevron">expand_more</span>
|
||||
</span>
|
||||
<div class="cm-header-nav__dropdown-menu cm-header-nav__dropdown-menu--right">
|
||||
<a href="#" data-path="/app" class="cm-header-nav__dropdown-item"><span class="material-icons-outlined">dashboard</span><span>Admin Panel</span></a>
|
||||
<a href="#" data-path="/volunteer" class="cm-header-nav__dropdown-item"><span class="material-icons-outlined">volunteer_activism</span><span>Volunteer Portal</span></a>
|
||||
<a href="#" data-path="/volunteer/profile" class="cm-header-nav__dropdown-item"><span class="material-icons-outlined">account_circle</span><span>My Profile</span></a>
|
||||
<a href="#" data-path="/logout" class="cm-header-nav__dropdown-item"><span class="material-icons-outlined">logout</span><span>Logout</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="cm-header-nav__hamburger" aria-label="Open navigation menu">
|
||||
<span class="material-icons-outlined">menu</span>
|
||||
@@ -215,19 +253,57 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="cm-header-nav__mobile-links">
|
||||
<a href="#" data-path="/" class="cm-header-nav__mobile-link" data-nav-id="home" target="_blank" rel="noopener noreferrer"><span class="material-icons-outlined">home</span><span>Home</span></a>
|
||||
<a href="#" data-path="/home" class="cm-header-nav__mobile-link" data-nav-id="home"><span class="material-icons-outlined">home</span><span>Home</span></a>
|
||||
<a href="#" data-path="/campaigns" class="cm-header-nav__mobile-link" data-nav-id="campaigns"><span class="material-icons-outlined">send</span><span>Campaigns</span></a>
|
||||
<a href="#" data-path="/shifts" class="cm-header-nav__mobile-link" data-nav-id="shifts"><span class="material-icons-outlined">schedule</span><span>Shifts</span></a>
|
||||
<a href="#" data-path="/events" class="cm-header-nav__mobile-link" data-nav-id="events" target="_blank" rel="noopener noreferrer"><span class="material-icons-outlined">event</span><span>Events</span></a>
|
||||
<a href="#" data-path="/map" class="cm-header-nav__mobile-link" data-nav-id="map"><span class="material-icons-outlined">place</span><span>Map</span></a>
|
||||
<div class="cm-header-nav__mobile-group" data-group-id="scheduling">
|
||||
<span class="cm-header-nav__mobile-link cm-header-nav__mobile-group-trigger" role="button">
|
||||
<span class="material-icons-outlined">apps</span>
|
||||
<span style="flex:1">Scheduling</span>
|
||||
<span class="material-icons-outlined cm-header-nav__mobile-chevron">expand_more</span>
|
||||
</span>
|
||||
<div class="cm-header-nav__mobile-group-children">
|
||||
<a href="#" data-path="/shifts" class="cm-header-nav__mobile-link" data-nav-id="shifts" style="padding-left:48px"><span class="material-icons-outlined">schedule</span><span>Shifts</span></a>
|
||||
<a href="#" data-path="/events" class="cm-header-nav__mobile-link" data-nav-id="events" style="padding-left:48px"><span class="material-icons-outlined">event</span><span>Calendar</span></a>
|
||||
<a href="#" data-path="/polls" class="cm-header-nav__mobile-link" data-nav-id="polls" style="padding-left:48px"><span class="material-icons-outlined">bar_chart</span><span>Polls</span></a>
|
||||
<a href="#" data-path="/events/tickets" class="cm-header-nav__mobile-link" data-nav-id="tickets" style="padding-left:48px"><span class="material-icons-outlined">sell</span><span>Tickets</span></a>
|
||||
<a href="#" data-path="/meet" class="cm-header-nav__mobile-link" data-nav-id="meet" style="padding-left:48px"><span class="material-icons-outlined">videocam</span><span>Meet</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" data-path="/gallery" class="cm-header-nav__mobile-link" data-nav-id="gallery"><span class="material-icons-outlined">play_circle</span><span>Gallery</span></a>
|
||||
<a href="#" data-path="/shop" class="cm-header-nav__mobile-link" data-nav-id="shop"><span class="material-icons-outlined">shopping_bag</span><span>Shop</span></a>
|
||||
<a href="#" data-path="/donate" class="cm-header-nav__mobile-link" data-nav-id="donate"><span class="material-icons-outlined">favorite_border</span><span>Donate</span></a>
|
||||
<div class="cm-header-nav__mobile-group" data-group-id="commerce">
|
||||
<span class="cm-header-nav__mobile-link cm-header-nav__mobile-group-trigger" role="button">
|
||||
<span class="material-icons-outlined">account_balance_wallet</span>
|
||||
<span style="flex:1">Commerce</span>
|
||||
<span class="material-icons-outlined cm-header-nav__mobile-chevron">expand_more</span>
|
||||
</span>
|
||||
<div class="cm-header-nav__mobile-group-children">
|
||||
<a href="#" data-path="/pricing" class="cm-header-nav__mobile-link" data-nav-id="pricing" style="padding-left:48px"><span class="material-icons-outlined">attach_money</span><span>Pricing</span></a>
|
||||
<a href="#" data-path="/shop" class="cm-header-nav__mobile-link" data-nav-id="shop" style="padding-left:48px"><span class="material-icons-outlined">shopping_bag</span><span>Shop</span></a>
|
||||
<a href="#" data-path="/donate" class="cm-header-nav__mobile-link" data-nav-id="donate" style="padding-left:48px"><span class="material-icons-outlined">favorite_border</span><span>Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" data-path="/wall-of-fame" class="cm-header-nav__mobile-link" data-nav-id="wall-of-fame"><span class="material-icons-outlined">emoji_events</span><span>Wall of Fame</span></a>
|
||||
<a href="#" data-path="/pages" class="cm-header-nav__mobile-link" data-nav-id="pages"><span class="material-icons-outlined">description</span><span>Pages</span></a>
|
||||
<a href="/" class="cm-header-nav__mobile-link" data-nav-id="landing"><span class="material-icons-outlined">language</span><span>Website</span></a>
|
||||
<a href="/docs/" class="cm-header-nav__mobile-link" data-nav-id="docs"><span class="material-icons-outlined">menu_book</span><span>Docs</span></a>
|
||||
<a href="#" data-path="/app" class="cm-header-nav__mobile-link">
|
||||
<span class="material-icons-outlined">dashboard</span>
|
||||
<span>Admin</span>
|
||||
<a href="#" data-path="/login" class="cm-header-nav__mobile-link" id="cm-mobile-signin-link">
|
||||
<span class="material-icons-outlined">login</span>
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
<div class="cm-header-nav__mobile-group" data-group-id="admin" id="cm-mobile-admin-group" style="display:none">
|
||||
<span class="cm-header-nav__mobile-link cm-header-nav__mobile-group-trigger" role="button">
|
||||
<span class="material-icons-outlined">person</span>
|
||||
<span style="flex:1">Admin</span>
|
||||
<span class="material-icons-outlined cm-header-nav__mobile-chevron">expand_more</span>
|
||||
</span>
|
||||
<div class="cm-header-nav__mobile-group-children">
|
||||
<a href="#" data-path="/app" class="cm-header-nav__mobile-link" style="padding-left:48px"><span class="material-icons-outlined">dashboard</span><span>Admin Panel</span></a>
|
||||
<a href="#" data-path="/volunteer" class="cm-header-nav__mobile-link" style="padding-left:48px"><span class="material-icons-outlined">volunteer_activism</span><span>Volunteer Portal</span></a>
|
||||
<a href="#" data-path="/volunteer/profile" class="cm-header-nav__mobile-link" style="padding-left:48px"><span class="material-icons-outlined">account_circle</span><span>My Profile</span></a>
|
||||
<a href="#" data-path="/logout" class="cm-header-nav__mobile-link" style="padding-left:48px"><span class="material-icons-outlined">logout</span><span>Logout</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cm-header-nav__mobile-overlay" id="cm-mobile-overlay"></div>
|
||||
@@ -266,26 +342,84 @@
|
||||
if (hamburger) hamburger.addEventListener('click', openDrawer);
|
||||
if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
|
||||
if (overlay) overlay.addEventListener('click', closeDrawer);
|
||||
// Mobile group expand/collapse toggles
|
||||
document.querySelectorAll('.cm-header-nav__mobile-group-trigger').forEach(function(trigger) {
|
||||
trigger.addEventListener('click', function() {
|
||||
var group = this.closest('.cm-header-nav__mobile-group');
|
||||
var children = group.querySelector('.cm-header-nav__mobile-group-children');
|
||||
var isExpanded = group.classList.contains('expanded');
|
||||
if (isExpanded) {
|
||||
group.classList.remove('expanded');
|
||||
children.style.display = 'none';
|
||||
} else {
|
||||
group.classList.add('expanded');
|
||||
children.style.display = 'block';
|
||||
}
|
||||
});
|
||||
});
|
||||
// Auth-aware: show Admin dropdown for logged-in users, Sign In for guests.
|
||||
// Uses hidden iframe + postMessage to read auth state from the app's origin.
|
||||
function showAdminMenu() {
|
||||
var s1 = document.getElementById('cm-signin-link');
|
||||
var s2 = document.getElementById('cm-mobile-signin-link');
|
||||
var a1 = document.getElementById('cm-admin-dropdown');
|
||||
var a2 = document.getElementById('cm-mobile-admin-group');
|
||||
if (s1) s1.style.display = 'none';
|
||||
if (s2) s2.style.display = 'none';
|
||||
if (a1) a1.style.display = '';
|
||||
if (a2) a2.style.display = '';
|
||||
}
|
||||
// 1. Same-origin check (works when MkDocs served from same origin as app)
|
||||
try {
|
||||
var stored = localStorage.getItem('cml-auth');
|
||||
if (stored) {
|
||||
var parsed = JSON.parse(stored);
|
||||
if (parsed && parsed.state && parsed.state.accessToken) {
|
||||
showAdminMenu();
|
||||
}
|
||||
}
|
||||
} catch(e) {}
|
||||
// 2. Cross-origin check via hidden iframe + postMessage
|
||||
var iframe = document.createElement('iframe');
|
||||
iframe.style.display = 'none';
|
||||
iframe.src = base + '/auth-check.html';
|
||||
window.addEventListener('message', function(event) {
|
||||
if (event.origin !== base) return;
|
||||
if (event.data && event.data.type === 'cml-auth-status' && event.data.authenticated) {
|
||||
showAdminMenu();
|
||||
}
|
||||
});
|
||||
document.body.appendChild(iframe);
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
.md-banner {
|
||||
background: linear-gradient(158deg, rgb(0,31,156) 0%, rgb(0,68,204) 100%) !important;
|
||||
background: linear-gradient(135deg, #005a9c 0%, #007acc 100%) !important;
|
||||
color: #ffffff !important;
|
||||
padding: 0 !important;
|
||||
overflow: visible !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.md-banner__inner {
|
||||
overflow: visible !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
.md-banner__button {
|
||||
display: none !important;
|
||||
}
|
||||
.cm-header-nav {
|
||||
background: linear-gradient(158deg, rgb(0,31,156) 0%, rgb(0,68,204) 100%);
|
||||
background: linear-gradient(135deg, #005a9c 0%, #007acc 100%);
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cm-header-nav a {
|
||||
@@ -348,6 +482,62 @@
|
||||
.cm-header-nav__hamburger .material-icons-outlined {
|
||||
font-size: 24px;
|
||||
}
|
||||
/* Desktop dropdown menus */
|
||||
.cm-header-nav__dropdown {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.cm-header-nav__dropdown-trigger {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.cm-header-nav__dropdown-trigger .cm-header-nav__chevron {
|
||||
font-size: 14px;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.cm-header-nav__dropdown:hover .cm-header-nav__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.cm-header-nav__dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
min-width: 180px;
|
||||
background: #1b2838;
|
||||
border-radius: 8px;
|
||||
padding: 6px 0;
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
|
||||
z-index: 100;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.cm-header-nav__dropdown:hover .cm-header-nav__dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.cm-header-nav__dropdown-menu--right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.cm-header-nav__dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
text-decoration: none !important;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.cm-header-nav__dropdown-item:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: #fff !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.cm-header-nav__dropdown-item .material-icons-outlined {
|
||||
font-size: 16px;
|
||||
}
|
||||
/* Mobile drawer */
|
||||
.cm-header-nav__mobile-drawer {
|
||||
position: fixed;
|
||||
@@ -408,6 +598,21 @@
|
||||
.cm-header-nav__mobile-link .material-icons-outlined {
|
||||
font-size: 18px;
|
||||
}
|
||||
/* Mobile group expand/collapse */
|
||||
.cm-header-nav__mobile-group-trigger {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.cm-header-nav__mobile-chevron {
|
||||
font-size: 14px !important;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.cm-header-nav__mobile-group.expanded .cm-header-nav__mobile-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.cm-header-nav__mobile-group-children {
|
||||
display: none;
|
||||
}
|
||||
.cm-header-nav__mobile-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
@@ -425,6 +630,7 @@
|
||||
.cm-header-nav { padding: 0 16px; }
|
||||
.cm-header-nav__links-inner { display: none; }
|
||||
.cm-header-nav__hamburger { display: block; }
|
||||
.cm-header-nav__dropdown-menu { display: none !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user