phil/plcom
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

experience-card: force image breakpoint at 2xl, im tired of this shit

Browse source
This commit is contained in:
Philippe Loctaux 2023-06-03 01:10:04 +02:00
parent 1137b74cc0
commit d259a88c02
2 changed files with 5 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/experience-card.astro
View file

@ -8,7 +8,7 @@ interface Props {
title: string; title: string;
link?: { label: string; uri: string }; link?: { label: string; uri: string };
notAvailable?: boolean; notAvailable?: boolean;
image?: { uri: string; breakpoint: string }; image?: string;
tech?: string[]; tech?: string[];
} }
const { const {
@ -28,21 +28,11 @@ const {
const logoCss = `h-16 w-16 rounded-xl mr-4 ${ const logoCss = `h-16 w-16 rounded-xl mr-4 ${
logoTransparentBackground === true ? "p-2 bg-white" : "" logoTransparentBackground === true ? "p-2 bg-white" : ""
}`; }`;
// Card behavior with and without image
const cardCss = `${
image
? `${image.breakpoint}:flex ${image.breakpoint}:flex-row-reverse items-stretch justify-between`
: ""
} w-full rounded-2xl ${backgroundColor}`;
// Image behavior
const imageCss = `flex ${image?.breakpoint}:w-1/2 grow ${image?.breakpoint}:rounded-tl-none ${image?.breakpoint}:rounded-r-2xl rounded-t-2xl object-cover`;
--- ---
<div class={cardCss}> <div class={`${image ? "2xl:flex 2xl:flex-row-reverse items-stretch justify-between" : "" } w-full rounded-2xl ${backgroundColor}`}>
<!-- Optional image on the side --> <!-- Optional image on the side -->
{image && <img loading="lazy" src={image.uri} class={imageCss} />} {image && <img loading="lazy" src={image} class="flex w-full 2xl:w-1/2 grow 2xl:rounded-tl-none 2xl:rounded-r-2xl rounded-t-2xl object-cover" />}
<!-- Main content --> <!-- Main content -->
<div class=`p-6 ${image ? "flex flex-col grow-0" : ""} justify-between h-full`> <div class=`p-6 ${image ? "flex flex-col grow-0" : ""} justify-between h-full`>

4
src/components/projects.astro
View file

@ -100,7 +100,7 @@ import ExperienceCard from "./experience-card.astro";
dates="September 2020 - January 2023" dates="September 2020 - January 2023"
title="Epitech Innovative Project" title="Epitech Innovative Project"
notAvailable={true} notAvailable={true}
image={{ uri: "/images/naviarent.jpg", breakpoint: "2xl" }} image="/images/naviarent.jpg"
tech={[ tech={[
"NodeJS", "NodeJS",
"Angular", "Angular",
@ -181,7 +181,7 @@ import ExperienceCard from "./experience-card.astro";
dates="April 2017 - January 2020" dates="April 2017 - January 2020"
title="Timelapse" title="Timelapse"
link={{ uri: "https://timelapse.canvas.place", label: "Website" }} link={{ uri: "https://timelapse.canvas.place", label: "Website" }}
image={{ uri: "/images/canvas.png", breakpoint: "md" }} image="/images/canvas.png"
tech={["FFmpeg", "Shell scripting", "nginx"]} tech={["FFmpeg", "Shell scripting", "nginx"]}
> >
<p>canvas.place is a shared place to express creativity.</p> <p>canvas.place is a shared place to express creativity.</p>