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

Updated mobile UX

Browse Source
This commit is contained in:
root
2025-05-18 17:14:56 +02:00
parent e3205d500d
commit b33b172644
11 changed files with 785 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/FileUploader.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="border-2 border-dashed rounded-xl p-8 text-center transition-all duration-200"
class="border-2 border-dashed rounded-xl p-4 sm:p-8 text-center transition-all duration-200"
:class="{
'border-blue-300 bg-blue-50 dark:border-blue-500 dark:bg-blue-900/30': isDragging,
'border-gray-200 hover:border-blue-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:border-blue-500 dark:hover:bg-gray-700/50': !isDragging,
@@ -14,14 +14,14 @@
>
<input ref="fileInput" type="file" multiple accept="image/*,.json" class="hidden" @change="handleFileChange" />
<div class="mb-6">
<img src="@/assets/images/file.svg" alt="File upload" class="w-20 h-20 mx-auto mb-4 opacity-75 dark:invert" />
<div class="mb-4 sm:mb-6">
<img src="@/assets/images/file.svg" alt="File upload" class="w-16 h-16 sm:w-20 sm:h-20 mx-auto mb-2 sm:mb-4 opacity-75 dark:invert" />
</div>
<p class="text-xl font-medium text-gray-700 dark:text-gray-200 mb-2">Drag and drop your sprite images or JSON file here</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">or</p>
<p class="text-lg sm:text-xl font-medium text-gray-700 dark:text-gray-200 mb-2">Drag and drop your sprite images or JSON file here</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4 sm:mb-6">or</p>
<button class="px-6 py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors inline-flex items-center space-x-2 cursor-pointer" data-umami-event="select-files">
<button class="w-full sm:w-auto px-6 py-3 sm:py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors flex sm:inline-flex items-center justify-center space-x-2 cursor-pointer" data-umami-event="select-files">
<i class="fas fa-folder-open"></i>
<span>Select files</span>
</button>