h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Finished fixing nav, tweaked KeyValue edit btn

Browse Source
This commit is contained in:
Frank Johnson
2021-09-12 12:38:16 -04:00
parent 55d48057da
commit 34757cf535
8 changed files with 125 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/web/src/components/ImageUploader/ImageUploader.js
View File

@@ -11,13 +11,13 @@ import Svg from 'src/components/Svg'
const CLOUDINARY_UPLOAD_PRESET = 'CadHub_project_images'
const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/irevdev/upload'
export function ImageFallback({ width = 100, cloudinaryId = 'CadHub/eia1kwru54g2kf02s2xx', className = '' }) {
export function ImageFallback({ width = 100, imageId = 'CadHub/eia1kwru54g2kf02s2xx', className = '' }) {
return (
<div className="relative overflow-hidden w-full h-full">
<CloudinaryImage
className={"object-cover w-full h-full shadow overflow-hidden " + className }
cloudName="irevdev"
publicId={cloudinaryId}
publicId={imageId}
width={width}
crop="scale"
/>
@@ -78,20 +78,19 @@ export default function ImageUploader({
}
style={{ paddingBottom: `${(1 / aspectRatio) * 100}%` }}
>
<div className="absolute w-full h-full" {...getRootProps()}>
<div className="absolute w-full h-full inset-0" {...getRootProps()}>
{cloudinaryId && isEditable && (
<button className="absolute z-10 bg-indigo-900 opacity-75 bottom-0 right-0 flex items-center p-1 mb-6 mr-2 rounded-lg">
<span className="text-gray-100 pr-2">Update</span>
<button className="w-full py-1 absolute z-10 bg-ch-blue-650 bg-opacity-50 hover:bg-opacity-80 bottom-0 right-0 left-0 flex items-center justify-center text-ch-gray-300">
<span className="font-fira-code text-sm leading-4">Update</span>
<Svg
name="pencil"
strokeWidth={2}
className=" text-gray-100 h-6 w-6"
name="pencil-solid"
className=" h-4 w-4 ml-4 mb-2"
/>
</button>
)}
{isEditable && <input {...getInputProps()} />}
{(cloudinaryId || !isEditable) && (
<ImageFallback cloudinaryId={cloudinaryId} width={width} />
<ImageFallback imageId={cloudinaryId} width={width} />
)}
{!cloudinaryId && <button className="absolute inset-0"></button>}
{!cloudinaryId && isEditable && (