Skip to content

feat(calculator): replace tabbed interface with expandable grid layout - #2

Merged
Bissbert merged 1 commit into
mainfrom
feature/calculator-layout
Jan 28, 2026
Merged

Bissbert merged 1 commit into
mainfrom
feature/calculator-layout

Conversation

@Bissbert

Copy link
Copy Markdown
Contributor

Summary

  • Create new CalculatorCard component for collapsible calculator sections with icon, title, and description
  • Refactor Calculator.tsx to use responsive grid layout (single column on mobile, 2 columns on desktop)
  • All 8 calculators visible immediately on page load in expandable accordion-style cards
  • Default: SG calculator expanded, others collapsed
  • Removes sidebar tabs and mobile dropdown in favor of unified grid experience

Test plan

  • Visit /tools/calculator - verify all 8 calculators visible in grid
  • Click on collapsed calculator - verify it expands
  • Click on expanded calculator - verify it collapses
  • Only one calculator can be expanded at a time
  • Mobile: single column layout
  • Desktop: 2 column layout
  • All individual calculator functionality preserved

🤖 Generated with Claude Code

- Create CalculatorCard component for collapsible calculator sections
- Refactor Calculator.tsx to use responsive grid layout (1 col mobile, 2 col desktop)
- Show all 8 calculators immediately on page load in expandable cards
- Default SG calculator expanded, others collapsed
- Removes sidebar tabs in favor of accordion-style cards

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@Bissbert
Bissbert merged commit f2b1174 into main Jan 28, 2026
1 of 3 checks passed
@github-actions

Copy link
Copy Markdown

🚀 Preview deployed to: https://f1d2aa2f.gemmology-dev.pages.dev

Bissbert added a commit that referenced this pull request May 11, 2026
- Add QuestionSkeleton and QuestionSkeletonCompact for loading states
- Add QuizErrorBoundary class component with QuizError, NetworkError, NoQuestionsError
- Create ValidationMessage component with validation utilities
- Add input validation to SGCalculator and BirefringenceCalc with error messages
- Include aria-invalid and aria-describedby for accessibility
Bissbert added a commit that referenced this pull request May 11, 2026
#2)

- Create CalculatorCard component for collapsible calculator sections
- Refactor Calculator.tsx to use responsive grid layout (1 col mobile, 2 col desktop)
- Show all 8 calculators immediately on page load in expandable cards
- Default SG calculator expanded, others collapsed
- Removes sidebar tabs in favor of accordion-style cards

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

This branch was successfully deployed

1 active deployment
gemmology-dev (Preview) — 0a9a7236 Deployed Jan 28, 2026 by github-actions[bot]
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.

1 participant