ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance loading indicators for question fragment during HTMX requests; ensure overview tile text color remains unchanged for flagged questions

Browse Source
This commit is contained in:
Ross
2026-01-05 14:50:07 +00:00
parent b89ca918fa
commit d4247adb13
2 changed files with 51 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
physics/templates/physics/exam_take.html
+42 -42
View File
@@ -76,55 +76,55 @@
}catch(e){ console && console.error && console.error(e); } }catch(e){ console && console.error && console.error(e); }
}; };
</script> </script>
<script> <script>
// Show a blur + spinner on the question fragment while HTMX loads it // Show a blur + spinner on the question fragment while HTMX loads it
(function(){ (function(){
function showLoading(){ function showLoading(){
try{ try{
const frag = document.getElementById('question-fragment'); const frag = document.getElementById('question-fragment');
if(!frag) return; if(!frag) return;
frag.classList.add('loading'); frag.classList.add('loading');
if(!frag.querySelector('.loading-spinner')){ if(!frag.querySelector('.loading-spinner')){
const s = document.createElement('div'); const s = document.createElement('div');
s.className = 'loading-spinner'; s.className = 'loading-spinner';
s.setAttribute('aria-hidden','true'); s.setAttribute('aria-hidden','true');
frag.appendChild(s); frag.appendChild(s);
} }
}catch(e){console && console.error && console.error(e);} }catch(e){console && console.error && console.error(e);}
} }
function hideLoading(){ function hideLoading(){
try{ try{
const frag = document.getElementById('question-fragment'); const frag = document.getElementById('question-fragment');
if(!frag) return; if(!frag) return;
frag.classList.remove('loading'); frag.classList.remove('loading');
const s = frag.querySelector('.loading-spinner'); if(s) s.remove(); const s = frag.querySelector('.loading-spinner'); if(s) s.remove();
}catch(e){console && console.error && console.error(e);} }catch(e){console && console.error && console.error(e);}
} }
document.body.addEventListener('htmx:beforeRequest', function(evt){ document.body.addEventListener('htmx:beforeRequest', function(evt){
try{ try{
const target = (evt.detail && (evt.detail.target || evt.detail.elt)) || evt.target; const target = (evt.detail && (evt.detail.target || evt.detail.elt)) || evt.target;
// if the request targets the question fragment, show loading // if the request targets the question fragment, show loading
if(target && (target.id === 'question-fragment' || (target.closest && target.closest('#question-fragment')))){ if(target && (target.id === 'question-fragment' || (target.closest && target.closest('#question-fragment')))){
showLoading(); showLoading();
} }
}catch(e){/* ignore */} }catch(e){/* ignore */}
}); });
document.body.addEventListener('htmx:afterSwap', function(evt){ document.body.addEventListener('htmx:afterSwap', function(evt){
try{ try{
const target = (evt.detail && (evt.detail.target || evt.detail.elt)) || evt.target; const target = (evt.detail && (evt.detail.target || evt.detail.elt)) || evt.target;
if(target && (target.id === 'question-fragment' || (target.closest && target.closest('#question-fragment')))){ if(target && (target.id === 'question-fragment' || (target.closest && target.closest('#question-fragment')))){
hideLoading(); hideLoading();
} }
}catch(e){} }catch(e){}
}); });
// also hide after settle to be safe // also hide after settle to be safe
document.body.addEventListener('htmx:afterSettle', function(evt){ hideLoading(); }); document.body.addEventListener('htmx:afterSettle', function(evt){ hideLoading(); });
})(); })();
</script> </script>
<script> <script>
// Also update after HTMX settle to ensure DOM changes are applied // Also update after HTMX settle to ensure DOM changes are applied
document.body.addEventListener('htmx:afterSettle', function(){ document.body.addEventListener('htmx:afterSettle', function(){
physics/templates/physics/exam_take_overview.html
+9
View File
@@ -133,6 +133,15 @@
/* Flagged questions show only the flag icon; do not change border color */ /* Flagged questions show only the flag icon; do not change border color */
/* Ensure global `.flagged` rules don't change the overview tile text colour. */
.overview-question-btn.flagged {
color: inherit !important;
}
.overview-question-btn.flagged .qn-num,
.overview-question-btn.flagged .qn-ans {
color: inherit !important;
}
.overview-question-btn .question-flag { .overview-question-btn .question-flag {
margin-left: auto; margin-left: auto;
font-size: 0.95rem; font-size: 0.95rem;