open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Columnize the user areas in preview link too

Browse Source
This commit is contained in:
Ian Philips 2022-08-04 08:13:21 -06:00
parent a38e06c16c
commit d46c56a994
1 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
og-image/api/_lib/challenge-template.ts
View File

@ -95,7 +95,7 @@ export function getChallengeHtml(parsedReq: ParsedRequest) {
acceptedName, acceptedName,
acceptedAvatarUrl, acceptedAvatarUrl,
} = parsedReq } = parsedReq
const MAX_QUESTION_CHARS = 85 const MAX_QUESTION_CHARS = 78
const truncatedQuestion = const truncatedQuestion =
question.length > MAX_QUESTION_CHARS question.length > MAX_QUESTION_CHARS
? question.slice(0, MAX_QUESTION_CHARS) + '...' ? question.slice(0, MAX_QUESTION_CHARS) + '...'
@ -126,58 +126,62 @@ export function getChallengeHtml(parsedReq: ParsedRequest) {
<div class="flex flex-col justify-center items-center ${ <div class="flex flex-col justify-center items-center ${
creatorOutcome === 'YES' ? 'text-primary' : 'text-red-500' creatorOutcome === 'YES' ? 'text-primary' : 'text-red-500'
}"> }">
<div class="flex flex-row align-bottom gap-6">
<!-- Creator user column-->
<div class="flex flex-col align-bottom gap-6 items-center justify-center">
<p class="text-gray-900 text-4xl">${creatorName}</p>
<img <img
class="h-24 w-24 rounded-full bg-white flex items-center justify-center ${hideAvatar}" class="h-36 w-36 rounded-full bg-white flex items-center justify-center ${hideAvatar}"
src="${creatorAvatarUrl}" src="${creatorAvatarUrl}"
alt="" alt=""
/> />
<div class="flex flex-col gap-2 items-center justify-center"> </div>
<p class="text-gray-900 text-4xl">${creatorName}</p> <div class="flex flex-row justify-center items-center gap-3 mt-6">
</div> <div class="text-5xl">${'M$' + creatorAmount}</div>
</div> <div class="text-4xl">${'on'}</div>
<div class="text-6xl mt-8">${'M$' + creatorAmount}</div> <div class="text-5xl ">${creatorOutcome}</div>
<div class="text-3xl">${'on'}</div> </div>
<div class="text-6xl ">${creatorOutcome}</div>
</div> </div>
<!-- VS-->
<div class="flex flex-col text-gray-900 text-6xl mt-8 text-center"> <div class="flex flex-col text-gray-900 text-6xl mt-8 text-center">
VS VS
</div> </div>
<div class="flex flex-col justify-center items-center ${ <div class="flex flex-col justify-center items-center ${
challengerOutcome === 'YES' ? 'text-primary' : 'text-red-500' challengerOutcome === 'YES' ? 'text-primary' : 'text-red-500'
}"> }">
<div class="flex flex-row align-bottom gap-6 mr-24 ${
accepted ? 'hidden' : '' <!-- Unaccepted user column-->
}"> <div class="flex flex-col align-bottom gap-6 items-center justify-center
${accepted ? 'hidden' : ''}">
<p class="text-gray-900 text-4xl">You</p>
<img <img
class="h-24 w-24 rounded-full bg-white flex items-center justify-center " class="h-36 w-36 rounded-full bg-white flex items-center justify-center "
src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png"
alt="" alt=""
/> />
<div class="flex flex-col gap-2 items-center justify-center">
<p class="text-gray-900 text-4xl">You</p>
</div>
</div> </div>
<div class="flex flex-row align-bottom gap-6"> <!-- Accepted user column-->
<div class="flex flex-col align-bottom gap-6 items-center justify-center">
<p class="text-gray-900 text-4xl">${acceptedName}</p>
<img <img
class="h-24 w-24 rounded-full bg-white flex items-center justify-center ${hideAcceptedAvatar}" class="h-36 w-36 rounded-full bg-white flex items-center justify-center ${hideAcceptedAvatar}"
src="${acceptedAvatarUrl}" src="${acceptedAvatarUrl}"
alt="" alt=""
/> />
<div class="flex flex-col gap-2 items-center justify-center">
<p class="text-gray-900 text-4xl">${acceptedName}</p>
</div>
</div> </div>
<div class="text-6xl mt-8">${'M$' + challengerAmount}</div> <div class="flex flex-row justify-center items-center gap-3 mt-6">
<div class="text-3xl">${'on'}</div> <div class="text-5xl">${'M$' + challengerAmount}</div>
<div class="text-6xl ">${challengerOutcome}</div> <div class="text-4xl">${'on'}</div>
<div class="text-5xl ">${challengerOutcome}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Manifold logo --> <!-- Manifold logo -->
<div class="flex flex-row justify-center mt-14 "> <div class="flex flex-row justify-center mt-20 ">
<a class="flex flex-row gap-3" href="/"> <a class="flex flex-row gap-3" href="/">
<img <img
class="sm:h-12 sm:w-12" class="sm:h-12 sm:w-12"