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

[FEAT] Modal size fixes

Browse Source
This commit is contained in:
root
2026-01-01 19:55:11 +01:00
parent e51cb4b334
commit 9cac4e6fd8
5 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/auth/AuthModal.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<Modal :is-open="isOpen" @close="close" :title="isLogin ? 'Welcome Back' : 'Create Account'" :initialWidth="450"> <Modal :is-open="isOpen" @close="close" :title="isLogin ? 'Welcome Back' : 'Create Account'" :initialWidth="450" :initialHeight="500">
<div class="space-y-4"> <div class="space-y-4">
<div class="text-center mb-6"> <div class="text-center mb-6">
<p class="text-sm text-gray-500 dark:text-gray-400"> <p class="text-sm text-gray-500 dark:text-gray-400">

6
src/components/project/NewProjectModal.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<Modal :is-open="isOpen" @close="close" title="New project" :initialWidth="400"> <Modal :is-open="isOpen" @close="close" title="New project" :initialWidth="400" :initialHeight="320">
<div class="px-2 pt-2 pb-1"> <div class="px-2 pt-2 pb-1">
<form @submit.prevent="handleSubmit"> <form @submit.prevent="handleSubmit">
<div class="grid grid-cols-2 gap-4 mb-4"> <div class="grid grid-cols-2 gap-4 mb-3">
<div> <div>
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Sprite Width</label> <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Sprite Width</label>
<div class="relative"> <div class="relative">
@@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<div class="grid grid-cols-2 gap-4 mb-6"> <div class="grid grid-cols-2 gap-4 mb-4">
<div> <div>
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Columns</label> <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Columns</label>
<input v-model.number="columns" type="number" min="1" max="20" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white" /> <input v-model.number="columns" type="number" min="1" max="20" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white" />

2
src/components/project/ProjectList.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<Modal :is-open="isOpen" @close="close" title="My Projects" :initialWidth="900" :initialHeight="800" noPadding> <Modal :is-open="isOpen" @close="close" title="My projects" :initialWidth="900" :initialHeight="800" noPadding>
<div class="flex flex-col h-full bg-white dark:bg-gray-900"> <div class="flex flex-col h-full bg-white dark:bg-gray-900">
<!-- Search Header --> <!-- Search Header -->
<div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/20"> <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/20">

2
src/components/project/SaveProjectModal.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<Modal :is-open="isOpen" @close="close" title="Save project" :initialWidth="400"> <Modal :is-open="isOpen" @close="close" title="Save project" :initialWidth="400" :initialHeight="250">
<div class="px-2 pt-2 pb-1"> <div class="px-2 pt-2 pb-1">
<form @submit.prevent="handleSubmit"> <form @submit.prevent="handleSubmit">
<div class="mb-4"> <div class="mb-4">

6
src/components/utilities/Modal.vue
View File

@@ -68,7 +68,7 @@
const position = ref({ x: 0, y: 0 }); const position = ref({ x: 0, y: 0 });
const size = ref({ const size = ref({
width: props.initialWidth || 800, width: props.initialWidth || 800,
height: props.initialHeight || 600, height: props.initialHeight || 400,
}); });
const isDragging = ref(false); const isDragging = ref(false);
@@ -190,8 +190,8 @@
const constrainSize = (width: number, height: number) => { const constrainSize = (width: number, height: number) => {
return { return {
width: Math.max(400, Math.min(width, window.innerWidth - position.value.x)), width: Math.max(300, Math.min(width, window.innerWidth - position.value.x)),
height: Math.max(300, Math.min(height, window.innerHeight - position.value.y)), height: Math.max(200, Math.min(height, window.innerHeight - position.value.y)),
}; };
}; };