Skip to content

Commit

Permalink
added image positioning
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabros20
gabros20 committed Sep 26, 2024
1 parent 3169ccd commit 7051372
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 25 deletions.
6 changes: 4 additions & 2 deletions src/components/modules/event-card.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import React from "react";
import Image from "../imageComponent";

const EventCard = ({ title, description, date, location, url, image }) => {
const EventCard = ({ title, description, date, location, url, image, imagePosition }) => {
const truncateDescription = (text, limit) => {
if (text.length <= limit) return text;
return text.slice(0, limit).trim() + "...";
};

const position = imagePosition === "left" ? "left" : imagePosition === "right" ? "right" : "center";

return (
<article className={"event-card"}>
<Image className={"event-image"} alt={title} filename={image} />
<Image className={`event-image ${position || "center"}`} alt={title} filename={image} />
<div className={"event-content small"}>
<div>
<h3 className={"event-title small"}>{title}</h3>
Expand Down
1 change: 1 addition & 0 deletions src/components/modules/event-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const EventList = ({ eventsNumber }) => {
key={event.id}
title={event.title}
image={event.image}
imagePosition={event.imagePosition}
description={event.description}
date={event.date}
location={event.location}
Expand Down
4 changes: 3 additions & 1 deletion src/components/modules/featured-event.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,11 @@ const FeaturedEvent = () => {
return text.slice(0, limit).trim() + "...";
};

const position = featuredEvent.imagePosition === "left" ? "left" : featuredEvent.imagePosition === "right" ? "right" : "center";

return (
<article className={"featured-event-container"}>
<Image className={"event-banner"} alt={featuredEvent.title} filename={featuredEvent.image} />
<Image className={`event-banner ${position || "center"}`} alt={featuredEvent.title} filename={featuredEvent.image} />
<div className={"event-content"}>
<div className={"event-tags"}>
{featuredEvent.category.map((tag, index) => (
Expand Down
53 changes: 33 additions & 20 deletions src/datas/events/event-data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,85 +2,92 @@ export const eventData = [
{
id: 1,
image: "events/event-1.png",
title: "Celestia in Dubai",
imagePosition: "center", // left, center, right
title: "Introducing the Infinite Space Bazaar hackathon",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more.",
date: "Apr 15, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/infinite-space-bazaar/",
featured: true,
},
{
id: 2,
image: "events/placeholder-1.png",
title: "Celestia in Dubai",
imagePosition: "center", // left, center, right
title: "Introducing the Infinite Space Bazaar hackathon",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more.",
date: "Apr 22, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/infinite-space-bazaar/",
featured: false,
},
{
id: 3,
image: "events/placeholder-1.png",
title: "Celestia in Dubai",
imagePosition: "center", // left, center, right
title: "Introducing the Infinite Space Bazaar hackathon",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more.",
date: "Apr 29, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/infinite-space-bazaar/",
featured: false,
},
{
id: 4,
image: "events/placeholder-1.png",
title: "Celestia in Dubai",
imagePosition: "center", // left, center, right
title: "Introducing the Infinite Space Bazaar hackathon",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more.",
date: "May 6, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/infinite-space-bazaar/",
featured: false,
},
{
id: 5,
image: "events/placeholder-1.png",
title: "Celestia in Dubai",
imagePosition: "center", // left, center, right
title: "Introducing the Infinite Space Bazaar hackathon",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more.",
date: "May 13, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/infinite-space-bazaar/",
featured: false,
},
{
id: 6,
image: "events/placeholder-1.png",
title: "Celestia in Dubai",
imagePosition: "center", // left, center, right
title: "Introducing the Infinite Space Bazaar hackathon",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more.",
date: "May 20, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/infinite-space-bazaar/",
featured: false,
},
{
id: 7,
image: "events/placeholder-1.png",
title: "Celestia in Dubai",
imagePosition: "center", // left, center, right
title: "Introducing the Infinite Space Bazaar hackathon",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more qdwqdqwd dw qdwqdwq dwqdwqdwq dwqdwqdwq wqdwqd wqdwqdwq dqw.",
date: "May 27, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/infinite-space-bazaar/",
featured: false,
},
];
Expand All @@ -94,73 +101,79 @@ export const communityEventsData = [
{
id: 1,
image: "events/placeholder-1.png",
imagePosition: "center", // left, center, right
title: "Celestia in Dubai",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more.",
date: "Apr 15, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/celestia-in-dubai/",
featured: false,
},
{
id: 2,
image: "events/placeholder-1.png",
imagePosition: "center", // left, center, right
title: "Celestia in Dubai",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more.",
date: "Apr 22, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/celestia-in-dubai/",
featured: false,
},
{
id: 3,
image: "events/placeholder-1.png",
imagePosition: "center", // left, center, right
title: "Celestia in Dubai",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more.",
date: "Apr 29, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/celestia-in-dubai/",
featured: false,
},
{
id: 4,
image: "events/placeholder-1.png",
imagePosition: "center", // left, center, right
title: "Celestia in Dubai",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more.",
date: "May 6, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/celestia-in-dubai/",
featured: false,
},
{
id: 5,
image: "events/placeholder-1.png",
imagePosition: "center", // left, center, right
title: "Celestia in Dubai",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more.",
date: "May 13, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/celestia-in-dubai/",
featured: false,
},
{
id: 6,
image: "events/placeholder-1.png",
imagePosition: "center", // left, center, right
title: "Celestia in Dubai",
description:
"Splits is a set of simple, modular smart contracts for safe and efficient onchain payments. You can split revenue from NFT sales, recoup expenses, diversify an income stream, withhold taxes, and much more.",
date: "May 20, 2024",
location: "Dubai",
category: ["gaming", "blockchain"],
url: "#",
url: "https://blog.celestia.org/celestia-in-dubai/",
featured: false,
},
];
Expand Down
Binary file modified src/images/events/event-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 30 additions & 2 deletions src/scss/pages/page-events.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,21 @@
height: 200px;
img {
object-fit: cover;
object-position: left;
}
&.left {
img {
object-position: left;
}
}
&.center {
img {
object-position: center;
}
}
&.right {
img {
object-position: right;
}
}
@include media-breakpoint-down(md) {
height: 50vw;
Expand Down Expand Up @@ -198,7 +212,21 @@
}
img {
object-fit: cover;
object-position: left;
}
&.left {
img {
object-position: left;
}
}
&.center {
img {
object-position: center;
}
}
&.right {
img {
object-position: right;
}
}
}

Expand Down

0 comments on commit 7051372

Please sign in to comment.