Skip to content
Snippets Groups Projects
Commit b7ab66a7 authored by Trirst's avatar Trirst
Browse files

Refine image upload component's style

parent d0e06117
Branches
No related tags found
No related merge requests found
Pipeline #766 passed
<template>
<div>
<div
class="p-12 m-4 border-dotted border-4 border-gray-400"
class="h-48 m-4 border-dotted border-4 border-gray-400"
@drop.prevent="
updateWrapper($event);
$event.currentTarget.classList.remove('bg-gray-200');
......@@ -9,7 +9,7 @@
@dragover.prevent="$event.currentTarget.classList.add('bg-gray-200')"
@dragleave.prevent="$event.currentTarget.classList.remove('bg-gray-200')"
>
<div class="relative">
<div class="relative h-full flex justify-center items-center">
<input
type="file"
ref="imageInput"
......@@ -19,15 +19,16 @@
multiple
class="h-full w-full opacity-0 absolute z-10 cursor-pointer"
/>
<div class="font-semibold text-sm opacity-25 relative">
<span class="font-semibold opacity-25 relative">
Drag and drop images here or click here to browse.
</span>
</div>
</div>
</div>
<div class="flex flex-col items-center m-4">
<WarningBox v-if="invalidType" @click="invalidType = false">
One or more files have invalid types.
Please upload PNG, JPEG or GIF image only.
</WarningBox>
<ul v-if="imageList.length" v-cloak>
<ul v-if="imageList.length">
<li
v-for="(image, index) in imageList"
:key="index"
......@@ -54,6 +55,7 @@
Submit
</button>
</div>
</div>
</template>
<script>
......
<template>
<div
class="
p-4
p-5
m-2
font-semibold
bg-red-400
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment