trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Improved Camera Popup

Browse Source
This commit is contained in:
Jose Olarte III
2024-03-20 19:17:18 +08:00
parent ae572afff6
commit fe0668e4b3
1 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/GiftedPhotoDialog.vue
View File

@@ -1,24 +1,27 @@
<template> <template>
<div v-if="visible" class="dialog-overlay"> <div v-if="visible" class="dialog-overlay z-[60]">
<!-- Breadcrumb --> <!-- Breadcrumb -->
<div class="dialog"> <div class="dialog">
<!-- Back --> <!-- Back -->
<div class="text-lg text-center font-light relative px-7"> <div class="text-lg text-center font-light relative z-50">
<!-- Heading -->
<h1 <h1
class="text-lg text-center px-2 py-1 absolute -right-2 -top-1" id="ViewHeading"
class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-2 bg-black/50 text-white leading-none"
>
<span v-if="uploading"> Uploading... </span>
<span v-else-if="blob"> Look Good? </span>
<span v-else> Say "Cheese"! </span>
</h1>
<div
class="text-lg text-center p-2 leading-none absolute right-0 top-0 text-white"
@click="close()" @click="close()"
> >
<fa icon="xmark" class="fa-fw"></fa> <fa icon="xmark" class="w-[1em]"></fa>
</h1> </div>
</div> </div>
<!-- Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
<span v-if="uploading"> Uploading... </span>
<span v-else-if="blob"> Look Good? </span>
<span v-else> Say "Cheese"! </span>
</h1>
<div v-if="uploading" class="flex justify-center"> <div v-if="uploading" class="flex justify-center">
<fa icon="spinner" class="fa-spin fa-3x text-center block" /> <fa icon="spinner" class="fa-spin fa-3x text-center block" />
</div> </div>
@@ -45,13 +48,15 @@
:resolution="{ width: 375, height: 812 }" :resolution="{ width: 375, height: 812 }"
--> -->
<camera facingMode="environment" autoplay ref="camera"> <camera facingMode="environment" autoplay ref="camera">
<div class="absolute bottom-0 w-full flex justify-center pb-4"> <div
class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 landscape:right-0 landscape:top-0 landscape:bottom-0 flex landscape:flex-row justify-center items-center portrait:pb-2 landscape:pr-4"
>
<!-- Button --> <!-- Button -->
<button <button
@click="takeImage" @click="takeImage"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full" class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
> >
<fa icon="camera" class="fa-fw"></fa> <fa icon="camera" class="w-[1em]"></fa>
</button> </button>
</div> </div>
</camera> </camera>