LOGGING TAB UI IMPROVEMENT

LOGGING TAB UI IMPROVEMENT

Version Implemented: 0.229.001

Overview

Updated the Logging tab in the admin settings to follow a consistent card-based layout pattern similar to the Safety tab, improving visual organization and user experience.

Updated in version: 0.228.017

Changes Made

1. Added Tab Description

• Added a comprehensive description at the top of the Logging tab
• Explains what logging settings control and their purposes
• Provides context for administrators about the various logging options

2. Card-Based Layout

• Reorganized each logging option into individual cards with consistent styling
• Each card uses <div class="card p-3 mb-3"> for consistent spacing and visual separation
• Changed section headings from <h4> to <h5> to match card design pattern

3. Individual Cards Created

Application Insights Logging Card:

• Clear title and description
• Maintains warning alert about restart requirement
• Consistent form styling

Debug Logging Card:

• Descriptive text about debug print statement control
• Maintains info alert about DEBUG statements
• Proper spacing and layout

File Processing Logs Card:

• Enhanced description mentioning Cosmos DB storage
• Clean card layout with proper spacing
• Consistent with other cards in design

4. Improved Descriptions

• Enhanced File Processing Logs description to mention "Cosmos DB" instead of just "cosmos"
• Made descriptions more specific and informative
• Consistent tone and style across all cards

Benefits

Visual Consistency

• Matches the design pattern used in Safety tab and other admin sections
• Creates visual separation between different logging options
• Improves readability and scannability

Better Organization

• Each logging type is clearly contained in its own section
• Easier to understand the scope and purpose of each setting
• Consistent spacing and layout throughout

Enhanced User Experience

• Clear descriptions help administrators understand what each setting does
• Consistent card-based design reduces cognitive load
• Professional appearance matching modern UI standards

Technical Details

Structure Pattern

Each logging option now follows this structure:

<div class="card p-3 mb-3">
    <h5>Section Title</h5>
    <p class="text-muted">Clear description of what this setting controls.</p>
    <div class="form-check form-switch mb-3">
        <!-- Toggle switch and label -->
    </div>
    <!-- Optional alerts for warnings/info -->
</div>

CSS Classes Used

• card p-3 mb-3 - Card container with padding and bottom margin
• text-muted - Subtle text color for descriptions
• form-check form-switch mb-3 - Toggle switch styling
• Existing alert classes for warnings and info

Files Modified

• admin_settings.html - Updated Logging tab structure
• config.py - Version bumped to 0.228.017

Result

The Logging tab now provides a much cleaner, more organized interface that:

• Clearly explains each logging option
• Provides visual separation between settings
• Maintains consistency with other admin tabs
• Improves overall user experience and accessibility