diff --git a/README.md b/README.md index f06629a..01c8d08 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,8 @@ A minimalist browser-based playground for testing Nunjucks templates with live H ## Features - **Live Preview**: Real-time HTML rendering in an iframe -- **Three-Panel Layout**: Template input, JSON data input, and HTML output +- **Three-Panel Layout**: JSON data input (collapsible), template input, and HTML output +- **Collapsible JSON Panel**: Collapse the JSON data panel to maximize workspace - **Error Handling**: Clear error messages for invalid JSON or template syntax - **Keyboard Shortcuts**: Press Ctrl+Enter (or Cmd+Enter on Mac) to render - **No Server Required**: Runs entirely in the browser @@ -18,8 +19,8 @@ A minimalist browser-based playground for testing Nunjucks templates with live H ## Usage 1. Open `docs/index.html` in your web browser (or visit the GitHub Pages URL) -2. Edit the Nunjucks template in the left panel -3. Modify the JSON data in the middle panel +2. Edit the JSON data in the left panel (collapsible for more space) +3. Modify the Nunjucks template in the middle panel 4. Click "Render" or press Ctrl+Enter to see the output 5. The rendered HTML appears in the right panel diff --git a/docs/index.html b/docs/index.html index b395510..9977687 100644 --- a/docs/index.html +++ b/docs/index.html @@ -53,6 +53,16 @@ border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; + transition: flex 0.3s ease; + } + + .panel.collapsed { + flex: 0 0 auto; + min-width: 40px; + } + + .panel.collapsed .panel-content { + display: none; } .panel-header { @@ -61,6 +71,37 @@ padding: 0.75rem 1rem; font-weight: 500; font-size: 0.9rem; + display: flex; + justify-content: space-between; + align-items: center; + } + + .toggle-btn { + background: transparent; + color: white; + border: 1px solid rgba(255,255,255,0.3); + padding: 0.25rem 0.5rem; + margin: 0; + border-radius: 3px; + cursor: pointer; + font-size: 0.8rem; + transition: all 0.2s; + } + + .toggle-btn:hover { + background: rgba(255,255,255,0.1); + border-color: rgba(255,255,255,0.5); + } + + .panel.collapsed .panel-header { + writing-mode: vertical-rl; + text-orientation: mixed; + padding: 1rem 0.5rem; + } + + .panel.collapsed .toggle-btn { + writing-mode: horizontal-tb; + transform: rotate(90deg); } .panel-content { @@ -118,6 +159,32 @@ button:active { transform: translateY(1px); } + + /* Responsive design */ + @media (max-width: 768px) { + .container { + flex-direction: column; + } + + .panel { + min-height: 200px; + } + + .panel.collapsed { + min-height: auto; + flex: 0 0 auto; + } + + .panel.collapsed .panel-header { + writing-mode: horizontal-tb; + text-orientation: initial; + padding: 0.75rem 1rem; + } + + .panel.collapsed .toggle-btn { + transform: none; + } + } @@ -127,6 +194,25 @@

instant.njk

+
+
+ JSON Data + +
+
+ + +
+
+
Nunjucks Template
@@ -147,22 +233,6 @@

{{ heading }}

-
-
JSON Data
-
- - -
-
-
Output (HTML Preview)
@@ -177,6 +247,16 @@

{{ heading }}

const dataInput = document.getElementById('data'); const outputDiv = document.getElementById('output'); const renderButton = document.getElementById('render'); + const jsonPanel = document.getElementById('jsonPanel'); + const toggleJsonBtn = document.getElementById('toggleJson'); + + // Toggle JSON panel collapse/expand + toggleJsonBtn.addEventListener('click', (e) => { + e.stopPropagation(); + const isCollapsed = jsonPanel.classList.toggle('collapsed'); + toggleJsonBtn.textContent = isCollapsed ? '▶' : '◀'; + toggleJsonBtn.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true'); + }); function renderTemplate() { try { diff --git a/src/index.html b/src/index.html index b395510..9977687 100644 --- a/src/index.html +++ b/src/index.html @@ -53,6 +53,16 @@ border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; + transition: flex 0.3s ease; + } + + .panel.collapsed { + flex: 0 0 auto; + min-width: 40px; + } + + .panel.collapsed .panel-content { + display: none; } .panel-header { @@ -61,6 +71,37 @@ padding: 0.75rem 1rem; font-weight: 500; font-size: 0.9rem; + display: flex; + justify-content: space-between; + align-items: center; + } + + .toggle-btn { + background: transparent; + color: white; + border: 1px solid rgba(255,255,255,0.3); + padding: 0.25rem 0.5rem; + margin: 0; + border-radius: 3px; + cursor: pointer; + font-size: 0.8rem; + transition: all 0.2s; + } + + .toggle-btn:hover { + background: rgba(255,255,255,0.1); + border-color: rgba(255,255,255,0.5); + } + + .panel.collapsed .panel-header { + writing-mode: vertical-rl; + text-orientation: mixed; + padding: 1rem 0.5rem; + } + + .panel.collapsed .toggle-btn { + writing-mode: horizontal-tb; + transform: rotate(90deg); } .panel-content { @@ -118,6 +159,32 @@ button:active { transform: translateY(1px); } + + /* Responsive design */ + @media (max-width: 768px) { + .container { + flex-direction: column; + } + + .panel { + min-height: 200px; + } + + .panel.collapsed { + min-height: auto; + flex: 0 0 auto; + } + + .panel.collapsed .panel-header { + writing-mode: horizontal-tb; + text-orientation: initial; + padding: 0.75rem 1rem; + } + + .panel.collapsed .toggle-btn { + transform: none; + } + } @@ -127,6 +194,25 @@

instant.njk

+
+
+ JSON Data + +
+
+ + +
+
+
Nunjucks Template
@@ -147,22 +233,6 @@

{{ heading }}

-
-
JSON Data
-
- - -
-
-
Output (HTML Preview)
@@ -177,6 +247,16 @@

{{ heading }}

const dataInput = document.getElementById('data'); const outputDiv = document.getElementById('output'); const renderButton = document.getElementById('render'); + const jsonPanel = document.getElementById('jsonPanel'); + const toggleJsonBtn = document.getElementById('toggleJson'); + + // Toggle JSON panel collapse/expand + toggleJsonBtn.addEventListener('click', (e) => { + e.stopPropagation(); + const isCollapsed = jsonPanel.classList.toggle('collapsed'); + toggleJsonBtn.textContent = isCollapsed ? '▶' : '◀'; + toggleJsonBtn.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true'); + }); function renderTemplate() { try {