alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-09-21 03:01:27 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): make app header full-width and move Doctor into header controls

Browse Source 
- Drop the fixed max-width on .header-container so the header spans the
  viewport while the card grid keeps its own content width
- Keep header icon click targets at 32px at all breakpoints and add
  role/tabindex/aria-label plus Enter/Space activation
- Relocate the Doctor trigger from the page toolbar to the header icon
  group (also available on the statistics page and in the hamburger
  menu), removing the now-unused .doctor-trigger styles
This commit is contained in:
Will Miao
2026-09-12 09:28:16 +08:00
parent 6d3f82976f
commit fe160134d0
5 changed files with 61 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/components/controls.html
-7
View File
@@ -144,13 +144,6 @@
</button>
</div>
{% endif %}
<div class="control-group doctor-control-group">
<button id="doctorTriggerBtn" class="doctor-trigger" title="{{ t('doctor.buttonTitle', default='Run diagnostics and common fixes') }}">
<i class="fas fa-stethoscope"></i>
<span>{{ t('doctor.title', default='Doctor') }}</span>
<span id="doctorStatusBadge" class="doctor-status-badge hidden" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
templates/components/header.html
+20 -5
View File
@@ -68,23 +68,34 @@
<!-- Right section: Controls -->
<div class="header-right">
<div class="header-controls" id="headerControls">
<div class="theme-toggle" title="{{ t('header.theme.toggle') }}">
<div class="doctor-toggle" id="doctorTriggerBtn" role="button" tabindex="0"
title="{{ t('doctor.buttonTitle', default='Run diagnostics and common fixes') }}"
aria-label="{{ t('doctor.title', default='Doctor') }}">
<i class="fas fa-stethoscope"></i>
<span id="doctorStatusBadge" class="doctor-status-badge hidden" aria-hidden="true"></span>
</div>
<div class="theme-toggle" role="button" tabindex="0" title="{{ t('header.theme.toggle') }}"
aria-label="{{ t('header.theme.toggle') }}">
<i class="fas fa-moon dark-icon"></i>
<i class="fas fa-sun light-icon"></i>
<i class="fas fa-adjust auto-icon"></i>
</div>
<div class="settings-toggle" title="{{ t('common.actions.settings') }}">
<div class="settings-toggle" role="button" tabindex="0" title="{{ t('common.actions.settings') }}"
aria-label="{{ t('common.actions.settings') }}">
<i class="fas fa-cog"></i>
</div>
<div class="help-toggle" id="helpToggleBtn" title="{{ t('common.actions.help') }}">
<div class="help-toggle" id="helpToggleBtn" role="button" tabindex="0" title="{{ t('common.actions.help') }}"
aria-label="{{ t('common.actions.help') }}">
<i class="fas fa-question-circle"></i>
<span class="update-badge"></span>
</div>
<div class="update-toggle" id="updateToggleBtn" title="{{ t('header.actions.notifications') }}">
<div class="update-toggle" id="updateToggleBtn" role="button" tabindex="0"
title="{{ t('header.actions.notifications') }}" aria-label="{{ t('header.actions.notifications') }}">
<i class="fas fa-bell"></i>
<span class="update-badge"></span>
</div>
<div class="support-toggle" id="supportToggleBtn" title="{{ t('header.actions.support') }}">
<div class="support-toggle" id="supportToggleBtn" role="button" tabindex="0"
title="{{ t('header.actions.support') }}" aria-label="{{ t('header.actions.support') }}">
<i class="fas fa-heart"></i>
</div>
</div>
@@ -110,6 +121,10 @@
<i class="fas fa-bell"></i>
<span>{{ t('header.actions.notifications') }}</span>
</div>
<div class="dropdown-item" data-action="doctor">
<i class="fas fa-stethoscope"></i>
<span>{{ t('doctor.title', default='Doctor') }}</span>
</div>
<div class="dropdown-divider"></div>
<div class="dropdown-item" data-action="support">
<i class="fas fa-heart"></i>