jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Readying for design

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-03-04 18:24:20 +00:00
parent d73256ca2b
commit fadf473dde
50 changed files with 1478 additions and 1259 deletions
Download patch file Download diff file Expand all files Collapse all files

30
app/components/ImageUpload.vue
View file

@ -5,14 +5,14 @@
<img
:src="transformedImageUrl"
:alt="modelValue.alt || 'Event image'"
class="w-full h-48 object-cover rounded-lg border border-neutral-200"
class="w-full h-48 object-cover rounded-lg border border-guild-700"
@error="console.log('Image failed to load:', transformedImageUrl)"
@load="console.log('Image loaded successfully:', transformedImageUrl)"
/>
<button
@click="removeImage"
type="button"
class="absolute top-2 right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
class="absolute top-2 right-2 p-1 bg-ember-500 text-white rounded-full hover:bg-ember-600 transition-colors"
>
<Icon name="heroicons:x-mark" class="w-4 h-4" />
</button>
@ -21,11 +21,11 @@
<!-- Upload Area -->
<div
v-if="!modelValue?.url"
class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors"
class="border-2 border-dashed border-guild-700 rounded-lg p-6 text-center hover:border-guild-600 transition-colors"
@dragover.prevent="isDragging = true"
@dragleave.prevent="isDragging = false"
@drop.prevent="handleDrop"
:class="{ 'border-blue-400 bg-blue-50': isDragging }"
:class="{ 'border-candlelight-400 bg-candlelight-900/20': isDragging }"
>
<input
ref="fileInput"
@ -36,52 +36,52 @@
/>
<div class="space-y-3">
<Icon name="heroicons:photo" class="w-12 h-12 text-gray-400 mx-auto" />
<Icon name="heroicons:photo" class="w-12 h-12 text-guild-400 mx-auto" />
<div>
<p class="text-gray-600">
<p class="text-guild-400">
<button
type="button"
@click="$refs.fileInput.click()"
class="text-primary-600 hover:text-primary-500 font-medium"
class="text-candlelight-400 hover:text-candlelight-300 font-medium"
>
Click to upload
</button>
or drag and drop
</p>
<p class="text-sm text-gray-500">PNG, JPG, GIF up to 10MB</p>
<p class="text-sm text-guild-500">PNG, JPG, GIF up to 10MB</p>
</div>
</div>
</div>
<!-- Alt Text Input -->
<div v-if="modelValue?.url">
<label class="block text-sm font-medium text-gray-700 mb-1">
<label class="block text-sm font-medium text-guild-100 mb-1">
Alt Text (for accessibility)
</label>
<input
:value="modelValue.alt || ''"
@input="updateAltText($event.target.value)"
placeholder="Describe this image..."
class="w-full border border-neutral-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
class="w-full bg-guild-800 border border-guild-700 rounded-lg px-3 py-2 text-guild-100 placeholder-guild-500 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
/>
</div>
<!-- Upload Progress -->
<div v-if="isUploading" class="space-y-2">
<div class="flex items-center justify-between text-sm">
<span class="text-gray-600">Uploading...</span>
<span class="text-gray-600">{{ uploadProgress }}%</span>
<span class="text-guild-400">Uploading...</span>
<span class="text-guild-400">{{ uploadProgress }}%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="w-full bg-guild-800 rounded-full h-2">
<div
class="bg-blue-600 h-2 rounded-full transition-all duration-300"
class="bg-candlelight-600 h-2 rounded-full transition-all duration-300"
:style="`width: ${uploadProgress}%`"
/>
</div>
</div>
<!-- Error Message -->
<div v-if="errorMessage" class="text-sm text-red-600">
<div v-if="errorMessage" class="text-sm text-ember-400">
{{ errorMessage }}
</div>
</div>