Skip to content

Mobile tabs: archive icon and blacklist circle on mobile#3

Draft
jmansfield wants to merge 1 commit into
masterfrom
cursor/mobile-tabs-959e
Draft

Mobile tabs: archive icon and blacklist circle on mobile#3
jmansfield wants to merge 1 commit into
masterfrom
cursor/mobile-tabs-959e

Conversation

@jmansfield

Copy link
Copy Markdown
Owner

Summary

Resolves JOB-18: On mobile, the archived tab shows an icon and the blacklist tab has a black circle in it.

Changes

Added a new exercise folder 22 Mobile tabs/ with a tab navigation component that has responsive behavior:

  • Desktop: All three tabs (Jobs, Archived, Blacklist) display their full text labels
  • Mobile (≤600px):
    • The Archived tab text is replaced with an SVG archive box icon
    • The Blacklist tab displays a filled black circle alongside its label

Files

  • 22 Mobile tabs/index.html — Tab markup with inline SVG archive icon and a <span> styled as a black circle for the blacklist tab
  • 22 Mobile tabs/application.css — Tab styles with @media (max-width: 600px) responsive rules to show/hide icons vs. labels
  • 22 Mobile tabs/application.js — jQuery click handler for tab switching

Linear Issue: JOB-18

Open in Web Open in Cursor 

On mobile (<=600px):
- Archived tab shows an SVG archive box icon instead of text
- Blacklist tab shows a filled black circle alongside the label
- Tab switching handled via jQuery click handlers

Co-authored-by: James Mansfield <james.mansfield@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants