Skip to content

Improved Editor Layout expandable to Tabbed layout #309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Jeevansm25
Copy link

@Jeevansm25 Jeevansm25 commented Mar 21, 2025

This PR implements a tabbed layout for the TemplateMark, Concerto Model, and Preview Data editors, replacing the vertical expandable design as per issue #306. The new layout improves navigation, visibility, and usability for Template Playground users.

Changes:

  • Replaced vertical expandable layout with a tabbed interface using Ant Design Tabs.
  • Improved navigation by allowing tab switching with a single click, reducing scrolling.
  • Enhanced visibility by dedicating full space to the active editor tab.
  • Added aria-label to tabs for accessibility (e.g., "TemplateMark Editor Tab").
  • Styled tabs with clear contrast for active state; made tabs scrollable on mobile.

Benefits:

  • Faster navigation and fewer clicks.
  • Better code visibility with full editor view.
  • Cleaner, scalable UI

Related Issues:

Why This is Concise and Effective

Extra Changes
-Changed UI
-Made Dark Mode and Light Mode UI Enhancement
-Improved Navbar

@Jeevansm25 Jeevansm25 requested a review from a team as a code owner March 21, 2025 09:48
Copy link

netlify bot commented Mar 21, 2025

Deploy Preview for ap-template-playground ready!

Name Link
🔨 Latest commit 770b48c
🔍 Latest deploy log https://app.netlify.com/sites/ap-template-playground/deploys/67e078c40d87370008cec209
😎 Deploy Preview https://deploy-preview-309--ap-template-playground.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Signed-off-by: surya4419 <suryaa4419@gmail.com>
Signed-off-by: Jeevan S M <jeevansm025@gmail.com>
@Jeevansm25 Jeevansm25 force-pushed the fix/concerto-editor-beforemount-typing branch from 7112978 to 770b48c Compare March 23, 2025 21:10
@Jeevansm25 Jeevansm25 changed the title Fix BeforeMount Typing in ConcertoEditor Improved Editor Layout expandable to Tabbed layout Mar 23, 2025
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.

feature(layout improvement): Improve Editor Layout through expandable to Tabbed layout
2 participants