root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved UX

Browse Source
This commit is contained in:
root
2025-11-23 15:05:03 +01:00
parent 6ae8dd37dc
commit 62205ed069
2 changed files with 55 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/SpriteCanvas.vue
View File

@@ -1,16 +1,16 @@
<template>
<div class="space-y-6 relative">
<div class="space-y-6 w-full max-w-full overflow-hidden">
<div class="bg-cyan-500 dark:bg-cyan-600 rounded-xl p-4 shadow-lg border border-cyan-400/50 dark:border-cyan-500/50">
<div class="flex items-start gap-3">
<i class="fas fa-lightbulb text-yellow-300 text-xl mt-0.5"></i>
<div>
<i class="fas fa-lightbulb text-yellow-300 text-xl mt-0.5 flex-shrink-0"></i>
<div class="min-w-0">
<h4 class="font-semibold text-white mb-1">Tip from developer</h4>
<p class="text-cyan-50 text-sm">Right-click any sprite to open the context menu for quick actions: add, replace, or remove sprites.</p>
</div>
</div>
</div>
<section>
<section class="w-full">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-100 mb-4 flex items-center gap-2">
<i class="fas fa-cog text-blue-600 dark:text-blue-400"></i>
Canvas options
@@ -62,7 +62,7 @@
</div>
</section>
<div class="relative bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 rounded-2xl shadow-lg overflow-auto max-h-[calc(100vh-400px)] min-h-[500px]">
<div class="relative bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 rounded-2xl shadow-lg overflow-auto max-h-[calc(100vh-400px)] min-h-[500px] w-full">
<div class="canvas-container touch-manipulation relative inline-block min-w-full">
<div :style="{ transform: `scale(${zoom})`, transformOrigin: 'top left' }" class="inline-block">
<canvas