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

Make social card more robust

Browse Source 
Resolves #462
This commit is contained in:
Kurt Hutten
2021-09-06 20:47:21 +10:00
parent 57970465b1
commit f9a43e53e2
1 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/web/src/components/SocialCardCell/SocialCardCell.tsx
View File

@@ -47,14 +47,12 @@ export const Success = ({
: userProject?.Project?.description || '' : userProject?.Project?.description || ''
return ( return (
<div <div
className="flex-col flex h-full bg-ch-gray-800 text-ch-gray-300" className="grid h-screen bg-ch-gray-800 text-ch-gray-300"
id="social-card-loaded" id="social-card-loaded"
style={{ gridTemplateRows: ' 555fr 18fr' }}
> >
<div <div className="h-full grid" style={{ gridTemplateColumns: '7fr 5fr' }}>
className="flex-grow grid" <div className="bg-ch-gray-800 relative overflow-hidden min-w-0">
style={{ gridTemplateColumns: '7fr 5fr' }}
>
<div className="bg-ch-gray-800 relative">
<div className="absolute bottom-0 left-0 transform scale-200 aspect-h-1 h-full -translate-x-24 translate-y-24 rotate-45 rounded-full overflow-hidden"></div> <div className="absolute bottom-0 left-0 transform scale-200 aspect-h-1 h-full -translate-x-24 translate-y-24 rotate-45 rounded-full overflow-hidden"></div>
<div className="relative bg-ch-gray-760 bg-opacity-90 pt-10 pl-20 pr-12 h-full backdrop-filter backdrop-blur"> <div className="relative bg-ch-gray-760 bg-opacity-90 pt-10 pl-20 pr-12 h-full backdrop-filter backdrop-blur">
@@ -77,7 +75,7 @@ export const Success = ({
{userProject?.Project?.title.replace(/-/g, ' ')} {userProject?.Project?.title.replace(/-/g, ' ')}
</h1> </h1>
<p className="mt-10 text-3xl font-fira-sans text-ch-gray-400"> <p className="mt-10 text-3xl font-fira-sans text-ch-gray-400 overflow-hidden">
{truncatedDescription} {truncatedDescription}
</p> </p>
</div> </div>
@@ -104,7 +102,7 @@ export const Success = ({
className="h-28 grid bg-ch-gray-900 relative" className="h-28 grid bg-ch-gray-900 relative"
style={{ gridTemplateColumns: '7fr 5fr' }} style={{ gridTemplateColumns: '7fr 5fr' }}
> >
<div className="grid grid-flow-col-dense items-center justify-center gap-16"> <div className="grid grid-flow-col-dense items-center justify-center gap-16 mb-2">
{[ {[
{ {
svg: 'reactions', svg: 'reactions',
@@ -126,7 +124,7 @@ export const Success = ({
</div> </div>
))} ))}
</div> </div>
<div className="flex items-center justify-center"> <div className="flex items-center justify-center mb-2">
<Svg className="w-10 md:w-16" name="favicon" /> <Svg className="w-10 md:w-16" name="favicon" />
<div className="ml-2 md:ml-6 flex"> <div className="ml-2 md:ml-6 flex">
{/* Because of how specific these styles are to this heading/logo and it doesn't need to be replicated else where as well as it's very precise with the placement of "pre-alpha" I think it's appropriate. */} {/* Because of how specific these styles are to this heading/logo and it doesn't need to be replicated else where as well as it's very precise with the placement of "pre-alpha" I think it's appropriate. */}
@@ -138,8 +136,8 @@ export const Success = ({
</h2> </h2>
</div> </div>
</div> </div>
<div className="h-3 absolute inset-x-0 bottom-0 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500" />
</div> </div>
<div className="h-3 relative bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500" />
</div> </div>
) )
} }