Skip to content

TRANSFER_CARD_VISUAL_ENHANCEMENTS.md

Latest commit

 

History

History
171 lines (127 loc) · 5.84 KB

TRANSFER_CARD_VISUAL_ENHANCEMENTS.md

File metadata and controls

171 lines (127 loc) · 5.84 KB

Transfer Progress Card Visual Enhancements

Context

The transfer progress card was originally designed to fit in a half-width column. After the download component refactoring, it's now positioned full-width directly below the sticky menu in both submit and download pages. This provides significantly more horizontal space to work with.

Visual Improvements Made

1. Layout Architecture Change

Before: Flexbox with vertical stacking After: CSS Grid with intelligent space utilization

// Old: Everything stacked vertically
.status-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

// New: Grid layout with side-by-side content
.status-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem 1.5rem;

  @media (max-width: 64rem) {
    grid-template-columns: 1fr; // Stack on smaller screens
  }
}

2. Enhanced Visual Hierarchy

Card Container

  • Padding: Increased from 1rem to 1.25rem for more breathing room
  • Shadow: Added subtle box-shadow for depth (theme-aware)
  • Margin: Added margin-bottom: 1rem for spacing from content below
  • Grid layout: Changed from flex to grid (2-column on desktop, 1-column on mobile)

Status Icon

  • Size: Increased from 1.25rem to 1.5rem for better visibility
  • Grid placement: Uses CSS Grid for better alignment

Status Message

  • Font size: Increased to 1rem for emphasis
  • Grid span: grid-column: 1 / -1 to span full width

3. Progress Bar Enhancements

  • Height: Increased from 0.5rem to 0.625rem (thicker, more visible)
  • Shadows: Added inset shadow to progress track and shadow to progress fill for depth
  • Percentage display: Made bolder (font-weight: 600) and given full-width text color
  • Grid span: grid-column: 1 / -1 for full-width display

4. Statistics Display (Files/Bytes)

Major visual change: Statistics now appear in pill-style badges with backgrounds

.status-files,
.status-bytes {
  padding: 0.5rem 0.75rem;
  background: var(--p-surface-50);
  border-radius: 0.375rem;
  border: 0.0625rem solid var(--p-surface-border);

  strong {
    color: var(--p-text-color);
    font-weight: 600;
  }
}

Layout: On wide screens (>64rem), these appear side-by-side in the grid. On narrow screens, they stack vertically.

5. Task ID Styling

Task IDs now appear in a proper code block style:

code {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  background: var(--p-surface-100);
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--p-surface-border);
}

6. Action Buttons Section

  • Separator: Added border-top to visually separate actions from status info
  • Padding: Added padding-top: 0.5rem for spacing
  • Grid span: grid-column: 1 / -1 to span full width

7. Responsive Breakpoints

Three responsive tiers:

  1. Desktop (>64rem): Full 2-column grid layout with statistics side-by-side
  2. Tablet (48rem-64rem): Single-column grid, statistics stack
  3. Mobile (<48rem): Reduced padding, smaller fonts, compact spacing

Visual Design Principles Applied

  1. Space Utilization: Wide layout uses horizontal space intelligently
  2. Visual Grouping: Related information (files/bytes) appears together
  3. Hierarchy: Important info (message, progress) gets more visual weight
  4. Depth: Subtle shadows create layered appearance
  5. Responsiveness: Layout adapts gracefully to screen size
  6. Theme-Aware: All colors use PrimeNG CSS variables for light/dark mode
  7. Accessibility: Maintains good contrast and readable font sizes

Before/After Comparison

Layout Structure

Before:

┌─────────────────────────────────┐
│ ⓘ Status message                │
│   Progress: ████████░░ 80%      │
│   Files: 10/12                  │
│   Bytes: 1000/1200              │
│   Task ID: abc123               │
│   [Refresh] [Open in Globus]    │
└─────────────────────────────────┘

After (Desktop):

┌──────────────────────────────────────────────────┐
│ ⓘ  Status message                                │
│                                                  │
│    Progress: ████████████████░░░░ 80%           │
│                                                  │
│    ┌─────────────┐    ┌──────────────┐         │
│    │Files: 10/12 │    │Bytes: 1000/..│         │
│    └─────────────┘    └──────────────┘         │
│                                                  │
│    Task ID: abc123                               │
│    ─────────────────────────────────────────    │
│    [Refresh] [Open in Globus]                    │
└──────────────────────────────────────────────────┘

Testing

  • ✅ All 393 tests passing
  • ✅ No TypeScript compilation errors
  • ✅ SCSS compiles without warnings
  • ✅ Responsive breakpoints work correctly

Files Modified

  • /src/app/shared/transfer-progress-card/transfer-progress-card.component.scss

Notes

  • No changes to HTML template - all improvements are CSS-only
  • No changes to component logic - purely visual enhancements
  • Backward compatible - works in both submit and download contexts
  • Theme-aware - uses PrimeNG CSS variables throughout
⚡