algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 04:33:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

[resumes][feat] shift badge to bottom

Browse Source
This commit is contained in:
Keane Chan
2022-10-25 09:40:58 +08:00
parent ef61793616
commit de28a30028
2 changed files with 31 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
View File

@ -14,15 +14,15 @@ export default function ResumeUserBadge({
return (
<div className="group relative flex items-center justify-center">
<div
className="h-34 absolute left-6 z-10 hidden w-48 flex-col justify-center
className="absolute top-7 z-10 hidden h-36 w-48 flex-col justify-center
gap-1 rounded-xl bg-white pb-2 text-center drop-shadow-lg
before:absolute before:top-14 before:-translate-x-4
before:border-8 before:border-y-transparent before:border-l-transparent
before:border-r-white before:drop-shadow-lg before:content-['']
after:absolute after:left-1/2 after:top-[-11%] after:-translate-x-1/2
after:border-8 after:border-x-transparent after:border-t-transparent
after:border-b-slate-200 after:drop-shadow-sm after:content-['']
group-hover:flex">
<Icon className="h-16 w-full self-center rounded-t-xl bg-slate-200 py-2" />
<div className="px-2">
<div className="flex h-20 flex-col justify-evenly px-2">
<p className="font-medium">{title}</p>
<p className="text-sm">{description}.</p>
</div>

12
apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
View File

@ -55,7 +55,7 @@ export default function ResumeCommentsList({
<Spinner display="block" size="lg" />
</div>
) : (
<div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-4 overflow-y-auto overflow-x-hidden">
<div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-4 overflow-y-auto overflow-x-hidden pb-16">
{RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
const comments = commentsQuery.data
? commentsQuery.data.filter((comment: ResumeComment) => {
@ -65,14 +65,13 @@ export default function ResumeCommentsList({
const commentCount = comments.length;
return (
<div key={value} className="mb-4 space-y-4">
<div className="text-primary-800 flex flex-row items-center space-x-2">
<div key={value} className="space-y-6 pr-4">
<div className="text-primary-800 -mb-2 flex flex-row items-center space-x-2">
{renderIcon(value)}
<div className="w-fit text-lg font-medium">{label}</div>
</div>
<div className="w-full space-y-4 pr-4">
<div
className={clsx(
'space-y-2 rounded-md border-2 bg-white px-4 py-3 drop-shadow-md',
@ -98,11 +97,8 @@ export default function ResumeCommentsList({
</div>
)}
</div>
</div>
<div className="relative flex flex-row pr-6 pt-2">
<div className="flex-grow border-t border-gray-300" />
</div>
<hr className="border-gray-300" />
</div>
);
})}