bvandeusen/imagerepo
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix settings tabs by using inline style.display instead of CSS class toggling

Browse Source 
The class-based is-active/display approach was unreliable due to CSS cascade
issues. Switching to direct style.display manipulation bypasses specificity
entirely. Also added cache-busting ?v=2 to style.css link.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-03-20 16:52:45 -04:00
parent 42e89d40ee
commit e37ce27256
2 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/layout.html
+1 -1
View File
@@ -7,7 +7,7 @@
<link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}" type="image/svg+xml">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" sizes="any">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=2">
{% block head %}{% endblock %}
</head>
<body{% block body_attrs %}{% endblock %}>
app/templates/settings.html
+11 -10
View File
@@ -1851,23 +1851,24 @@ document.addEventListener('DOMContentLoaded', () => {
(function() {
const tabBtns = document.querySelectorAll('.settings-tab-btn');
const tabPanels = document.querySelectorAll('.settings-tab-panel');
const validTabs = ['overview', 'import', 'maintenance'];
function activateTab(tabName) {
tabBtns.forEach(btn => btn.classList.toggle('is-active', btn.dataset.tab === tabName));
tabPanels.forEach(panel => panel.classList.toggle('is-active', panel.dataset.tab === tabName));
history.replaceState({}, '', `#${tabName}`);
tabBtns.forEach(function(btn) {
btn.classList.toggle('is-active', btn.dataset.tab === tabName);
});
tabPanels.forEach(function(panel) {
panel.style.display = panel.dataset.tab === tabName ? 'block' : 'none';
});
history.replaceState(null, '', '#' + tabName);
}
tabBtns.forEach(btn => {
btn.addEventListener('click', () => activateTab(btn.dataset.tab));
tabBtns.forEach(function(btn) {
btn.addEventListener('click', function() { activateTab(btn.dataset.tab); });
});
// Restore from URL hash on load
const hash = window.location.hash.replace('#', '');
const validTabs = ['overview', 'import', 'maintenance'];
if (validTabs.includes(hash)) {
activateTab(hash);
}
activateTab(validTabs.includes(hash) ? hash : 'overview');
})();
</script>
{% endblock %}