Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/celestiaorg/modularsummit.dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcstein
jcstein committed Jul 20, 2023
2 parents 78410a3 + 0e4b3ba commit aac5964
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 35 deletions.
36 changes: 17 additions & 19 deletions src/components/sections/agenda.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,28 +20,26 @@ export default function Agenda() {
};

const createThemeMarkers = () => {
agendaData.themes.forEach((item, index) => {
const themeElements = document.querySelectorAll(`#${item.id}`);
const themeElementHeights = Array.from(themeElements).reduce((acc, curr) => acc + curr.offsetHeight, 0) - 76;
if (themeElements.length > 0) {
const firstElement = themeElements[0];
let beforeElement = firstElement.querySelector("#track-marker");
// Draw lines for each element
const eventItems = document.querySelectorAll("li.event-item");
eventItems.forEach((item) => {
const id = item.getAttribute("id");
const theme = agendaData.themes.find((theme) => theme.id === id);
if (theme) {
const beforeElement = document.createElement("div");
if (beforeElement) {
beforeElement.remove();
}
beforeElement = document.createElement("div");
beforeElement.style.height = `${themeElementHeights}px`;
beforeElement.style.borderColor = `${agendaData.themes[index].color}`;
beforeElement.style.borderColor = theme.color;
beforeElement.setAttribute("id", "track-marker");

beforeElement.style.height = "calc(100% + 2px)";
const trackMarkerText = document.createElement("div");
trackMarkerText.innerHTML = item.trackLabel;

trackMarkerText.classList.add("track-marker-text");
trackMarkerText.innerText = id;
beforeElement.appendChild(trackMarkerText);

firstElement.insertBefore(beforeElement, firstElement.firstChild);
item.insertBefore(beforeElement, item.firstChild);
}
console.log(`${item.id}: ${themeElementHeights}px`);
});
};

Expand Down Expand Up @@ -107,31 +105,31 @@ function EventList({ activeTab, day }) {
{activeTab === "Tab1" && (
<ul className='event-list'>
{day.stage1.map((item, index) => {
return <EventItem index={index} item={item} />;
return <EventItem index={index} item={item} label={item.renderLabel} />;
})}
</ul>
)}
{activeTab === "Tab2" && (
<ul className='event-list'>
{day.stage2.map((item, index) => {
return <EventItem key={index} item={item} />;
return <EventItem key={index} item={item} label={item.renderLabel} />;
})}
</ul>
)}
{activeTab === "Tab3" && (
<ul className='event-list'>
{day.stage3.map((item, index) => {
return <EventItem key={index} item={item} />;
return <EventItem key={index} item={item} label={item.renderLabel} />;
})}
</ul>
)}
</div>
);
}

function EventItem({ item }) {
function EventItem({ item, label }) {
return (
<li id={item.theme ? item.theme.replace(/[\s+_.]+/g, "-") : "theme-key-not-defined"} className='event-item'>
<li id={item.theme ? item.theme.replace(/[\s+_.]+/g, "-") : "theme-key-not-defined"} className={`event-item ${label === false ? "no-label" : ""}`}>
<div className='mb-4 event-title element-spacing'>{item.title}</div>

<div className='flex flex-col max-sm:space-y-3 sm:space-x-14 md:space-x-16 sm:flex-row items-star'>
Expand Down
26 changes: 24 additions & 2 deletions src/components/sections/agenda.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,13 @@
}
}

.event-list {
@media (min-width: $lg) {
margin-left: 35px;
margin-top: 32px;
}
}

.event-item {
position: relative;
margin-left: 55px;
Expand Down Expand Up @@ -87,29 +94,44 @@

#track-marker {
width: 25px;
border-width: 0px 2px 0px 0px;
border-width: 0px 3px 0px 0px;
position: absolute;
left: -55px;
top: 38px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-38px);
@media (max-width: $sm) {
left: -50px;
}
}

li:first-of-type {
#track-marker-text {
transform: translateY(0px);
}
}

.track-marker-text {
position: absolute;
color: #000;
font-size: 12px;
line-height: 1em;
font-style: normal;
font-weight: 700;
margin-right: 8px;
// position //
width: fit-content;
transform: rotate(270deg);
text-transform: uppercase;
white-space: nowrap;
margin-right: 10px;
}

.no-label {
.track-marker-text {
display: none;
}
}

.stage-stack {
Expand Down
29 changes: 17 additions & 12 deletions src/components/sections/days-agenda.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,20 @@ export default function DaysAgenda({ data, activeDay }) {
const theme = agendaData.themes.find((theme) => theme.id === id);
if (theme) {
const beforeElement = document.createElement("div");
if (beforeElement) {
beforeElement.remove();
}
beforeElement.style.borderColor = theme.color;
beforeElement.setAttribute("id", "track-marker");
beforeElement.style.height = "calc(100% + 2px)";
const trackMarkerText = document.createElement("div");

trackMarkerText.classList.add("track-marker-text");
trackMarkerText.innerText = id;
beforeElement.appendChild(trackMarkerText);
item.insertBefore(beforeElement, item.firstChild);
}
});

// get all Li elements with the same id and find the middle one append append a class to the claslist "Middle"

};

