CSS class migrations: admin views and boot overlay fade-out

- Replace style.display with .is-hidden classList in ApiKeysView, CustomFieldsView, RecurringTicketsView
- Convert boot overlay fade-out from style.opacity to .boot-overlay--fade-out CSS class
- Add .boot-overlay--fade-out rule to dashboard.css

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-20 21:20:55 -04:00
parent f45ec9b0f7
commit ce95e555d5
5 changed files with 10 additions and 9 deletions

View File

@@ -66,7 +66,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
<!-- New Key Display (hidden by default) -->
<div id="newKeyDisplay" class="ascii-frame-inner key-generated-alert" style="display: none;">
<div id="newKeyDisplay" class="ascii-frame-inner key-generated-alert is-hidden">
<h3 class="admin-section-title">New API Key Generated</h3>
<p class="text-danger text-sm mb-1">
Copy this key now. You won't be able to see it again!
@@ -195,7 +195,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
if (data.success) {
// Show the new key
document.getElementById('newKeyValue').value = data.api_key;
document.getElementById('newKeyDisplay').style.display = 'block';
document.getElementById('newKeyDisplay').classList.remove('is-hidden');
document.getElementById('keyName').value = '';
lt.toast.success('API key generated successfully');

View File

@@ -123,7 +123,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<option value="number">Number</option>
</select>
</div>
<div class="setting-row" id="options_row" style="display: none;">
<div class="setting-row is-hidden" id="options_row">
<label for="field_options">Options (one per line)</label>
<textarea id="field_options" name="field_options" rows="4" placeholder="Option 1&#10;Option 2&#10;Option 3"></textarea>
</div>
@@ -208,7 +208,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
function toggleOptionsField() {
const type = document.getElementById('field_type').value;
document.getElementById('options_row').style.display = type === 'select' ? 'block' : 'none';
document.getElementById('options_row').classList.toggle('is-hidden', type !== 'select');
}
function saveField(e) {

View File

@@ -135,7 +135,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<option value="monthly">Monthly</option>
</select>
</div>
<div class="setting-row" id="schedule_day_row" style="display: none;">
<div class="setting-row is-hidden" id="schedule_day_row">
<label for="schedule_day">Schedule Day</label>
<select id="schedule_day" name="schedule_day"></select>
</div>
@@ -251,15 +251,15 @@ $nonce = SecurityHeadersMiddleware::getNonce();
daySelect.innerHTML = '';
if (type === 'daily') {
dayRow.style.display = 'none';
dayRow.classList.add('is-hidden');
} else if (type === 'weekly') {
dayRow.style.display = 'flex';
dayRow.classList.remove('is-hidden');
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
days.forEach((day, i) => {
daySelect.innerHTML += `<option value="${i + 1}">${day}</option>`;
});
} else if (type === 'monthly') {
dayRow.style.display = 'flex';
dayRow.classList.remove('is-hidden');
for (let i = 1; i <= 28; i++) {
daySelect.innerHTML += `<option value="${i}">Day ${i}</option>`;
}