rannes.dev/sw-jobs-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gave mobile some love
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m21s
Details

Browse Source
This commit is contained in:
christian 2024-06-10 00:50:37 +02:00
parent 4ae37ce052
commit 5ebe9bd55f
4 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/_jobcard/JobCard.tsx
View File

@ -36,7 +36,7 @@ export default async function JobCard(props: { job: JobPosting }) {
return ( return (
<Accordion type="single" collapsible> <Accordion type="single" collapsible>
<AccordionItem value="item-1"> <AccordionItem value={title}>
<AccordionTrigger> <AccordionTrigger>
<div className="flex justify-between w-full"> <div className="flex justify-between w-full">
<div className="flex flex-row items-center gap-4"> <div className="flex flex-row items-center gap-4">
@ -48,12 +48,21 @@ export default async function JobCard(props: { job: JobPosting }) {
height={100} height={100}
/> />
<div className="flex flex-col justify-start"> <div className="flex flex-col justify-start">
<h2 className="text-2xl text-left">{title}</h2> <h2 className="text-xl sm:text-2xl text-left block sm:hidden">
{title.length > 40 ? title.slice(0, 40) + "..." : title}
</h2>
<h2 className="text-2xl sm:text-2xl text-left sm:block hidden">
{title}
</h2>
<div className="text-left items-center space-x-4"> <div className="text-left items-center space-x-4">
<span className="">{company}</span> <span className="">{company}</span>
<span className="text-sm text-stone-500">{location}</span> <span className="text-xs md:text-sm text-stone-500">
<span className="text-sm text-stone-500">{type}</span> {location}
</span>
<span className="text-xs md:text-sm text-stone-500">
{type}
</span>
</div> </div>
</div> </div>
</div> </div>

2
src/app/_jobcard/JobCardIcon.tsx
View File

@ -3,7 +3,7 @@ import Image from "next/image";
export default function JobCardIcon(props: { src: string }) { export default function JobCardIcon(props: { src: string }) {
const { src } = props; const { src } = props;
return ( return (
<div className="flex justify-center items-center min-w-14"> <div className="flex justify-center items-center w-6 md:min-w-14">
<Image src={src} alt={`${src} icon`} width={50} height={50} /> <Image src={src} alt={`${src} icon`} width={50} height={50} />
</div> </div>
); );

2
src/app/_jobcard/JobCardIconContainer.tsx
View File

@ -20,7 +20,7 @@ type Skills = {
export default function JobCardIconContainer(props: { skills: Skills }) { export default function JobCardIconContainer(props: { skills: Skills }) {
const { skills } = props; const { skills } = props;
return ( return (
<div className="flex flex-row justify-end gap-2"> <div className="flex flex-col md:flex-row md:justify-end gap-2 ml-2">
{skills.react && <JobCardIcon src={react} />} {skills.react && <JobCardIcon src={react} />}
{skills.python && <JobCardIcon src={python} />} {skills.python && <JobCardIcon src={python} />}
{skills.golang && <JobCardIcon src={golang} />} {skills.golang && <JobCardIcon src={golang} />}

6
tailwind.config.ts
View File

@ -13,7 +13,7 @@ const config = {
theme: { theme: {
container: { container: {
center: true, center: true,
padding: "2rem", padding: "1rem",
screens: { screens: {
"2xl": "1400px", "2xl": "1400px",
}, },
@ -33,8 +33,8 @@ const config = {
}, },
}, },
animation: { animation: {
"accordion-down": "accordion-down 0.2s ease-out", "accordion-down": "accordion-down 0.6s ease-out",
"accordion-up": "accordion-up 0.2s ease-out", "accordion-up": "accordion-up 0.6s ease-out",
}, },
}, },
}, },