useLayoutEffect(() => {
Expand Down Expand Up @@ -82,31 +87,31 @@ function EventList({ activeTab, day }) {
{activeTab === "Tab1" && (
<ul className='event-list'>
{day.stage1.map((item, index) => {
return <EventItem key={index} item={item} />;
return <EventItem key={index} item={item} label={item.renderLabel} />;
})}
</ul>
)}
{activeTab === "Tab2" && (
<ul className='event-list'>
{day.stage2.map((item, index) => {
return <EventItem key={index} item={item} />;
return <EventItem key={index} item={item} label={item.renderLabel} />;
})}
</ul>
)}
{activeTab === "Tab3" && (
<ul className='event-list'>
{day.stage3.map((item, index) => {
return <EventItem key={index} item={item} />;
return <EventItem key={index} item={item} label={item.renderLabel} />;
})}
</ul>
)}
</div>
);
}

function EventItem({ item }) {
function EventItem({ item, label }) {
return (
<li id={item.theme ? item.theme.replace(/[\s+_.]+/g, "-") : "theme-key-not-defined"} className='event-item'>
<li id={item.theme ? item.theme.replace(/[\s+_.]+/g, "-") : "theme-key-not-defined"} className={`event-item ${label === false ? "no-label" : ""}`}>
<div className='mb-4 event-title element-spacing'>{item.title}</div>

<div className='flex flex-col max-sm:space-y-3 sm:space-x-14 md:space-x-16 sm:flex-row items-star'>
Expand Down Expand Up @@ -172,14 +177,14 @@ function TabList({ activeTab, toggleTabs, activeDay }) {
{activeDay === "Day1"
? getThemes("day1", "stage1").map((theme) => {
return (
<div className='tab-tags' style={{ backgroundColor: theme.color }}>
<div key={theme.id} className='tab-tags' style={{ backgroundColor: theme.color }}>
{theme.id}
</div>
);
})
: getThemes("day2", "stage1").map((theme) => {
return (
<div className='tab-tags' style={{ backgroundColor: theme.color }}>
<div key={theme.id} className='tab-tags' style={{ backgroundColor: theme.color }}>
{theme.id}
</div>
);
Expand All @@ -202,14 +207,14 @@ function TabList({ activeTab, toggleTabs, activeDay }) {
{activeDay === "Day1"
? getThemes("day1", "stage2").map((theme) => {
return (
<div className='tab-tags' style={{ backgroundColor: theme.color }}>
<div key={theme.id} className='tab-tags' style={{ backgroundColor: theme.color }}>
{theme.id}
</div>
);
})
: getThemes("day2", "stage2").map((theme) => {
return (
<div className='tab-tags' style={{ backgroundColor: theme.color }}>
<div key={theme.id} className='tab-tags' style={{ backgroundColor: theme.color }}>
{theme.id}
</div>
);
Expand Down
10 changes: 9 additions & 1 deletion src/components/sections/days-agenda.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
.event-list {
@media (min-width: $lg) {
margin-left: 35px;
margin-top: 32px;
}
}

Expand Down Expand Up @@ -154,7 +155,7 @@
}

li:first-of-type {
#track-marker {
#track-marker-text {
transform: translateY(0px);
}
}
Expand All @@ -166,13 +167,20 @@
line-height: 1em;
font-style: normal;
font-weight: 700;
margin-right: 8px;
// position //
width: fit-content;
transform: rotate(270deg);
text-transform: uppercase;
white-space: nowrap;
}

.no-label {
.track-marker-text {
display: none;
}
}

.stage-stack {
.stage-card {
width: 100%;
Expand Down
Loading

0 comments on commit aac5964

Please sign in to comment.