PTS/SkyArtShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updateweb

Browse Source
This commit is contained in:
Local Server
2025-12-24 00:13:23 -06:00
parent e4b3de4a46
commit 017c6376fc
88 changed files with 17866 additions and 1191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
backend/test-pages-ui.html Normal file
View File

@@ -0,0 +1,219 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Editor Resize</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f5f5f5;
}
.test-container {
max-width: 900px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h2 {
color: #333;
margin-bottom: 20px;
}
.editor-resizable {
position: relative;
border: 1px solid #dee2e6;
border-radius: 4px;
overflow: visible;
margin-bottom: 30px;
}
.editor-resize-handle {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
cursor: nwse-resize;
background: linear-gradient(135deg, transparent 50%, #667eea 50%);
z-index: 1000;
transition: background 0.2s;
}
.editor-resize-handle:hover {
background: linear-gradient(135deg, transparent 50%, #5568d3 50%);
}
.editor-resize-handle:active {
background: linear-gradient(135deg, transparent 50%, #4451b8 50%);
}
.editor-content {
height: 300px;
overflow-y: auto;
padding: 15px;
background: white;
}
.editable-content {
height: 300px;
overflow-y: auto;
padding: 15px;
background: white;
border: none;
outline: none;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.6;
resize: none;
}
.status {
padding: 10px;
background: #e7f3ff;
border-left: 4px solid #2196f3;
margin-bottom: 20px;
}
.info-box {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 12px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="test-container">
<h2>🧪 Editor Resize Test - Full Functionality</h2>
<div class="status">
<strong>✅ Test Instructions:</strong> Drag the small blue triangle in
the bottom-right corner to resize. You should be able to:
<ul style="margin: 10px 0 0 20px; padding: 0">
<li>Resize multiple times (up and down)</li>
<li>Edit/type in the expanded area</li>
<li>See smooth resizing with no jumps</li>
</ul>
</div>
<div class="info-box">
<strong>📝 Try This:</strong> Drag editor bigger → Type text in new
space → Drag smaller → Drag bigger again
</div>
<h3>Test 1: Editable Text Area</h3>
<div class="editor-resizable">
<textarea
id="editor1"
class="editable-content"
placeholder="Type here to test editing in expanded area..."
>
This is an EDITABLE text area.
Try this:
1. Drag the corner to make it BIGGER
2. Click here and TYPE NEW TEXT in the expanded area
3. Drag to make it SMALLER
4. Drag to make it BIGGER again
You should be able to resize multiple times and edit anywhere in the expanded space!</textarea
>
<div class="editor-resize-handle" data-target="editor1"></div>
</div>
<h3>Test 2: Contact Fields Scrollable</h3>
<div class="editor-resizable">
<div id="editor2" class="editor-content">
<p><strong>📞 Contact Information</strong></p>
<p>Phone: (555) 123-4567</p>
<p>Email: contact@example.com</p>
<p>Address: 123 Main St, City, State 12345</p>
<br />
<p><strong>🕐 Business Hours</strong></p>
<p>Monday - Friday: 9:00 AM - 6:00 PM</p>
<p>Saturday: 10:00 AM - 4:00 PM</p>
<p>Sunday: Closed</p>
<br />
<p><strong>Extra Content for Testing</strong></p>
<p>This content should remain scrollable.</p>
<p>Resize the box to see more or less content.</p>
<p>The scrollbar should work properly.</p>
</div>
<div class="editor-resize-handle" data-target="editor2"></div>
</div>
<div class="status" id="resizeStatus">
<strong>Status:</strong> Ready to test - Drag the corner handles!
</div>
</div>
<script>
// Simple Drag-to-Resize for Editor Content - EXACT SAME CODE AS ADMIN
(function () {
let resizeState = null;
const statusEl = document.getElementById("resizeStatus");
document.addEventListener("mousedown", function (e) {
if (e.target.classList.contains("editor-resize-handle")) {
e.preventDefault();
e.stopPropagation();
const targetId = e.target.getAttribute("data-target");
const targetElement = document.getElementById(targetId);
if (!targetElement) return;
resizeState = {
target: targetElement,
handle: e.target,
startY: e.clientY,
startHeight: targetElement.offsetHeight,
};
document.body.style.cursor = "nwse-resize";
document.body.style.userSelect = "none";
e.target.style.pointerEvents = "none";
statusEl.innerHTML =
"<strong>Status:</strong> 🔄 Resizing " +
targetId +
"... (Height: " +
Math.round(resizeState.startHeight) +
"px)";
}
});
document.addEventListener("mousemove", function (e) {
if (resizeState) {
e.preventDefault();
e.stopPropagation();
const deltaY = e.clientY - resizeState.startY;
const newHeight = Math.max(
200,
Math.min(1200, resizeState.startHeight + deltaY)
);
resizeState.target.style.height = newHeight + "px";
statusEl.innerHTML =
"<strong>Status:</strong> 📏 Resizing to " +
Math.round(newHeight) +
"px (Delta: " +
Math.round(deltaY) +
"px)";
}
});
document.addEventListener("mouseup", function () {
if (resizeState) {
const finalHeight = resizeState.target.offsetHeight;
statusEl.innerHTML =
"<strong>Status:</strong> ✅ Resize complete! Final height: " +
finalHeight +
"px. Try typing in the editor or resizing again!";
resizeState.handle.style.pointerEvents = "";
resizeState = null;
document.body.style.cursor = "";
document.body.style.userSelect = "";
}
});
})();
</script>
</body>
</html>