jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/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>
<div v-if="visible" class="dialog-overlay">
<div v-if="visible" class="dialog-overlay z-[60]">
<!-- Breadcrumb -->
<div class="dialog">
<!-- 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
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()"
>
<fa icon="xmark" class="fa-fw"></fa>
</h1>
<fa icon="xmark" class="w-[1em]"></fa>
</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">
<fa icon="spinner" class="fa-spin fa-3x text-center block" />
</div>
@@ -45,13 +48,15 @@
:resolution="{ width: 375, height: 812 }"
-->
<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
@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>
</div>
</camera>