/* Кнопка "All" */ .all-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;background:transparent;border:1px solid #ddd;cursor:pointer} .all-btn:focus{outline:3px solid rgba(0,120,212,0.15);outline-offset:2px}
/* Оверлей и панель */ .overlay{position:fixed;inset:0;display:none;background:rgba(0,0,0,0.18);z-index:40} .overlay.open{display:block} .panel{position:fixed;left:0;right:0;top:56px;margin:0 auto;max-width:1200px;background:var(--panel);border-radius:8px;box-shadow:0 8px 24px var(--shadow);padding:20px;z-index:50;transform-origin:top;display:none} .panel.open{display:block}
/* Сетка меню */ .mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .group{background:transparent} .group h4{margin:0 0 8px 0;font-size:15px} .group ul{list-style:none;padding:0;margin:0} .group li{margin:6px 0} .link{display:block;padding:6px 8px;border-radius:6px;text-decoration:none;color:var(--text)} .link:hover{background:#fff}
/* Footer of panel */ .panel-footer{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid #e6e6e6;margin-top:16px}
/* Responsive */ @media (max-width:900px){ .panel{left:12px;right:12px;top:64px} .mega-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .mega-grid{grid-template-columns:1fr} }
Этот файл демонстрирует кнопку, похожую на "All Microsoft": выпадающая панель, оверлей, адаптивность и базовая доступность.
// Простая логика открытия/закрытия + базовая доступность const btn = document.getElementById('allToggle'); const panel = document.getElementById('megaPanel'); const overlay = document.getElementById('overlay');
function openPanel(){ btn.setAttribute('aria-expanded','true'); panel.setAttribute('aria-hidden','false'); panel.classList.add('open'); overlay.classList.add('open'); // запомнить первый фокус panel.querySelector('.link')?.focus(); document.addEventListener('keydown', onKeyDown); } function closePanel(){ btn.setAttribute('aria-expanded','false'); panel.setAttribute('aria-hidden','true'); panel.classList.remove('open'); overlay.classList.remove('open'); btn.focus(); document.removeEventListener('keydown', onKeyDown); }
btn.addEventListener('click', ()=>{ const expanded = btn.getAttribute('aria-expanded') === 'true'; if(expanded) closePanel(); else openPanel(); });
// клик по оверлею закрывает overlay.addEventListener('click', closePanel);
// клавиши: Esc закрывает; Tab — простая ловушка фокуса (не идеальна, но рабочая) function onKeyDown(e){ if(e.key === 'Escape') closePanel(); if(e.key === 'Tab'){ const focusable = panel.querySelectorAll('a, button'); if(!focusable.length) return; const first = focusable[0]; const last = focusable[focusable.length-1]; if(e.shiftKey && document.activeElement === first){ e.preventDefault(); last.focus(); } else if(!e.shiftKey && document.activeElement === last){ e.preventDefault(); first.focus(); } } }
// Закрывать при клике вне: полезно, но не переусердствуйте с перехватом кликов по документу document.addEventListener('click', (e)=>{ if(panel.classList.contains('open')){ const insidePanel = panel.contains(e.target) || btn.contains(e.target); if(!insidePanel) closePanel(); } });
// На сенсорных экранах можно добавить элемент управления типом открытия — по-умолчанию используется клик
🎄 Mini Christmas Fair at St Nicholas Church Hall! 🎄 Saturday, 6 December • 2:00–5:00 PM Join us for a cosy afternoon of creativity, treats, and Christmas spirit! ✨ Make a tiny gingerbread house that sits on top of a cup- the cutest gift for someone special. We’ll provide special wrapping with a bow so […]
🎄 Mini Christmas Fair at St Nicholas Church Hall! 🎄 Saturday, 6… Read More »
**русская версия ниже** Join us this Friday, December 5, for a cozy Crafting Circle with Maryann! 🧶 10:30am–12pm at Lakeside Café, Oakden Supplies provided • Gold coin donation. ⸻ Приходите в эту пятницу, пятого декабря, на уютное занятие по рукоделию с Мэрианн! 🧶 10:30–12:00 в Lakeside Café, Oakden Все материалы предоставляются • Пожертвование — gold
**русская версия ниже** Join us this Friday, December 5, for a cozy… Read More »
Big thanks to Sofia Demond-Iouguina, Zabava Folk Dance South Australia choreographer, for coming up with such a stunning choreography for this event. 🥰 And kudos to all the participants for learning it so quickly and o so flawlessly!🙌 Read on Facebook
**русская версия ниже** Nonprofits run on law and structure, not personal expectations. These basics apply to everyone. We follow the law. We communicate clearly. But we can’t re-educate people who choose not to listen. Knowing NFP rules is everyone’s responsibility. Questions — yes. Pressure, misinformation, accusations — no. A strong community is built on facts.
**русская версия ниже** Nonprofits run on law and structure, not personal expectations.… Read More »
**📌 Payments & Reimbursements in Prima Nota (According to Australian NFP Law & Governance Standards)** Prima Nota operates as a Community-based Nonprofit (NFP) in South Australia. Our processes follow official regulatory frameworks, including: • ACNC Governance Standards (1–5) • Fair Work Act 2009 — Volunteer vs Worker distinction • Associations Incorporation Act 1985 (SA) •
**📌 Payments & Reimbursements in Prima Nota (According to Australian NFP Law… Read More »
A combined rehearsal for the Prima Nota women’s and men’s vocal groups will take place tonight- Monday, 1 December, 6:30-8pm- in the hall of St Nicholas Church. 📍 Address: 41 Greenhill Rd, Wayville SA 5034 No prior experience is required- only your desire to sing and be part of a warm, creative community. Tea, coffee,
A combined rehearsal for the Prima Nota women’s and men’s vocal groups… Read More »