Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restore FAQ button at top-right.

Browse Source 
Adds a top-right FAQ button in the hero while keeping a footer FAQ button, both opening the same modal.
This commit is contained in:
b1rdmania
2025-12-26 20:28:23 +00:00
parent b0c1b49d2a
commit 839d40447f
2 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+8 -1
View File
@@ -67,6 +67,7 @@
.hero { .hero {
text-align: center; text-align: center;
margin: 0 0 calc(var(--spacing-unit) * 4) 0; margin: 0 0 calc(var(--spacing-unit) * 4) 0;
position: relative;
} }
.hero h1 { .hero h1 {
color: var(--color-accent-primary); color: var(--color-accent-primary);
@@ -94,6 +95,11 @@
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
border-color: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.22);
} }
.faq-top {
position: absolute;
top: 0;
right: 0;
}
/* FAQ modal */ /* FAQ modal */
.modal-backdrop { .modal-backdrop {
@@ -938,6 +944,7 @@
<body> <body>
<div class="container"> <div class="container">
<div class="hero"> <div class="hero">
<button id="faqBtn" class="faq-link faq-top" type="button">FAQ</button>
<h1>MOTIF</h1> <h1>MOTIF</h1>
<p class="tagline"><strong>Procedural music generated from MIDI structure</strong></p> <p class="tagline"><strong>Procedural music generated from MIDI structure</strong></p>
</div> </div>
@@ -1035,7 +1042,7 @@
</div> </div>
<div class="footer"> <div class="footer">
<button id="faqBtn" class="faq-link" type="button">FAQ</button> <button id="faqBtnFooter" class="faq-link" type="button">FAQ</button>
</div> </div>
<div id="faqModalBackdrop" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="faqTitle"> <div id="faqModalBackdrop" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="faqTitle">
src/main.ts
+3
View File
@@ -54,6 +54,7 @@ class MotifApp {
// FAQ modal // FAQ modal
private faqBtn!: HTMLButtonElement; private faqBtn!: HTMLButtonElement;
private faqBtnFooter: HTMLButtonElement | null = null;
private faqBackdrop!: HTMLElement; private faqBackdrop!: HTMLElement;
private faqCloseBtn!: HTMLButtonElement; private faqCloseBtn!: HTMLButtonElement;
@@ -123,6 +124,7 @@ class MotifApp {
// FAQ modal // FAQ modal
this.faqBtn = document.getElementById('faqBtn') as HTMLButtonElement; this.faqBtn = document.getElementById('faqBtn') as HTMLButtonElement;
this.faqBtnFooter = document.getElementById('faqBtnFooter') as HTMLButtonElement | null;
this.faqBackdrop = document.getElementById('faqModalBackdrop')!; this.faqBackdrop = document.getElementById('faqModalBackdrop')!;
this.faqCloseBtn = document.getElementById('faqCloseBtn') as HTMLButtonElement; this.faqCloseBtn = document.getElementById('faqCloseBtn') as HTMLButtonElement;
} }
@@ -161,6 +163,7 @@ class MotifApp {
// FAQ // FAQ
this.faqBtn.addEventListener('click', () => this.openFaq()); this.faqBtn.addEventListener('click', () => this.openFaq());
this.faqBtnFooter?.addEventListener('click', () => this.openFaq());
this.faqCloseBtn.addEventListener('click', () => this.closeFaq()); this.faqCloseBtn.addEventListener('click', () => this.closeFaq());
this.faqBackdrop.addEventListener('click', (e) => { this.faqBackdrop.addEventListener('click', (e) => {
if (e.target === this.faqBackdrop) this.closeFaq(); if (e.target === this.faqBackdrop) this.closeFaq();